Responsive DIVs placement with Bootstrap

Question

I need to place some DIVs inside their parent container, no matter if it is the body, table's cell or another div, with Bootstrap 5, like shown on the attached illustration:

In case of even number of DIVs they should take 50% of the available width placed by 2 at a single line. Or, in case there is odd number of DIVs, the last one should take 100% of the available width while all previous still take 50% of the available width and are placed by 2 at a single line.

Preferably with possibility to change the DIVs order (like on the Mobile View example).

There is no problem to make this with the UIKit using some simple code like


    DIV 1 takes 50% of available width
    DIV 2 takes 50% of available width
    DIV 3 takes 100% of available width

But whatever I've searched for with Bootstrap's documentation (as well as Stack Overflow) I still can't find the solution.

user_13138364 · Answer

Bootstrap is mobile-first, meaning whatever we define at smaller breakpoints will cascade up to larger breakpoints until overridden.

There are 5 explicit breakpoints in addition to the implicit (default) mobile breakpoint:

| Breakpoint | Dimensions
|------------|----------- 
| NONE       | <576px
| sm         | ≥576px
| md         | ≥768px
| lg         | ≥992px
| xl         | ≥1200px
| xxl        | ≥1400px

To resize the `div`s

Use columns with the responsive breakpoint syntax:


  ...
  ...

col-12 specifies full width (12 of 12) at mobile and above
col-md-6 specifies half width (6 of 12) at md and above (i.e., starting at md, this rule overrides the col-12 rule)
g-2 specifies gutters to auto-pad the columns (or use manual spacing utilities)

Note that the written order (col-12 col-md-6 vs col-md-6 col-12) is irrelevant, as with any css classes. Bootstrap applies the styles in mobile-first order.

To auto-expand the last `div`

But what if I don't know how many divs are going to be inside the row and therefore do not know if their number would be an odd or an even? Don't know which exact div is going to be the last one but still need the last div inside the container to be 100% width?

If you are using a templating language, I suggest putting this logic in the template. That's a bit out of scope for this question, but for example with django, a minimal template might look like:


  {% for col in cols %}
  
    ...
  
  {% endfor %}

Or to handle it with pure css, you could add a width rule targeting the last col if odd:

.row > .col-md-6:last-child:nth-child(odd) {
  width: 100%;
}

To reorder the `div`s

Use the responsive flex order utilities:


  ...
  ...
  ...

order-2 order-md-1 specifies position 2 at mobile and above, position 1 at md and above
order-1 order-md-2 specifies position 1 at mobile and above, position 2 at md and above

Note that the parent container needs to be a flex container. A bootstrap row is flex by default, but for non-flex containers, add the d-flex class explicitly.

Minimal example

.row > .col-md-6:last-child:nth-child(odd) {
  width: 100%;
}

Responsive DIVs placement with Bootstrap

1 Answers

To resize the divs

To auto-expand the last div

To reorder the divs

Minimal example

To resize the `div`s

To auto-expand the last `div`

To reorder the `div`s