Bootstrap 3
Basics
Bootstrap works on a 12 column grid
Column Basics
<div class='container'>
<div class='row'>
<div class='col-md-12'>...</div>
</div>
</div>
Empty Columns
<div class='col-md-1 col-md-offset-1'>
...
</div>
Working on smaller screens (small and extra small)
Small screens…
col-sm-*
Extra small screens…
col-xs-*
Removing an offset
col-cs-offset-0
Hiding elements in 1 or more screen sizes
hidden-xs
hidden-md
hidden-lg
Showing elements in 1 or more screen sizes
visible-xs
visible-md
visible-lg
Overiding Fonts
<p class='lead'>Make your way to space...</p>
Centering Text
<p class='text-center'>This text is centered</div>
.text-justify
.text-right
.text-center
.text-left
Adding Icons
<i class='glyphicon glyphicon-briefcase'></i>
Increasing Font Size of Icons
Add a custom css file, with your specific customizations
In the css file have the following…
.features .glyphicon {
font-size:32px;
color:red;
}
<i class='features glyphicon-briefcase'></i>
Bootstrap 4
What’s new
- Typographic units of measure now in rem
- Extra breakpoint at 480px for smaller screens
- A new sm grid tier
References
Bootstrap
Example Code from Code School Slides
Sample Site from Code School Site
Example Sites Using Bootstrap
Bootstrap Blog
Glyphicons
Free Bootstrap Themes
Customize Bootstrap Library
