Bootstrap 4.4.

0
CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/
bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/
7UAa8DHcaL8jkWt" crossorigin="anonymous">

JS

JS is only necessary if you plan on using one or all of the following components: Alerts, Buttons,
Carousel, Collapse, Dropdowns, Modals, Navbar, Tooltips and Scrollspy

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa48

49blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></
script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"
integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P"
crossorigin="anonymous"></script>

Components Utilities

Alerts List group Borders Sizing

Badge Media Object Clearfix Spacing
Breadcrumb Modal Close icon Text
Buttons Navs Colors Vertical align
Button group Navbar Display Visibility
Card Pagination Embed
Carousel Popovers Flex
Collapse Progress Float
Dropdowns Scrollspy Image replacement
Forms Spinners Position
Input group Toasts Screenreaders
Jumbotron Tooltips Shadows
 Bootstrap 4

Breakpoints Typography

Extra small devices (portrait phones, less than .text-left Left aligned text
576px) do not require a breakpoint because .text-*-left Left aligned by breakpoint
Bootstrap 4 is mobile first. .text-center Center aligned text
.text-right Right aligned text
Breakpoints | Max container width
.text-justify Justified text
not needed=Extra small < 576px | None
(auto) .text-nowrap No wrap text
.text-(lowercause, uppercase, capitalize)
sm=Small ≥ 576px | 540px
Changes the text capitalization style
md=Medium ≥ 768px | 720px
.text-decoration-none Removes decoration
lg=Large ≥ 992px | 960px
.text-truncate Truncate text with ellipsis
xl=Extra large ≥ 1200px | 1140px .lead Good for first paragraph of article
.text-monospace Changes to monospace font
Media Queries
.font-weight-(bold, bolder, normal, light,
Change the width value to set a media query lighter, italic) Changes the font weight
for sm, md, lg, xl.
.blockquote Slightly increases font-size
/* Small devices (landscape phones, 576px and sets a bottom margin for blockquotes
and up) */
.(h1, h2, h3, h4, h5, h6) Used to make an
@media (min-width: 576px) { }
element match the heading styles
.display-(1, 2, 3, 4) Large display text.

Lists 1=96px, 2=88px, 3=72px, 4=56px

.list-unstyled Removes default list margin Colors

.dl-horizontal Makes list items two
columns
.text-primary .bg-primary
.list-inline Makes list items inline
.text-secondary .bg-secondary
.list-inline-item Added to each li
.text-success .bg-success
.text-danger .bg-danger
Example
.text-warning .bg-warning
<ul class="social-icons list-inline">
.text-info .bg-info
<li class="list-inline-item">item 1</li>
.text-light .bg-light
</ul>
.text-dark .bg-dark
.text-body .bg-white
.text-muted .bg-transparent
.text-white
.text-black-50
.text-white-50

BootstrapCreative.com : 21
Bootstrap 4

Images Display
.img-fluid Make an image responsive Value can equal one of the following:
.rounded Adds rounded corners to image none, inline, inline-block, block,
.rounded-circle Crops image to be circle table, table-cell, table-row, flex,
.img-thumbnail Adds rounded corner and img
inline-flex
border
.d-(value) for xs
.d-(sm, md, lg, and xl)-(value) sets
Floats display value for breakpoint and up

.float-left Floats item left

.float-right Floats item right
Position
.float-none Removes float
.position-(static, relative, absolute,
.float-*-* Add breakpoints if needed fixed, sticky) Sets CSS position values
but not responsive
.fixed-(top, bottom) Position an element
Borders to the top of the viewport.
.sticky-top Position an element at the top
of the viewport, but only after you scroll
Add border past it. Not fully supported in IE.
.border Add border to all sides
.border-* (top, right, bottom, left) Add
border on a certain edge Shadows
Remove Border
.border-0 Remove border to all sides .shadow The regular sized box drop shadow

.border-*-0 (top, right, bottom, left) .shadow-(none, sm, lg) Remove box drop
Remove border on a certain edge shadow or change its size.

Border Radius
.rounded Adds border radius on all edges Sizing
.rounded-* (top, right, bottom, left,
circle) Adds a border radius
Make an element as wide or as tall (relative to
.rounded-0 Removes border radius
its parent)
.w-(5%, 50%, 75%, 100%, auto) Sets width
.h-(5%, 50%, 75%, 100%, auto) Sets height
.mw-(5%, 50%, 75%, 100%, auto) Sets max-
width
.mh-(5%, 50%, 75%, 100%, auto) Sets max-
height
 Bootstrap 4

Spacing Visibility

These classes do not modify the display

Sides
property and do not affect layout.
t= top, b=bottom, l=left, r=right,
x=x axis, y=y-axis .visible Takes up space and visible
.invisible Takes up space and invisible
Size

The values for each level of spacing are

calculation of the base font size which is 16px
or 1rem.
Overflow
Here the pixel equivalents. 0=0px, 1=4px,
Set how content overflows a parent element.
2=2px, 3-16px, 4=24px, 5=48px, auto

.overflow-auto Container will have a

.m(t, b, l, r, x, y)-(sm, md, lg, and scroll if the content overflows
xl)-(0, 1, 2, 3, 4, 5, auto) Sets margin
.overflow-hidden The container will not
value, remove breakpoint for xs
scroll and the content will be cut off.
.p(t, b, l, r, x, y)-(sm, md, lg, and
xl)-(0, 1, 2, 3, 4, 5, auto) Sets padding
value, remove breakpoint for xs
Screenreaders
.mx-auto Used to horizontally center an
element relative to parent container
.sr-only Only show on screen readers
Negative Margin .sr-only-focusable Show element when it
Add the letter n in from of the margin size has a focused state
value to apply a negative margin.
For example: .mt-n1 would apply a size 1
negative top margin.

Vertical Align
.align-(baseline, top, middle, bottom,
text-top, text-bottom) Changes
the vertical alignment of inline,
inline-block, inline-table, and table
cell elements.

BootstrapCreative.com : 23
Bootstrap 4

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://stackpath.bootstrapcdn.com/bootstrap/4.4.0/
css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l
9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
<!-- 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 Popper, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"
integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P"
crossorigin="anonymous"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
 Bootstrap 4

One Column Centered Grid Figures

<div class="container"> <figure class="figure">
<div class="row justify-content- <img src="https://dummyimage.
center"> com/100x100/563d7c/fff&text=+"
<div class="col-md-6"></div> class="figure-img img-fluid rounded"
alt="image">
</div>
<figcaption class="figure-caption">A
</div>
caption for the above image.</figcaption>

Two Column Grid </figure>

<div class="container">
Media Object
<div class="row">
<div class="col-sm-6"></div>
<div class="media">
<div class="col-sm-6"></div>
<img src="https://dummyimage.
</div> com/100x100/563d7c/fff&text=+"
</div> class="mr-3" alt="image">
<div class="media-body">
Three Column Grid <h5 class="mt-0">Media heading</h5>
Media object description text
<div class="container"> </div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div> Code
<div class="col-sm-4"></div>
</div> <code>

</div>
Used to display inline code in a paragraph

Responsive Container & Row <pre class="pre-scrollable">

Display multiple lines of code. Use .pre-
scrollable class to set a max-height of 340px
<div class="container-md"> and provide a y-axis scrollbar
<div class="row row-cols-1 row-cols-
md-3"> <var>
<div class="col"></div> Used to display math variables
<div class="col"></div>
<kbd>
<div class="col"></div> Used to display keyboard input
</div>
<samp>
</div>
Used to display sample output

BootstrapCreative.com : 25
Bootstrap 4

Navbar
<nav class="navbar navbar-toggleable-md navbar-dark 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 4

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">&times;</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>

BootstrapCreative.com : 27
Bootstrap 4

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-* primary, secondary, success, danger, warning, info, light, dark, link
.btn-outline-* primary, secondary, success, danger, warning, info, light, dark, link
.btn-lg Large buttom
.btn-sm Smaller than default button

Example
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-secondary" type="submit">Button</button>
 Bootstrap 4

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>

BootstrapCreative.com : 29
Bootstrap 4

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-body">
<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 4

Tabs
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabOne">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabTwo">Tab 2</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<div class="tab-pane fade active show" id="tabOne">Tab One Content</div>
<div class="tab-pane fade" id="tabTwo">Tab Two Content</div>
</div>

Alerts
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Note</strong> This alert is dismissable.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

Collapse
<a class="btn btn-primary mb-3 collapsed" data-toggle="collapse"
href="#collapseContent" role="button" aria-expanded="false" aria-
controls="collapseContent"><span class="if-collapsed"><b>+</b> Show Content</span>
<span class="if-not-collapsed"><b>-</b> Hide Content</span></a>
<div class="collapse" id="collapseContent">
<div class="card card-body">Collapse Content</div>
</div>
<style> /* this custom CSS is used to toggle the button text */
[data-toggle="collapse"].collapsed .if-not-collapsed,
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {display: none;}
</style>

BootstrapCreative.com : 31
Bootstrap 4

Tables
<table class="table">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>thead-dark</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Nina</td>
</tr>
</tbody>
</table>

Dropdowns

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-
toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown Actions</button>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a class="dropdown-item" href="#">Action One</a>
<a class="dropdown-item" href="#">Action Two</a>
<a class="dropdown-item" href="#">Action Three</a>
</div>
</div>
Bootstrap 4

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 prefix 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; }
}
 Learn Bootstrap 4 and
Responsive Design Basics.. Fast!

Learn More
BootstrapQuickStart.com
 Bootstrap 4

Alphabetical Index of CSS Classes

.active .bs-tooltip-(auto, bottom, left, right,

.accordion top)

.alert .btn

.alert-(primary, secondary, success, .btn-block

danger, warning, info, light, dark) .btn-group
.alert-dismissible .btn-group-(sm, lg)
.alert-heading .btn-group-toggle
.alert-link .btn-group-vertical
.align-(baseline, top, middle, bottom, .btn-(sm, lg)
text-top, text-bottom) .btn-link
.align-content-(sm, md, lg, xl)-(around, .btn-outline-(primary, secondary, success,
between, center, end, start, stretch) danger, warning, info, light, dark)
.align-items-(sm, md, lg, xl)-(baseline, .btn-(primary, secondary, success, danger,
center, end, start, stretch) warning, info, light, dark)
.align-self-(sm, md, lg, xl)-(auto, .btn-toolbar
baseline, center, end, start, stretch)
.card
.arrow
.card-body
.badge
.card-columns
.badge-(primary, secondary, success,
danger, warning, info, light, dark) .card-deck

.badge-pill .card-footer

.bg-(primary, secondary, success, danger, .card-group

warning, info, light, dark, transparent, .card-header
white) .card-header-pills
.blockquote .card-header-tabs
.blockquote-footer .card-img
.border-(light, dark primary, secondary, .card-img-bottom
transparent, white, warning, success,
.card-img-overlay
info, danger, 0, top-0, right-0, bottom-0,
left-0) .card-img-top
.border-(bottom, left, right, top) .card-link
.breadcrumb .card-subtitle
.breadcrumb-item .card-text
.bs-popover-(auto, bottom, left, right, .card-title
top)
.carousel

BootstrapCreative.com : 35
Bootstrap 4

.carousel-caption .d-(sm, md, lg, xl)-(none, inline, inline-

.carousel-control-(next, prev) block, block, table, table-cell, table-
row, flex, inline-flex)
.carousel-control-(next, prev)-icon
.carousel-fade .d-print-(block, inline, inline-block,
none, flex, inline-flex, table, table-
.carousel-indicators
cell, print-table-row)
.carousel-inner
.disabled
.carousel-item
.display-(1, 2, 3, 4)
.carousel-item-(left, right)
.dropdown
.carousel-item-(next, prev)
.dropdown-divider
.clearfix
.dropdown-header
.close
.dropdown-item
.col
.dropdown-item-text
.col-(sm, md, lg, xl)-(1-12)
.dropdown-menu
.col-auto
.dropdown-menu-right
.col-form-label
.dropdown-menu-(sm, md, lg, xl)-(right,
.col-form-label-(sm, lg) left)
.collapse .dropdown-toggle
.collapsing .dropdown-toggle-split
.container .dropleft
.container-fluid .dropright
.container-(sm, md, lg, xl) .dropup
.custom-checkbox .embed-responsive
.custom-control .embed-responsive-(16by9, 1by1, 21by9,
.custom-control-inline 4by3)

.custom-control-input .embed-responsive-item

.custom-control-label .fade

.custom-file .figure

.custom-file-control .figure-caption

.custom-file-input .figure-img

.custom-file-label .fixed-bottom

.custom-radio .fixed-top

.custom-range .flex-(sm, md, lg, xl)-(row, row-reverse,

column)
.custom-select
.flex-(sm, md, lg, xl)-(nowrap, wrap,
.custom-select-(sm, lg)
wrap-reverse)
.custom-switch
.flex-column
 Bootstrap 4

.flex-column-reverse .invalid-tooltip
.flex-fill .invisible
.flex-grow-* .is-invalid
.flex-shrink-* .is-valid
.float-(sm, md, lg, xl)-(none, left, .jumbotron
right) .jumbotron-fluid
.focus .justify-content-(sm, md, lg, xl)-(start,
.font-italic end, center, between, around)
.font-weight-(bold, bolder, light, .lead
lighter, normal) .list-group
.form-check .list-group-flush
.form-check-inline .list-group-horizontal-(sm, md, lg, xl)
.form-check-input .list-group-item
.form-check-label .list-group-item-action
.form-control .list-group-item-(primary, secondary,
.form-control-file success, danger, warning, info, light,
.form-control-(sm, lg) dark)

.form-control-plaintext .list-(inline, inline-item, unstyled)

.form-control-range .m(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2,

3, 4, 5, n1, n2, n3, n4, n5)
.form-group
.mark
.form-inline
.media
.form-row
.media-body
.form-text
.mh-100
.h-(100, 75, 50, 25, auto)
.modal
.(h1-h6)
.modal-backdrop
.hide
.modal-body
.img-fluid
.modal-content
.img-thumbnail
.modal-dialog
.initialism
.modal-dialog-(centered, scrollable)
.input-group
.modal-footer
.input-group-append
.modal-header
.input-group-(sm, lg)
.modal-(sm, lg)
.input-group-prepend
.modal-open
.input-group-text
.modal-scrollbar-measure
.invalid-feedback
.modal-title

BootstrapCreative.com : 37
Bootstrap 4

.nav .progress-bar
.nav-fill .progress-bar-animated
.nav-item .progress-bar-striped
.nav-justified .rounded
.nav-link .rounded-(top, right, bottom, left,
.nav-pills circle, pill, 0, lg, sm)

.nav-tabs .rounded-circle

.navbar .row

.navbar-brand .row-cols-(sm, md, lg, xl)-(1, 2, 3, 4, 5,

6)
.navbar-collapse
.shadow-(none, sm, lg)
.navbar-(dark, light)
.show
.navbar-expand-(sm, md, lg, xl)
.showing
.navbar-nav
.small
.navbar-text
.spinner-(border, border-sm, grow,
.navbar-toggler
grow-sm)
.navbar-toggler-icon
.sr-only
.no-gutters
.sr-only-focusable
.offset-(sm, md, lg, xl)-(1-12)
.stretched-link
.order-(sm, md, lg, xl)-first
.tab-content
.order-(sm, md, lg, xl)-last
.tab-pane
.order-(sm, md, lg, xl)-(0-12)
.table
.p(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2,
.table-active
3, 4, 5, n1, n2, n3, n4, n5)
.table-bordered
.overflow-(auto, hidden)
.table-borderless
.page-item
.table-hover
.page-link
.table-(primary, secondary, success,
.pagination
danger, warning, info, light, dark)
.pagination-(sm, lg)
.table-responsive-(sm, md, lg, xl)
.popover
.table-sm
.popover-body
.table-striped
.popover-header
.text-(primary, secondary, success,
.position-(absolute, fixed, relative, danger, warning, info, light, dark, muted,
static, sticky) white, decoration-none, reset)
.pre-scrollable .text-hide
.progress .text-justify
 Bootstrap 4

.text-(sm, md, lg, xl)-(center, left,

right)
.text-(lowercase, uppercase, capitalize,
black-50, body, monospace, white-50,
break)
.text-(wrap, nowrap)
.text-truncate
.text-warning
.thead-dark
.thead-light
.toast
.toast-(body, header)
.tooltip
.tooltip-inner
.valid-feedback
.valid-tooltip
.vh-100
.vw-100
.visible
.w-(100, 75, 50, 25)
.was-validated
.w-auto

BootstrapCreative.com : 39
Bootstrap 4

Convert Pixels to REMS

Pixels REMS Pixels REMS

1 px 0.0625 26 px 1.625
2 px 0.125 27 px 1.6875
3 px 0.1875 28 px 1.75
4 px 0.25 29 px 1.8125
5 px 0.3125 30 px 1.875
6 px 0.375 31 px 1.9375
7 px 0.4375 32 px 2
8 px 0.5 33 px 2.0625
9 px 0.5625 34 px 2.125
10 px 0.625 35 px 2.1875
11 px 0.6875 36 px 2.25
12 px 0.75 37 px 2.3125
13 px 0.8125 38 px 2.375
14 px 0.875 39 px 2.4375
15 px 0.9375 40 px 2.5
Default Bootstrap 4
font size 1 41 px 2.5625
16 px
17 px 1.0625 42 px 2.625
18 px 1.125 43 px 2.6875
19 px 1.1875 44 px 2.75
20 px 1.25 45 px 2.8125
21 px 1.3125 46 px 2.875
22 px 1.375 47 px 2.9375
23 px 1.4375 48 px 3
24 px 1.5 49 px 3.0625
25 px 1.5625 50 px 3.125
 Bootstrap 4

Multiples of Common Units of Measure

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

BootstrapCreative.com : 41
Bootstrap 4

Default Text Sizes

Bootstrap’s font sizes are calculated off of the body font size by using rem values. If you change
the body font size all styles will be increased/decreased automatically. Rem stands for “root em”
because it calculates the size based on the size of the root of the document or body tag.

Tag / Class Default Font size

16px; line-height: 1.5;

body font-family: “Helvetica Neue”, Helvetica, Arial,
sans-serif;
p, li 1rem / 16px
h1 2.5rem / 40px
h1 small 80% / 32px
h2 2rem / 32px
h2 small 80% / 25.6px
h3 1.75rem / 28px
h3 small 80% / 22.4px
h4 1.5rem / 24px
h4 small 80% / 24px
h5 1.25rem / 20px
h5 small 80% / 16px
h6 1rem / 16px
h6 small 80% / 12.8px
.display-1 6rem / 90px
.display-2 5.5rem / 82.5px
.display-3 4.5rem / 67.5px
.display-4 3.5rem / 52.5px
 Additional Reference

CSS Code Best Practices

• Try and list properties in this order: 1. Positioning, 2. Box model (display, float,
width, etc), 3. Typography (font, line-height), 4. Visuals (background, border,
opacity), 5. Misc (CSS3 properties)

• Any rule set with multiple declarations should be split to separate lines
because syntax errors on Line numbers would be hard to find.

• Use soft-tabs set to two spaces, set encoding to UTF-8

• When using multiple CSS files, break them down by component instead
of page.

• Keep media queries as close to their relevant rule sets whenever possible.
Don't bundle them all in a separate stylesheet or at the end of the document.

• Do not use @import because it slows down page load.

• Place closing braces of declaration blocks on a new line.

• End all declarations with a semi-colon to prevent errors.

• Lowercase all hex values. For example, #fff instead of #FFF.

• Avoid specifying units for zero values. For example, margin: 0; instead of
margin: 0px;.

Inspired by Code Guide by Mark Otto: http://codeguide.co/

BootstrapCreative.com : 97
Additional Reference

Design Inspiration CSS Reference

• Bootstrap Expo • Mozilla CSS Reference
https://expo.getbootstrap.com/ https://developer.mozilla.org/en-US/docs/
• Built With Bootstrap Web/CSS/Reference
http://builtwithbootstrap.com/ • CSS-Tricks Almanac
• Wrap Bootstrap https://css-tricks.com/almanac/
https://wrapbootstrap.com/ • Can I Use?
• Official Bootstrap Themes https://caniuse.com/
https://themes.getbootstrap.com/ • CSSreference.io
• AWWWARDS https://cssreference.io/
https://www.awwwards.com/websites/
responsive-design/
• Media Queries
https://mediaqueri.es/ JavaScript Reference
• Pattern Tap • Mozilla JavaScript Reference
http://zurb.com/patterntap https://developer.mozilla.org/en-US/docs/
• CodePen Pattern Library Web/JavaScript/Reference
http://codepen.io/patterns/ • jQuery Documentation
• Building Blocks https://api.jquery.com/
http://foundation.zurb.com/building-
blocks/

Bootstrap Reference
• Bootstrap 4 Classes Reference
https://bootstrapcreative.com/resources/

HTML Reference •
bootstrap-4-css-classes-index/
Bootstrap 3 Classes Reference
• Mozilla HTML Reference
https://bootstrapcreative.com/resources/
https://developer.mozilla.org/en-US/docs/
bootstrap-3-css-classes-index/
Web/HTML
• Official Bootstrap Documentation
• HTMLReference.io http://getbootstrap.com/
https://htmlreference.io/
• Bootsnip - Bootstrap Code Snippets
https://bootsnipp.com/
Bootstrap Code Snippets
and Examples Library
A collection of code snippets to help you quickly customize components.
Includes the necessary HTML, CSS, and JS you need to implement in your project.

https://bootstrapcreative.com/pattern/
Thank you!
I hope you have found this Bootstrap reference guide helpful
and informative.

Let's make a responsive web together!

Sign up to receive free book updates and future training.

https://bootstrapcreative.com/signup

Find an error? Or have a suggestion on how

this book could be improved?
Please contact support@bootstrapcreative.com