When working with Bootstrap, it follows a mobile-first approach. This means that whatever styling is defined for smaller breakpoints will automatically apply to larger breakpoints unless explicitly overridden.
There are 5 specific breakpoints in addition to the default mobile breakpoint:
| Breakpoint | Dimensions
|------------|-----------
| NONE | <576px
| sm | ≥576px
| md | ≥768px
| lg | ≥992px
| xl | ≥1200px
| xxl | ≥1400px
Resizing Div Elements
To resize div elements, you can utilize Bootstrap's responsive column classes as shown below:
<div class="row g-2">
<div class="col-12 col-md-6">...</div>
...
</div>
col-12 makes the column full width (12 out of 12) on mobile and larger screenscol-md-6 makes the column half width (6 out of 12) on medium screens and larger, overriding the col-12 ruleg-2 adds gutters to the columns for padding or you can use spacing utilities for manual spacing
The order in which the classes are written, such as col-12 col-md-6 or col-md-6 col-12, doesn't matter as Bootstrap applies styles in a mobile-first manner.
Auto-Expanding the Last Div
What if you do not know the number of divs inside a row, making it uncertain if the last div will be odd or even? How do you ensure that the last div always spans 100% width inside the container?
If working with a templating language like Django, you can implement this logic in the template. For instance:
<div class="row">
{% for col in cols %}
<div class="col-12{% if loop.last and not forloop.counter|divisibleby:2 %} col-md-6{% endif %}">
...
</div>
{% endfor %}
</div>
Alternatively, you can achieve this using pure CSS by targeting the last col if it's an odd one:
.row > .col-md-6:last-child:nth-child(odd) {
width: 100%;
}
Reordering Div Elements
For reordering div elements, utilize Bootstrap's flex order utilities:
<div class="row">
<div class="order-2 order-md-1">...</div>
<div class="order-1 order-md-2">...</div>
...
</div>
order-2 order-md-1 positions the element as 2 on mobile screens and 1 on medium screens and largerorder-1 order-md-2 positions the element as 1 on mobile screens and 2 on medium screens and larger
Keep in mind that the parent container needs to be a flex container. While a Bootstrap row is flex by default, you can explicitly add the d-flex class for non-flex containers.
Minimal Example
https://i.sstatic.net/mUgEL.png https://i.sstatic.net/jqr6A.png
.row > .col-md-6:last-child:nth-child(odd) {
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa4baa6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<body class="bg-secondary">
<div class="container pt-3">
<div class="row g-2">
<div class="col-12 col-md-6 order-2 order-md-1">
<div class="bg-light text-center p-2">DIV 1</div>
</div>
<div class="col-12 col-md-6 order-1 order-md-2">
<div class="bg-light text-center p-2">DIV 2</div>
</div>
<div class="col-12 col-md-6 order-3">
<div class="bg-light text-center p-2">DIV 3</div>
</div>
<div class="col-12 col-md-6 order-4">
<div class="bg-light text-center p-2">DIV 4</div>
</div>
<div class="col-12 col-md-6 order-5">
<div class="bg-light text-center p-2">DIV 5</div>
</div>
</div>
</div>
</body>