`Arranging Widget Boxes in a Vertical Layout`

I am currently displaying each record with two boxes for Afternoon and Night horizontally:

https://i.stack.imgur.com/JMKug.png

This is the code structure I am using to achieve this layout:

<div id="record_box">
    <div class="row" style="padding-left: 10px; padding-right: 10px;">
        <div class="col-lg-6">
            <div class="widget style1 yellow-bg">
                <div class="row">
                    <div class="col-4">
                        <i class="fa fa-sun-o fa-4x"></i>
                    </div>
                    <div class="col-8 text-right">
                        <span> Afternoon Total Bets </span>
                        <h2 class="font-bold" id="afternoon"></h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="widget style1 lazur-bg">
                <div class="row">
                    <div class="col-4">
                        <i class="fa fa-moon-o fa-4x"></i>
                    </div>
                    <div class="col-8 text-right">
                        <span> Night Total Bets </span>
                        <h2 class="font-bold" id="night"></h2>
                    </div>
                </div>
            </div>
        </div>
    </div;

    ...

If I want to display each record vertically in a grid, where each block would be set as col-3, keeping maximum records fixed at 4. It should look like below:

https://i.stack.imgur.com/jhP6U.jpg

htmlcsstwitter-bootstrapinspinia

Answer №1

I have provided the basic structure for you, now feel free to make any necessary changes.

Customize with CSS:

.panel-box {
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
}

.panel-box .panel-heading {
  padding: 20px 10px;
  border: 1px solid rgba(86,61,124,.2);
}
.panel-box .panel-heading .fa {
  margin-top: 10px;
  font-size: 58px;
}
.panel-box .list-group-item {
  color: #777777;
  border-bottom: 1px solid rgba(250, 250, 250, 0.5);
}

.panel-box .panel-body {
  font-size: 20px;
  color: #777777;
  padding: 20px;
  margin: 0px;
  border: 1px solid rgba(86,61,124,.2);
}

Implement in HTML:

<div class="container">
    <div class="row">
      <div class="col-md-3 text-center">
          <div class="panel panel-box">
            <div class="panel-heading">
              <i class="fa fa-sun-o fa-4x"></i>
            </div>
            <div class="panel-body text-center">
              <span> Afternoon Total Bets </span>
              <h2 class="font-bold" id="afternoon"></h2>
            </div>
          </div>

          <div class="panel panel-box">
            <div class="panel-heading">
              <i class="fa fa-moon-o fa-4x"></i>
            </div>
            <div class="panel-body text-center">
              <span> Night Total Bets </span>
              <h2 class="font-bold" id="night"></h2>
            </div>
          </div>
      </div>
      <!-- Repeat div structure for more panels -->
    </div>
</div>

The output will look similar to the image here: https://i.stack.imgur.com/Mx2AI.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Oops! We ran into a small hiccup: [$injector:modulerr]

I am facing an issue with an angular js error angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139) ...

javascripthtmlangularjswordpress

Styling Dynamic HTML Content in Angular: Tips and Tricks

After running this line of code, I have a generated element sub with a property of [sub]. <li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name ...

htmlcssangular

Change the color of the text to be the opposite of the background

I'm facing a challenge while creating a website for my friend. The background of the site is a moving image, and I want the font color of the main title to be the opposite of it on each frame. While I know this may require CSS, I am unsure of how to ...

htmlcss

Automatically Dismissing a Bootstrap Alert After a Set Number of Seconds

Having some trouble closing a Bootstrap alert automatically on my new site built using the Bootstrap Framework. The issue arises when trying to close the alert after a certain amount of time. On the main page of the site, there is a modal login form. When ...

javascriptphpjqueryhtmltwitter-bootstrap

How to use jQuery to select an element by using 'this' on a button

I have a total of 5 divs, each containing 5 different texts. <div class="text"> <%= theComment.text %> </div> I am working with node.js, MongoDB, and Mongoose. In addition to the divs, I also have a button labeled EDIT with a cl ...

javascriptjqueryhtmlnode.jsmongodb

Within jQuery lies the power to perform multiplication operations effortlessly

I'd like to accomplish this using jQuery: var menuItems = document.getElementsByTagName("li"); for (var k = 0; k < menuItems.length; k++) { if (menuItems[k].className == "menu") { var child = menuItems[k].firstChild; if ...

javascriptjqueryhtml

Magnific Popup displaying only the initial item

As someone new to using jQuery and Magnific Popup, I am working on a grid of images. When an image is clicked, I want Magnific Popup to display a specific div containing information relevant to that particular image. <div class="grid"> <div c ...

javascriptjqueryhtmlmagnific-popup

Is your margin not functioning correctly? Is padding taking on the role of margin?

One issue I'm encountering is that the margin isn't behaving as expected in this example. The padding seems to be working like margin should. Why is that? Print Screen: https://i.stack.imgur.com/N1ojF.png Why is it that the margin in the h3 ta ...

htmlcssmarginpadding

Having Trouble with the Spacing Between Navbar and Page Content in Bootstrap?

Let's tackle the issue at hand: Here is the code snippet. A lot of it has been borrowed from examples and tutorials. <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <!-- Brand a ...

htmlcsstwitter-bootstrap

`Loading CSS files in Node.js with Express``

My CSS isn't loading properly when I run my HTML file. Even though the HTML is correctly linked to the CSS, it seems like express and node.js are not recognizing it. I find it confusing to understand the articles, tutorials, and stack overflow questio ...

javascripthtmlcssnode.jsexpress

Incorporating a classList.toggle into a snippet of code

button, p, h1, h2, h3, h4, h5, a{ /* Define specific elements to use "fantasy" font */ font-family: Tahoma; } #main_body{ margin: 0px auto; background-color: #dedede; } #top_body{ /* Remove margin for simplicity */ } #t ...

javascripthtmlcss

Using Jquery for conditional statements: if versus else

$("#bottomWatch").click(function(){ var doops = $(".videoMove").display; if (doops == "none") { $("#video").css("left","15%", "display: block"); } else { $(".videoMove").cs ...

jquerycssif-statement

Superceding Meta Character Encoding Statements

Have you ever wondered what happens when two older-style character encoding declarations are used in a webpage? Will the first declaration override the second, or vice versa? Or will they both be ignored and excluded from the encoding algorithm? For Ex ...

htmlencodingcharacter-encodingmeta-tagsmeta

Developing tabbed sections in XSLT

Utilizing Angular JS within XSLT, I am aiming to develop a tab-based user interface using XML data. The requirement is to generate multiple links and corresponding div elements based on the number of nodes in the XML. To manage the display of these div ele ...

xmlangularjshtmlxslt

Issue with React Ref: Invariant Violation when trying to addComponentAsRefTo

I'm encountering an issue while attempting to add a ref to a React component. The error message I'm seeing is as follows: invariant.js:39Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding ...

javascripthtmlreactjsnpm

problem with creating a django template script

Hello, I am currently working on a code that is responsible for executing various functions within the template. I have utilized scripts to verify these functions using if-else statements and for loops. However, I am encountering some errors during this pr ...

javascripthtmljquerycssdjango

The appearance of Recaptcha buttons is unattractive and seemingly impossible to

Let me start by saying that I have already looked into the issue of "Recaptcha is broken" where adjusting the line-height was suggested as a solution. Unfortunately, that did not work for me. After implementing Google's impressive Recaptcha on my web ...

javascripthtmlcssrecaptcha

How can I disable the background color in Chrome autocomplete? Is there a way to make the background

There's a form on my website where the autocomplete feature shows a blue background color. The form itself has a semi-transparent white background. I managed to change the autofill color to white using this CSS property: -webkit-box-shadow: 0 ...

htmlcssgoogle-chromeautofill

Tips for aligning text and an image next to each other within a table column using HTML

I have a table where I am displaying an image and text in separate columns, with the image above the text. However, I want to showcase them side by side and ensure that the table fits perfectly on the screen without any scroll bars. Here is my HTML code s ...

htmlcss

jQuery's slide toggle function is limited to toggling the visibility of just one section at

Welcome to my first post! As a newbie in web development, I have just started my first project. While I feel comfortable with HTML and CSS, jQuery is proving to be a bit challenging for me. In the head section of my intranet page, I have the following cod ...

jqueryhtmlcssslidetoggle