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/

Bootstrap Reference
• Building Blocks
http://foundation.zurb.com/building-
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