CH 5 BOOTSTRAP

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web
development. It uses HTML, CSS and JavaScript.

History:

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released as an open-source
product in August 2011 on GitHub.

Why use Bootstrap?

➢ Mobile first approach: Since Bootstrap 3, the framework consists of Mobile first styles throughout
the entire library instead of in separate files.
➢ Browser Support: It is supported by all popular browsers.
➢ Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap.
Also, the Bootstrap official site has a good documentation.
➢ Responsive design: Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles. More about
responsive design in the chapter Bootstrap Responsive Design

• Provides a clean and uniform solution for building an interface for developers.

• It contains beautiful and functional built-in components which are easy to customize.

• It also provides web-based customization.

• And best of all it is an open source.

What Bootstrap Package Includes?

➢ Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, background. This is
covered in detail in the section Bootstrap Basic Structure.
➢ CSS: Bootstrap comes with feature of global CSS settings, fundamental HTML elements styled and
enhanced with extensible classes, and an advanced grid system. This is covered in detail in the section
Bootstrap with CSS.
➢ Components: Bootstrap contains over a dozen reusable components built to provide iconography,
dropdowns, navigation, alerts, popovers, and much more. This is covered in detail in the section
Layout Components.
➢ JavaScript Plugins: Bootstrap contains over a dozen custom jQuery plugins. You can easily include
them all, or one by one. This is covered in details in the section Bootstrap Plugins.
➢ Customize: You can customize Bootstrap's components, LESS variables, and jQuery plugins to get your
very own version.

Download Bootstrap
You can download the latest version of Bootstrap from http://getbootstrap.com/. When you click on this link,
you will get to see a screen as below:

Here you can see two buttons:

• Download Bootstrap: Clicking this, you can download the precompiled and minified versions of
Bootstrap CSS, JavaScript, and fonts. No documentation or original source code files are included.
• Download Source: Clicking this, you can get the latest Bootstrap LESS and JavaScript source code
directly from GitHub.

BOOTSTRAP LAYOUT:

1. Containers
Use class .container to wrap a page's content and easily center the content's as shown below.
<div class="container">
...
</div>
Take a look at the .container class in bootstrap.css file:
.container {padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Note that, due to padding and fixed widths, containers are not nestable by default. Take a look at
bootstrap.css file:
@media (min-width: 768px)
{
.container
width: 750px;
}
Here you can see that CSS has media-queries for containers with width. This helps for applying
responsiveness and within those the container class is modified accordingly to render the grid system
properly.

2. ROW AND COLUMNS

Rows and columns are also known as grid.

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:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 spa

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big
screen it might look better with the content organized in three columns, but on a small screen it would be
better if the content items were stacked on top of each other.
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)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only
need to specify xs.

Grid System Rules

Some Bootstrap grid system rules:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-

width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate
children of rows
• Predefined classes like .row and .col-sm-4 are available for quickly making grid
layouts
• Columns create gutters (gaps between column content) via padding. That padding is
offset in rows for the first and last column via negative margin on .rows
• Grid columns are created by specifying the number of 12 available columns you wish
to span. For example, three equal columns would use three .col-sm-4
• Column widths are in percentage, so they are always fluid and sized relative to their
parent element

ADVERTISEMENT

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>

So, to create the layout you want, create a container (<div class="container">). Next, create
a row (<div class="row">). Then, add the desired number of columns (tags with
appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for
each row.

3. Responsive Classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via
media query. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use
them to complement each device's presentation.
Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Extra small Medium

devicesPhones Small devicesTablets devicesDesktops Large devicesDesktops
(<768px) (≥768px) (≥992px) (≥1200px)

.visible-xs-* Visible Hidden Hidden Hidden

.visible-sm-* Hidden Visible Hidden Hidden

.visible-md-* Hidden Hidden Visible Hidden

.visible-lg-* Hidden Hidden Hidden Visible

Extra small Medium
devicesPhones Small devicesTablets devicesDesktops Large devicesDesktops
(<768px) (≥768px) (≥992px) (≥1200px)

.hidden-xs Hidden Visible Visible Visible

.hidden-sm Visible Hidden Visible Visible

.hidden-md Visible Visible Hidden Visible

.hidden-lg Visible Visible Visible Hidden

As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each
CSS display property value listed below.

Group of classes CSS display

.visible-*-block display: block;

.visible-*-inline display: inline;

.visible-*-inline-block display: inline-block;

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-
inline, and .visible-xs-inline-block.
The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They
are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-
related elements.

4. Offset columns
Offsets are a useful feature for more specialized layouts. They can be used to push columns over for more
spacing, for example. The .col-xs=* classes don’t support offsets, but they are easily replicated by using an
empty cell. To use offsets on large displays, use the .col-md-offset-* classes. These classes increase the left
margin of a column by * columns where * range from 1 to 11. In the following example we have <div
class="col-md-6">..</div>, we will center this using class .col-md-offset-3.

<div class="container">

<h1>Hello, world! </h1>

<div class="row" >
<div class="col-xs-6 col-md-offset-3" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div>
OUTPUT:

5. Column Reordering
Another nice feature of Bootstrap grid system is that you can easily write the columns in an order,
and show them in another one. You can easily change the order of built-in grid columns with .col-md-
push-* and .col-md-pull-* modifier classes where * range from 1 to 11. In the following example we
have two-columns layout with left column being the narrowest and acting as sidebar. We will swap
the order of these columns using .col-md-push-* and .col-md-pull-* classes.

<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<p>Before Ordering</p>
<div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
I am on left
</div>
<div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
I am on right
</div>
</div> <br>
<div class="row">
<p>After Ordering</p>
<div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on left
</div>
<div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on right
</div>
</div>
</div>

OUTPUT:

BOOTSTRAP CONTENT

1. Typography:

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif in its default font stack. Using typography
feature of Bootstrap you can create headings, paragraphs, lists and other inline elements. Let see each one
these in the following sections:

Headings :
All HTML headings (h1 to h6) are styled in Bootstrap. An example is as shown below:
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>
Above code segment with Bootstrap will produce following result:
NOTE: All html tag used in typography and run it.

2. Tables:
Bootstrap provides a clean layout for building
tables. Some of the table elements supported
by Bootstrap are:

Tag Description

<table> Wrapping element for displaying data in a tabular format

<thead> Container element for table header rows (<tr>) to label table
columns
<tbody> Container element for table rows (<tr>) in the body of the
table
<tr> Container element for a set of table cells (<td> or <th>) that
appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope
and placement) labels. Must be used within a <thead>

<caption> Description or summary of what the table holds.

Basic Table
If you want a nice, basic table style with just some light padding and horizontal dividers, add the base class of
.table to any table as shown in the following example:
<table class="table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>

OUTPUT:

NOTES: All tables contain in this chapters.

2.Images

Bootstrap 3 allows to make the images responsive by adding a class .img-responsive to the <img>tag. This
class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
Example:
<img src="..." class="img-responsive" alt="Responsive image">

3.Forms
Bootstrap provides you with following types of form layouts:
• Vertical (default) form
• Inline form
• Horizontal form

VERTICAL OR BASIC FORM

The basic form structure comes with Bootstrap; individual form controls automatically receive some global
styling. To create a basic form do the following:
• Add a role form to the parent <form> element.
• Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing.
• Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.

<form role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="inputfile">File input</label>
<input type="file" id="inputfile">
<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>

Output

INLINE FORM
To create a form where all of the elements are inline, left aligned and labels are alongside, add the class
.form-inline to the <form> tag.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">File input</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label> <input type="checkbox"> Check me out </label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Output

Notes: Same as a html forms all tag and horizontal alignments.

Bootstrap natively supports the most common form controls mainly input, textarea, checkbox, radio, and
select.

➢ INPUTS
The most common form text field is the input—this is where users will enter most of the essential form data.
Bootstrap offers support for all native HTML5 input types: text, password, datetime, datetime-local, date,
month, time, week, number, email, url, search, tel, and color. Proper type declaration is required to make
Inputs fully styled.
EXAMPLE:
<form role="form">
<div class="form-group">
<label for="name">Label</label>
<input type="text" class="form-control" placeholder="Text input">
</div>
</form>

OUTPUT:

Notes: Same as a html forms all tag.

Bootstrap Components
1. Navigation
The Navbar is a nice feature, and is one of the prominent features of Bootstrap sites. Navbars are responsive
meta components that serve as navigation headers for your application or site. Navbars collapse in mobile
views and become horizontal as the available viewport width increases. At its core, the navbar includes
styling for site names and basic navigation.

➢ Default navbar
To create a default navbar:

• Add classes .navbar, .navbar-default to the <nav> tag.

• Add role="navigation" to the above element, to help with accessibility.
• Add a header class .navbar-header to the <div> element. Include an <a> element with classnavbar-
brand. This will give the text a slightly larger size.
• To add links to the navbar, simply add an unordered list with a classes of .nav, .navbar-nav.

Following example demonstrates this:

<nav class="navbar navbar-default" role="navigation">

<div class="navbar-header">
<a class="navbar-brand" href="#">Tutorialspoint</a>
</div>
<div> <ul class="nav navbar-nav">
<li class="active">
<a href="#">iOS</a>
</li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>

OUTPUT:
➢ Responsive navbar
To add the responsive features to the navbar, the content that you want to be collapsed needs to be wrapped
in a <div> with classes .collapse, .navbar-collapse. The collapsing nature is tripped by a button that has a the
class of .navbar-toggle and then features two data- elements. The first, data-toggle, is used to tell the
JavaScript what to do with the button, and the second, data-target, indicates which element to toggle. Three
with a class of .icon-bar create what I like to call the hamburger button. This will toggle the elements that are
in the .nav-collapse <div>. For this feature to work, you need to include the Bootstrap Collapse Plugin.
Following example demonstrates this:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-
collapse">
<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="#">TutorialsPoint</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">iOS</a>
</li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>

OUTPUT:

2. Navbar and Tabs:

In this chapter we will discuss about how Bootstrap provides a few different options for styling navigation
elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class,
to share markup and states. Swap modifier classes to switch between each style.
Tabular Navigation or Tabs
• To create a tabbed navigation menu:
• Start with a basic unordered list with the base class of .nav
• Add class .nav-tabs.
Following example demonstrates this:
<p>Tabs Example</p>
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
OUTPUT:

Horizontal Navigation
To turn the tabs into pills, follow the same steps as above, use the class .nav-pills instead of .nav-tabs.
Following example demonstrates this: <p>Pills Example</p>

<ul class="nav nav-pills">

<li class="active">
<a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
OUTPUT:

NOTES: Same as Vertical navigation.

3. Dropdown
This chapter will highlight about Bootstrap dropdown menus. Dropdown menus are toggleable,
contextual menus for displaying links in a list format.
This can be made interactive with the dropdown JavaScript plugin. To use dropdown, just wrap the
dropdown menu within the class .dropdown.
Following example demonstrates a basic dropdown menu:

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-
toggle="dropdown"> Topics
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a> </li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Mining</a> </li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#"> Data Communication/Networking </a> </li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a> </li>
</ul>
</div>
OUTPUT:

4. Buttons
This chapter will discuss about how to use Bootstrap button with examples. Anything that is given a
class of .btn will inherit the default look of a gray button with rounded corners. However Bootstrap
provides some options to style buttons, which are summarized in the following table:

Class Description
Btn Default/ Standard button.
btn-primary Provides extra visual weight and
identifies the primary action in a set of
buttons.
btn-success Indicates a successful or positive action.
btn-info Contextual button for informational
alert messages.
btn-warning Indicates caution should be taken with
this action.
btn-danger Indicates a dangerous or potentially
negative action.
btn-link Deemphasize a button by making it look
like a link while maintaining button
behavior

5. Button Groups:
Button groups allow multiple buttons to be stacked together on a single line. This is useful when you
want to place items like alignment buttons together. You can add on optional JavaScript radio and
checkbox style behavior with Bootstrap Button Plugin. Following table summarizes the important
classes Bootstrap provides to use button groups:

Class Description Code Sample

.btn-group This class is used form a basic<div class="btn-group">
button group. Wrap a series <button type="button"
of buttons with class .btn class="btn btn-
in.btn-group. default">Button1</button>
<button type="button"
class="btn btn-
default">Button2</button>
</div>
.btn-toolbar This helps to combine sets of <div class="btn-toolbar"
<div class="btn-group"> into a role="toolbar"> <div
<div class="btn-toolbar"> for class="btn-group">...</div>
more complex components. <div class="btn-
group">...</div> </div>
.btn-group-lg, .btn-group- These classes can be applied <div class="btn-group btn-
sm, .btn-group-xs to button group instead of group-lg">...</div> <div
resizing each button. class="btn-group btn-group-
sm">...</div> <div class="btn-
group btn-group-xs">...</div>
.btn-group-vertical This class make a set of <div class="btn-group-
buttons appear vertically vertical"> ... </div>
stacked rather than
horizontally.

EXAMPLE:

<div class="btn-group btn-group-lg">

<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">Button 4</button>
<button type="button" class="btn btn-default">Button 5</button>
<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">Button 7</button>
<button type="button" class="btn btn-default">Button 8</button>
<button type="button" class="btn btn-default">Button 9</button>
</div>

OUTPUT:

NOTES: SAME AS ALL BUTTON EFFECTS.

6. Breadcrumb
Breadcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs,
breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page's
location within a navigational hierarchy. A breadcrumb in Bootstrap is simply an unordered list with a
class of .breadcrumb. The separator is automatically added by CSS (bootstrap.min.css) through the
following class:

.breadcrumb > li + li:before {

color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}

Following example demonstrates breadcrumbs:

<ol class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">2013</a>
</li>
<li class="active">November</li>
</ol>

OUTPUT:
7. Pagination.
Pagination, an unordered list is handled by Bootstrap like a lot of other interface elements.

The following table lists the classes Bootstrap provides to handle pagination.

Class Description Sample code

.pagination Add this class to get the <ul class="pagination">
pagination on your page. <li><a
href="#">&laquo;</a></li
> <li><a
href="#">1</a></li>
....... </ul>
.disabled, .active You can customize links by <ul class="pagination">
using.disabled for unclickable <li class="disabled"><a
links and .activeto indicate the href="#">&laquo;</a></li
current page. > <li class="active"><a
href="#">1<span
class="sr-
only">(current)</span></
a></li> ....... </ul>
.pagination-lg, .pagination-sm Use these classes to get <ul class="pagination
different size items. pagination-lg">...</ul>
<ul
class="pagination">...</
ul> <ul
class="pagination
pagination-sm">...</ul>

DEFAULT PAGINATION
Following example demonstrates the use of class .pagination discussed in the above table:
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>

OUTPUT:

8. Labels
Labels are great for offering counts, tips, or other markup for pages. Use class.
label to display labels as shown in the following example:
<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>

OUTPUT:

You can the appearance of the labels using the modifier classes label-default, label-primary,
label-success, label-info, label-warning, label-danger as shown in the following example:
<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

OUTPUT:

9. Alerts
Alerts provide a way to style messages to the user. They provide contextual feedback messages
for typical user actions.

You can add an optional close icon to alert. For inline dismissal use the Alerts jQuery plugin. You
can add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the
four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

The following example demonstrates this:

<div class="alert alert-success">Success! Well done its
submitted.</div>
<div class="alert alert-info">Info! take this info.</div>
<div class="alert alert-warning">Warning ! Dont submit this.</div>
<div class="alert alert-danger">Error ! Change few things.</div>
OUTPUT:
Links in Alerts
To get links in alerts:
➢ Add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four
contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger)
➢ Use the .alert-link utility class to quickly provide matching colored links within any alert.

<div class="alert alert-success">

<a href="#" class="alert-link">Success! Well done its submitted.</a>
</div>
<div class="alert alert-info">
<a href="#" class="alert-link">Info! take this info.</a> </div>
<div class="alert alert-warning">
<a href="#" class="alert-link">Warning ! Dont submit this.</a> </div>
<div class="alert alert-danger"> <a href="#" class="alert-link">Error !
Change few things.</a> </div>
OUTPUT:

10. Progress Bars

The purpose of progress bars is to show that assets are loading, in progress, or that there is action taking
place regarding elements on the page. Progress bars use CSS3 transitions and animations to achieve
some of their effects. These features are not supported in Internet Explorer 9 and below or older versions
of Firefox. Opera 12 does not support animations.
Default Progress Bar
To create a basic progress bar:
➢ Add a <div> with a class of .progress.
➢ Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
➢ Add a style attribute with the width expressed as a percentage. Say for example,
style="60%"; indicates that the progress bar was at 60%.

Let us see an example below:

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-
valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% Complete</span>
</div>
</div>
OUTPUT:

Animated Progress Bar

To create an animated progress bar:
➢ Add a <div> with a class of .progress and .progress-striped. Also add class .active
to.progress-striped.
➢ Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
➢ Add a style attribute with the width expressed as a percentage. Say for example, style="60%";
indicates that the progress bar was at 60%.

This will animate the stripes right to left. Let us see an example below:
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-
valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:
40%;">
<span class="sr-only">40% Complete</span>
</div> </div>
OUTPUT:

Bootstrap Utilities
1. Colors
As described in the Colors chapter, here is a list of all text and background color
classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-
info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-
body (default body color/often black) and .text-light:
<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"><
/script>

</head>

<body>

<div class="container mt-3">

<h2>Contextual Colors</h2>

<p>Use the contextual classes to provide "meaning through colors":</p>

<p class="text-muted">This text is muted.</p>

<p class="text-primary">This text is important.</p>

<p class="text-success">This text indicates success.</p>

<p class="text-info">This text represents some information.</p>

<p class="text-warning">This text represents a warning.</p>

<p class="text-danger">This text represents danger.</p>

<p class="text-secondary">Secondary text.</p>

<p class="text-dark">This text is dark grey.</p>

<p class="text-body">Default body color (often black).</p>

<p class="text-light">This text is light grey (on white background).</p>

<p class="text-white">This text is white (on white background).</p>

</div>

</body>

</html>

OUTPUT:

2.Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-
warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>
</div>

</body>
</html>
OUTPUT:

3.Borders
Use the border classes to add or remove borders from an element:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></scri
pt>

<style>

span {

display: inline-block;

width: 70px;

height: 70px;

margin: 6px;

background-color: #f9f9f9;

</style>

</head>

<body>

<div class="container mt-3">

<h2>Borders</h2>

<p>Use the border classes to add or remove borders from an element:</p>

<span class="border"></span>

<span class="border border-0"></span>

<span class="border border-top-0"></span>

<span class="border border-end-0"></span>

<span class="border border-bottom-0"></span>

<span class="border border-start-0"></span>

<br>

<span class="border-top"></span>

<span class="border-end"></span>

<span class="border-bottom"></span>

<span class="border-start"></span>

</div>

</body>

</html>

OUTPUT:

4.Overflow
Barebones overflow functionality is provided for two values by default, and they are not responsive.
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

5. Position
Use these shorthand utilities for quickly configuring the position of an element.

Common values
Quick positioning classes are available, though they are not responsive.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
Fixed top
Position an element at the top of the viewport, from edge to edge. Be sure you understand the
ramifications of fixed position in your project; you may need to add additional CSS.

<div class="fixed-top">...</div>
Fixed bottom
Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the
ramifications of fixed position in your project; you may need to add additional CSS.

<div class="fixed-bottom">...</div>

6. Spacing
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to
modify an element’s appearance.

How it works
Assign responsive-friendly margin or padding values to an element or a subset of its sides with
shorthand classes. Includes support for individual properties, all properties, and vertical and
horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.

Notation
Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in
them. This is because those classes are applied from min-width: 0 and up, and thus are not bound
by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-
{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

• m - for classes that set margin

• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top

• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0

• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Examples
Here are some representative examples of these classes:

.mt-0 {
margin-top: 0 !important;
}

.ml-1 {
margin-left: ($spacer * .25) !important;
}

.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}

.p-3 {
padding: $spacer !important;
}

7.Vertical Align
Use the align- classes to change the alignment of elements (only works on inline, inline-
block, inline-table and table cell elements):

Example

baseline top middle bottom text-top text-bottom.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">

<h1>Vertical Align</h1>
<p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table
and table cell elements):</p>
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
</div>

</body>
</html>

OUTPUT: