How-to… Bootstrap

Get Started, Learn the Grid, Components, Build Themes, etc…

Carol Skelly
May 28, 2018 · 26 min read
Image for post
Image for post
Learn Bootstrap 4!

If you are here, you’ve certainly heard about “The world’s most popular front-end component library”___ Bootstrap

I’ve worked with Bootstrap a lot since the 2013 release of Bootstrap 3.0. I’ve contributed to the Bootstrap docs, and rank first for Bootstrap on Stack Overflow. I feel more than prepared to tell you everything you need to know about it. With this article, I hope to demystify Bootstrap in a clear and understandable way.

“I’ve tried using Bootstrap, but it seems like getting anything to work is difficult or impossible.”

I hear ya. You’re not alone. I’ve answered over 2,000 Bootstrap related questions on Stack Overflow, have seen many frustrated Bootstrap users. Do yourself a huge favor: Read this article, the documentation, and don’t try to force things. I will show you that Bootstrap is easy, elegant and sensible.

What’s Covered in this Article:

  • What is Bootstrap and Why Would I Use It?
  • How to Get Started with Bootstrap
  • How to Use Bootstrap CSS including the Navbar
  • How to Use the Bootstrap Grid
  • How to Responsive Design with Bootstrap
  • How to Use Bootstrap JavaScript Components
  • How to Customize Bootstrap

From here on, this article can be read on an as-needed basis. Feel free to scroll past sections that are glaringly newbie to you, but please don’t overlook the important details that will help you utilize “Bootstrap the right way”.

___________________________________________________________________

What is Bootstrap? Why Would I Use It?

Bootstrap consists of CSS and JavaScript files. It’s a framework (a.k.a — “library” or “toolkit”) that makes Website development faster and easier.


A Basic “before & after” Bootstrap example.

Before Bootstrap:

A web page without Bootstrap

After Bootstrap:

A Web page with Bootstrap 4
<div class="text-center">
<h1>Hello World</h1>
<p>
There's Bootstrap 4 here.
</p>
</div>
body {font-family: sans-serif;}
.text-center {text-align:center;}

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.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<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>

Quick Start

For this article, I’m going use Bootstrap 4 on Codeply since the Bootstrap files are automatically included in Codeply’s editor. This is the fastest option if you’re looking to quickly get started, learn the basics, and prototype Web designs using Bootstrap.


How to Use Bootstrap CSS.

Earlier, I said “Bootstrap consists of CSS and JavaScript files”. For now I’m going to focus on the CSS part.

  1. The Bootstrap Grid
    Layout helpers with “rows” and “columns”.

How to Use Bootstrap CSS “Styles”.

Remember that simple Bootstrap example I showed you earlier?


$font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
Image for post
Image for post
Typography in Bootstrap 4

Image for post
Image for post
Bootstrap 4 Contextual Colors

Components

Take a quick look at the following examples of the Bootstrap Components. These are all the “things” that can be easily “plugged-in” to your Web pages when using Bootstrap…

Image for post
Image for post
Alerts
Image for post
Image for post
Badges
Image for post
Image for post
Breadcrumbs
Image for post
Image for post
Buttons
Image for post
Image for post
Cards and List Groups
Image for post
Image for post
Carousel
Image for post
Image for post
Collapse Accordion
Image for post
Image for post
Dropdowns
Image for post
Image for post
Forms & Inputs
Image for post
Image for post
Input Groups
Image for post
Image for post
Modals
Image for post
Image for post
Tabs
Image for post
Image for post
Navbars
Image for post
Image for post
Pagination
Image for post
Image for post
Popovers
Image for post
Image for post
Image for post
Image for post
Scrollspy

Usage

Using any of these Bootstrap Components is very easy. It’s just a matter of referencing the appropriate Bootstrap CSS class in the HTML markup. For example, here’s how we use Bootstrap’s primary colored button on a Web page…

Image for post
Image for post
The Relationship Between HTML & Bootstrap CSS
<button type="button" class="btn btn-primary">Primary</button>
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}

_Why does the button have 2 classes: .btn + .btn-primary?


<span class="badge badge-primary">Badge</span>
<span class="badge badge-pill badge-primary">Rounded Badge</span>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Breadcrumb</li>
</ol>
</nav>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<div class="card">
<div class="card-body d-flex flex-column align-items-start">
<h4 class="card-title text-primary">Card Outline</h4>
<p class="card-text">With supporting text.</p>
<a href="#" class="btn btn-primary mt-auto">Button</a>
</div>
</div>
<form role="form">
<div class="form-group row">
<label class="col-md-2 col-form-label form-control-label">
First
</label>
<div class="col-md-4">
<input class="form-control" type="text" value="Jane">
</div>
<label class="col-md-1 col-form-label form-control-label">
Last
</label>
<div class="col-md-5">
<input class="form-control" type="text" value="Bishop">
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-form-label form-control-label">
Address
</label>
<div class="col-lg-10">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<div class="col-lg-12 text-right">
<input type="button" class="btn btn-primary" value="Submit">
</div>
</div>
</form>
<div class="jumbotron py-4">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">
This is simple jumbotron component...
</p>
</div>
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
<div class="progress">
<div class="progress-bar w-25">
</div>
</div>

_How do I know the correct HTML markup & structure to use for Bootstrap Components?

This is where developing with Bootstrap does require some “leg work”. The CSS toolkit is there at your finger tips, but you do need to know and use the correct HTML structure when utilizing any of the Bootstrap Components.

Image for post
Image for post
An easy way to get the Bootstrap example markup

Navbar

While most of the Bootstrap Components are self-explanatory and well-documented, I think the Navbar requires a full explanation. Along with the Grid, the Navbar is one of the most popular Bootstrap Components.

  • Nav links, buttons, or dropdowns
  • Inline forms
  • Text
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler"
data-toggle="collapse"
data-target="#nb">
<span class="navbar-toggler-icon"></span>
</button>
<div id="nb" class="navbar-collapse collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Left aligned</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right aligned</a>
</li>
</ul>
</div>
</nav>
  • navbar-expand-sm = expands on sm widths >576px
  • navbar-expand-md = expands on md widths >768px
  • navbar-expand-lg = expands on lg widths >992px
  • navbar-expand-xl = expands on xl widths >1200px
  • Use navbar-light to for lighter colored backgrounds

Utility Classes

Of course, Bootstrap is the Swiss army knife of the Web design & development world. Bootstrap encompasses many widely used CSS properties in handy “utility” classes. This eliminates the need to write the same CSS over-and-over again to apply styles to different HTML elements. You many know it as D.R.Y.

<style>#mydiv { text-alignment: center }</style>
<div id="mydiv" class="text-center">Centered text</div>

What’s the Bootstrap “Grid”?

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers.

<div class="container"> 
<div class="row">
<div class="col">I'm your content inside the grid!</div>
</div>
</div>
Image for post
Image for post
Bootstrap single column Layout
<div class="container"> 
<div class="row">
<div class="col">Left column</div>
<div class="col">Right column</div>
</div>
</div>
Image for post
Image for post
Bootstrap 2-column Layout
<div class="container"> 
<div class="row">
<div class="col">Left column</div>
<div class="col">Center column</div>
<div class="col">Right column</div>
</div>
</div>
Image for post
Image for post
Bootstrap 3-column Layout

__Why do I need a Container?

__Can I make one Column wider than the others?


“I’ve tried using Bootstrap, but it seems like getting anything to work is difficult or impossible.”

Trust me. Understanding the “Rules of the Grid” will save you a lot of time and frustration. Read them carefully…

The Rules of the Grid:

  1. Columns must be the immediate child of a Row.
  2. Rows are only used to contain Columns, nothing else.
  3. Rows should be placed inside a Container.

How to Use the Bootstrap Grid __The Right Way.

Container

In the basic example before you may have noticed that I used the .container to wrap the .row. The Container is the root (a.k.a: top-level, outermost) element of the Bootstrap Grid.

<div class="container"> 
<div class="row">
<div class="col">I'm content inside the grid!</div>
</div>
</div>
<div class="container">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid!</div>
</div>
</div>
<div class="container"></div>
<div class="container-fluid"></div>

Rows & Columns

For a while now I’ve wished that the Bootstrap .row wasn’t actually named “row”. The name “row” is often misleading, and obscures the actual purpose of the .row.

Think of the Row as a group of Columns

This is because columns inside the .row aren’t always laid-out horizontally across the viewport. Some times we want the column layout to be horizontal, while other times we want the columns to layout vertically down the viewport. The concept of horizontal vs. vertical layout is the essence of Responsive Design. The sole purpose of the “row” is to contain 1 or more “columns”.

DON’T PUT CONTENT DIRECTLY INSIDE THE ROW!


<div class="row">
This is very bad, wrong way, no bueno!!
</div>
<div class="row">
<p>This is also very bad, the wrong way!!</p>
</div>
<div class="row">
<h2>No headings either! This is the wrong way!!</h2>
</div>

<div class="row">
<div class="col">Happy :-) This is the right way.</div>
</div>

Happiness is, Columns…

  • Create horizontal divisions across the viewport.
  • Can have different defined widths.
  • Can change in width at different screen widths.
  • Layout horizontally left-to-right, then vertically up-and-down.
  • Can change position (re-order) relative to siblings in the same row.
  • Are the same height as other siblings in the same row.
  • Can “grow” or “shrink” in width.
  • Can automatically “wrap” or “stack” vertically as needed, or at different screen widths.
  • Can contain more Rows & Columns__ nesting.

All you need to know about Bootstrap Columns.

Just dont’ forget that columns must be the direct child of a Row.

Image for post
Image for post
3 columns across
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Bootstrap 4 Auto-layout Grid

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

How to Responsive Design with Bootstrap.

Grid Tiers, Media Queries and Breakpoints, Oh My!

It’s all about width.

Bootstrap 4 has 5 Responsive Tiers (a.k.a. “Breakpoints”) that you may have noticed in some of the previous Column examples (ie; col-lg-4, col-md).

Responsive Breakpoints, based on screen width:

  • (xs) — screen width < 576px (This is the “default” tier)
  • sm — screen width ≥ 576px
  • md — screen width ≥ 768px
  • lg— screen width ≥ 992px
  • xl — screen width ≥ 1200px
<div class="container"> 
<div class="row">
<div class="col-sm-6">Column 1</div>
<div class="col-sm-6">Column 2</div>
</div>
</div>
Image for post
Image for post
Image for post
Image for post

Mobile-first!

Since (xs) is the default breakpoint, the col-12 is implied. So, this:

<div class="col-12 col-sm-6">Column</div>
<div class="col-sm-6">Column</div>

Larger breakpoints, override Smaller breakpoints.

xs(default) >
overridden by sm >
overridden by md >
overridden by lg >
overridden by xl

<div class="col-sm-3 col-md-4">..</div>
<div class="container"> 
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>
<div class="container"> 
<div class="row">
<div class="col-sm">1</div>
<div class="col-sm">2</div>
<div class="col-sm">3</div>
</div>
</div>
<div class="container"> 
<div class="row">
<div class="col-sm-2">sidebar</div>
<div class="col">main content</div>
</div>
</div>

Key points on Breakpoints and Columns:

  • Columns will stack vertically (and become full-width) at the smaller screen widths unless you use a specific col-* class in your HTML markup. Use a specific col-* to prevent that vertical stacking.
  • The smaller grid classes also apply to larger screens unless overridden specifically for larger screen width. So, <div class=”col-md-6"></div> is effectively the same as <div class=”col-md-6 col-lg-6"></div>. Therefore, you only need to use the class for the smallest width you want to support.
  • Rows are display:flex, and therefore Columns are equal height in the same row. Use auto-margins or Flexbox align-items and justify-content for horizontal or vertical alignment (centering, bottom, right, etc..).

How to Use Bootstrap’s JavaScript.

Next I will focus on the JavaScript part of Bootstrap.

Data Attributes

The preferred method is using Data Attributes. This method doesn’t require you to add additional JavaScript/jQuery code since the data- attribute can be used directly in the HTML markup. For example,

<div id="myModal" class="modal" data-backdrop="false">
<div class="modal-dialog">...</div>
</div>

jQuery

The other way to use Bootstrap’s JavaScript Components is jQuery. Use the appropriate jQuery selector the element, and an Object containing the appropriate Options for the Component. The Options for each Component are described in the Bootstrap docs.

$("#myModal").modal({backdrop:false})
$(function () {
$('[data-toggle="popover"]').popover()
$('[data-toggle="tooltip"]').tooltip()
})

How to Customize Bootstrap.

First I want to address why, you’d want to customize Bootstrap. Developers want to customize Bootstrap for one or all of these reasons:

  1. Change some functional aspect__ change breakpoints, increase the gutter width, or add more grid columns.
  2. Extend Bootstrap__ add new colors, breakpoints and extend other existing Bootstrap classes.

In general, there are 2 methods used to customize Bootstrap:

1. Simple CSS Overrides

For maintainability, CSS customizations should be put in a separate custom.css file, so that the bootstrap.css remains unmodified. The reference to the custom.css follows after the bootstrap.css for the overrides to work...

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
border-radius: 0;
}
Image for post
Image for post
Rounded borders are now removed from the buttons

2. Customize using SASS

If you’re familiar with SASS (and you should be to use this method), you can customize Bootstrap with your own custom.scss. There is a section in the Bootstrap docs that explains this, however the docs don't explain how to utilize existing variables in your custom.scss.

|-- \bootstrap
| |-- \scss
| | |-- \mixins
| | |-- \utilities
| | |-- bootstrap.scss
| | |-- variables.scss
| | |-- functions.scss
| | |-- ...more bootstrap scss files
| custom.scss
/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */

/* simply assign the value */
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
/* optionally create new custom classes from existing classes */
.row-dark {
@extend .row;
background-color: #333333;
color: #ffffff;
}

How to Create Custom Bootstrap Themes.

Image for post
Image for post
Custom Theme Builder
Video: How to create a custom Bootstrap 4 theme

Helpful Bootstrap Tools & Resources

Here are the Bootstrap tools mentioned in the article. You’ll want to bookmark this list of must-have Bootstrap resources.


Take Away

You made it here! Thank you for taking the time to read this. I hope you learned more about “How to” Bootstrap. I really look forward to reading your comments. This article is also published at: bootstrap.themes.guide

WDstack

Tools, apps & insight on design + development

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store