Bootstrap [part 1]

What is web Framework?
• A web framework (WF) or web application
framework (WAF) is a software framework that is
designed to support the development of web
applications including web services, web resources,
and web APIs.
• For example, many web frameworks provide libraries
for database access, templating frameworks, and
session management, and they often promote code
reuse.

Types……
• Model–view–controller (MVC)
• Push-based vs. pull-based
• Three-tier organization

Web framework of Bootstrap
• Bootstrap is a free and open-source front-end web
framework for designing websites and web
applications.
• Unlike many web frameworks, it concerns itself with
front-end development only.

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.

Responsive web design
• Responsive web design is about creating web sites
which automatically adjust themselves to look good
on all devices, from small phones to large desktops.

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.
• In June 2014 Bootstrap was the No.1 project on
GitHub!

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.
• Mobile-first approach: In Bootstrap 3, mobile-first
styles are part of the core framework.
• Browser compatibility: Bootstrap is compatible with
all modern browsers (Chrome, Firefox, Internet
Explorer, Safari, and Opera).

Downloading and Installing Bootstrap
• Where to get Bootstrap?
• Other ways to get Bootstrap?

Where to get Bootstrap?
• We can easily download the bootstrap set up file from
the internet.
• The site were we can get the bootstrap file is:
http://getbootstrap.com/

Where to get Bootstrap?(cont….)

Where to get Bootstrap?(cont….)
• Click on Download Bootstrap.
• Once the Downloading is completed you can see 3
folders:
1. Css
2. Fonts
3. Js

Other ways to get Bootstrap?
• Bootstrap CDN(Content Delivery Network).

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

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

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

Build Your First Bootstrap Website With The
Basic Template
1. Minimum Bootstrap page
2. Basic Bootstrap template
3. More Bootstrap sample templates

1. Minimum Bootstrap Page
Add the HTML5 doctype
• Bootstrap uses HTML elements and CSS properties
that require the HTML5 doctype.
• Always include the HTML5 doctype at the beginning
of the page, along with the lang attribute and the
correct character set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

1. Minimum Bootstrap Page(cont….)
Bootstrap 3 is mobile-first
• Bootstrap 3 is designed to be responsive to mobile
devices. Mobile-first styles are part of the core
framework.
• To ensure proper rendering and touch zooming, add
the following <meta> tag inside the <head> element.
<meta name="viewport"
content="width=device-width,
initial-scale=1“>

1. Minimum Bootstrap Page(cont….)
Container
• Bootstrap also requires a containing element to wrap
site contents.
• There are two container classes to choose from:
1. The .container class provides a responsive fixed
width container
2. The .container-fluid class provides a full width
container, spanning the entire width of the viewport

• <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script
>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>

2. Basic Bootstrap Template
• There are basic three bootstrap template.
1. Blog.
2. Portfolio.
3. Webpage.

3.More Bootstrap Sample Templates
• There are more three basic bootstrap templates
1. Social.
2. Marketing.
3. Online Store.

Normalize CSS
• Normalize.css is a small CSS file that provides better
cross-browser consistency in the default styling of
HTML elements. It’s a modern, HTML5-ready,
alternative to the traditional CSS reset.
• Normalize.css is currently used in some form
by Twitter Bootstrap, HTML5
Boilerplate, GOV.UK, Rdio, CSS Tricks, and many
other frameworks, toolkits, and sites.

The aims of normalize.css are as follows:
• Preserve useful browser defaults rather than erasing
them.
• Normalize styles for a wide range of HTML
elements.
• Correct bugs and common browser inconsistencies.
• Improve usability with subtle improvements.
• Explain the code using comments and detailed
documentation.
• It supports a wide range of browsers (including
mobile browsers) and includes CSS that normalizes
HTML5 elements, typography, lists, embedded
content, forms, and tables.

Resetting or Normalizing Default Styles
• Two ways to level differences between default
browser style sheets:
– Begin main style sheet with a CSS reset that
effectively sets all the default element styles to
“zero.”
– Begin main style sheet with normalize.css, which
tweaks default styles to look very similar across
browsers.

How to use Normalize CSS
• First, install or download normalize.css from GitHub.
There are then 2 main ways to make use of it.
• Approach 1: use normalize.css as a starting point for
your own project’s base CSS, customising the values
to match the design’s requirements.
• Approach 2: include normalize.css untouched and
build upon it, overriding the defaults later in your
CSS if necessary.

What is Grid??
• In graphic design, a grid is a structure (usually two-
dimensional) made up of a series of intersecting
straight ( vertical, horizontal, and angular) or curved
guide lines used to structure content.
• The grid serves as an framework on which
a designer can organize graphic elements
(images, glyphs, paragraphs, etc.) in a rational, easy-
to-absorb manner.
• A grid can be used to organize graphic elements in
relation to a page, in relation to other graphic
elements on the page, or relation to other parts of the
same graphic element or shape.

• Grid Lines
• Grid Tracks
• Grid Lines are the lines
that make up the grid.
These can be horizontal
or vertical. We can refer
to them by number, or
by name.
• A Grid Track is the
space between two Grid
Lines, either horizontal
or vertical

• Grid Cell
• Grid Area
• A Grid Cell is the space
between 4 Grid Lines.
So it is the smallest unit
on our grid that is
available for us to place
an item into.
Conceptually it is just
like a table cell.
• A Grid Area is any area
on the Grid bound by
four grid lines. It may
contain a number of
Grid Cells.

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:

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.

Basic Structure of a Bootstrap Grid
• <div class="container">
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
</div>

Bootstrap Grid with Fluid container: Small
Devices
<!DOCTYPE html>
<html lang="en">
<head>
content="width=device-width, initial-
scale=1">
href="https://maxcdn.bootstrapcdn.com/bo
otstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/
jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bo
otstrap/3.3.7/js/bootstrap.min.js"></script
>
</head>
<div class="container-fluid">
<h1>Small Grid</h1>
<p>The following example will result in a
25%/75% split on small, medium and
large devices. On extra small devices, it
will stack (100% width).</p>
<p>Resize the browser window to see the
effect.</p>
<div class="row">
<div class="col-sm-3" style="background-
color:yellow;">
HELLO WORLD
</div>
<div class="col-sm-9" style="background-
color:pink;">
HELLO TANVI
</div>
</div>
</div>
</body>
</html>

Output:
After resizing the screen:

Bootstrap Grid Example: Medium Devices
<!DOCTYPE html>
<html lang="en">
<head>
scale=1">
<script
<script
>
</head>
<body>
<h1>Medium Grid</h1>
25%/75% split on small devices and a
50%/50% split on medium (and large)
devices. On extra small devices, it will
automatically stack (100%).</p>
<div class="row">
<div class="col-sm-3 col-md-6"
style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. </div>
<div class="col-sm-9 col-md-6"
style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium
doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae
dicta sunt explicabo </div></div></div>
</body></html>

Bootstrap Grid Example:Only Medium Devices
<!DOCTYPE html>
<html lang="en">
<head>
scale=1">
<script
<script
otstrap/3.3.7/js/bootstrap.min.js"></scrip>
</head>
<body>
<h1>Medium Grid</h1>
50%/50% split on medium and large
devices. On small (and extra small)
devices, it will automatically stack
(100%).</%).</p>
<div class="row">
<div class="col-md-6" style="background-
color:yellow;">
aliqua. </div>
<div class="col-md-6" style="background-
color:pink;">
dicta sunt explicabo </div></div></div>
</body></html>

Bootstrap Grid Example: Large Devices
<!DOCTYPE html>
<html lang="en">
<head>
scale=1">
href="https://maxcdn.bootstrapcdn.com/boots
trap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jqu
ery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootst
rap/3.3.7/js/bootstrap.min.js"></script>
</head>
</body>
<h1>Large Grid</h1>
25%/75% split on small devices, a 50%/50%
split on medium devices, and a 33%/66%
split on large devices. On extra small devices,
it will automatically stack (100%).</p>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4"
style="background-color:yellow;">
incididunt ut labore et dolore magna aliqua.
</div>
<div class="col-sm-9 col-md-6 col-lg-8"
style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.
</div></div></div>
</body></html>

Bootstrap Grid Example: Large Devices
<!DOCTYPE html>
<html lang="en">
<head>
scale=1">
<script
<script
>
</head>
</body>
<h1>Large Grid</h1>
50%/50% split on large devices. On
medium, small and extra small devices, it
will automatically stack (100%).</p>
<p>Resize the browser window to see the
effect.</p> <div class="row">
<div class="col-lg-6" style="background-
color:yellow;">
aliqua. </div>
<div class=" col-lg-6" style="background-
color:pink;">
dicta sunt explicabo. </div></div></div>
</body></html>

What is Responsive Web Design or Layout
• Responsive web design is a process of designing and
building websites to provide better accessibility and
optimal viewing experience to the user.
• Responsive web design is a preferable alternative and
an efficient way to target a wide range of devices with
much less efforts.
• Responsive layouts automatically adjust and adapts to
any device screen size

Creating Responsive Layout with Bootstrap
• new Bootstrap 3 mobile first grid system creating the
responsive and mobile friendly websites has become
much easier.
• you don't need to include any additional style sheet
to enable responsive feature.
• Its four tiers grids classes provides better control
over the layout as well as how it will be rendered on
different types of devices

Bootstrap - Labels
• Labels are great for offering counts, tips, or other
Informations for pages.
• Use class .label to display labels

Labels using Modifier Classes
• In Bootstrap, we can get different types of variations
to change appearance of the inline labels. These can
be listed as follows:
• label-default
• label-primary
• label-success Example
• label-info
• label-warning
• label-danger

<!DOCTYPE html>
<head>
<title>Bootstrap Case</title>
scale=1">
href="https://maxcdn.bootstrapcdn.com/b
ootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs
/jquery/3.1.1/jquery.min.js"></script>
<script
otstrap/3.3.7/js/bootstrap.min.js">
</script>s
</head>
<body>
<h2>Contextual Label Classes</h2>
<span class="label label-
default">Default Label</span>
primary">Primary Label</span>
success">Success Label</span>
<span class="label label-info">Info
Label</span>
warning">Warning Label</span>
danger">Danger Label</span>
</div>
</body>
</html>

Bootstrap - Badges
• Badges are mainly used to highlight new or unread
items. To use badges just add <span class = "badge">
Example

<!DOCTYPE html>
<head>
scale=1">
href="https://maxcdn.bootstrapcdn.com/b
ootstrap/3.3.7/css/bootstrap.min.css">
<script
<script
>
</head>
<body>
<h3>Bootstrap - Badges</h3>
<ul class = "nav nav-pills">
<li class = "active">
<a href = "#">Mailbox
<span class = "badge">50</span>
</a></li>
<li><a href = "#">Profile</a></li>
<li><a href = "#">Messages
<span class = "badge">3</span>
</a></li>
</ul>
</body>
</html>

Bootstrap - Panels
• Panel components are used when you want to put
your DOM component in a box
• Panels are created with the .panel class, and content
inside the panel has a .panel-body class:

Bootstrap - Panels
• Panels with Heading
You can also add a heading to your panel with .panel-
heading class.
You can also include heading elements from <h1> to
<h6> with a .panel-title class.
• Panels with Footer
The .panel-footer class can be used to wrap buttons or
secondary text.
• Panels with Contextual States
Like other component you also add contextual state
classes like .panel-primary, .panel-success, .panel-info,
.panel-warning, or .panel-danger

<head>
scale=1">
href="http://maxcdn.bootstrapcdn.com/bo
<script
<script
src="http://maxcdn.bootstrapcdn.com/boo
tstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{in:35px;}
</style></head>
<body><div class="bs-example">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">301 Moved
Permanently</h3>
</div>
<div class="panel-body">The requested
page has been permanently moved to a
new location.</div>
</div>
<div class="panel panel-success">
<h3 class="panel-title">302
OK</h3>
</div>
<div class="panel-body">The server
successfully processed the request.</div>
</div>

<div class="panel panel-info">
Continue</h3>
</div>
<div class="panel-body">The client
should continue with its
request.</div>
</div>
<div class="panel panel-warning">
Bad Request</h3>
</div>
<div class="panel-body">The
request cannot be fulfilled due to bad
syntax.</div>
</div>
<div class="panel panel-danger">
<h3 class="panel-title">503 Service
Unavailable</h3>
</div> <div class="panel-
body">The server is temporarily
unable to handle the request.</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<a href="#" class="btn btn-
primary">Learn More</a>
<a href="#" class="btn btn-
default">Go Back</a>
</div> </div></div></div>
</body>
</html>

Bootstrap - Wells
• A well is a container in <div> that causes the content
to appear sunken or an inset effect on the page.
• The .well class adds a rounded border around an
element with a gray background color and some
padding

Bootstrap - Wells
• Sizing
You can change the size of well using the optional
classes such as,well-lg or well-sm. These classes are
used in conjunction with .well class. These affect the
padding, making the well larger or smaller depending
on the class.

<!DOCTYPE html>
<head>
scale=1">
href="https://maxcdn.bootstrapcdn.co
m/bootstrap/3.3.7/css/bootstrap.min.c
ss">
<script
src="https://ajax.googleapis.com/ajax
/libs/jquery/3.1.1/jquery.min.js"></sc
ript>
<script
src="https://maxcdn.bootstrapcdn.co
m/bootstrap/3.3.7/js/bootstrap.min.js"
></script>
</head>
<body>
<h2>Well Size</h2>
<div class="well well-sm">Small
Well</div>
<div class="well">Normal
Well</div>
<div class="well well-lg">Large
Well</div>
</div>
</html>

Bootstrap - Jumbotron
• A jumbotron indicates a big box for calling extra
attention to some special content or information.
• Inside a jumbotron you can put nearly any valid
HTML, including other Bootstrap elements/classes.
• To use the Jumbotron −
• Create a container <div> with the class
of .jumbotron.

Bootstrap - Jumbotron
• Jumbotron Inside Container
Place the jumbotron inside the <div class="container">
if you want the jumbotron to NOT extend to the edge of
the screen:
• Jumbotron Outside Container
Place the jumbotron outside the <div class="container">
if you want the jumbotron to extend to the screen edges:

Jumbotron Inside Container
<div class = "container">
<div class = "jumbotron">
<h1>Welcome to Bootstrap
Tutorial!</h1>
<p>This is an example for
jumbotron.</p>
<p>
<a class = "btn btn-primary btn-
lg" role = "button">Learn more</a>
</p>
</div>
</div>
Jumbotron Outside Container
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to Bootstrap
Tutorial!</h1>
<p>This is an example for
jumbotron.</p>
<p>
<a class = "btn btn-primary btn-
lg" role = "button">Learn more</a>
</p>
</div>
</div>

Bootstrap Text/Typography
Class Description
<h1> - <h6> Bootstrap will style the HTML headings (<h1> to <h6>)
<small> In Bootstrap the HTML <small> element is used to create
a lighter, secondary text in any heading
<mark> Use the <mark> tag if you want to highlight parts of your
text.
<dl> The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines
terms/names) and <dd> (describes each term/name).
<code> The <code> tag is a phrase tag. It defines a piece of
computer code.
<kbd> Defines keyboard input.
<pre> Text in a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line
breaks.

.lead Makes a paragraph stand out
.small Indicates smaller text (set to 85% of the
size of the parent)
.text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text-capitalize Indicates capitalized text
.pre-scrollable Makes a <pre> element scrollable
.dl-horizontal Lines up the terms (<dt>) and descriptions
(<dd>) in <dl> elements side-by-side.
Starts off like default <dl>s, but when the
browser window expands, it will line up
side-by-side

• <abbr>:
<html lang="en">
<head>
scale=1">
href="https://maxcdn.bootstrap
cdn.com/bootstrap/3.3.7/css/bootstrap
. min.css">
<script
src="https://ajax.googleapis.co
m/ajax/libs/jquery/3.1.1/jquery.min.js
></script>
<script
></script>
</head>
<body>
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up
an abbreviation or acronym:</p>
<p>The <abbr title="World Health
Organization">WHO</abbr> was
founded in 1948.</p>
</div>
</body>
</html>

Bootstrap Basic Table
• A basic Bootstrap table has a light
padding and only horizontal dividers.
• The .table class adds basic styling to a
table:
<html lang="en">
<head>
scale=1">
ss">
<script
src="https://ajax.googleapis.com/ajax/
libs/jquery/3.1.1/jquery.min.js"></scri
pt>
<script
></script>
</head>
<body>
<h2>Basic Table</h2>
<p>The .table class adds basic styling
(light padding and only horizontal
dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>

</tr>
</tbody>
</table>
</div>
</body>
</html>

Striped Rows
<html lang="en">
<head>
scale=1">
ss">
<script
pt>
<script
></scrip>
</head><body>
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-
stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>

Bordered Table
<html lang="en">
<head>
scale=1">
ss">
<script
pt>
<script
></script>
</head>
<body>
<h2>Bordered Table</h2>
<p>The .table-bordered class adds
borders to a table:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>

Bootstrap Images
• There are basically three different class to represent
an image they are as follow:
1. Rounded Corners.
2. Circle.
3. Thumbnail.

1. Rounded Corners
• This class helps us to give a smooth rounded vertex in
an image.
• It is represented by img-rounded
– Sysntax:
<img src=“mount.jpg" class="img-rounded"
width="304" height="236">

2. Circle
• This class helps us to give a circular image.
• It is represented by img-circle
– Sysntax:
<img src=“mount.jpg" class="img-circle"

3. Thumbnail
• This class shapes the image to a thumbnail.
• It is represented by img-thumbnail
– Syntax:
<img src=“mount.jpg" class="img-thumbnail"

<h2>Circle</h2>
<p>The img-circle class shapes the image to a circle (not available in
IE8):</p>
<img src="mount.jpg" class="img-circle" width="304" height="236">
</div>
<h2>Thumbnail</h2>
<p>The img-thumbnail class shapes the image to a thumbnail:</p>
<img src="mount.jpg" class="img-thumbnail" width="304"
height="236">
</div>

Bootstrap Alert
• Bootstrap provides an easy way to create predefined
alert messages.
• Alerts are created with the .alert class, followed by of
the four contextual classes .alert-success, .alert-info,
.alert-warning or .alert-danger.

div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box
could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could
indicate a neutral informative change or
action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box
could indicate a warning that might need
attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box
could indicate a dangerous or potentially
negative action.
</div>

Alert Links
• Add the .alert-link class to any links inside the
alert box to create "matching colored links"

<h2>Alert Links</h2>
<p>Add the alert-link class to any links inside the alert box to create "matching colored links".</p>
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-info">
<strong>Info!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> You should <a href="#" class="alert-link">read this message</a>.</div>
<div class="alert alert-danger">
<strong>Danger!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Button group
• Bootstrap allows you to group a series of buttons
together (on a single line) in a button group.
• Use a <div> element with class .btn-group to create a
button group

Closing Alerts
• To close the alert message, add a .alert-
dismissable class to the alert container. Then
add class=“close” and data-dismiss=“alert” to
link or a button element (when you click on
this the alert box will disappear).

Animated Alerts
• The .fade and .in classes adds a fading effect
when closing the alert message

<h2>Animated Alerts</h2>
<p>The .fade and .in classes adds a fading
effect when closing the alert message.</p>
<div class="alert alert-success alert-
dismissable fade in">
<a href="#" class="close" data-
dismiss="alert" aria-
label="close">×</a>
<strong>Success!</strong> This alert box
could indicate a successful or positive action.
</div>
<div class="alert alert-info alert-dismissable
fade in">
<strong>Info!</strong> This alert box could
indicate a neutral informative change or
action.
</div>
<div class="alert alert-warning alert-
<strong>Warning!</strong> This alert
box could indicate a warning that might
need attention.
</div>
<div class="alert alert-danger alert-
<strong>Danger!</strong> This alert
box could indicate a dangerous or
potentially negative action.
</div>
</div>

Bootstrap Buttons
1. Button Styles
• Bootstrap provides seven styles of buttons
• To achieve the button styles above, Bootstrap
has the following classes:
1. .btn-default
2. .btn-primary
3. .btn-success
4. .btn-info
5. .btn-warning
6. .btn-danger
7. .btn-link

<h2>Button Styles</h2>
<button type="button" class="btn
btn-default">Default</button>
btn-primary">Primary</button>
btn-success">Success</button>
btn-info">Info</button>
btn-warning">Warning</button>
btn-danger">Danger</button>
btn-link">Link</button>
</div>

Bootstrap Button
2. Block Level Button
• A block level button spans the entire width of
the parent element.
• Add class .btn-block to create a block level
button

<h2>Block Level Buttons</h2>
<button type="button" class="btn btn-
primary btn-block">Button 1</button>
<button type="button" class="btn btn-default
btn-block">Button 2</button>
<h2>Large Block Level Buttons</h2>
primary btn-lg btn-block">Button 1</button>
btn-lg btn-block">Button 2</button>
<h2>Small Block Level Buttons</h2>
primary btn-sm btn-block">Button 1</button>
btn-sm btn-block">Button 2</button>
</div>

Bootstrap Button
3. 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.

<h2>Button States</h2>
btn-primary">Primary
Button</button>
btn-primary active">Active
Primary</button>
btn-primary disabled">Disabled
Primary</button>
</div>

Bootstrap Button Groups
• Bootstrap allows you to group a series of buttons
together (on a single line) in a button group.

Example…….
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport“
content="width=device-width, initial-scale=1">
href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/
3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3
.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Button Group</h2>
<p>The .btn-group class creates a button
group:</p>
<div class="btn-group">
primary">Apple</button>
primary">Samsung</button>
primary">Sony</button>
</div>
</div>
</body>
</html>

NOTE: Instead of applying button sizes to every
button in a group, use class .btn-group-
lg|sm|xs to size all buttons in the group.

Example….
<h2>Button Groups - Set
Sizes</h2>
<p>Add class .btn-group-* to size
all buttons in a button group.</p>
<h3>Large Buttons:</h3>
<div class="btn-group btn-group-
lg">
btn-primary">Apple</button>
btn-primary">Samsung</button>
btn-primary">Sony</button>
</div>
<h3>Default Buttons:</h3>
</div>
h3>Small Buttons:</h3>
sm">
</div>

Vertical Button Groups example…
<h2>Vertical Button Group</h2>
<p>Use the .btn-group-vertical class
to create a vertical button group:</p>
<div class="btn-group-vertical">
</div>
</div>

Justified Button Groups
• Note: For <button> elements, you must wrap each
button in a .btn-group class

Example…..
<h2>Justified Button Groups</h2>
justified">
</div>
</div>
</div>
</div>
</div>

Nesting Button Groups & Dropdown Menus
<h2>Nesting Button Groups</h2>
<p>Nest button groups to create drop down
menus:</p>
primary dropdown-toggle" data-
toggle="dropdown">
Sony <span
class="caret"></span></button>
<ul class="dropdown-menu"
role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>

Split Button Dropdowns
<h2>Split Buttons</h2>
btn-primary dropdown-toggle" data-
toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu"
role="menu">
<li><a href="#">Tablet</a></li>
<li><a
href="#">Smartphone</a></li>
</ul>
</div>
</div>

Glyphicons
• Bootstrap provides 260 glyphicons from
the Glyphicons Halflings set.
• Glyphicons can be used in text, buttons, toolbars,
navigation, forms, etc.
• Syntax:
• <span class="glyphicon glyphicon-name"></span>

Example….
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span
class="glyphicon glyphicon-
envelope"></span></p>
<p>Envelope icon as a link:
<a href="#"><span class="glyphicon
glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span
search"></span></p>
<p>Search icon on a button:
default">
<span class="glyphicon glyphicon-
search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
info">
search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon
glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success
btn-lg">
<span class="glyphicon glyphicon
print"></span> Print
</a>
</p>
</div>

Bootstrap Progress Bars
Progress Bar With Label
<h2>Progress Bar With Label</h2>
<div class="progress">
<div class="progress-bar"
role="progressbar" aria-
valuenow="70" aria-valuemin="0"
aria-valuemax="100"
style="width:70%">
70%
</div>
</div>

Colored Progress Bars
• Contextual classes are used to provide "meaning
through colors".
• The contextual classes that can be used with progress
bars are:
• .progress-bar-success
• .progress-bar-info
• .progress-bar-warning
• .progress-bar-danger

Example….
<h2>Colored Progress Bars</h2>
<p>The contextual classes colors the progress bars:</p>
<div class="progress-bar progress-bar-success" role="progressbar" aria-
valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>

Animated Progress Bar
<h2>Animated Progress Bar</h2>
<p>The .active class animates the
progress bar:</p>
<div class="progress-bar progress-
bar-striped active" role="progressbar"
aria-valuenow="40" aria-
valuemin="0" aria-valuemax="100"
style="width:40%">
40%
</div>

Stacked Progress Bars
<h2>Stacked Progress Bars</h2>
<p>Create a stacked progress bar by placing
multiple bars into the same div with class
.progress:</p>
<div class="progress-bar progress-bar-success"
role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-
warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger"
role="progressbar" style="width:20%">
Danger
</div>
</div>

Bootstrap - Pagination
• If you have a web site with lots of pages, you may
wish to add some sort of pagination to each page.
• A basic pagination in Bootstrap looks like this:

• To create a basic pagination, add
the .pagination class to an <ul> element.
• <ul class="pagination">
<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>
</ul>

Active state
• The active state shows what is the current page.
• Class .active is used to let the user know which page
he/she is on.

Disabled state
• A disabled link cannot be clicked.
• Add class .disabled if a link for some reason is
disabled.

• Pagination Sizing
• Pagination blocks can also be sized to a larger
size or a smaller size.
• Add class .pagination-lg for larger blocks
or .pagination-sm for smaller blocks:

• Breadcrumbs
• Another form for pagination, is breadcrumbs.
• The .breadcrumb class indicates the current
page's location within a navigational
hierarchy.

Bootstrap Pager
• Pager is also a form of pagination.
• Pager provides previous and next buttons
(links).
• To create previous/next buttons, add
the .pager class to an <ul> element:

• Align Buttons
• Use the .previous and .next classes to align each
button to the sides of the page:
• <ul class="pager">
<li class="previous"><a href="#">Previous</a>
</li>
<li class="next"><a href="#">Next</a></li>
</ul>

Bootstrap List Groups
• Basic List Groups
• The most basic list group is an unordered list
with list items:

• To create a basic list group, use an <ul> element
with class .list-group, and <li> elements with
class .list-group-item:
• <ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>

List Group With Badges
• You can also add badges to a list group. The badges
will automatically be positioned on the right:

• To create a badge, create a <span> element with
class .badge inside the list item.
<li class="list-group-
item">New <span class="badge">12</span></li>
item">Deleted <span class="badge">5</span></li>
item">Warnings <span class="badge">3</span></li>
</ul>

Active & Disabled
• Use the .active class to highlight the current item.
• To disable an item, use the .disabled class.

• <div class="list-group">
<a href="#" class="list-group-item active">First
item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third
item</a>
</div>

• <div class="list-group">
<a href="#" class="list-group-item
disabled">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third
item</a>
</div>

Contextual Classes
• Contextual classes can be used to color
list items:

• The classes for coloring list-items are: .list-group-
item-success, list-group-item-info, list-group-
item-warning, and .list-group-item-danger.
<li class="list-group-item list-group-item-
success">First item</li>
info">Second item</li>
warning">Third item</li>
danger">Fourth item</li>
</ul>

Bootstrap Dropdown
• A dropdown menu is a toggleable menu that allows
the user to choose one value from a predefined list.

Example
• <div class="dropdown">
<button class="btn btn-primary dropdown-
toggle" type="button" data-
toggle="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>

• The .dropdown class indicates a dropdown menu.
• To open the dropdown menu, use a button or a
link with a class of .dropdown-toggle and
the data-toggle="dropdown" attribute.
• The .caret class creates a caret arrow icon, which
indicates that the button is a dropdown.
• Add the .dropdown-menu class to a <ul> element
to actually build the dropdown menu.

Dropdown Divider
• The .divider class is used to separate links inside
the dropdown menu with a thin horizontal
border:
• <li class="divider"></li>

Dropdown Header
• The .dropdown-header class is used to add
headers inside the dropdown menu:
• <li class="dropdown-header">Dropdown header
1</li>

• Dropdown Position
• <ul class="dropdown-menu dropdown-menu-
right">
• Dropup
• If you want the dropdown menu to expand
upwards instead of downwards, change the
<div> element with class="dropdown"
to "dropup":

Bootstrap Tabs and Pills
• Bootstrap provides an easy and quick way to create
basic nav components like tabs and pills which are
very flexible and elegant. All the Bootstrap's nav
components—tabs and pills—share the same base
markup and styles through the base .nav class.
• Tabs are created with <ul class="nav nav-tabs“

Bootstrap Tabs
• Tabs can also hold dropdown menus.
• You can also add icons to your tabs to make it more
attractive.

<!DOCTYPE html><head>
initial-scale=1">
href="https://maxcdn.bootstrapcdn.
com/bootstrap/3.3.7/css/bootstrap.m
in.css">
<script
src="https://ajax.googleapis.com/aja
x/libs/jquery/3.1.1/jquery.min.js"><
/script><scriptsrc="https://maxcdn.
bootstrapcdn.com/bootstrap/3.3.7/js
/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle" data-
toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<li><a href="#">Submenu 1-
1</a></li>
2</a></li>
3</a></li>
</ul>
</li>
<div class="bs-example">
<ul class="nav nav-tabs"><li
class="active">
<a href="#">
home"></span> Home</a></li>
<li><a href="#"><span
user"></span> Profile</a></li>
<li><a href="#"><span
envelope"></span> Messages</a></li>

Bootstrap Pills
• Similarly you can create a basic pill based navigation
using the base class .nav-pills instead of .nav-tabs,
without any further change in markup.

Bootstrap Pills
• Stacked Pills Nav
Pills navigations are horizontal by default. To make
them appear vertically stacked, just add an extra class
.nav-stacked to the <ul> element.

initial-scale=1">
in.css">
<script
/script>
<script
src="https://maxcdn.bootstrapcdn.c
om/bootstrap/3.3.7/js/bootstrap.min.
js"></script>
</head>
<h3>Vertical Pills With Dropdown
Menu</h3>
<ul class="nav nav-pills nav-
stacked">
<li class="active"><a
href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-
toggle="dropdown" href="#">Menu
1 <span class="caret"></span></a>
1</a></li>
2</a></li>
3</a></li>
</ul></li>

Bootstrap Forms
Bootstrap provides three types of form layouts:
• Vertical form (this is default)
• Horizontal form
• Inline form

Bootstrap Forms
• Creating Vertical Form Layout
This is the default Bootstrap form layout in which styles
are applied to form controls without adding any base
class to the <form> element or any large changes in the
markup.

initial-scale=1">
in.css">
<script
/script>
<script
js"></script>
</head>
<body>
<h2>Vertical (default) form</h2>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-
control" id="email"
placeholder="Enter email"> </div>
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd"
placeholder="Enter
password"></div>
<div class="checkbox">
<label><input
type="checkbox"> Remember
me</label>
</div>
<button type="submit"
class="btn btn-
default">Submit</button>

Bootstrap Forms
• Creating Inline Form Layout
Sometimes you might require to place the form controls
side-by-side to compact the layout. You can do this
easily by adding the Bootstrap class .form-inline to the
<form> element.

<!DOCTYPE html>
<head>
initial-scale=1">
in.css">
<script
/script>
<script
js"></script>
</head>
<body>
<form class="form-inline">
<label
for="email">Email:</label>
<input type="email"
class="form-control" id="email"
placeholder="Enter email"></div>
<label
placeholder="Enter password">
</div>
<label><input
me</label></div>

Bootstrap Forms
• Creating Horizontal Form Layout
In horizontal form layout labels are right aligned and
floated to left to make them appear on the same line as
form controls.

<body>
<h2>Horizontal form</h2>
<form class="form-horizontal">
<label class="control-label col-
sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email"
class="form-control" id="email"
placeholder="Enter email">
</div> </div>
<label class="control-label col-sm-2"
<div class="col-sm-10">
placeholder="Enter
password"></div>
</div>
<div class="col-sm-offset-2 col-
sm-10">
<label><input
me</label>
</div></div></div>
<div class="col-sm-offset-2 col-
sm-10">
class="btn btn-
default">Submit</button>
</div> </div> </form>
</div>
</body>
</html>

Bootstrap Form Inputs
• Bootstrap natively supports the most common form
controls mainly input, textarea, checkbox, radio, and
select.
• The most common form text field is the input field.
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.

Inputs
<form role = "form">
<div class = "form-group">
<label for = "name">Label</label>
<input type = "text" class = "form-control" placeholder = "Text input">
</div>
</form>

Text area
<form role = "form">
<div class = "form-group">
<label for = "name">Text Area</label>
<textarea class = "form-control" rows = "3"></textarea>
</div>
</form>

Checkboxes
<form> <div class="checkbox"> <label><input type="checkbox"
value="">Option 1</label> </div>
<div class="checkbox"><label> <input type="checkbox" value="">Option
2</label> </div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
</form>

Radio Buttons
<form> <div class="radio"><label><input type="radio"
name="optradio">Option 1</label></div>
<div class="radio"><label><input type="radio" name="optradio">Option
2</label>
</div><div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div></form>

Select List
<form>
<label for="sel1">Select list (select one):</label>
<select class="form-control" id="sel1">
<option>1</option> <option>2</option> <option>3</option>
<option>4</option></select>
</div>
</form>

Bootstrap Media Object
• If you want to create a layout that contains left- or right-
aligned media object like images or video alongside the
textual content such as blog comments, Tweets, etc.
• 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".
• Additionally, you can use .media-heading for headings.

<h2>Media Object</h2>
<p>The media object can also be top, middle or bottom-aligned
with the "media-top", "media-middle" or "media-bottom"
class:</p><br>
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object"
style="width:80px"> </div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
do eiusmod tempor incididunt ut labore et dolore magna

<div class="media">
<div class="media-left media-middle">
style="width:80px">
</div>
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p>
magna aliqua.</p>
magna aliqua.</p></div> </div> <hr>

<div class="media">
<div class="media-left media-bottom">
style="width:80px">
</div>
<h4 class="media-heading">Media Bottom</h4>
</div>
</div>
</div>

Bootstrap [part 1]

More Related Content

What's hot

Viewers also liked

Similar to Bootstrap [part 1]

Recently uploaded

Bootstrap [part 1]