Bootstrap

P IYUSH M ISHRA

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

Bootstrap History
Bootstrap was developed by Mark Otto and
Jacob Thornton at Twitter, and released as an
open-source product in August 2011 on
GitHub.
Why Use Bootstrap?
Advantages of Bootstrap:

• Easy to use: Anybody with just basic

knowledge of HTML and CSS can start using
Bootstrap
• Responsive features: Bootstrap's responsive
CSS adjusts to phones, tablets, and desktops
• Browser compatibility: Bootstrap is
compatible with all modern browsers (Chrome,
Firefox, Internet Explorer, Safari, and Opera)

Where to Get Bootstrap?

There are two ways to start using Bootstrap on your own web site.

You can:

• Download Bootstrap from getbootstrap.com

• Include Bootstrap from a CDN

for cdn links

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Setting the Viewport

The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone
than on a computer screen.

You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary
depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta
tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the
difference.

Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns
across the page.
 If you do not want to use all 12 columns
individually, you can group the columns together
to create wider columns:
Bootstrap's grid system is responsive, and the
columns will re-arrange automatically depending

span span span span span span span span span span span s
1 1 1 1 1 1 1 1 1 1 1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

on the screen size.

Grid Classes
The Bootstrap grid system has four classes:

• xs (for phones)
 • sm (for tablets)
• md (for desktops)
• lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible
layouts.
<div class="row">

<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>

<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>

<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>

</div>

Bootstrap Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Striped Rows
The .table-striped class adds zebra-stripes to a table:
Bordered Table
The .table-bordered class adds borders on all sides of the table
and cells:
Hover Rows
The .table-hover class adds a hover effect (grey background
color) on table rows:

Condensed Table
The .table-condensed class makes a table more compact by
cutting cell padding in half:

Alerts
Bootstrap provides an easy way to create predefined alert messages:

Success! This alert box indicates a successful or positive action.

Info! This alert box indicates a neutral informative change or action.

Warning! This alert box indicates a warning that might need attention.

Danger! This alert box indicates a dangerous or potentially negative action.

Alerts are created with the .alert class, followed by one of the four contextual
classes .alert-success, .alert-info, .alert-warning or .alert-danger:

Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a
successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">

<strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">

<strong>Danger!</strong> Indicates a dangerous or potentially negative
action.
</div>

Button Styles
Bootstrap provides seven styles of
buttons:
To achieve the button styles above,
Bootstrap has the following classes:

• .btn-default
• .btn-primary
• .btn-success
• .btn-info
 • .btn-warning
• .btn-danger
• .btn-link
The following example shows the code for the different button styles:

Example

<button type="button" class="btnbtn

-default">Default</button>
<button type="button" class="btnbtn-primary">Primary</button>
<button type="button" class="btnbtn-success">Success</button>
<button type="button" class="btnbtn-info">Info</button>
<button type="button" class="btnbtn-warning">Warning</button>
<button type="button" class="btnbtn-danger">Danger</button>
<button type="button" class="btnbtn-link">Link</button>

Button Sizes
Bootstrap provides four button sizes:

Large, Medium, Small, XSmall

The classes that define the different sizes are:

• .btn-lg
• .btn-md
 • .btn-sm
• .btn-xs

Bootstrap Forms
Bootstrap's Default Settings
Form controls automatically receive some global
styling with Bootstrap:

All textual <input>, <textarea>,

and <select> elements with class .form-
control have a width of 100%.

Bootstrap Form Layouts

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

<form>
<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="btnbtn-default">Submit</button>
</form>

When used together with the <label> element, the for attribute specifies
which form element a label is bound to.

Bootstrap Modal Plugin

The Modal Plugin
The Modal plugin is a dialog box/popup window that is displayed on top of the
current page:

How To Create a Modal

The following example shows how to create a basic modal:

<!-- Trigger the modal with a button -->

<button type="button" class="btnbtn-info btn-lg" data-
toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->

<div id="myModal" class="modal fade">
<div class="modal-dialog">

<!-- Modal content-->

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-
dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btnbtn-default" data-
dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

Example Explained
The "Trigger" part:

To trigger the modal window, you need to use a button or a link.

Then include the two data-* attributes:

• data-toggle="modal" opens the modal window

• data-target="#myModal" points to the id of the modal

The "Modal" part:

The parent <div> of the modal must have an ID that is the same as the value of
the data-target attribute used to trigger the modal ("myModal").

The .modal class identifies the content of <div> as a modal and brings focus to
it.

The .fade class adds a transition effect which fades the modal in and out.
Remove this class if you do not want this effect.

The .modal-dialog class sets the proper width and margin of the modal.

modal-sm

The "Modal content" part:

The <div> with class="modal-content" styles the modal (border, background-

color, etc.). Inside this <div>, add the modal's header, body, and footer.

The .modal-header class is used to define the style for the header of the
modal. The <button> inside the header has a data-dismiss="modal" attribute
which closes the modal if you click on it. The .close class styles the close
button, and the .modal-title class styles the header with a proper line-height.

The .modal-body class is used to define the style for the body of the modal.
Add any HTML markup here; paragraphs, images, videos, etc.

The .modal-footer class is used to define the style for the footer of the modal.
Note that this area is right aligned by default.

Bootstrap Navigation Bar

Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page:

With Bootstrap, a navigation bar can extend or collapse, depending on the

screen size.

A standard navigation bar is created with <nav class="navbar

navbar-default">.
The following example shows how to add a navigation bar to the top of the page
<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>

Inverted Navigation Bar

If you don't like the style of the default navigation bar, Bootstrap provides an
alternative, black navbar:
<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 3</a></li>
</ul>
</div>
</nav>

Navigation Bar With Dropdown

Navigation bars can also hold dropdown menus.

The following example adds a dropdown menu for the "Page 1" button:

<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 class="dropdown">
<a class="dropdown-toggle" data-
toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

Right-Aligned Navigation Bar

The .navbar-right class is used to right-align navigation bar buttons.

In the following example we insert a "Sign Up" button and a "Login" button to
the right in the navigation bar. We also add a glyphicon on each of the two new
buttons:
<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>

Navbar Buttons
To add buttons inside the navbar, add the .navbar-btn class on a Bootstrap button:

Example
<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="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>

Navbar Forms
To add form elements inside the navbar, add the .navbar-form class to a form
element and add an input(s). Note that we have added a .form-group class to
the div container holding the input. This adds proper padding if you have more
than one inputs (you will learn more about this in the Forms chapter).

Example
<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>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>

Fixed Navigation Bar

The navigation bar can also be fixed at the top or at the bottom of the page.

A fixed navigation bar stays visible in a fixed position (top or bottom)

independent of the page scroll.

The .navbar-fixed-top class makes the navigation bar fixed at the top:

<nav class="navbar navbar-inverse navbar-fixed-

top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-
brand" href="#">WebSiteName</a>
</div>
<ul class="navnavbar-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>

Collapsing The Navigation Bar

The navigation bar takes up too much space on a small screen.

We should hide the navigation bar; and only show it when it is needed.

In the following example the navigation bar is replaced by a button in the top
right corner. Only when the button is clicked, the navigation bar will be
displayed:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<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>
<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>
</div>
</nav>

Bootstrap Carousel Plugin

The Carousel Plugin
The Carousel plugin is a component for cycling through elements, like a
carousel (slideshow).

How To Create a Carousel

The following example shows how to create a basic carousel:
<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="la.jpg" alt="Los Angeles">
</div>

<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>

<div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div>
 <!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphiconglyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphiconglyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

Example Explained
The outermost <div>:

Carousels require the use of an id (in this case id="myCarousel") for carousel
controls to function properly.

The class="carousel" specifies that this <div> contains a carousel.

The .slide class adds a CSS transition and animation effect, which makes the
items slide when showing a new item. Omit this class if you do not want this
effect.

The data-ride="carousel" attribute tells Bootstrap to begin animating the

carousel immediately when the page loads.

The "Left and right controls" part:

This code adds "left" and "right" buttons that allows the user to go back and
forth between the slides manually.

The data-slide attribute accepts the keywords "prev" or "next", which alters
the slide position relative to its current position.