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 tried using Bootstrap, but it seems like getting anything to work is difficult or impossible.”

What’s Covered in this Article:

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?

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.

<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

How to Use Bootstrap CSS.

How to Use Bootstrap CSS “Styles”.

$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

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

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?

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

Navbar

<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>

Utility Classes

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

What’s the Bootstrap “Grid”?

<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.”

The Rules of the Grid:

How to Use the Bootstrap Grid __The Right Way.

Container

<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

Think of the Row as a group of 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…

All you need to know about Bootstrap Columns.

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.

It’s all about width.

Responsive Breakpoints, based on screen width:

<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!

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

Larger breakpoints, override Smaller breakpoints.

<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:

How to Use Bootstrap’s JavaScript.

Data Attributes

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

jQuery

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

How to Customize Bootstrap.

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

1. Simple CSS Overrides

<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

|-- \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

Take Away

WDstack

Tools, apps & insight on design + development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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