What is the best way to incorporate this design utilizing the Bootstrap Grid system?

I am trying to create a grid structure using the code below:

<div class="col-lg-8">
    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                 ....
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                 ....
            </div>
        </div>
    </div>

    <div class="col-lg-6"><div class="panel panel-primary">
         <!-- Default panel contents -->
        <div class="panel-heading">
                ....
        </div>

        <div class="panel-body">
             ....
        </div>
    </div>
    </div>

    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                 ....
            </div>
        </div>
    </div>
</div>

<div class="col-lg-4">
    <div class="panel panel-primary">

         <!-- Default panel contents -->
        <div class="panel-heading">
             ....
        </div>

        <div class="panel-body">
             ....
        </div>
    </div>
</div>

Even though I've managed to achieve the grid structure, all panels/boxes are not aligned properly. How can I ensure that the bottom of all divs and panels are aligned?

htmlcsstwitter-bootstrap

Answer №1

Consider incorporating Row divs to outline the structure of the rows

<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
....
</div>
<div class="panel-body">
....
</div>
</div>
</div>

<div class="col-lg-6">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
....
</div>
<div class="panel-body">
....
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
....
</div>
<div class="panel-body">
....
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
....
</div>
<div class="panel-body">
....
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
....
</div>
<div class="panel-body">
....
</div>
</div>
</div>
</div>

Answer №2

my custom CSS property is implemented in this example Check out the design

Below is the code snippet: 

<style>
.pad1{
    margin: 2px 2px 2px 2px;
    border: 1px solid #000;
    min-height: 100px;
}
.pad2{
    margin: 2px 2px 2px -130%;
    border: 1px solid #000;
    min-height: 204px;
}
</style>

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

Tips for concealing a checkbox within the JS Tree Library

Is there a way to hide certain checkboxes generated by the JSTree library? Here is an example of the HTML structure: <div id="tree"> <ul> <li id="folder_1">Folder 1 <ul> <li id="child_1"& ...

jquerycssjstree

Aligning a grid container in the middle

#panelb { background: lightblue; display: grid; grid-template-columns: repeat(auto-fit, 300px); } .card { background: gold; } .imgcard { display: block; width: 100%; margin: 0 auto; } <div id='panelb'> <div class=' ...

htmlcsscss-grid

How can you tell if a contenteditable div is currently in focus?

Essentially, my setup consists of: HTML: <div class="div1"> <div class="as-text-box" contenteditable="true"></div> </div> CSS: .div1{ position:absolute; height:50px; width:200px; background:white; border:1px solid #c ...

javascriptjqueryhtmlcss

Using Goquery to retrieve text content from one HTML tag and append it to a different tag

Apologies for the vague title, let me clarify using an example. This question is a follow-up to a previous one that partially resolved my issue. I've included most of the background information from the previous question here. I'm relatively new ...

htmlgoconcatenation

Scraping Yahoo Finance Headlines Using the R Programming Language

Seeking assistance with using R to download Yahoo Finance headlines HTML code, select "headlines," and collect them in Excel. Struggling to identify HTML nodes for headlines after downloading the source file to R. To illustrate the issue: source <- "h ...

htmlrwebweb-scraping

When using Material UI TextField with input type "date", the event.target.value does not seem to be accessible

I am currently working with Material UI and React Grid from DevExtreme to build a table that includes an input field of type date. However, when I attempt to enter the date, it does not register the change in value until I reach the year field, at which po ...

javascripthtmlreactjsmaterial-ui

What is the process for inserting images into SQL Server using PHP?

I'm currently working on a form that allows users to upload multiple images. Despite the code working and successfully adding the images to the "images-design" folder, I am facing an issue where the names of the pictures are not being added to the da ...

phphtmlsql-serverdatabasefile-upload

Sending Data to a PHP Script

I attempted to use the code below to send values to another PHP page but I am not receiving any output. File: Send.html <form id="form1" action="get.php" method="get"> <input name="search_name" type="text" id="search_name" size="20.5" height="45 ...

phphtmlformsget

What is the process for modifying the headers of a post request in Express when

I have a Node/Express application and I'm looking to incorporate an image upload feature into an order form. While I can successfully use the action link in the HTML form to perform a POST request, I also want my JavaScript file associated with this ...

javascripthtmlexpressmulter

Tips on placing a white background behind fa-3x (Font-awesome) icons

I am facing challenges while trying to customize the background behind my font-awesome icons. My goal is to create a white background that does not extend beyond the actual icon itself. Currently, the result looks like the image below: https://i.sstatic. ...

css

Problem with word-spacing in Safari versions 6.1 and 7.0 when using text-align:center

When I try to center align text in Safari 6.1/7.0 and add word-spacing, the text is centered as if the space between words is not included in the width calculation. For example, consider this CSS: div { width:300px; border: 1px solid #CCC; } h1 { ...

csssafariwebkitosx-mavericksword-spacing

The 'Bfrip' button is missing from the DOM

Having some issues with displaying table content using DataTables. Everything seems to be working smoothly except for the Buttons, which are not appearing as expected. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.1 ...

javascriptphpjquerycssdatatables

What steps do I need to take to activate this JQuery plugin successfully?

I stumbled upon this amazing silky smooth marquee jQuery plugin online @: Smooth marquee After downloading the latest JQuery and the JQuery marquee plugin as directed on the site above, I am still unable to make it work like they showcased in their demo: ...

jqueryhtml

Fill a grid child with an excessive amount of content without specifying a fixed height

Check out this JS Fiddle example .grid { height:100%; display:grid; grid-template-rows:auto 1fr; background-color:yellow; } .lots-of-content-div { height:100%; background-color:orange; overflow-y:auto; } <div class="grid"> <p&g ...

javascripthtmljquerycss

Middle-Click JavaScript Action

On the website I'm currently working on, there is a button that uses a sprite sheet animation and therefore needs to be set as a background image. I want the button to have a slight delay when clicked, so the animation can play before redirecting to a ...

javascriptjqueryhtmlhrefsprite-sheet

Tips for setting a specific height for an HTML table

For some reason, I can't seem to control the height of this table. I've set it to a maximum of 20px but all the rows are still showing. Here is the CSS: table { border:1px solid black; overflow:hidden; height:20px; max-height:20 ...

htmlcss

Automatically adjust the size of an <object> element based on the document

I'm struggling with embedding a Word document saved as an HTML file. No matter what I try, I can't seem to get it to resize properly to fit the text. I want the height of the embedding to be 100% so that it covers the page completely without cutt ...

htmlcss

What is the most effective way to create a live preview using AngularJS and CSS?

Is there a way to dynamically change the background color of the body based on the hexadecimal value entered in a textfield, without using jQuery? I want the change to happen live as the user types. The current code works but it doesn't feel right. I ...

javascriptjqueryhtmlcssangularjs

What steps can be taken to stop images from overflowing a flex-grow-1 item?

https://i.sstatic.net/1Qgec.pngHello, I'm facing an issue with my image. I am dealing with 3 sections: Main Content Image and other components (main section) Button Currently, I need to ensure that the image height is set to a maximum of 100% of the ...

htmlcssbootstrap-4

Embedding CSS stylesheets in a Django template

I'm currently working on a large Django website and in the process of adding the HTML templates. Here is the file tree for the main part: C:. +---forums | | admin.py etc | | | +---migrations | | | ... | | | +---templa ...

pythonhtmlcssdjangodjango-templates