Grid

container
container-fluid
row
col-xs-# ( < 544px)
col-sm-# ( > 544px)
col-md-# ( > 768px)
col-lg-# ( > 992px)
col-xl-# ( > 1200px)
col-*-offset-#
col-*-push-#
col-*-pull-#

Tables
table
table-inverse
thead-inverse  for thead tag
thead-default  for thead tag
table-striped
table-bordered
table-hover
table-sm
table-responsive
table-reflow
table-active  tr
table-danger  tr
Table-success  tr

<table class="table table-inverse">

<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>

Images
img-fluid
img-rounded
img-circle
img-thumbnail
Forms
form-inline
form-group
form-control
form-control-file input type="file"
disabled
radio-inline
checkbox
checkbox-inline

<form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput"
placeholder="Jane Doe">

<label class="sr-only" for="inlineFormInputGroup">Username</label>

<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">@</div>
<input type="text" class="form-control" id="inlineFormInputGroup" disabled
placeholder="Username">
</div>

<div class="form-check mb-2 mr-sm-2 mb-sm-0">

<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

Buttons
btn-primary
btn-secondary
btn-link
btn-primary-outline
btn-secondary-outline
btn-success-outline
btn-info-outline
btn-warning-outline
btn-danger-outline

Breadcrumb
breadcrumb

<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>

Alerts
alert-success
alert-info
alert-warning
alert-danger
alert-link
alert-dismissible

<div class="alert alert-success alert-dismissable" >

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>

Dropdowns
dropdown
dropdown open
dropdown-header
dropdown-divider
dropdown-item disabled

List Group
list-group
list-group-item
list-group-item active
list-group-item disabled
list-group-item-success
list-group-item-danger
list-group-item-heading

<ul class="list-group">
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis
in</a>
</ul>

Modal
modal
modal fade
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#exampleModal">
Launch modal
</button>

<!-- Modal -->

<div class="modal fade" id="exampleModal" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="">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">
...
</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>

Utility Classes
text-justify
text-nowrap
text-*-left
text-*-right
text-lowercase
text-uppercase
text-capitalize
font-weight-bold
font-weight-normal
font-italic
text-muted
text-primary
text-success
text-info
text-warning
text-danger
bg-primary
bg-success
bg-info
bg-warning
bg-danger
bg-inverse
close
pull-*-left
pull-*-right
pull-*-none
center-block
clearfix
invisible
text-hide
embed-responsive

Carousel
carousel slide

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="images/logo.png" alt="Los Angeles" style="width:100%;">
</div>

<div class="item">
<img src="images/logo.png" alt="Chicago" style="width:100%;">
</div>

<div class="item">
<img src="images/logo.png" alt="New york" style="width:100%;">
</div>
</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Tooltip Example
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top"
title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom"
title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left"
title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right"
title="Hooray!">Right</a></li>
</ul>
</div>

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

Popover Example
<div class="container">
<h3>Popover Example</h3>
<ul class="list-inline">
<li><a href="#" title="Header" data-toggle="popover" data-placement="top"
data-content="Content">Top</a></li>
<li><a href="#" title="Header" data-toggle="popover" data-placement="bottom"
data-content="Content">Bottom</a></li>
<li><a href="#" title="Header" data-toggle="popover" data-placement="left"
data-content="Content">Left</a></li>
<li><a href="#" title="Header" data-toggle="popover" data-placement="right"
data-content="Content">Right</a></li>
</ul>
</div>

<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Bootstrap Navigation Components
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>