What do they look like?
This is the first column
Set to a 50% width, this column is home to a little bit of text.
Followed by another 50% column on the right with an image
How do I use them?
First you need to open up a container to put your individual columns in, using the container class on a section, div or similar tag, like below:
<div class="container">
Then you add your individual columns inside this. Whatever columns you put there must add up to 100%:
<section class="container">
<div class="row">
<div class="col-4">Content takes 4 columns out of the 12</div>
<div class="col-8">Content takes 8 columns out of the 12</div>
</div>
</section>
In the above example, we have col-4 and col-8.
<section class="container">
<div class="row">
<div class="col-2">Content takes 2 columns out of the 12</div>
<div class="col-4">Content takes 4 columns out of the 12</div>
<div class="col-6">Content takes 6 columns out of the 12</div>
</div>
</section>
In this example, we have col-2 and col-4 and col-6.
We can also set the width of one column and leave the other column to take the remaining space, like this:
<div class="container">
<div class="row">
<div class="col-3">Column 1 of 3</div>
<div class="col">Column with variable width content</div>
<div class="col-3">Column 3 of 3</div>
</div>
</div>
In the above example, the column in the middle will change its width depending on the space left between the other 2 columns
More information here: Bootstrap 5
How do I make them responsive?
Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:
- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)
As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:
| | xs
<576px | sm
≥576px | md
≥768px | lg
≥992px | xl
≥1200px | xxl
≥1400px |
|---|
Container max-width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
|---|
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
|---|
| # of columns | 12 |
|---|
| Gutter width | 1.5rem (.75rem on left and right) |
|---|
| Custom gutters | Yes |
|---|
| Nestable | Yes |
|---|
| Column ordering | Yes |
|---|
Use col-{breakpoint}-auto classes to size columns based on the natural width of their content:
<div class="container">
<div class="row">
<div class="col-12 col-md-8">.col-md-8</div>
<div class="col-12 col-md-4">.col-12 .col-md-4</div>
</div>
</div>
In this example, we have col-12 col-md-8 and col-12 col-md-4. The col-md-* will be used for screens of 768px or bigger, and col-12 for smaller screens. You can add as many breakpoints as needed.
More information here: Bootstrap 5