CA-104 (B)
Web Programing
Bootstrap
Husain Dawoodi
System Analyst
UGC Computer Center, School of Computer Sciences
Responsive Web Design
• Responsive web design is about creating web pages that
look good on all devices!
• A responsive web design will automatically adjust for
different screen sizes and viewports.
• Responsive web design automatically adjust themselves to
look good on all devices, from small phones to large
desktop.
• Bootstrap is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first
Overview of websites.
• Bootstrap is a free front-end framework for faster and
Bootstrap easier web development
• Bootstrap also gives you the ability to easily create
responsive designs
• 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
Why Use • Mobile-first approach: In Bootstrap, mobile-first styles are
part of the core framework
Bootstrap • Browser compatibility: Bootstrap is compatible with all
modern browsers (Chrome, Firefox, Internet Explorer 10+,
Edge, Safari, and Opera)
• There are two ways to start using Bootstrap on your own
web site.
• Include Bootstrap from a CDN (Content Delivery
Network).
• Download Bootstrap
Getting • One advantage of using the Bootstrap CDN:
• Many users already have downloaded Bootstrap from
Started CDN when visiting another site. As a result, it will be
loaded from cache when they visit your site, which
leads to faster loading time. Also, most CDN's will
make sure that once a user requests a file from it, it
will be served from the server closest to them, which
also leads to faster loading time.
1. Add the HTML5 doctype
• <!DOCTYPE html>
2. Bootstrap is mobile-first
• Bootstrap 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,
First Web initial-scale=1">
• 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
Page device).
• The initial-scale=1 part sets the initial zoom level when the page is
first loaded by the browser.
3. Containers
• Bootstrap also requires a containing element to wrap site contents.
• There are two container classes to choose from:
• 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
.Container Example
<!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 rel="stylesheet" href="[Link]
<script src="[Link]
<script src="[Link]
<script src="[Link]
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
.Container-Fluid Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="[Link]
<script src="[Link]
<script src="[Link]
<script src="[Link]
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Bootstrap Containers
• Containers are used to pad the
content inside of them, and there
are two container classes available:
• 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 (width is always
100%).
• Container Padding: By default,
containers have 15px left and right
padding, with no top or bottom
padding.
• The .container-sm|md|lg|xl classes creates responsive
containers.
Responsive • The max-width of the container will change on different
screen sizes/viewports
Containers <div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
• Bootstrap's grid system is built with flexbox and 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 Grid • The grid system is responsive, and the columns will re-arrange
automatically depending on the screen size.
System • Make sure that the sum adds up to 12 or fewer (it is not
required that you use all 12 available columns).
• The Bootstrap grid system has five classes:
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater
than 576px)
.col-md- (medium devices - screen width equal to or
greater than 768px)
Grid Classes .col-lg- (large devices - screen width equal to or greater
than 992px)
.col-xl- (xlarge devices - screen width equal to or greater
than 1200px)
• The classes above can be combined to create more
dynamic and flexible layouts.
Basic Structure of a Bootstrap
Grid
create a row (<div class="row">).
1. Then, add the desired number of columns (tags with appropriate
.col-*-* classes).
• The first star (*) represents the responsiveness: sm, md, lg or xl
• The second star represents a number, which should add up to 12 for each row.
2. Instead of adding a number to each col, let bootstrap handle the
layout, to create equal width columns:
• two "col" elements = 50% width to each col.
• three cols = 33.33% width to each col.
• four cols = 25% width, etc.
• You can also use .col-sm|md|lg|xl to make the columns responsive.
Basic Structure of a Bootstrap
Grid (Contd..)
• Three Equal Columns
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
• Responsive Columns
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
• Two Unequal Responsive Columns
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Bootstrap Typography
• Bootstrap Default Settings:
• Bootstrap uses a default font-size of 16px, and its
line-height is 1.5.
• The default font-family is "Helvetica Neue", Helvetica,
Arial, sans-serif.
• In addition, all <p> elements have margin-top: 0 and
margin-bottom: 1rem (16px by default).
• Display headings are used to stand out more than
normal headings (larger font-size and lighter
font-weight), and there are four classes to choose
from: .display-1, .display-2, .display-3, .display-4
• .font-weight-bold : Bold text
• .font-weight-bolder: Bolder text
• .font-italic: Italic text
• .font-weight-light: Light weight text
• .font-weight-lighter: Lighter weight text
Bootstrap • .font-weight-normal: Normal text
• .lead: Makes a paragraph stand out
Typography • .small: Indicates smaller text (set to 80% of the size of the parent)
(Contd..) • .text-left: Indicates left-aligned text
• .text-*-left: Indicates left-aligned text on small, medium, large or xlarge screens
• .text-center: Indicates center-aligned text
• .text-*-center: Indicates center-aligned text on small, medium, large or xlarge screens
• .text-decoration-none: Removes the underline from a link
• .text-right: Indicates right-aligned text
• .text-*-right: Indicates right-aligned text on small, medium, large or xlarge screens a
• .text-justify: Indicates justified text
• .text-monospace: Monospaced text
• .text-break: Prevents long text from breaking layout
• .text-nowrap: Indicates no wrap text
• .text-lowercase: Indicates lowercased text
• .text-reset: Resets the color of a text or a link (inherits the
color from its parent)
Bootstrap • .text-uppercase: Indicates uppercased text
Typography • .text-capitalize: Indicates capitalized text
(Contd..) • .initialism: Displays the text inside an <abbr> element in a
slightly smaller font size
• .list-unstyled: Removes the default list-style and left margin on
list items (works on both <ul> and <ol>). This class only applies
to immediate children list items
• .list-inline: Places all list items on a single line (used together
with .list-inline-item on each <li> elements)
• .pre-scrollable: Makes a <pre> element scrollable
Bootstrap Typography (Contd..)
Text Colors: 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)
.text-light.
Bootstrap Typography (Contd..)
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.
Bootstrap Tables
• A basic Bootstrap table has a light
padding and horizontal dividers.
• Basic Table: The .table class adds
basic styling to a table
• Striped Rows: The .table-striped
class adds zebra-stripes to a table
• Bordered Table: The
.table-bordered class adds borders
on all sides of the table and cells
• Hover Rows: The .table-hover
class adds a hover effect (grey
background color) on table rows
Bootstrap Tables (Contd…)
• Black/Dark Table: The .table-dark
class adds a black background to
the table
• Dark Striped Table: Combine
.table-dark and .table-striped to
create a dark, striped table
• Hoverable Dark Table: The
.table-hover class adds a hover
effect (grey background color) on
table rows
• Borderless Table: The
.table-borderless class removes
borders from the table
Bootstrap Tables (Contd…)
Contextual Classes: Contextual classes can be used to color the whole
table (<table>), the table rows (<tr>) or table cells (<td>).
• .table-primary => Blue: Indicates an important action
• .table-success => Green: Indicates a successful or positive
action
• .table-danger => Red: Indicates a dangerous or potentially
negative action
• .table-info => Light blue: Indicates a neutral informative
change or action
• .table-warning => Orange: Indicates a warning that might
need attention
• .table-active => Grey: Applies the hover color to the table
row or table cell
• .table-secondary => Grey: Indicates a slightly less important
action
• .table-light => Light grey table or table row background
• .table-dark => Dark grey table or table row background
Bootstrap Tables
(Contd…)
• Table Head Colors: The .thead-dark
class adds a black background to table
headers, and the .thead-light class adds
a grey background to table headers
• Small table: The .table-sm class makes
the table smaller by cutting cell padding
in half
• Responsive Tables: The
.table-responsive class adds a scrollbar
to the table when needed (when it is
too big horizontally)
• Bootstrap Image Shapes:
• Rounded Corners: The .rounded class adds rounded corners
to an image
Bootstrap Images • Circle: The .rounded-circle class shapes the image to a circle
• Thumbnail: The .img-thumbnail class shapes the image to a
thumbnail (bordered)
Bootstrap Tables (Contd…)
• Aligning Images: Float an image to the right with the
.float-right class or to the left with .float-left
• Centered Image: Center an image by adding the utility
classes .mx-auto (margin:auto) and .d-block
(display:block) to the image
<img src="[Link]" class="mx-auto d-block">
• Responsive Images:
• 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-fluid
class to the <img> tag. The image will then scale
nicely to the parent element.
• The .img-fluid class applies max-width: 100%; and
height: auto; to the image:
<img class="img-fluid" src="img_chania.jpg" alt="Chania">
• A jumbotron indicates a big grey box for calling extra attention to some special content or
information
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
Bootstrap • Full-width Jumbotron: If you want a full-width jumbotron without rounded borders, add the
.jumbotron-fluid class and a .container or .container-fluid inside of it
<div class="jumbotron jumbotron-fluid">
Jumbotron <div class="container">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
</div>
Bootstrap Wells (v. 3)
• The .well class adds a rounded border
around an element with a gray background
color and some padding
• Can Change the size of the well by adding
the .well-sm class for small wells or .well-lg
class for large wells
• Bootstrap provides an easy way to create predefined alert
messages
• Alerts are created with the .alert class
Bootstrap Alerts • Followed by one of the four contextual classes
• .alert-success
• .alert-info
• .alert-warning
• .alert-danger
Bootstrap Alerts • Alert Links: Add the alert-link class to any
links inside the alert box to create "matching
(Contd..) colored links"
• Closing Alerts: To close the alert message, add a .alert-dismissible 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)
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
Bootstrap </div>
Alerts
(Contd..)
Bootstrap Buttons
• The .btn classes can be used on <a>, <button>, or <input> elements
• <button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Bootstrap Buttons (Contd..)
• <button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
Bootstrap Buttons (Contd..)
• Button Sizes: Use the .btn-lg class for large buttons or .btn-sm class for
small buttons
• Block Level Buttons: Add class .btn-block to create a block level button
that spans the entire width of the parent element.
• 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 disabled attribute makes a button
unclickable.
• Spinner Buttons:
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
Bootstrap Button Groups
• 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|-lg|-sm to
create a button group.
<div class="btn-group">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn
btn-primary">Samsung</button>
<button type="button" class="btn
btn-primary">Sony</button>
</div>
• Vertical Button Groups: Use the class
.btn-group-vertical to create a vertical button group
Bootstrap Badges
• Badges are used to add additional information to any content.
• Use the .badge class together with a contextual class (like
.badge-secondary) within <span> elements to create
rectangular badges
<h1>Example heading <span class="badge
badge-secondary">New</span></h1>
• Contextual Badges: Use any of the contextual classes (.badge-*)
to change the color of a badge
<span class="badge badge-primary">Primary</span>
• Pill Badges: Use the .badge-pill class to make the badges more
round
<span class="badge badge-pill
badge-primary">Primary</span>
• Badge inside an Element:
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>
Bootstrap Progress Bars
• Basic Progress Bar: To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child
element.
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
• Progress Bar Labels:
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
• Colored Progress Bars:
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
• Striped Progress Bars: Use the .progress-bar-striped class to add stripes to the progress bars
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
• Animated Progress Bar: Add the .progress-bar-animated class to animate the progress bar
<div class="progress-bar progress-bar-striped progress-bar-animated"style="width:40%"></div>
Bootstrap Progress Bars (Contd..)
• Multiple Progress Bars: Progress bars can also be stacked
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
• Basic Pagination : To create a basic pagination, add the .pagination class to an <ul> element.
Then add the .page-item to each <li> element and a .page-link class to each link inside <li>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
• Pagination Sizing : Add class .pagination-lg for larger blocks or .pagination-sm for smaller
Bootstrap blocks
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
Pagination <li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
• Pagination Alignment : To change the alignment of the pagination
<ul class="pagination justify-content-center" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<ul class="pagination justify-content-end" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
Bootstrap List Groups
• 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 Linked Items: To create a list group with linked items, use <div> instead
of <ul> and <a> instead of <li>. Optionally, add the .list-group-item-action class if you
want a grey background color on hover
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
• Horizontal List Groups: Add the .list-group-horizontal class to .list-group to display items
horizontally
• Contextual Classes: .list-group-item-success, list-group-item-secondary,
list-group-item-info, list-group-item-warning, .list-group-item-danger,
.list-group-item-primary, list-group-item-dark and list-group-item-light
Bootstrap Dropdowns
• A dropdown menu is a toggleable menu that allows the
user to choose one value from a predefined list
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
• Dropdown Divider: .dropdown-divider class is used to
separate links inside the dropdown menu with a thin
horizontal border
• Dropdown Header: .dropdown-header class is used to
add headers inside the dropdown menu
• Dropdown Position: You can also create a "dropright"
or "dropleft" menu, by adding the .dropright or
.dropleft class to the dropdown element
• Dropup: you want the dropdown menu to expand
upwards instead of downwards, change the <div>
element with class="dropdown" to "dropup"
Bootstrap Collapse
• Basic Collapsible: Collapsible are useful when you want to hide and show large amount
of content
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
• By default, the collapsible content is hidden. However, you can add the .show class to
show the content by default
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 the .navbar class, followed by a responsive collapsing
class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or
small screens)
• To add links inside the navbar, use a <ul> element with class="navbar-nav". Then add <li>
elements with a .nav-item class followed by an <a> element with a .nav-link class
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
• Vertical Navbar: Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation
bar
• Centered Navbar: Add the .justify-content-center class to center the navigation bar
Bootstrap Tabs
• Tabs are created with <ul class="nav nav-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
• Pills are created with <ul class="nav nav-pills">. Also
mark the current page with <li class="active">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Bootstrap Pills
Bootstrap Forms
• Bootstrap Form Layouts: Bootstrap provides two types of form
layouts:
• Stacked (full-width) form
• Inline form (Add class .form-inline to the <form> element)
Bootstrap Form
Inputs
• Bootstrap supports the following form controls:
• input
• textarea
• checkbox
• radio
• select
• Use the .form-control class to style inputs with full-width and proper
padding
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Bootstrap Form Inputs (Contd..)
• Bootstrap Checkboxes:
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
• Use the .form-check-inline class if you want the checkboxes to appear on the
same line
Bootstrap Form Inputs (Contd..)
• Bootstrap Radio Buttons:
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
• Use the .form-check-inline class if you want the radio buttons to appear on the
same line
• Bootstrap Select List:
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
Bootstrap <option>4</option>
</select>
</div>
Form Inputs
(Contd..)
• Form Control File and Range: Add the .form-control-range
class to input type"range" or .form-control-file to input
type"file" to style a range control or a file field with full-width
<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">
Bootstrap
Form Inputs
(Contd..)
