Bootstrap 4 Cheat Sheet Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 13
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 1/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 1
Breakpoints
Breakpoints
Extra small < 544px
Small ≥ 544px
Medium ≥ 768px
Large ≥ 992px
Extra large ≥ 1200px
Typography
.text-left Left aligned text
.text-center Center aligned text
.text-right Right aligned text
.text-justify Justified text
.text-nowrap No wrap text
.text-lowercause Lowercase text
.text-uppercase Uppercase text
.text-capitalize Capitalized text
.lead Good for first paragraph of article
Blockquote
<blockquote class="blockquote">
<p class="m-b-0">Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Integer
posuere erat a ante.</p>
</blockquote>
Headings
<h1>h1. Bootstrap heading <small>Secondary
text</small></h1>
<p class="h1">Paragraph that looks like
heading</p>
Colors
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
Lists
.list-unstyled Removes default list margin
.list-inline Makes list items inline
.dl-horizontal Makes list items two columns
Images
.img-fluid Make an image responsive
.img-rounded Adds rounded corners to image
.img-circle Crops image to be circle
.img-thumbnail Adds rounded corner + border
Floats
.pull-left Floats item left
.pull-right Floats item right
.center-block Set an elemennt to block with
auto left and right margin
.clearfix Clear floats by adding this class
to the parent container
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-inverse
.bg-faded
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 2/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 2
Starter Template
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/
css/bootstrap.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-sm-6">Left Column</div>
<div class="col-sm-6">Right Column</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></
script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.
js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 3/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 3
One Column Centered Grid
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6"></div>
</div>
</div>
Two Column Grid
<div class="container">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
</div>
Three Column Grid
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
Four Column Grid
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
</div>
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 4/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 4
Navbar
<nav class="navbar navbar-toggleable-md bg-faded navbar-inverse bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com"
id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 5/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 5
Modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h2>Modal body heading</h2>
<p>Modal body text description</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</
button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 6/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 6
Forms
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with
anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Buttons
.btn Needs to be added to all buttons because it adds padding and margin
.btn-default The default button style
.btn-primary The button that has the primary action in a group
.btn-success Could be used on the last submit button in a form
.btn-info Informational button
.btn-link Removes background color and add text color
.btn-lg Large buttom
.btn-sm Smaller than default button
.btn-xs Even smaller
.btn-block Button that spans full width of parent
<a class="btn btn-default"
href="#" role="button">Link</a>
<button class="btn btn-primary"
type="submit">Button</button>
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 7/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 7
Carousel
<div id="carousel-name" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-name" data-slide-to="0" class="active"></li>
<li data-target="#carousel-name" data-slide-to="1"></li>
<li data-target="#carousel-name" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://dummyimage.com/900x340/563d7c/
fff&text=+" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Carousel Slider Title</h3>
<p>Description text to further describe the content of the slide image</p>
<a href="" class="btn btn-primary">Call to Action</a>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://dummyimage.com/900x340/563d7c/
fff&text=+" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<a href="" class="btn btn-primary">Call to Action</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-name" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-name" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 8/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 8
Jumbotron
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space
of its parent.</p>
</div>
</div>
Card
<div class="card" style="width: 20rem;">
<img class="card-img-top w-100" src="https://dummyimage.com/600x400/563d7c/fff"
alt="Card image cap" >
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Breadcrumbs
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Responsive embed
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 9/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 9
Tables
<table class="table">
<thead class="thead-default">
<tr>
<th>#</th>
<th>thead-default</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Nina</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>thead-inverse</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Nina</td>
</tr>
</tbody>
</table>
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 10/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 10
Component CSS Format and Media Queries
/*
* Component section heading
*
* Component description and use
*/
/* base - shared styles */
.component { width: 220px; }
/* Sub-component with component name as a prex to isolate styles and break
the cascade. */
.component-heading {
display: block;
width: 100px;
font-size: 1rem;
}
/* variant - alert color */
.component-alert {
color: #ff0000;
}
/* variant - success color */
.component-success {
color: #00ff00;
}
/* Add media queries below components instead of a separate stylesheet or
section to make updating easier */
@media (min-width: 480px) {
.component-heading { width:auto; }
}
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 11/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 11
Pixels REMS Pixels REMS
1 px 0.0625 26 1.625
2 px 0.125 27 1.6875
3 px 0.1875 28 1.75
4 px 0.25 29 1.8125
5 px 0.3125 30 1.875
6 px 0.375 31 1.9375
7 px 0.4375 32 2
8 px 0.5 33 2.0625
9 px 0.5625 34 2.125
10 px 0.625 35 2.1875
11 px 0.6875 36 2.25
12 px 0.75 37 2.3125
13 px 0.8125 38 2.375
14 px 0.875 39 2.4375
15 px 0.9375 40 2.5
Default Bootstrap 4
font size
16 px
1 41 2.5625
17 px 1.0625 42 2.625
18 px 1.125 43 2.6875
19 px 1.1875 44 2.75
20 px 1.25 45 2.8125
21 px 1.3125 46 2.875
22 px 1.375 47 2.9375
23 px 1.4375 48 3
24 px 1.5 49 3.0625
25 px 1.5625 50 3.125
Convert pixels to REMS
Bootstrap Cheat Sheet
1.0:v4.0.0-alpha.6, 4/22/17 Page 12/13
4
Find an error? Contact me 1.0:v4.0.0-alpha.6 : 12
Multiples of 15 Multiples of 30
15 405 30 810
30 420 60 840
45 435 90 870
60 450 120 900
75 465 150 930
90 480 180 960
105 495 210 990
120 510 240 1020
135 525 270 1050
150 540 300 1080
165 555 330 1110
180 570 360 1140
195 585 390 1170
210 600 420 1200
225 615 450 1230
240 630 480 1260
255 645 510 1290
270 660 540 1320
285 675 570 1350
300 690 600 1380
315 705 630 1410
330 720 660 1440
345 735 690 1470
360 750 720 1500
375 765 750 1530
390 780 780 1560
Multiples of common unites of measure
Learn Bootstrap 4 Basics... Fast
Improve your resumé
and learn responsive
web design fundamentals.
• Stand out – Improve your resumé by being
proficient in the most popular front-end CSS
framework.
• Be more efficient – Learn what’s new
in Bootstrap 4 and how it can help you
earn more in less time by boosting your
productivity.
• Stay up to date – Get updated files when
framework minor updates are made to help
you stay current.
• Connect – Ask questions and get to know
other web designers that use Bootstrap.
bootstrapquickstart.com
Get Book Sample
Homepage features
Responsive images
Image cards
Parallax backgrounds
Nested grids
SVG icons
