asymmetrical bootstrap grid columns

I am working with the Bootstrap 4 grid system and have a layout with 3 columns. I want the first and third columns to be col-8, and the second column to be col-4, acting as a sidebar that falls between the first and third columns on small screens. However, the second column has dynamic height, causing the first column to inherit the same height and leaving a large gap between the first and third columns. I would like the third column to align under the text of the first column.

Here is an image illustrating what I'm trying to achieve:

<div class="container">
    <div class="row ">
      <div class="col-sm-8 ">
        <div>One of three columns</div>
        <div>One of three columns</div>
      </div>
      <div class="col-sm-4 ">
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
      </div>
      <div class="col-sm-8">
        <div>Three of three columns</div>
        <div>Three of three columns</div>
        <div>Three of three columns</div>
      </div>
    </div>
  </div>
csstwitter-bootstrapbootstrap-4flexboxbootstrap-5

Answer №1

Latest Update on Bootstrap 5 (2021)

With the introduction of Bootstrap 5, flexbox is now used for grid rows and columns. This means that utilizing d-block responsively will continue to function, although float-left has been replaced with float-start.

Original Answer Regarding Bootstrap 4

The issue of empty vertical space between columns in Bootstrap 4 has been previously addressed here.

In Bootstrap 4, all columns are equal in height due to flexbox. While nesting columns can help workaround this, it may disrupt the desired column order. To counter this, using floats like demonstrated below is an effective solution:

<div class="container">
    <div class="row d-sm-block">
      <div class="col-sm-8 float-left">
        <div>One of three columns</div>
        <div>One of three columns</div>
      </div>
      <div class="col-sm-4 float-right">
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
      </div>
      <div class="col-sm-8 float-left">
        <div>Three of three columns</div>
        <div>Three of three columns</div>
        <div>Three of three columns</div>
      </div>
    </div>
</div>

Demo: (added borders for clarity)

To achieve this layout, utilize d-sm-block within the row class to switch the row to display:block instead of display:flex on screens sizes sm and larger. This adjustment allows proper functioning of float-* on columns with the second column aligning to the right.

Answer №2

If you're okay with duplicating your sidebar content, you can display it between column 1 and 3 on small screens, while hiding an additional copy to the right. Conversely, on larger screens, you can hide the content between column 1 and 3 and show the sidebar on the right.

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-8">
        <section class="mb-3">
            column 1
        </section>
        <section class="mb-3 d-sm-none">
            duplicate of column 2
        </section>
        <section class="mb-3">
            column 3
        </section>
    </div>
    <div class="col-sm-4">
        <section class="mb-3 d-none d-sm-block">
            column 2
        </section>
    </div>
  </div>
</div>

Result

On small screens:

https://i.sstatic.net/z3xG2.png

On larger screens:

https://i.sstatic.net/80se4.png

fiddle: http://jsfiddle.net/aq9Laaew/243819/

Answer №3

You have the ability to nest columns within other columns

Give this a shot

<div class="container border border-primary">
<div class="row border border-primary">
    <div class="border border-primary col-lg-8 col-md-12 col-sm-12" style="height:200px">
        <div class="row border border-secondary">
            <div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
                <!--content for 1-->
            </div>
            <div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
                <!--content for 2-->
            </div>
        </div>
    </div>
    <div class="border border-primary col-lg-4 col-md-6 col-sm-6" style="height:200px">
        <!-content for 3-->
    </div>
</div>

Answer №4

To achieve this, I had to make some changes by removing the row class and incorporating floats as demonstrated in the example below.

<div class="container">
    <div class="">
        <div class="col-md-8 grey  float-left">
            <div>main content</div>
            <div>main content</div>
        </div>
    </div>
    <div class="col-md-4 blue float-right ">
        <div>side content</div>
        <div>side content</div>
        <div>side content</div>
        <div>side content</div>
        <div>side content</div>
    </div>

    <div class="col-md-8 pink float-left">
        <div>main2 content</div>
        <div>main2 content</div>
        <div>main2 content</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

The synchronization between the First Column Scroll and Table Filter Function is out of alignment

I haven't coded for a while and my knowledge of JavaScript is still in its early stages, so please excuse me if this question seems a bit naive. Essentially, I've created code that filters an HTML table based on the items in the first column. Th ...

javascripthtmljquerycss

Learn the steps to Toggle Javascript on window resize

Is there a way to toggle Javascript on and off when the window is resized? Currently, resizing the window causes the navigation bar to stick and remain visible above the content. <script> if ( $(window).width() <= 1200 ) { }else{ $('nav& ...

javascriptjqueryhtmlcss

Setting up multiple classes in my unique situation

Setting up an ng-class in my app My current setup looks like this: $scope.myClass = 'class-A'; Performing a task here... $scope.myClass ='class-B'; Performing another task here $scope.myClass ='class-C'; html <div n ...

htmlcssangularjsng-class

How to vertically center content within a container-fluid in Bootstrap 4

I'm currently working on vertically aligning the two rows within the container-fluid. They are already aligned horizontally, but I want to center them on the screen. <!DOCTYPE html> <html lang="en"> <head> <! ...

cssbootstrap-4

OpenWeatherMap API call failing - not visible in Network tab of Console

I am facing an issue with my API call while trying to retrieve temperature data for a specific city. I am unsure if the problem lies with my API key or the code itself. Can you please provide guidance on how I can resolve this issue? Upon entering the city ...

htmlcssreactjsopenweathermap

Choosing the initial offspring of an element that do not share a common parent

My question might not be perfectly phrased, for which I apologize. Is there a CSS method to select only the first child of an element without affecting others that are not grouped under the same parent? For instance: <div class="parent"> <div ...

csscss-selectors

Deployed on Azure: Correcting the Mime Type issue causing a blank css file to be sent to the server

While everything works perfectly fine locally, an issue arises when the application is deployed to Azure. The problem lies in loading the CSS file and an error message stating "Resource interpreted as Stylesheet but transferred with MIME type text/plain" i ...

cssasp.net-corestatic-files

The border class in Bootstrap 4 seems to be malfunctioning when it comes to the top

I'm struggling to add a border to a div using Bootstrap 4. When I try using only the border property, it looks strange, and when I use other properties, no border appears. Here is the code snippet: I even tried with the beta 2 version. If there is s ...

htmlcssbootstrap-4

Is it possible to customize the appearance of individual sections in an HTML5 range slider by changing their

I'm looking to customize a stepped HTML5 range slider by changing the background color for each step, similar to the image provided. Is this customization achievable? ...

csshtmlsliderrange

Role in HTML/CSS

I'm currently facing an issue with getting my footer to stick to the bottom of the page. In Internet Explorer, it appears centered under the rest of the content instead of at the very bottom. When I try to view it in Chrome, it ends up positioned next ...

htmlcssbrowserpositioning

Move the modal dialog so it appears closer to the top of the page

I am facing a challenge with my jQuery modal dialog. While it is loading properly, I am restricted to using an older version of jQuery (1.12.4) and cannot upgrade it. My goal is to center the modal close to the top of the page, similar to how it is positio ...

javascripthtmljquerycss

Struggling to perfectly align text in the middle of a div container that also has

Seeking help with aligning text vertically within a div that also contains an image. Previous attempts with CSS properties like vertical-align: center; and line-height:90px have proven ineffective. Removing the image allows for the successful use of line- ...

htmlcsscentering

Using CSS to disable an image map in conjunction with dynamically adjusting CSS styling

On the desktop version of the website, there is an imagemap implemented. However, when the site transitions into tablet or mobile view, the imagemap should be disabled to allow for a simpler navigation area to be displayed. I attempted to use the following ...

htmlcssdynamicimagemap

Bootstrap 4: Ensuring consistent height for all rows

I'm having trouble creating a preloader with rows. I want to divide my grey rectangle into 3 rows, each with 33% height. Here's what I need: In the first row, a SVG logo In the second row, a loader In the third row, some text Here's the ...

cssbootstrap-4

CSS file selector for Reactstrap component

What is my goal? I noticed a gap between my jumbotron and footer that I want to remove. Initially, I was able to achieve this by setting the margin-bottom to 0px, but it required passing an ID to the Jumbotron element. Now, my objective is to accomplish t ...

cssreactstrap

Blurring isotopes within Google Chrome

While working with isotope in Google Chrome, I noticed that all items have the following CSS code: -webkit-transform: translate3d(properties); In Chrome, every even element [2,4,6,8,10,12,14...] appears blurred, whereas in Firefox everything looks normal ...

javascriptjquerycssgoogle-chromejquery-isotope

Is it possible to run quirks mode in one frame while running standards mode in another?

Back in the IE6 days, I developed an old application that relies on frames instead of iframes and runs in quirks mode. Now, I'm wondering if it's possible to have one frame remain in quirks mode while another operates in standards mode when using ...

htmlcssquirks-mode

Bootstrap pop-up for Django's login form

Utilizing django 1.5 along with Twitter Bootstrap. I have successfully implemented a popup dropdown login form using Bootstrap on every page. The authentication process works as expected. However, I am facing an issue where I need to display an error mess ...

pythonajaxdjangotwitter-bootstrapdjango-forms

How can I change a textarea to uppercase?

I'm looking to create a textarea that automatically types in all capital letters, regardless of the user's input or whether they are holding down the shift key. I want it to accept any input and convert it to uppercase on the fly without showing ...

javascripthtmlcss

Can the functions passed into Material-UI withStyles() be relocated within the component?

Attempting to break down the components of my dashboard into smaller parts has proven challenging due to their dependence on drawerWidth. Initially, I considered moving drawerWidth into the state so it can be passed down to each component. However, I encou ...

cssreactjsmaterial-uinext.js