Grid container
Fluid Container
Fluid container is a full width container, spanning the entire width of the viewport
Row
Column
Grid – breakpoints
Equal columns
1 column
2 column
3 column
<div class="container">
<div class="row">
<div class="col">1 column</div>
<div class="col">2 column</div>
<div class="col">3 column</div>
</div>
</div>No gutters
1 column
2 column
3 column
<div class="container">
<div class="row no-gutters">
<div class="col">1 column</div>
<div class="col">2 column</div>
<div class="col">3 column</div>
</div>
</div>Breakpoints Classes
Current viewport:
Bootstrap: Responsive breakpoints
class=”col-sm”
class=”col-md”
class=”col-lg
class=”col-xl
<div class="row">
<div class="col-sm">Column 1</div>
<div class="col-md">Column 2</div>
<div class="col-lg">Column 3</div>
<div class="col-xl">Column 4</div>
</div>Stacked to horizontal
<div class="row">
<div class="col-sm">Column 1</div>
<div class="col-sm">Column 2</div>
<div class="col-sm">Column 3</div>
</div>Demo shows active classes.
<div class="row">
<div class="col-sm-6 col-md-7 col-lg-8 col-xl-9">Column</div>
<div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">Column</div>
</div><div class="row">
<div class="col-sm-4 col-md-3 col-lg-2 col-xl-1">Column</div>
<div class="col-sm-4 col-md-6 col-lg-8 col-xl-10">Column</div>
<div class="col-sm-4 col-md-3 col-lg-2 col-xl-1">Column</div>
</div>