Scribd
Upload
59 views

BootStrap Intro

The document describes various Bootstrap components for layout, navigation, images, forms, buttons, alerts and more. It provides the classes for grid systems like containers, rows and columns. It also includes examples of tables, images, forms, buttons, breadcrumbs, alerts, dropdowns, modals and other UI elements.

Uploaded by

asad ar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

BootStrap Intro

The document describes various Bootstrap components for layout, navigation, images, forms, buttons, alerts and more. It provides the classes for grid systems like containers, rows and columns. It also includes examples of tables, images, forms, buttons, breadcrumbs, alerts, dropdowns, modals and other UI elements.

Uploaded by

asad ar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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>

You might also like