Bootstrap

Reference Guide
Published on January 1, 2019

Dedicated to my boys Marcus and Joshua,

may you learn to discover, develop, and share your God-given talents.
Matthew 25:14-30

Jacob Lett is the author of the Bootstrap 4 Quick Start, and the
Bootstrap Reference Guide. His books and training help web developers
save time learning how to design and build responsive websites.
www.linkedin.com/in/jacoblett/
Bootstrap Reference Guide
Jacob Lett
Copyright © 2019 by Jacob Lett

Publisher
Bootstrap Creative
Sterling Heights, Michigan 48314
(586) 894-8024
Find us on the web at: bootstrapcreative.com

To report errors, please send an email to support@bootstrapcreative.com

Notice of Rights
All rights reserved. Please do not distribute, share, or sell without the written permission of the
publisher. You may print pages for personal use. If you would like to share this with a group,
please contact support@bootstrapcreative.com.

Notice of Liability
The information in this book is distributed on an "as is" basis without warranty. While every
precaution has been made in the preparation of the book, neither the author nor Bootstrap
Creative shall have any liability to any person or entity with respect to any loss or damage caused
or alleged to be caused directly or indirectly by the instructions contained in this book or by the
computer software products described in it.

Trademarks
Many of the designations used by manufacturers and sellers to distinguish their products are
claimed as trademarks. Where those designations appear in this book, and Bootstrap Creative
was aware of a trademark claim, the designations appear as requested by the owner fo the
trademark. All other product names and services identified throughout this book are used in
editorial fashion only and for the benefit of such companies with no intention of infringement of
the trademark. No such use, or the use of any trade name, is intended to convey endorsement or
other affiliation with this book.
Bootstrap is released under the MIT license and is copyright 2018 Twitter.

ISBN: 978-1-7322058-3-3
 Table of Contents
Bootstrap v4.2.1 1
Flexbox Reference 19
Colors Reference 33
Bootstrap v3.4.0 37
Resources 47
Notes 51

Design is a plan for arranging

elements in such a way
as best to accomplish
a particular purpose.
― Charles Eames
Hello.
Thank you for purchasing my Bootstrap Reference Guide.
Bootstrap is an amazing frontend framework that will save
you time and make creating responsive web projects
a lot easier.

Do you remember learning how to write a research paper?

Perhaps you learned how to follow the MLA or APA Style
Guide. Think how different the reports would look if each
student made up their own style and format?

Using the MLA Style guaranteed consistency for anyone who

followed that same format even if they were thousands of
miles away or written five years apart.

I believe Bootstrap works the same way for web design. It

helps developers work more efficiently and write CSS in a
clean and consistent manner regardless of where you live or
who you work for. It also ensures your website adheres to a
mobile first approach and works well across browsers and
devices.

Let's make a responsive web together!

Sign up to get notified of book updates and future training.

https://bootstrapcreative.com/signup
Bootstrap 4

BootstrapCreative.com :1
Bootstrap 4.2.1
CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/
bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj
70gZWKYbI706tWS" 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.3.1.slim.min.js" integrity="sha384-q8i/X+

965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></
script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.
js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
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
.text-nowrap No wrap text
(auto)
.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
and sets a bottom margin for blockquotes
/* Small devices (landscape phones, 576px .(h1, h2, h3, h4, h5, h6) Used to make an
and up) */ element match the heading styles
@media (min-width: 576px) { } .display-(1, 2, 3, 4) Large display text.
1=96px, 2=88px, 3=72px, 4=56px

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

BootstrapCreative.com :3
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

Borders .fixed-(top, bottom) Position an element

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 Overflow
or 1rem.
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
has a focused state
Add the letter n in from of the margin size
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 :5
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.2.1/
css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4
iYMj70gZWKYbI706tWS" 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 Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.
js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
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
<pre class="pre-scrollable">
Four Column Grid
Display multiple lines of code. Use .pre-
scrollable class to set a max-height of
<div class="container">
340px and provide a y-axis scrollbar
<div class="row">
<var>
<div class="col-sm-3"></div>
Used to display math variables
<div class="col-sm-3"></div>
<kbd>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
Used to display keyboard input
<samp>
</div>
</div> Used to display sample output

BootstrapCreative.com :7
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 :9
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 : 11
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
Tables
<table class="table">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>thead-dark</th>
</tr>
</thead>
Want to Save Time
<tbody>
<tr>
Using Bootstrap 4?
<th scope="row">1</th>
Get project templates, tutorial videos,
printable reference guides and more!
<td>Nina</td>
</tr>
</tbody>
</table>

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

Get a Free Book Sample

BootstrapQuickStart.com

BootstrapCreative.com : 13
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; }
}
 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,
.card-deck
danger, warning, info, light, dark)
.card-footer
.badge-pill
.card-group
.bg-(primary, secondary, success, danger,
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
.carousel-caption

BootstrapCreative.com : 15
Bootstrap 4
.carousel-control-(next, prev) .d-print-(block, inline, inline-block,
.carousel-control-(next, prev)-icon none, flex, inline-flex, table, table-
.carousel-fade cell, print-table-row)

.carousel-indicators .disabled

.carousel-inner .display-(1, 2, 3, 4)

.carousel-item .dropdown

.carousel-item-(left, right) .dropdown-divider

.carousel-item-(next, prev) .dropdown-header

.clearfix .dropdown-item

.close .dropdown-item-text

.col .dropdown-menu

.col-(sm, md, lg, xl)-(1-12) .dropdown-menu-right

.col-auto .dropdown-toggle

.col-form-label .dropdown-toggle-split

.col-form-label-(sm, lg) .dropleft

.collapse .dropright

.collapsing .dropup

.container .embed-responsive

.container-fluid .embed-responsive-(16by9, 1by1, 21by9,

4by3)
.custom-checkbox
.embed-responsive-item
.custom-control
.fade
.custom-control-inline
.figure
.custom-control-input
.figure-caption
.custom-control-label
.figure-img
.custom-file
.fixed-bottom
.custom-file-control
.fixed-top
.custom-file-input
.flex-(sm, md, lg, xl)-(row, row-reverse,
.custom-file-label
column)
.custom-radio
.flex-(sm, md, lg, xl)-(nowrap, wrap,
.custom-range wrap-reverse)
.custom-select .flex-column
.custom-select-(sm, lg) .flex-column-reverse
.custom-switch .flex-fill
.d-(sm, md, lg, xl)-(none, inline, inline- .flex-grow-*
block, block, table, table-cell, table-
.flex-shrink-*
row, flex, inline-flex)
.float-(sm, md, lg, xl)-(none, left,
 Bootstrap 4
right) end, center, between, around)
.focus .lead
.font-italic .list-group
.font-weight-(bold, light, normal) .list-group-flush
.form-check .list-group-item
.form-check-inline .list-group-item-action
.form-check-input .list-group-item-(primary, secondary,
.form-check-label success, danger, warning, info, light,
dark)
.form-control
.list-inline
.form-control-file
.list-inline-item
.form-control-(sm, lg)
.list-unstyled
.form-control-plaintext
.m(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2,
.form-control-range
3, 4, 5)
.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
.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
.invalid-tooltip
.nav
.invisible
.nav-fill
.is-invalid
.nav-item
.is-valid
.nav-justified
.jumbotron
.nav-link
.jumbotron-fluid
.nav-pills
.justify-content-(sm, md, lg, xl)-(start,

BootstrapCreative.com : 17
Bootstrap 4
.nav-tabs .shadow-(none, sm, lg)
.navbar .show
.navbar-brand .small
.navbar-collapse .sr-only
.navbar-(dark, light) .sr-only-focusable
.navbar-expand-(sm, md, lg, xl) .tab-content
.navbar-nav .tab-pane
.navbar-text .table
.navbar-toggler .table-active
.navbar-toggler-icon .table-bordered
.no-gutters .table-borderless
.offset-(sm, md, lg, xl)-(1-12) .table-hover
.order-(sm, md, lg, xl)-first .table-(primary, secondary, success,
.order-(sm, md, lg, xl)-last danger, warning, info, light, dark)

.order-(sm, md, lg, xl)-(0-12) .table-responsive-(sm, md, lg, xl)

.p(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, .table-sm

3, 4, 5) .table-striped
.page-item .text-(primary, secondary, success,
.page-link danger, warning, info, light, dark, muted,
white)
.pagination
.text-hide
.pagination-(sm, lg)
.text-justify
.popover
.text-(sm, md, lg, xl)-(center, left,
.popover-body
right)
.popover-header
.text-(lowercase, uppercase, capitalize,
.position-(absolute, fixed, relative, black-50, body, monospace, white-50)
static, sticky)
.text-nowrap
.pre-scrollable
.text-truncate
.progress
.text-warning
.progress-bar
.thead-dark
.progress-bar-animated
.thead-light
.progress-bar-striped
.tooltip
.rounded
.tooltip-inner
.rounded-(top, right, bottom, left,
.valid-feedback
circle, 0)
.valid-tooltip
.rounded-circle
.visible
.row
.w-(100, 75, 50, 25)
 Bootstrap 4
.was-validated
.w-auto

BootstrapCreative.com : 19
Bootstrap 4

Convert Pixels to REMS

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 1 41 2.5625
16 px
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
 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 : 21
Flexbox Reference

BootstrapCreative.com : 22
 Flexbox Reference

Flexbox Reference
Below is flexbox example markup. You could apply flexbox CSS properties manually, but things
can get cumbersome when you are trying to apply responsive functionality. The benefit of using
Bootstrap 4 flexbox utility classes is that you can set flexbox properties and target specific
breakpoints.

<div class="flex-container">
<div class="flex-item-a">flex item with a class .flex-item-a</div>
<div>flex item</div>
<div>flex item</div>
</div>

The following pages compares vanilla CSS flexbox to Bootstrap 4 flexbox utility classes to help
you decide which approach is best for your situation.

BootstrapCreative.com : 23
Flexbox Reference
Flex Container
Flex layout gives the container the ability to alter its items' width/height (and order) to best fill the
available space of the container.
The container has a main axis and cross axis which depends on the flex direction. Each axis has
a start and end. For example, if you set the flex direction to column. The main axis is vertical and
the cross axis is horizontal. If you set the flex direction to row, the main axis is horizontal and the
cross axis is vertical.

flex-direction: row flex-direction: column

C-Start M-Start
1 2 3 1

Main
2
Cross

3
M-Start M-End / C-End

Cross C-Start M-End / C-End

Main

flex-direction: row-reverse flex-direction: column-reverse

C-Start Main
3 2 1 C-Start
M-End / C-End

Main 3

2
Cross
M-End / C-End M-Start
1
Cross

M-Start
 Flexbox Reference
FLEXBOX CONTAINER

Step 1: Do you want the container to behave like a block

or inline element?

CSS Bootstrap 4

display: Use one or a combination of classes below

Docs: https://developer.mozilla.org/en-US/ to specify what breakpoints you would like
docs/Web/CSS/display#Values the properties to be applied.

flex Docs: http://getbootstrap.com/docs/4.0/

utilities/flex/#enable-flex-behaviors
makes the container act display block

inline-flex .d-flex

makes the container act display inline .d-inline-flex

.d-(sm, md, lg, xl)-(flex,
inline-flex)

BootstrapCreative.com : 25
Flexbox Reference
FLEXBOX CONTAINER

Step 2: Do you want your main axis to be vertical or horizontal?

CSS Bootstrap 4

flex-direction: Use one or a combination of classes below

Docs: https://developer.mozilla.org/en-US/ to specify what breakpoints you would like
docs/Web/CSS/flex-direction the properties to be applied.

row (default) Docs: http://getbootstrap.com/docs/4.0/

utilities/flex/#direction
left to right

row-reverse .flex-row

right to left .flex-row-reverse

.flex-column
column
.flex-column-reverse
top to bottom .flex-(sm, md, lg, xl)-(row, row-
column
reverse, column, column-reverse)

reverse = bottom to top

flex-direction: row flex-direction: column

C-Start M-Start
1 2 3 1

Main
2
Cross

3
M-Start M-End / C-End

Cross C-Start M-End / C-End

Main

flex-direction: row-reverse flex-direction: column-reverse

C-Start Main
3 2 1 C-Start
M-End / C-End

Main 3

2
Cross
M-End / C-End M-Start
1
Cross

M-Start
 Flexbox Reference
FLEXBOX CONTAINER

Step 3: How do you want the extra space to be distributed

along the main axis?

CSS Bootstrap 4

justify-content: Use one or a combination of classes below

Docs: https://developer.mozilla.org/en-US/ to specify what breakpoints you would like
docs/Web/CSS/justify-content the properties to be applied.

flex-start (default) Docs: http://getbootstrap.com/docs/4.0/

utilities/flex/#justify-content
items anchored to the start
.justify-content-start
flex-end
.justify-content-end
items anchored to the start .justify-content-center
center
.justify-content-between
.justify-content-around
items centered
.justify-content-(sm, md, lg, xl)-
(start, end, center, between, around)
space-between
items evenly distributed in the line. First item
in on the start and last item is at the end

space-around
start and end items are not to the edge but
have 1 unit of space on each side

space-evenly
similar to space-around, except all space is
the same

BootstrapCreative.com : 27
Flexbox Reference
FLEXBOX CONTAINER

Step 4: How do you want the extra space of LINES of items

to be distributed along the cross axis?

CSS Bootstrap 4

align-content: Use one or a combination of classes below

Docs: https://developer.mozilla.org/en-US/ to specify what breakpoints you would like
docs/Web/CSS/align-content the properties to be applied.

flex-start Docs: http://getbootstrap.com/docs/4.0/

utilities/flex/#align-content
items anchored to the start
.align-content-start
flex-end
.align-content-end
items anchored to the end
.align-content-center
center .align-content-around
items centered .align-content-stretch
.align-content-(sm, md, lg, xl)-
space-between (start, end, center, around,
stretch)
first line at the start of the container and the
last one is at the end

space-around
lines are evenly distributed with equal space
around each line

stretch (default)
lines stretch to take up the space that is left
 Flexbox Reference
FLEXBOX CONTAINER

Step 5: How do you want the extra space between items

to be distributed along the cross axis?

CSS Bootstrap 4

align-items: Use one or a combination of classes below

Docs: https://developer.mozilla.org/en-US/ to specify what breakpoints you would like
docs/Web/CSS/align-items the properties to be applied.

flex-start Docs: http://getbootstrap.com/docs/4.0/

utilities/flex/#align-items
cross axis align items to start
.align-items-start
flex-end
.align-items-end
cross axis align items to end
.align-items-center
center .align-items-baseline
cross axis align items center .align-items-stretch
.align-items-(sm, md, lg, xl)-(start,
baseline end, center, baseline, stretch)
align baselines

stretch (default)
stretch to fill the container

BootstrapCreative.com : 29
Flexbox Reference
FLEXBOX CONTAINER

Step 6: Do you want the items to wrap if they don't fit on one
line?

CSS Bootstrap 4

flex-wrap: Use one or a combination of classes below

Docs: https://developer.mozilla.org/en-US/ to specify what breakpoints you would like
docs/Web/CSS/flex-wrap the properties to be applied.

nowrap (default) Docs: http://getbootstrap.com/docs/4.0/

utilities/flex/#wrap
all items will try to stay on one line

wrap .flex-nowrap

if items don't fit they will wrap and create a .flex-wrap

new line below .flex-wrap-reverse
.flex-(sm, md, lg, xl)-(nowrap,
wrap-reverse
wrap, wrap-reverse)
if items don't fit they will wrap and create a
new line above

Shorthand property

This is a shorthand property that sets the flex-direction and flex-wrap properties. I
suggest avoid using this until you learn the core properties because it could make things more
confusing.

CSS Bootstrap 4

flex-flow: Since Bootstrap uses classes there is no

Docs: https://developer.mozilla.org/en-US/ shorthand property available.
docs/Web/CSS/flex-flow

< flex-direction > < flex-wrap >

example: flex-flow: column-reverse
wrap-reverse; or just flex-flow:
wrap-reverse;
 Flexbox Reference
Flex Item
Do you want to override the parent settings and give a specific item their own unique settings?
You will first need to write a custom class and add it to the item you would like to modify.

• Flexbox items follow the orders given by their container.

• By default, flex items all want to appear on the same line
• Individual flexbox items can be targeted with a unique class and property to override the
orders given by their container. The example below uses the class .flex-item-a to make
adjustments to only flex-item-a

Example:
HTML
<div class="flex-container">
<div class="flex-item-a">.flex-item-a</div>
<div class="flex-item-b">.flex-item-b</div>
<div class="flex-item-c">.flex-item-c</div>
</div>

CSS
.flex-item-a {
order: 3;
font-weight: bold;
}

Result

BootstrapCreative.com : 31
Flexbox Reference
FLEXBOX ITEM

Step 1: Do you want to change the order of this item relative

to the other items?

CSS Bootstrap 4

order: Use one or a combination of classes below

Docs: https://developer.mozilla.org/en-US/ to specify what breakpoints you would like
docs/Web/CSS/order the properties to be applied.

[number] Docs: http://getbootstrap.com/docs/4.0/

utilities/flex/#order
default is 0
.order-(1-12)
.order-sm-(1-12)
.order-md-(1-12)
.order-lg-(1-12)
.order-xl-(1-12)

FLEXBOX ITEM

Step 2: Do you want to have this item take up more space than
the other items?

CSS Bootstrap 4

flex-grow: No classes available

Docs: https://developer.mozilla.org/en-US/
docs/Web/CSS/flex-grow

[number]
default is 0
 Flexbox Reference
FLEXBOX ITEM

Step 3: Do you want this item to take less space than

the other items?

CSS Bootstrap 4

flex-shrink: No classes available

Docs: https://developer.mozilla.org/en-US/
docs/Web/CSS/flex-shrink

[number]
default is 0

FLEXBOX ITEM

Step 4: Do you want to set the default size of this item before
the other item sizes are set?

CSS Bootstrap 4

flex-basis: No classes available

Docs: https://developer.mozilla.org/en-US/
docs/Web/CSS/flex-basis

[length]
A number followed by px, em, rem, or %.
Check the docs for additional keywords

auto (default)
look at my width or height property

BootstrapCreative.com : 33
Flexbox Reference
FLEXBOX ITEM

Step 5: Do you want to override the align-items value

for this item?

CSS Bootstrap 4

align-self: Use one or a combination of classes below

Docs: https://developer.mozilla.org/en-US/ to specify what breakpoints you would like
docs/Web/CSS/align-self the properties to be applied.

auto Docs: http://getbootstrap.com/docs/4.0/

utilities/flex/#align-self
inherits the parent container's align-items
property .align-self-start
flex-start .align-self-end
.align-self-center
cross-start margin is on the cross start line
.align-self-baseline
flex-end .align-self-stretch
cross-end margin is on the cross end line .align-self-sm-(start, end, center,
baseline, stretch)
center .align-self-md-(start, end, center,
centers are aligned baseline, stretch)
.align-self-lg-(start, end, center,
baseline baseline, stretch)
baselines are aligned .align-self-xl-(start, end, center,
baseline, stretch)
stretch (default)
fill the container
 Flexbox Reference
Shorthand property

This is the shorthand for flex-grow, flex-shrink and flex-basis combined.

CSS Bootstrap 4

flex: Since Bootstrap uses classes there is no

Docs: https://developer.mozilla.org/en-US/ shorthand property available
docs/Web/CSS/flex

example:
Three values: flex-grow | flex-shrink | flex-
basis flex: 2 2 10%;

BootstrapCreative.com : 35
Colors Reference

BootstrapCreative.com : 36
 Colors Reference

Colors Reference
How to use RGBA in your CSS
.rgba-color {color: rgba(2, 117, 216, 0.5);}
RGBA is a lot like light shining through a stained glass window. The more light that shines
through the window, the brighter the color. The less light shining through the window, the color
becomes darker. RGBA stands for red, green, blue, and alpha. Each color has a maximum value
of 255. If all RGB values are the same you will have a gray value. The maximum value for Alpha is
1, which means 100%. A lower alpha value will allow background colors ot show through.

Code example: https://codepen.io/JacobLett/pen/eRPeyj

Key
A: Link hover J: Danger alert background
B: Input focus border color K: Warning
C: Primary L: Warning alert background
D: Primary alert background M: Info
E: Secondary N: Info alert background
F: Secondary alert background O: Light
G: Success P: Light alert background
H: Success alert background Q: Dark
I: Danger R: Dark alert background

BootstrapCreative.com : 37
Colors Reference
Primary
HEX A HEX B HEX
# 007bff # 0069d9 # 80bdff

RGB RGB RGB

0.123.255 0.105.217 128.189.255

Grays
HEX HEX HEX HEX
# fff # f8f9fa # e9ecef # dee2e6

RGB RGB RGB RGB

1.76.140 248.249.250 233.236.239 222.226.230

HEX HEX HEX HEX

# ced4da # adb5bd # 868e96 # 495057

RGB RGB RGB RGB

206.212.218 173.181.189 134.142.150 73.80.87

HEX HEX HEX

# 343a40 # 212529 # 000

RGB RGB RGB

52.58.64 33.37.41 0.0.0

Contextual
C HEX D HEX E HEX F HEX
# 007bff # cce5ff # 868e96 # e7e8ea

RGB RGB RGB RGB

0.123.255 204.229.255 134.142.150 231.232.234

G HEX H HEX I HEX J HEX

# 28a745 # d4edda # dc3545 # f8d7da

RGB RGB RGB RGB

40.167.69 212.237.218 220.53.69 248.215.218

K HEX L HEX M HEX N HEX

# ffc107 # fff3cd # 17a2b8 # d1ecf1

RGB RGB RGB RGB

255.193.7 255.243.205 23.162.184 209.236.241

O HEX P HEX Q HEX R HEX

# f8f9fa # fefefe # 343a40 # d6d8d9

RGB RGB RGB RGB

248.249.250 254.254.254 52.58.64 214.216.217
Colors Reference

BootstrapCreative.com : 39
Bootstrap 3

BootstrapCreative.com : 40
 Bootstrap 3

Bootstrap 3.4.0

CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/
bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X
6bXIkM++IkyinN+" crossorigin="anonymous">

JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></
script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"
integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw"
crossorigin="anonymous"></script>

CSS JavaScript Components

Typography Transitions Glyphicons Page header

Code Modal Dropdowns Thumbnails
Tables Dropdown Button groups Alerts
Forms Scrollspy Button dropdowns Progress bars
Buttons Tab Input groups Media object
Images Tooltip Navs List group
Helper classes Popover Navbar Panels
Responsive utilities Alert Breadcrumbs Responsive embed
Button Pagination Wells
Collapse Labels
Carousel Badges
Affix Jumbotron

BootstrapCreative.com : 41
Bootstrap 3
Grid Text & Images
.text-left Left aligned text
Basic grid - full width is 12 columns wide
.text-center Center aligned text
<!-- change .container to .container-fluid
.text-right Right aligned text
to be full width -->
.text-justify Justified text
<div class="container">
.text-nowrap No wrap text
<!-- Columns are always 50% wide, on
mobile and desktop --> .text-lowercause Lowercase text
<div class="row"> .text-uppercase Uppercase text
<div class="col-xs-6">.col-xs-6</div> .text-capitalize Capitalized text
<div class="col-xs-6">.col-xs-6</div> .lead Good for first paragraph of article
</div> .list-unstyled Removes default list
margin/padding
<!-- nested columns example -->
.list-inline Makes list items inline
<div class="row">
.dl-horizontal Makes list items two
<div class="col-xs-6">.col-xs-6</div>
columns
<div class="col-xs-6">.col-xs-6
.img-responsive Make an image responsive
<div class="row">
.img-rounded Adds rounded corners to
<div class="col-md-6">100% mobile image
50% everywhere else</div>
.img-circle Crops image to be circle
<div class="col-md-6">100% mobile
.img-thumbnail Adds rounded corner and
50% everywhere else</div>
border to an image
</div>
.pull-left Floats item left
</div>
.pull-right Floats item right
</div>
.center-block Set an elemennt to block
</div> with auto left and right margin
.clearfix Clear floats by adding this
Media queries
class to the parent container
/* Extra small devices (phones, less than
768px) No media query since this is the Blockquote
default in Bootstrap */
<blockquote><p>Lorem ipsum dolor</p>
/* small (tablets, 768px and up) */
<footer>Someone famous in <cite
@media (min-width: @screen-sm-min) { ... } title="Source Title">Source Title</
/* medium (desktops, 992px and up) */ cite></footer></blockquote>
@media (min-width: @screen-md-min) { ... }
Headings
/* large (large desktops, 1200px and up)
*/ <h1>h1. Bootstrap heading
<small>Secondary text</small></h1>
@media (min-width: @screen-lg-min) { ... }
<p class="h1">Paragraph that looks like
heading</p>
 Bootstrap 3
Navbar
<!-- Fixed top navbar with brand as logo image tags -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img alt="Brand" src="..."></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></
a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

BootstrapCreative.com : 43
Bootstrap 3
Forms
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">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,sm, xs) Large buttom, smaller than default button, even smaller
.btn-block Button that spans full width of parent

Example
<a class="btn btn-default" href="#" role="button">Link</a>
 Bootstrap 3
Carousel
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

BootstrapCreative.com : 45
Bootstrap 3
Jumbotron
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
To make the jumbotron full width, and without rounded corners, place it outside all
.containers and instead add a .container within.
<div class="jumbotron">
<div class="container">
...
</div>
</div>

Page header
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</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
<!-- 16:9 aspect ratio - change aspect ratio by replacing 16by9 with 4by3 -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
 Bootstrap 3
Tables
<!-- Responsive table with all of the options applied -->
<div class="table-responsive">
<table class="table table-condensed table-hover table-bordered table-striped">
<tr class="active">...</tr>
<tr>
<td class="info">...</td>
</tr>
</table>
</div>

BootstrapCreative.com : 47
Bootstrap 3
Alphabetical Index of CSS Classes

.active .caret
.affix .carousel
.alert .carousel-caption
.alert-danger .carousel-control
.alert-dismissible .carousel-indicators
.alert-info .carousel-inner
.alert-link .center-block
.alert-success .checkbox
.alert-warning .checkbox-inline
.arrow .close
.badge .col-lg-* /*(1-12)*/
.bg-danger .col-lg-offset-* /*(0-12)*/
.bg-info .col-lg-pull-* /*(0-12)*/
.bg-primary .col-lg-push-* /*(0-12)*/
.bg-success .col-md-* /*(1-12)*/
.bg-warning .col-md-offset-* /*(0-12)*/
.bottom .col-md-pull-* /*(0-12)*/
.breadcrumb .col-md-push-* /*(0-12)*/
.btn .col-sm-* /*(1-12)*/
.btn-block .col-sm-offset-* /*(0-12)*/
.btn-danger .col-sm-pull-* /*(0-12)*/
.btn-default .col-sm-push-* /*(0-12)*/
.btn-group .col-xs-* /*(1-12)*/
.btn-group-justified .col-xs-offset-* /*(0-12)*/
.btn-group-vertical .col-xs-pull-* /*(0-12)*/
.btn-info .col-xs-push-* /*(0-12)*/
.btn-link .collapse
.btn-primary .collapsing
.btn-sm .container
.btn-success .container-fluid
.btn-toolbar .control-label
.btn-warning .divider
.btn-xs .dropdown
.caption .dropdown-backdrop
 Bootstrap 3
.dropdown-header .img-thumbnail
.dropdown-menu .in
.dropdown-menu-left .initialism
.dropdown-menu-right .input-group
.dropdown-toggle .input-group-addon
.embed-responsive .input-group-btn
.embed-responsive-16by9 .input-lg
.embed-responsive-4by3 .input-sm
.fade .invisible
.form-control .item
.form-control-feedback .jumbotron
.form-control-static .label
.form-group .label-danger
.glyphicon .label-default
.glyphicon-chevron-left .label-info
.glyphicon-chevron-right .label-primary
.h1 .label-success
.h2 .label-warning
.h3 .lead
.h4 .left
.h5 .list-group
.h6 .list-group-item
.has-feedback .list-group-item-danger
.help-block .list-group-item-heading
.hidden .list-group-item-info
.hidden-lg .list-group-item-success
.hidden-md .list-group-item-text
.hidden-print .list-group-item-warning
.hidden-sm .list-inline
.hidden-xs .list-unstyled
.hide .mark
.icon-bar .media
.icon-next .media-body
.icon-prev .media-heading
.img-circle .media-list
.img-rounded .media-object

BootstrapCreative.com : 49
Bootstrap 3
.modal .pager
.modal-backdrop .pagination
.modal-body .panel
.modal-content .panel-body
.modal-dialog .panel-danger
.modal-footer .panel-default
.modal-header .panel-footer
.modal-lg .panel-group
.modal-open .panel-heading
.modal-scrollbar-measure .panel-info
.modal-sm .panel-primary
.modal-title .panel-success
.nav .panel-title
.nav-divider .panel-warning
.nav-justified .popover
.nav-tabs .popover-content
.nav-tabs-justified .popover-title
.navbar .pre-scrollable
.navbar-brand .prev
.navbar-btn .progress
.navbar-collapse .progress-bar
.navbar-default .progress-bar-danger
.navbar-fixed-bottom .progress-bar-info
.navbar-fixed-top .progress-bar-striped
.navbar-form .progress-bar-success
.navbar-header .progress-bar-warning
.navbar-inverse .pull-left
.navbar-left .pull-right
.navbar-link .right
.navbar-nav .row
.navbar-right .row-no-gutters
.navbar-static-top .show
.navbar-text .small
.navbar-toggle .sr-only
.next .tab-pane
.page-header .table
 Bootstrap 3
.table-bordered .visible-sm-inline
.table-responsive .visible-sm-inline-block
.text-capitalize .visible-xs
.text-center .visible-xs-block
.text-danger .visible-xs-inline
.text-hide .visible-xs-inline-block
.text-info .well
.text-justify .well-lg
.text-left .well-sm
.text-lowercase
.text-muted
.text-nowrap
.text-primary
.text-right
.text-success
.text-uppercase
.text-warning
.thumbnail
.tooltip
.tooltip-arrow
.tooltip-inner
.top
.visible-lg
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
.visible-md
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-print
.visible-print-block
.visible-print-inline
.visible-print-inline-block
.visible-sm
.visible-sm-block

BootstrapCreative.com : 51
Resources

BootstrapCreative.com : 52
 Resources
Design Inspiration CSS Reference
• Bootstrap Expo • Mozilla CSS Reference
https://expo.getbootstrap.com/ https://developer.mozilla.org/en-US/
• Built With Bootstrap docs/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
JavaScript Reference
• Mozilla JavaScript Reference
https://mediaqueri.es/
https://developer.mozilla.org/en-US/
• Pattern Tap docs/Web/JavaScript/Reference
http://zurb.com/patterntap
• jQuery Documentation
• CodePen Pattern Library https://api.jquery.com/
http://codepen.io/patterns/
• Building Blocks
http://foundation.zurb.com/building- Bootstrap Reference
blocks/ • Bootstrap 4 Classes Reference
https://bootstrapcreative.com/resourc-
es/bootstrap-4-css-classes-index/

HTML Reference • Bootstrap 3 Classes Reference

https://bootstrapcreative.com/resourc-
• Mozilla HTML Reference es/bootstrap-3-css-classes-index/
https://developer.mozilla.org/en-US/
• Official Bootstrap Documentation
docs/Web/HTML
http://getbootstrap.com/
• HTMLReference.io • Bootsnip - Bootstrap Code Snippets
https://htmlreference.io/ https://bootsnipp.com/

BootstrapCreative.com : 53
Resources

Want to improve the design of

your website or web application?

Learning HTML and CSS is a lot

more challenging than it used to be.
Responsive web design adds more
layers of complexity to design and
develop websites. In this book, you will
become familiar with the new cards
component, using the new flexbox
grid layout, customizing the look and
feel, how to follow the mobile-first
development workflow, and more!

Get a Free Book Sample

BootstrapQuickStart.com
 Resources

Bootstrap Snippets and

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

BootstrapCreative.com : 55
 Notes

BootstrapCreative.com : 56
 Notes

BootstrapCreative.com : 57
Notes
 Notes

BootstrapCreative.com : 59
Notes
 Notes

BootstrapCreative.com : 61
Notes
 Notes

BootstrapCreative.com : 63
Notes
 Notes

Find an error?
Or have a comment?
Contact support@bootstrapcreative.com

BootstrapCreative.com : 65