BOOTSTRAP

BOOTSTRAP 3…
11/27/2020 1
Source: W3Schools and Robert W. Sebesta, “Programming the World Wide Web”, Fourth Edition, Pearson, 2014
 Bootstrap is the most popular HTML, CSS,
and JavaScript framework for developing
responsive, mobile-first web sites
 Bootstrap is completely free to download and

use
11/27/2020 2
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
11/27/2020 3
What is 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
11/27/2020 4
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!
11/27/2020 5
Why Use 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)
11/27/2020 6
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 (Content Delivery
Network)
11/27/2020 7
Bootstrap CDN
 If you don't want to download and host Bootstrap

yourself, you can include it from a CDN (Content
Delivery Network)
 MaxCDN provides CDN support for Bootstrap's

CSS and JavaScript
11/27/2020 8

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


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


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/b
ootstrap.min.js"></script>
11/27/2020 9
Create First Web Page With Bootstrap
1. 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:
11/27/2020 10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
11/27/2020 11
2. 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">
11/27/2020 12
 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 part sets the initial zoom level

when the page is first loaded by the browser
11/27/2020 13
3. Containers
 Bootstrap also requires a containing element to

wrap site contents.
 There are two container classes to choose from:
11/27/2020 14
 The .container class provides a responsive fixed
width container
 The .container-fluid class provides a full width

container, spanning the entire width of the viewport
 Note: Containers are not nestable (you cannot put a

container inside another container)
 REFER P1.HTML, P2.HTML
11/27/2020 15
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
on the screen size
11/27/2020 16
11/27/2020 17
 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
11/27/2020 18
Basic Structure of a Bootstrap Grid
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
11/27/2020 19
11/27/2020 20
 The following example shows how to get a three
equal-width columns starting at tablets and
scaling to large desktops
 On mobile phones, the columns will

automatically stack
 REFER P3.HTML
11/27/2020 21
 The following example will result in a 25%/75%
split on small (and medium and large) devices
 On extra small devices, it will automatically stack

(100%)
 REFER P4.HTML, P5.HTML
11/27/2020 22
split on small devices and a 50%/50% split on
medium (and large) devices
 On extra small devices, it will automatically stack

(100%)
 REFER P6.HTML
11/27/2020 23
split on small devices, a 50%/50% split on
medium devices, and a 33%/66% split on large
devices:
 REFER P7.HTML
11/27/2020 24
 The following example shows how to get two
columns starting at tablets and scaling to large
desktops, with another two columns (equal widths)
within the larger column (at mobile phones, these
columns and their nested columns will stack):
 REFER P8.HTML
11/27/2020 25
Bootstrap Text/Typography
 Bootstrap's global default font-size is 14px,

with a line-height of 1.428.
 This is applied to the <body> element and all

paragraphs (<p>)
11/27/2020 26
Bootstrap vs. Browser Defaults
 we will look at some HTML elements that will be styled a little
bit differently by Bootstrap than browser defaults
 <h1> to <h6>
 <small>
 <mark> - to highlight text
 <abbr> - Use abbreviations
 <blockquote> - The blockquote element is used to present
content from another source
 To show the quote on the right, use the .blockquote-reverse
class
 Refer P9.HTML
11/27/2020 27
 <dl> - Description list
 <code> - Inline snippets of code should be

embedded in the code element
 <kbd> - To indicate input that is typically entered via

the keyboard, use the kbd element
 Refer P10.HTML
11/27/2020 28
Contextual Colors and Backgrounds
 Bootstrap also has some contextual classes that can be
used to provide "meaning through colors".
 The classes for text colors are:.text-muted, .text-primary,

.text-success, .text-info, .text-warning, and .text-danger
 The classes for background colors are:.bg-primary, .bg-

success, .bg-info, .bg-warning, and .bg-danger
 Refer P11.HTML
11/27/2020 29
Bootstrap Tables
 A basic Bootstrap table has a light padding and

only horizontal dividers
 The .table class adds basic styling to a table
 Refer P12.HTML
11/27/2020 30
 The .table-striped class adds zebra-stripes to a table
 REFER P12.HTML
 The .table-bordered class adds borders on all sides of the

table and cells
 REFER P12.HTML
 The .table-hover class adds a hover effect (grey

background color) on table rows
 REFER P12.HTML
11/27/2020 31
 The .table-condensed class makes a table more
compact by cutting cell padding in half
 REFER P12.HTML
 Contextual classes can be used to color table rows (<tr>)

or table cells (<td>)
 REFER P12.HTML
11/27/2020 32
11/27/2020 33
 The .table-responsive class creates a responsive
table
 The table will then scroll horizontally on small devices

(under 768px)
 When viewing on anything larger than 768px wide,

there is no difference
 REFER P13.HTML
11/27/2020 34
Bootstrap Images
 The .img-rounded class adds rounded corners to an

image
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque

Terre" width="304" height="236">
11/27/2020 35
 The .img-circle class shapes the image to a circle
 <img src="cinqueterre.jpg" class="img-circle" alt="Cinque

 The .img-thumbnail class shapes the image to a thumbnail
 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque

11/27/2020 36
 Images come in all sizes… So do screens….
 Responsive images automatically adjust to fit the

size of the screen.
 Create responsive images by adding an .img-

responsive class to the <img> tag. The image will
then scale nicely to the parent element
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
11/27/2020 37
 You can also use Bootstrap's grid system in
conjunction with the .thumbnail class to create
an image gallery
 REFER P14.HTML
11/27/2020 38
Bootstrap Jumbotron and Page Header
 A jumbotron indicates a big box for calling extra attention
to some special content or information.
 A jumbotron is displayed as a grey box with rounded

corners. It also enlarges the font sizes of the text inside
it.
 Tip: Inside a jumbotron you can put nearly any valid

HTML, including other Bootstrap elements/classes.
 Use a <div> element with class .jumbotron to create a

jumbotron:
11/27/2020 39
 Place the jumbotron inside the <div
class="container"> if you want the jumbotron to
NOT extend to the edge of the screen
 REFER P15.HTML
11/27/2020 40
 Place the jumbotron outside the <div
class="container"> if you want the jumbotron to
extend to the screen edges
 REFER P16.HTML
11/27/2020 41
Creating a Page Header
 A page header is like a section divider
 The .page-header class adds a horizontal line

under the heading (+ adds some extra space
around the element)
 Use a <div> element with class .page-header to

create a page header
 REFER P17.HTML
11/27/2020 42
Bootstrap Wells
 The .well class adds a rounded border around

an element with a gray background color and
some padding
 REFER P18.HTML
11/27/2020 43
Well Size
 Small
 Normal
 Large
 REFER P19.HTML
11/27/2020 44
Bootstrap Alerts
 Bootstrap provides an easy way to create
predefined alert messages
 Alerts are created with the .alert class, followed

by one of the four contextual classes .alert-
success, .alert-info, .alert-warning or .alert-
danger
 REFER P20.HTML
11/27/2020 45
11/27/2020 46
 Add the alert-link class to any links inside the
alert box to create "matching colored links“
 REFER P20.HTML
 To close the alert message, add a .alert-

dismissable class to the alert container. Then
add class="close" and data-dismiss="alert" to a
link or a button element (when you click on this
the alert box will disappear)
11/27/2020 47
<div class="alert alert-success alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive
action.
</div>
11/27/2020 48
Bootstrap Buttons
11/27/2020 49
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
 REFER P21.HTML
11/27/2020 50
 The button classes can be used on an <a>,
<button>, or <input> element
<a href="#" class="btn btn-info" role="button">Link Button</a>

<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit
Button">
 REFER P21.HTML
11/27/2020 51
Button Sizes
 The classes that define the different sizes

are:
 .btn-lg - Large
 .btn-md - Medium
 .btn-sm - Small
 .btn-xs - Extra small
11/27/2020 52
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
 Refer P21.HTML
11/27/2020 53
Block Level Buttons
 A block level button spans the entire width of the
parent element
 Add class .btn-block to create a block level button
 <button type="button" class="btn btn-primary btn-

block">Button 1</button>
 Refer P22.HTML
11/27/2020 54
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
11/27/2020 55
<button type="button" class="btn btn-primary active">Active Primary
</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary </button>
 Refer P22.HTML
11/27/2020 56
Bootstrap Badges and Labels
 Badges are numerical indicators of how many items
are associated with a link
 Use the .badge class within <span> elements to create

badges
<a href="#">News <span class="badge">5</span></a><br>

<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
 Refer P23.HTML
11/27/2020 58
 Badges can also be used inside other elements,
such as buttons
<button type="button" class="btn btn-primary">

Primary <span class="badge">7</span></button>
 Refer P23.HTML
11/27/2020 59
Labels
 Use the .label class, followed by one of the six contextual
classes .label-default, .label-primary, .label-success, .label-info,
.label-warning or .label-danger, within a <span> element to
create a label
<h1>Example <span class="label label-default"> New </span>

</h1>
 REFER P24.HTML
 The following example shows all contextual label classes
 REFER P24.HTML
11/27/2020 60
Bootstrap Progress Bars
 Basic Progress Bar
 A progress bar can be used to show a user how far

along he/she is in a process
 Bootstrap provides several types of progress bars
 To create a default progress bar, add a .progress

class to a <div> element
11/27/2020 61
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70“ aria-
valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
 REFER P25.HTML
 Remove the .sr-only class from the progress bar to show a visible
percentage
 REFER P25.HTML
11/27/2020 62
 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
 REFER P26.HTML
11/27/2020 63
 Progress bars can also be striped
 Add class .progress-bar-striped to add stripes to the

progress bars
 REFER P26.HTML
 Add class .active to animate the progress bar
 REFER P26.HTML
11/27/2020 64
 Progress bars can also be stacked
 Create a stacked progress bar by placing multiple bars

into the same <div class="progress">
 REFER P26.HTML
11/27/2020 65
Bootstrap Pagination
 Basic Pagination - If you have a web site with lots of pages, you
may wish to add some sort of pagination to each page
 To create a basic pagination, add the .pagination class to an

<ul> element
 REFER P27.HTML
 The active state shows what is the current page
 Add class .active to let the user know which page he/she is on
 REFER P27.HTML
11/27/2020 66
 A disabled link cannot be clicked
 Add class .disabled if a link for some reason is disabled
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
11/27/2020 67
 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
11/27/2020 68
<ul class="pagination pagination-lg">
<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>
<ul class="pagination pagination-sm">

<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>
11/27/2020 69
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
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul> REFER P28.HTML
11/27/2020 70
 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>
 REFER P28.HTML
11/27/2020 71
Bootstrap 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>
11/27/2020 72
List Group With Badges
 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>
<li class="list-group-item"> Deleted <span class="badge"> 5
</span></li>
<li class="list-group-item"> Warnings <span class="badge"> 3
</span></li>
</ul>
REFER P29.HTML
11/27/2020 73
 The items in a list group can also be hyperlinks
 This will add a grey background color on hover
 To create a list group with linked items, use <div>

instead of <ul> and <a> instead of <li>
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
REFER P29.HTML
11/27/2020 74
 Use the .active class to highlight the current item
<a href="#" class="list-group-item active">First item</a>
</div>
REFER P29.HTML
 To disable an item, add the .disabled class
<a href="#" class="list-group-item disabled">First item</a>
</div>
REFER P29.HTML
11/27/2020 75
 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>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
REFER P29.HTML
11/27/2020 76
Custom Content
 You can add nearly any HTML inside a list group
item
 Bootstrap provides the classes .list-group-item-

heading and .list-group-item-text
 REFER P29.HTML
11/27/2020 77
Panels, dropdowns, collapse…
 Self Study …
11/27/2020 78
Tabs
 Tabs are created with <ul class="nav nav-tabs">
 Tip: Also mark the current page with <li class="active">
 The following example creates navigation tabs
<ul class="nav nav-tabs">

<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
</ul>
 REFER P30.HTML
11/27/2020 79
Tabs With Dropdown Menu
 Tabs can also hold dropdown menus - The following example
adds a dropdown menu to Menu 1
<ul class="nav nav-tabs">

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
</ul>
</li>
11/27/2020 80
Pills
 Pills are created with <ul class="nav nav-pills">
 Also mark the current page with <li class="active">
<ul class="nav nav-pills">

</ul>
Refer P32.HTML
11/27/2020 81
Vertical Pills
 Pills can also be displayed vertically
 Just add the .nav-stacked class
<ul class="nav nav-pills nav-stacked">

</ul>
Refer P32.HTML
11/27/2020 82
Pills With Dropdown Menu
 Pills can also hold dropdown menus - The following example
adds a dropdown menu to "Menu 1“
<ul class="nav nav-pills nav-stacked">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
</ul>
</li>
</ul> Refer P32.HTML
11/27/2020 83
Centered Tabs and Pills
 To center/justify the tabs and pills, use the .nav-justified class
 Note that on screens that are smaller than 768px, the list
items are stacked (content will remain centered)


<ul class="nav nav-tabs nav-justified">
</ul>
11/27/2020 84

<ul class="nav nav-pills nav-justified">
</ul>
Refer P32.HTML
11/27/2020 85
Bootstrap Navigation Bar
 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
11/27/2020 86
<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><a href="#">Page 1</a></li>
</ul>
</div>
</nav>
Refer P33.HTML
11/27/2020 87
Inverted Navigation Bar
 Just change the .navbar-default class into
.navbar-inverse
 Refer P33.HTML
11/27/2020 88
Navigation Bar With Dropdown
 Navigation bars can also hold dropdown menus
 The following example adds a dropdown menu for the

"Page 1" button:
11/27/2020 89
<nav class="navbar navbar-inverse">
</div>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<li><a href="#">Page 1-1</a></li>
</ul>
</li>
</ul> Refer P33.HTML
</div>
</nav>
11/27/2020 90
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
11/27/2020 91
</div>
</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> Refer P33.HTML
11/27/2020 92
Navbar Buttons
</div>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
11/27/2020 93
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
11/27/2020 94
</div>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
11/27/2020 95
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class=“form-control“
placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Refer P35.HTML
11/27/2020 96
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
11/27/2020 97
<nav class="navbar navbar-inverse navbar-fixed-top">
</div>
</ul>
</div>
</nav>
Refer P36.HTML
11/27/2020 98
 The .navbar-fixed-bottom class makes the navigation bar
stay at the bottom
<nav class="navbar navbar-inverse navbar-fixed-bottom">

</div>
</ul>
</div>
11/27/2020 99
Bootstrap Forms
 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%
11/27/2020 100
Bootstrap Form Layouts
 Bootstrap provides three types of form layouts:
 Vertical form (this is default)

 Horizontal form
 Inline form
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
11/27/2020 101
Bootstrap Vertical Form (default)
 The following example creates a vertical form with two input
fields, one checkbox, and a submit button
<form>
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd"> Refer P38.HTML
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</form>
11/27/2020 102
Bootstrap Inline Form
 In an inline form, all of the elements are inline, left-aligned,
and the labels are alongside.
Note: This only applies to forms within viewports that are at

least 768px wide!
 Additional rule for an inline form:
 Add class .form-inline to the <form> element
 The following example creates an inline form with two

input fields, one checkbox, and one submit button:
11/27/2020 103
<form class="form-inline">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<input type="password" class="form-control" id="pwd">
</div>
<label><input type="checkbox"> Remember me</label>
</div>
</form>
Refer P38.HTML
11/27/2020 104
Bootstrap Horizontal Form
 A horizontal form means that the labels are aligned next to the
input field (horizontal) on large and medium screens
 On small screens (767px and below), it will transform to a

vertical form (labels are placed on top of each input)
Additional rules for a horizontal form:
 Add class .form-horizontal to the <form> element
 Add class .control-label to all <label> elements
11/27/2020 105
Tip: Use Bootstrap's predefined grid classes to
align labels and groups of form controls in a
horizontal layout.
 The following example creates a horizontal form

with two input fields, one checkbox, and one
submit button
Refer P39.HTML
11/27/2020 106
Bootstrap Form Inputs
 Bootstrap supports the following form controls:
 input
 textarea
 checkbox
 radio
 select
 Bootstrap supports all the HTML5 input types: text,

password, datetime, datetime-local, date, month, time,
week, number, email, url, search, tel, and color.
11/27/2020 107
 The following example contains two input elements; one
of type text and one of type password
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<input type="password" class="form-control" id="pwd">
</div>
11/27/2020 108
Bootstrap Textarea
<label for="comment">Comment:</label>
<textarea class="form-
control" rows="5" id="comment"></textarea>
</div>
11/27/2020 109
Bootstrap Checkboxes
<label><input type="checkbox" value="">Option 1</label>
</div>
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option
3</label>
</div>
11/27/2020 110
 Use the .checkbox-inline class if you want the
checkboxes to appear on the same line
<label class="checkbox-inline">
<input type="checkbox" value="">Option 1</label>
11/27/2020 111
Bootstrap Radio Buttons
<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>
11/27/2020 112
 Use the .radio-inline class if you want the radio buttons
to appear on the same line
<label class="radio-inline">
<input type="radio" name="optradio">Option 1</label>
11/27/2020 113
Bootstrap Select List
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
11/27/2020 114
Multiple select…
<select multiple class="form-control" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
11/27/2020 115
Bootstrap Input Sizing
 Set the heights of input elements using classes

like .input-lg and .input-sm
 Set the widths of elements using grid column

classes like .col-lg-*and .col-sm-*
 The following examples shows input elements

with different heights:
11/27/2020 116
<form>
<label for="inputsm">Small input</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<label for="inputlg">Large input</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
</form>
Refer P40.HTML
11/27/2020 117
 You can quickly size labels and form controls
within a Horizontal form by adding .form-group-*
to the <div class="form-group"> element
<div class="form-group form-group-lg">
11/27/2020 118
Column Sizing
<div class="form-group row">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
</div>
</div>
</div> Refer P41.HTML
11/27/2020 119
Bootstrap Media Objects
 Bootstrap provides an easy way to align media objects
(like images or videos) to the left or to the right of some
content. This can be used to display blog comments,
tweets and so on
11/27/2020 120
 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
11/27/2020 121

<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>


<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum....</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div> Refer P42.HTML
11/27/2020 122
 The media object can also be top, middle or
bottom aligned with the media-top, media-
middle or media-bottom class
Refer P43.HTML
11/27/2020 123
Nesting Media Objects
Refer P44.HTML
Refer P45.HTML
11/27/2020 124
Bootstrap Carousel Plugin
 The Carousel plugin is a component for cycling

through elements, like a carousel (slideshow)
 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
11/27/2020 125
11/27/2020 126
 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
11/27/2020 127
The "Indicators" part:
 The indicators are the little dots at the bottom of each

slide (which indicates how many slides there is in the
carousel, and which slide the user are currently viewing)
 The indicators are specified in an ordered list with class

.carousel-indicators
 The data-target attribute points to the id of the carousel
 The data-slide-to attribute specifies which slide to go to,

when clicking on the specific dot
11/27/2020 128
The "Wrapper for slides" part:
 The slides are specified in a <div> with class

.carousel-inner
 The content of each slide is defined in a <div> with

class .item. This can be text or images
 The .active class needs to be added to one of the

slides. Otherwise, the carousel will not be visible
11/27/2020 129
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
Refer P46.HTML
11/27/2020 130
Add Captions to Slides
 Add <div class="carousel-caption"> within

each <div class="item"> to create a caption
for each slide
Refer P47.HTML
11/27/2020 131
Bootstrap Modal Plugin
 The Modal plugin is a dialog box/popup

window that is displayed on top of the current
page
11/27/2020 132
How To Create a Modal
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
11/27/2020 133
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
11/27/2020 134
 The attribute role="dialog" improves accessibility
for people using screen readers
 The .modal-dialog class sets the proper width

and margin of the modal
11/27/2020 135
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
11/27/2020 136
 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 Refer P48.HTML
11/27/2020 137
Modal Size
 Change the size of the modal by adding the .modal-sm
class for small modals or .modal-lg class for large
modals.
 Add the size class to the <div> element with class .modal-
dialog
<div class="modal-dialog modal-sm">

<div class="modal-dialog modal-lg">
 By default, modals are medium in size
11/27/2020 138
Bootstrap Tooltip Plugin
 The Tooltip plugin is small pop-up box that appears when the
user moves the mouse pointer over an element
 To create a tooltip, add the data-toggle="tooltip" attribute to

an element
 Use the title attribute to specify the text that should be

displayed inside the tooltip
<a href="#" data-toggle="tooltip" title="Hooray!"> Hover over me</a>
11/27/2020 139
 Tooltips must be initialized with jQuery: select the
specified element and call the tooltip() method
 The following code will enable all tooltips in the

document
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Refer P49.HTML
11/27/2020 140
Positioning Tooltips
 By default, the tooltip will appear on top of the element
 Use the data-placement attribute to set the position of the

tooltip on top, bottom, left or the right side of the element
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Refer P49.HTML
11/27/2020 141
 You can also use the data-placement attribute
with a value of "auto", which will let the browser
decide the position of the tooltip
 For example, if the value is "auto left", the tooltip

will display on the left side when possible,
otherwise on the right
11/27/2020 142
Bootstrap Popover Plugin
 The Popover plugin is similar to tooltips; it is a pop-

up box that appears when the user clicks on an
element
 The difference is that the popover can contain much

more content
11/27/2020 143
 To create a popover, add the data-toggle="popover"
attribute to an element
 Use the title attribute to specify the header text of the

popover, and use the data-content attribute to specify the
text that should be displayed inside the popover's body
<a href="#" data-toggle="popover" title="Popover Header" data-

content="Some content inside the popover">Toggle popover</a>
11/27/2020 144
 Popovers must be initialized with jQuery: select the
specified element and call the popover() method
 The following code will enable all popovers in the

document
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Refer P50.HTML
11/27/2020 145
Positioning Popovers
 By default, the popover will appear on the right

side of the element
 Use the data-placement attribute to set the

position of the popover on top, bottom, left or the
right side of the element
11/27/2020 146
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-
content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-
11/27/2020 147
Closing Popovers
 By default, the popover is closed when you click on
the element again
 However, you can use the data-trigger="focus"

attribute which will close the popover when clicking
outside the element
<a href="#" title="Dismissible popover" data-toggle="popover" data-

trigger="focus" data-content="Click anywhere in the document to close
this popover">Click me</a>
11/27/2020 148
 If you want the popover to be displayed when you
move the mouse pointer over the element, use
the data-trigger attribute with a value of "hover“
<a href="#" title="Header" data-toggle="popover" data-

trigger="hover" data-content="Some content">Hover over me</a>
11/27/2020 149
Bootstrap Scrollspy Plugin
 The Scrollspy plugin is used to automatically update
links in a navigation list based on scroll position
 Add data-spy="scroll" to the element that should be used

as the scrollable area (often this is the <body> element)
 Then add the data-target attribute with a value of the id

or the class name of the navigation bar (.navbar)
 This is to make sure that the navbar is connected with

the scrollable area
11/27/2020 150
 Note that scrollable elements must match the ID of
the links inside the navbar's list items (<div
id="section1"> matches <a href="#section1">
 The optional data-offset attribute specifies the

number of pixels to offset from top when calculating
the position of scroll
Refer P51.HTML
 Default is 10 pixels
 The element with data-spy="scroll" requires the

CSS position property, with a value of "relative" to
work properly
11/27/2020 151
Thank You …
11/27/2020 152

BOOTSTRAP

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BOOTSTRAP

Uploaded by

Copyright:

Available Formats

BOOTSTRAP 3…

 Bootstrap is completely free to download and

 Bootstrap includes HTML and CSS based design

 Bootstrap also gives you the ability to easily create

 Responsive web design is about creating

 Bootstrap was developed by Mark Otto and Jacob

 In June 2014 Bootstrap was the No.1 project on

 Responsive features: Bootstrap's responsive CSS

 Mobile-first approach: In Bootstrap 3, mobile-first

 Browser compatibility: Bootstrap is compatible with all

 There are two ways to start using Bootstrap on

 If you don't want to download and host Bootstrap

 MaxCDN provides CDN support for Bootstrap's

1. Add the HTML5 doctype

 Bootstrap uses HTML elements and CSS properties

 Always include the HTML5 doctype at the beginning

 Bootstrap 3 is designed to be responsive to mobile

 To ensure proper rendering and touch zooming, add the

 <meta name="viewport" content="width=device-width,

 The initial-scale=1 part sets the initial zoom level

 Bootstrap also requires a containing element to

 There are two container classes to choose from:

 The .container-fluid class provides a full width

 Note: Containers are not nestable (you cannot put a

 REFER P1.HTML, P2.HTML

 If you do not want to use all 12 columns

 Bootstrap's grid system is responsive, and the

 The classes above can be combined to

 On mobile phones, the columns will

 On extra small devices, it will automatically stack

 REFER P4.HTML, P5.HTML

 On extra small devices, it will automatically stack

 Bootstrap's global default font-size is 14px,

 This is applied to the <body> element and all

 <code> - Inline snippets of code should be

 <kbd> - To indicate input that is typically entered via

 The classes for text colors are:.text-muted, .text-primary,

 The classes for background colors are:.bg-primary, .bg-

 A basic Bootstrap table has a light padding and

 The .table class adds basic styling to a table

 The .table-bordered class adds borders on all sides of the

 The .table-hover class adds a hover effect (grey

 Contextual classes can be used to color table rows (<tr>)

 The table will then scroll horizontally on small devices

 When viewing on anything larger than 768px wide,

 The .img-rounded class adds rounded corners to an

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque

 <img src="cinqueterre.jpg" class="img-circle" alt="Cinque

 The .img-thumbnail class shapes the image to a thumbnail

 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque

 Responsive images automatically adjust to fit the

 Create responsive images by adding an .img-

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

 A jumbotron is displayed as a grey box with rounded

 Tip: Inside a jumbotron you can put nearly any valid

 Use a <div> element with class .jumbotron to create a

 The .page-header class adds a horizontal line

 Use a <div> element with class .page-header to

 The .well class adds a rounded border around

 Alerts are created with the .alert class, followed

 To close the alert message, add a .alert-

<a href="#" class="btn btn-info" role="button">Link Button</a>