📄 Table of contents
- What is Bootstrap
- Get Started with Bootstrap
- Bootstrap CSS
- Bootstrap v3.0 vs v4.0
- Rules of the Grid
Bootstrap is a powerful and popular mobile first front-end framework for building responsive mobile first sites on the web by using HTML, CSS and JS framework.
It contains mobile first styles throughout the entire library, instead of using them in the separate files.
The last stable release of Bootstrap v3.3.7 was in July 2016 and in August 2017, Bootstrap 4.0.0 beta version released.
How to Get Started with Bootstrap.
Some people will ask or explain “How to install Bootstrap”. Well, you don’t really “install” it. Using Bootstrap is a matter of referencing the appropriate CSS and/or JS files.
You might have a build process or development environment that utilizes tools such as NPM or Nuget in which case you’ll want read the docs on adding Bootstrap and its’ dependencies.
For this article, you only need to know how to reference Bootstrap on CDN. As shown in the official starter template, the Bootstrap files can be referenced on BootstrapCDN. Just add the link to Bootstrap CSS in the HTML
<head> tag for you Web page(s)…
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script> tag before the closing
</body> tag. Bootstrap 4 also requires jQuery and Popper.js which need to be included before the Bootstrap JS in below order:
<!-- Bootstrap CSS -->
<!-- jQuery first -->
<!-- Popper.js -->
<!-- Bootstrap JS --><script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
How to Use Bootstrap CSS.
- Element Styles
Buttons, fonts, colors, badges, typography, progress bars, alerts, etc…
- The Bootstrap Grid
Layout helpers with “rows” and “columns”.
First of all, the Bootstrap CSS includes Reboot which “normalizes” the Web page styles. Web browsers have different, somewhat ugly, styles that are applied to Web pages by default.
Since each browser’s defaults are a little different, Bootstrap uses Reboot to override the browser defaults, and provide the same “elegant, consistent baseline” to build upon, regardless of the browser.
This means that if the Web page is viewed on Safari, Chrome, Firefox or IE it will start out with the same baseline CSS styles.
Difference between Bootstrap 3 & 4.0 version:
The following table shows differences in Bootstrap 3 and Bootstrap 4 −
- Simply adding
colmeans it is defined for extra small (xs) devices and above…such as
<div class= “col adiv”> </div>
- while nesting of rows is possible…it is mandatory that any column (
col-md-*) parent must be of
- Bootstrap 4 grid system built with flexbox which is fully responsive and scales up to 12 columns (according to the size of device) by creating layout with rows and columns across the page. If you place more than 12 columns in a row, then the columns will be placed in a new line.
- Columns create gaps between column content via padding. Therefore, you can remove the margin from rows and padding from columns with .no-gutters class on the row.
flexbox is the foundation of Bootstrap 3/4 grid system.
converts all block level elements (which are stacked from top to bottom) to side by side (left to right in a row) …means kinda converting block to inline level layout.
display: flex is basically saying display: flex && flex-direction: row;
display: flex && flex-direction: column will again stack from top to bottom.
The Rules of the Grid:
- Rows should be placed inside a Container.
2. Rows are only used to contain Columns, nothing else.
3. Columns must be the immediate child of a Row.
The Rules of the Nested-Grid:
clear the floats:
Elements after a floating element will flow around it. Use the “clearfix” hack to fix the problem:
- clear: both (traditional way before bootstrap 3/4)
- <div class=”clearfix”></div>
How to Use the Bootstrap Grid __The Right Way.
When utilizing the Grid, one or more Rows will be placed inside the Container i.e., you can have multiple Rows in a Container, and you can have multiple Containers on one page.
The Container can be used to hold any elements and content. It’s not only used for the Grid Rows & Columns. For example, this is perfectly valid Bootstrap markup:
<div class="col">I'm content inside the grid!</div>
FYI: Viewport — The visible area inside the browser window.
Rows have a negative left/right margin of -15px. The Container padding of 15px is used to counteract the negative margins of the Row. This is to keep content evenly aligned on the edges of the layout. If you don’t put a Row in a Container, the Row will overflow it’s container, causing an undesirable horizontal scroll.
Think of the Row as a group of Columns and not a horizontal line.
The space between the columns is called the “gutter”.
The classic Bootstrap grid has 12 column units. The columns can be split-up using any part of the 12 units. And, it’s okay to use less than 12. It’s also okay to use more than 12 which I’ll show you later.
DON’T PUT CONTENT DIRECTLY INSIDE THE ROW!
Columns, and only columns, are placed inside the Row.
Content is placed inside the Columns.
<div class=”col”>Happy :-) This is the right way.</div>
The following table summarizes aspects of how Bootstrap 4 grid system works across multiple devices −
xs => Extra small devices (<576px) => .col-sm => Small devices (≥576px) => .col-sm-md => Medium devices (≥768px) => .col-md-lg => Large devices (≥992px) => .col-lg-xl => Extra Large devices (≥1200px) => .col-xl-
Aside: Why did I put (xs) in parenthesis, and not the other breakpoints? Since xs (extra-small) is the default breakpoint, the
-xsinfix that was used for Bootstrap 3.x is longer used in Bootstrap 4.x. So, instead of using
col-xs-6, it’s simply
Also, the order of the these classes: col-sm , col-lg ,col-md & col-xs don’t matter.
Since (xs) is the default breakpoint, the
col-12 is implied. So, this:
<div class="col-12 col-sm-6">Column</div>
Works the same way as this:
Larger breakpoints, override Smaller breakpoints.
xl > overrides
lg > overrides
md > overrides
sm > overrides (
<div class="col-lg-3 col-md-3 col-sm-3">..</div> is the same as,
Also, 3 columns wide on sm, and 4 columns wide on md-and-up:
<div class="col-sm-3 col-md-4">..</div>
- using Bootstrap 3 =>
- using Bootstrap 4 =>
img-fluid / img-thumbnail
.img-fluid class applies
max-width: 100%; and
height: auto; to the image.
.img-thumbnail class shapes the image to a thumbnail (bordered):
- using CSS =>
→ If you want the image to scale both up and down on responsiveness, set the CSS
width property to 100% and
height to auto:
However, If you want an image to scale down if it has to, but never scale up to be larger than its original size, use
To center an image, set left and right margin to
auto and make it into a
Note that it CANNOT be centered if the width is set to 100% (full-width).
1 rem = 16px
3 rem = 48px
bootstrap-grid.css” which contains the Grid and Flexbox classes.