Bootstrap class: .col
<!-- Equal width cols, same on all screen sizes -->
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>Preview
1 of 3
1 of 3
1 of 3
Check .col in a real project
Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.
Tips 💡
You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.
More in Bootstrap Grid
- container-fluid
- container
- col-# (<576px)
- col-sm-# (≥576px)
- col-lg-# (≥992px)
- row
- col-md-# (≥768px)
- col-xl-# (≥1200px)
- offset-*-#
- order-#
- no-gutters
- nested columns
- col-*
- col-1
- col-2
- col-3
- col-4
- col-5
- col-6
- col-7
- col-8
- col-9
- col-10
- col-11
- col-12
- col-auto
- col-lg-1
- col-md-1
- col-sm-1
- col-xl-1
- col-xxl-1
- container-sm
- contanier-md
- contanier-lg
- contanier-xl
- contanier-xxl
- g-0
- g-lg-0
- g-md-0
- g-sm-0
- g-xl-0
- g-xxl-0
- gap-0
- gap-lg-0
- gap-md-0
- gap-sm-0
- gap-xl-0
- gap-xxl-0
- gx-0
- gx-lg-0
- gx-md-0
- gx-sm-0
- gx-xl-0
- gx-xxl-0
- gx-0
- gx-lg-0
- gx-md-0
- gx-sm-0
- gx-xl-0
- gy-xxl-0
- offset-0
- offset-lg-0
- offset-md-0
- offset-xxl-0
- row-cols-1
- row-cols-auto
- row-cols-lg-1
- row-cols-lg-auto
- row-cols-md-1
- row-cols-md-auto
- row-cols-sm-1
- row-cols-sm-auto
- row-cols-xl-1
- row-cols-xl-auto
- row-cols-xxl-1
- row-cols-xxl-auto
