BOOTSTRAP3
What is Bootstrap?
Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many other,
as well as optional JavaScript plugins.
Bootstrap also gives you the ability to easily create responsive designs.
Steps
1. Add the HTML5 doctype
<!DOCTYPE html>
2. Bootstrap 3 is mobile-first
<meta name="viewport" content="width=device-width, initial-scale=1">
3. Containers
The .container class provides a responsive fixed width container
The .container-fluid class provides a full width container, spanning the
entire width of the viewport.
Linking file
<link rel="stylesheet"href="[Link]
bootstrap .[Link]">
<script src="[Link]
</script>
<script src="[Link]
</script>
Grid System
Bootstrap's grid system allows up to 12 columns across the page.
Grid Classes
The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
Ex.
<div class="container">
<div class="row">
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-xs-4" >.col-xs-4</div>
<div class="col-md-4" >.col-md-4</div>
<div class="col-lg-4" >.col-lg-4</div>
</div>
</div>
Text classes
Bootstrap also has some textual classes that can be used to provide meaning through
colors.
classes for text colours are:
text-muted, text-primary, text-success, text-info, text-warning, text-danger.
Ex. <p class="text-muted">This text is muted.</p>
Table classes
A basic Bootstrap table has a light padding and only horizontal dividers.
The table class adds basic styling to a table:
Classes : .table-striped, .table-bordered, .table-hover, .table-condensed, .table-
responsive.
Ex. <table class="table table-hover">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Image Shapes classes
The img-rounded class adds rounded corners to an image
The img-circle class shapes the image to a circle
The img-thumbnail class shapes the image to a thumbnail:
Ex: <img src="[Link]" class="img-thumbnail" alt="”>
Jumbotron
A jumbotron indicates a big box for calling extra attention to some special content
or information.
A jumbotron is displayed as a grey box with rounded corners. It also enlarges the
font sizes of the text inside it.
Ex :
<div class="jumbotron">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
PageHeader
A page header is like a section divider. The .page-header class adds a horizontal line
under the heading
Ex:
<div class="page-header">
<h1>Example Page Header</h1>
</div>
Wells
The .well class adds a rounded border around an element with a gray background
color and some padding. Change the size of the well by adding the .well-sm class
for small wells or .well-lg class for large wells
Ex: <div class="well">Basic Well</div>
Alerts
Bootstrap provides an easy way to create predefined alert messages Alerts are
created with the .alert class, followed by one of the four contextual classes .alert-
success, .alert-info, .alert-warning or .alert-danger
Ex:
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
To close the alert message, add a .alert-dismissible class to the alert container.
Buttons
To achieve the button styles above, Bootstrap has the following classes:
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
The classes that define the different sizes are:
• .btn-lg
• .btn-md
• .btn-sm
• .btn-xs
Active/Disabled Buttons
A button can be set to an active (appear pressed) or a disabled (unclickable) state:
The class .active makes a button appear pressed, and the class .disabled makes a
button unclickable:
Ex. <button type="button" class="btn btn-default">Default</button>
Button Groups
Use a <div> element with class .btn-group to create a button group. Use the
class .btn-group-vertical to create a vertical button group
Ex:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
</div>
Glyphicons
Bootstrap provides 260 glyphicons from the Glyphicons Halflings set. Glyphicons
can be used in text, buttons, toolbars, navigation, forms, etc.
Ex .Envelope glyphicon: envelope ,Print glyphicon: print
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
Badges
Badges are numerical indicators of how many items are associated with a link
Ex:
<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
Labels
Use the .label class, followed by one of the six contextual classes .label-
default, .label-primary, .label-success, .label-info, .label-warning or .label-danger,
within a <span> element
Ex:
<span class="label label-default">Default Label</span>
Progress Bar
A progress bar can be used to show a user how far along he/she is in a process.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-
valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
Pagination
If you have a web site with lots of pages, you may wish to add some sort of
pagination to each page.
Ex. <ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
Breadcrumbs
Another form for pagination, is breadcrumbs:
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
Pager
Pager provides previous and next buttons (links).
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value
from a predefined list
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" datatoggle=
"dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Collapsible
Collapsibles are useful when you want to hide and show large amount of content
Ex .
<button type="button" class="btn btn-info" data-toggle="collapse" data-target =
"#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
Menus
Most web pages have some kind of a menu.
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page.A
standard navigation bar is created with <nav class="navbar navbar-default">
Ex.
<nav class="navbar navbar-inverse">
<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>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign
Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log in"> /span>Login </a>
</li> </ul>
</div>
</nav>
Forms
All textual <input>, <textarea>, and <select> elements with class .form
Control have a width of 100%.
Standard rules for all three form layouts:
Wrap labels and form controls in <div class="form-group"> (needed for
optimum spacing)
Add class .form-control to all textual <input>, <textarea>,
and <select> elements
Ex.
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Media Objects
Bootstrap provides an easy way to align media objects (like images or videos) to the
left or to the right of some content.
Use a <div> element with the .media class to create a container for media objects.
Use the .media-left class to align the media object (image) to the left, or the .media-
right class to align it to the right.
Text that should appear next to the image, is placed inside a container with
class="media-body". class .media-heading for headings.
Ex.
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Carousel Plugin
The Carousel plugin is a component for cycling through elements, like a carousel
(slideshow).
Ex.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="[Link]" alt="Los Angeles">
</div>
<div class="item">
<img src="[Link]" alt="Chicago">
</div>
<div class="item">
<img src="[Link]" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<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>
Scrollspy Plugin
The Scrollspy plugin is used to automatically update links in a navigation list based
on scroll position.
