Utilizing Bootstrap 5: Breaking a Page into Two Separate Vertical Sections

I am looking to design a unique grid system that divides the page into either 2 columns or 2 rows that are completely separate from each other. This means that the content on one side of the page does not expand to match the height of the content on the other side.

Although I can achieve this using the following code snippet...

However, currently, the columns automatically adjust their height to be equal to the tallest column in their row.

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      Row 1 Col 1
    </div>
    <div class="col-lg-6">
      Row 1 Col 2
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      Row 2 Col 1
    </div>
    <div class="col-lg-6">
      Row 2 Col 2
    </div>
  </div>
</div>

I am seeking a layout similar to this...

I have attempted to use two "col-6" columns, but all my attempts have resulted in either stacked columns or columns adjusting their heights to align with neighboring columns.

I also experimented with restricting the width of two columns and two rows to 50%, however, this caused the rows to stack or the columns to adjust their height accordingly.

My goal is to create a webpage where I can display different statistical tables on both sides – without them having equal heights or affecting the opposite side's height.

htmlcsslayoutgridbootstrap-5

Answer №1

It seems like you attempted using col-6 * 2, but that may not be the optimal solution. Consider trying something different like this:

<div class='row'>
    <div class='col-6'>
        <div class='row'>
            <div class='col-12'>A</div>
            <div class='col-12'>B</div>
            <div class='col-12'>C</div>
        </div>
    </div>
    <div class='col-6'>
        <div class='row'>
            <div class='col-12'>D</div>
        </div>
    </div>
</div>

With this setup, the screen will consistently display 2 half-width columns, with each internal column taking up the full width of its parent col (i.e., 50% of the screen). The columns with A, B, and C will maintain their individual heights without being affected by other col. The same applies to D.

Answer №2

Siddharth Bhansali provided a solution.

Added some custom styling to demonstrate the grid layout.

<div class='row' style="background-color: #009900;  padding: 5px;">
    <div class='col-lg-6' style="background-color: #990000;">
        <div class='row' style="background-color: #000099;  padding: 5px;">
            <div class='col-12'style="background-color: #FFFFFF;  padding: 5px;">A</div>
        </div>
        <div class='row' style="background-color: #000099;  padding: 5px;">
            <div class='col-12'style="background-color: #FFFFFF;  padding: 5px;">B</div>
        </div>
        <div class='row' style="background-color: #000099;  padding: 5px;">
            <div class='col-12'style="background-color: #FFFFFF;  padding: 5px;">C</div>
        </div>
    </div>
    <div class='col-lg-6' style="background-color: #990000;">
        <div class='row' style="background-color: #000099;  padding: 5px;">
            <div class='col-12' style="background-color: #FFFFFF;  padding: 5px;">D</div>
        </div>
    </div>
</div>

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

Struggling to position a div below another div within a flex box layout

https://i.sstatic.net/8vZSW.jpg When trying to make the Information & advice header appear above the other div elements, I encountered an issue with flexbox. Despite setting the container div to have a flex direction of column, the header div continue ...

htmlcssangularflexbox

Can we dynamically adjust font size based on the width of a div using CSS?

My div is set to 70% width and I have a specific goal in mind: To fill that div with text To adjust the font size so that it takes up the entire width of the div https://i.stack.imgur.com/goVuj.png Would it be possible to achieve this using only CSS? B ...

htmlcssfontsresponsive-designfont-size

Crafting an iframe that dynamically adjusts with Tailwind CSS

I'm having trouble ensuring that an iframe fits properly within a div while using tailwind CSS. I'm struggling to make the iframe responsive, no matter what class I try. Can anyone suggest a class that would help me achieve responsiveness for an ...

htmlcssiframe

Unusual conduct exhibited by jQuery's css() function for setting the width

My goal is to retrieve the width of the initial .imagen element and apply it to the img within .imagen. HTML: <div class="imagen"> <div class="normal"> <img> </div> <div class="hover"> <img> ...

jqueryhtmlcss

css failing to load properly following javascript redirection

Upon clicking the button labeled id=cancel, the user will be directed to index.php. $('#cancel').click(function() { if(changes > 0){ $('#dialog-confirm').dialog('open'); }else{ window.location.href = ". ...

javascriptjqueryhtmlcssdom

Strange image movement occurs when utilizing jQuery slideDown and slideUp

My HTML structure is as follows: <div class ='profileName'> <hr> <span class='name'>Content</span> </div> <div class ='profile'> <div class='floatRightImg padded'> < ...

jqueryhtml

The success notification transforms into a cancellation alert once the file has been successfully uploaded

I'm struggling to show the correct message after a file is successfully uploaded. Currently, when a file is successfully uploaded, the success message briefly displays but then quickly changes to the cancel message. I want the success message to rema ...

phpjqueryhtml

The dropdown menu displaces nearby content

Visit this website for more information To access the blog section, simply click on "BLOG" in the top menu. Once there, look to the right side under the circle logo and select "Dísznövények" from the dropdown menu. Be cautious of long content strings b ...

htmlcss

Content creator: Enhancing HTML search functionality using parameters

Hey there, I'm facing an issue. I created a template on my Blogger site and I need to search for text with a specific label using this URL: www.my_blog.blogspot.com/search?q=label:Printers+SearchText This is the code I have: <form action=&ap ...

htmlblogger

Update the display of the mouse pointer

I use CSS to set a custom cursor image: #scroll_up{ display: block; position: absolute; width: 960px; height: 300px; cursor: url(../imgs/cursor_up.png), auto; } The above style is assigned to a div element so that the cursor appea ...

cssattributescursor

How come the link function of my directive isn't being triggered?

I'm encountering a strange issue with this directive: hpDsat.directive('ngElementReady', [function() { return { restrict: "A", link: function($scope, $element, $attributes) { // put watche ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Ensuring all Bootstrap columns have equal height to match the tallest one

I have several .col-md-2 elements on my Bootstrap website, each containing an image of varying height. I am looking to ensure that all the columns have the same height so that I can align the images horizontally. Below is the HTML code: <div class="r ...

htmlcsstwitter-bootstrap

What is the best way to incorporate Blade code into a React component within a Blade view file?

Recently, I've been working on a Laravel view named homepage.blade.php, which includes the following code: <body> <div id=root></div> <script src="./js/app.js"></script> </body> In the app.js file: ...

phphtmlreactjslaravellaravel-blade

`Enter` within a container

Is there a way to use a controller in order to achieve printing test1 test2 within a <div> element... Currently, the only code I have is a simple Return "test1" & vbNewLine & "test2" However, this code displays the words on a single line ...

htmlvb.netmodel-view-controllernewline

I need to mass upload a collection of resumes stored in a zip file, then extract and display the content of each resume using a combination of HTML

I recently used a service to extract and retrieve the contents of a zip file. I am trying to read the content of the files and integrate them into the scope of my Angular project. Any suggestions would be greatly appreciated. Below is an outline of my func ...

javascriptjqueryangularjsjsonhtml

Visualization of XML Datamarkup

I am facing an issue with a function that generates XML from a source. Everything works perfectly except for when certain fields are too long, causing the table to stretch and mess up the website formatting. Is there a way to automatically insert line brea ...

phphtmlxml

What is the best way to horizontally align three animated progress bars alongside images?

Check out this jsfiddle that shows a vertical alignment of the progress bars. How can I modify it to align them horizontally and centered? https://jsfiddle.net/bLe0jLar/ .wrapper { width: 100px; height: 100px; } .wrapper > #bar, #bar2, #bar3 { ...

javascripthtmlcssflexbox

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I stumbled upon a seemingly peculiar issue with my script in jsfiddle: https://jsfiddle.net/oxw4e5yh/ Interestingly, the same script does not seem to work when embedded in an HTML document: <!DOCTYPE html> <html lang="en"> <head> & ...

javascriptjqueryhtmlcss

Ways to swap out unique symbols for HTML elements

I'm currently facing a challenge where I need to locate all strings between two specific characters and then replace those characters with HTML tags. For example, $str = "dog *cat* ping goat *pizza* cow rabbit*"; I would like a function tha ...

phphtml

Tips for showcasing heading and paragraph elements side by side in css?

I have a block of HTML code that includes a heading and two paragraphs: <div class="inter"> <h4>Note</h4> <p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and foll ...

htmlcss