Bootstrap is a mobile first, open-source, front-end development framework that helps developers and designers to easily build responsive websites.
Bootstrap employs a 12 column layout to help easily establish a styles for a responsive website. By adding classes to your HTML elements, you can set how many columns each div will span (out of 12). These classes are as follows:
col-xl-12 // class used for extra large devices ~ 1200px
col-lg-12 // class used for large devices like laptops ~ 992px
col-md-12 // class used for medium devices like tablets ~ 768px
col-sm-12// class used for small devices like mobile phones ~ 768px
col-sm-3
. This would add the following code:<div class="sidebar col-sm-3">
<ul>
<li>My</li>
<li>Sidebar</li>
<li>Items</li>
<ul>
</div>
.sidebar {
width: 25%;
}
col-sm-3
, and no other screen size classes are being used, it will be 25% at all screen sizes. In other words, if you want your element to take up a given number of columns at all screen sizes, only add a col-sm-
declaration.col-sm-12
.col-sm-12 col-md-3
. This applies the following CSS:
.sidebar {
width: 100%;
}
@media screen and (min-width:768px) {
.sidebar {
width: 25%;
}
}
Since websites are not newspapers, content is not exclusively broken out into columns. You will likely want to place your columns inside of rows as well. This is straight-forward with Bootstrap - simply nest your column divs in an element with the class row
!
.container
(fixed-width) or a .container-fluid
(full-width) element.container > row > columns
.<!-- this could also be "container-fluid" -->
<div class="container">
<div class="row">
<div class="col-sm-3">
Content 25% of page width
</div>
<div class="col-sm-6">
Content 50% of page width
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
/