Module -3
Introduction to Bootstrap
• Bootstrap is a free and open-source CSS
framework directed at responsive, mobile-
first front-end web development.
• It contains HTML, CSS and JavaScript-based
design templates for typography, forms,
buttons, navigation, and other interface
components.
• We can easily manipulate the styling of any
web page, like font style, text color,
background color, flex, grid system, etc.
Bootstrap File Structure
bootstrap/
├── css/
│ ├── [Link]
│ ├── [Link]
├── js/
│ ├── [Link]
│ ├── [Link]
├── img/
│ ├── [Link]
│ ├── [Link]
└── [Link]
The Bootstrap download includes three folders: css, js,
and img.
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, Edge, Safari, and Opera)
Basic HTML Template
Normally, a web project looks something like this:
Basic HTML Layout.
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap 101 template </title>
</head>
<body>
<h1> Hello, world! </h1>
</body>
</html>
With Bootstrap, we simply include the link to the CSS
stylesheet, and the Javascript.
Container Layouts
• To add a fixed width, centered layout to your
page, simply wrap the content in
<div class="container">…</div>.
For Example:
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed
width
container.</p>
</div>
Output:
Bootstrap Elements
• Colors • Forms
• Tables • Utilities
• Images • Classes
• Buttons • Alerts
• Button groups • Custom forms
• Progress bars • Grid system
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) and .text-
light:
<div class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through
colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white
background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
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.
<div class="container">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning
through colors".</p>
<p>Note that you can also add a .text-* class if you want a different
text color:</p>
<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>
<p class="bg-info text-white">This text represents some
information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
<p class="bg-secondary text-white">Secondary background
color.</p>
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
</div>
Tables
<table> : Wrapping element for displaying data in a tabular
format.
• <thead> : Container element for table header rows(<tr>)
to label table columns.
• <tbody> : Container element for table rows(<tr>) in the
body of the table.
• <tr> : Container element for a set of table cells(<tr> or
<th>) the apprars on a single row default table cell.
• <td> : Default table cell
• <th> : Special table cell for column (or row,
depending on scope and placement) labels. Must be used
within a <thead>
• <caption> : Description or summary of what the table
holds, especially useful for screen readers.
Table Base Class Example :
<table class="table">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
• Optional Table Classes :
With the base table markup, and adding the .table
class, there are few additional classes that you can
add to style the markup. There are three classes,
.table-striped, .table-bordered, .table-hover, and
.table-condensed.
•
Striped Table :
By adding the .table-striped class, you will get
stripes on rows within the <tbody>.This is done
via the CSS :nth-child selector
Bordered Table :
If you add the .table-bordered class, you will get
borders surrounding everyelement, and
rounded corners around the entire table.
Hover Table :
If you add the .table-hover class, when you
hover over a row, alight grey background will be
added to rows .
Condensed Table :
If you add the .table-condensed class, padding is
cut in half on rows to condense the table.
Table Row Classes :
If you want to style the table rows, you could
add the classes to change the background color.
Images
• Images have three classes to apply some
simple styles:
Rounded Corners
Circle
Thumbnail
Rounded Corners
The .img-rounded class adds rounded corners
to an image. Example:
<img src=“[Link]" class="img rounded”
alt=“Round">
Output:
Circle
• The .img-circle class shapes the image to a
circle Example:
• <img src=“[Link]" class="img-circle"
alt=“Circle">
Output:
Thumbnail
• The .img-thumbnail class shapes the image to
a thumbnail Example:
• <img src=“[Link]" class="img-thumbnail"
alt=“thumb">
Output:
Buttons
• The < b u t t o n > t a g defines a
clickable button.
Buttons with C S S styling:
Buttons using Bootstrap:
Button Sizes:
• If y o u need larger or smaller
buttons, simply a d d .btn-large,
.btn-small, or .btn- mini to links or
buttons.
Block-level Button
• If you want to create buttons that display like a
block-level element, simply add the .btnblock
class These buttons will display at 100% width:
<button class="btn btn-large btn-block btn-
primary" type="button">Blocklevel
button</button>
<button class="btn btn-large btn-block"
type="button">Block-level button</button>
Disabled Button Styling
For anchor elements, simply add the class of
.disabled to the tag and the link will fade in
color, and lose the gradient
<a href="#" class="btn btn-large btn-primary
disabled">Primary link</a>
<a href="#" class="btn btn-large
disabled">Link</a>
Button groups
By using button groups combined with icons, you can create
nice interface elements with minimal markup
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
</div>
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:
<div class="progress">
<div class="progressbar" role="progressbar" arialvalue
now="70"aria-valuemin="0" aria-
valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
Bootstrap Forms
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
Bootstrap Vertical Form (default)
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
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
Bootstrap Inline Form
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
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
Tip: Use Bootstrap's predefined grid classes to align labels
and groups of form controls in a horizontal layout.
Bootstrap Horizontal Form
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<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>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter
password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
Supported Form Controls:
•Bootstrap natively supports the most common form
controls. input, textarea, checkbox, radio, and select.
Inputs :
• The most common form text field is the input—this is
where users will enter most of the essential form data .
• Bootstrap offers support for all native HTML5 input
types: text, password, datetime, datetime-local, date,
month, time, week, number, email, URL, search, tel, and
color:
Text area :
•The textarea is used when you need multiple
lines of input .
•modify the rows attribute, changing it to the
number of rows that you need to support (fewer
rows = smaller box, more rows = bigger box):
Checkboxes and radio buttons
• Checkboxes and radio buttons are great when you
want users to choose from a list of preset options .
•When building a form, use checkbox if you want
the user to select any number of options from a list.
Use radio if you want to limit him to just one
selection:
Select
• A select is used when you want to allow the user to
pick from multiple options, but by default it only
allows one .
• It’s best to use <select> for list options with
which the user is familiar, such as states or
numbers.
• Use multiple="multiple" to allow the user to
select more than one option. If you only want
the user to choose one option, use type="radio":
Utilities
Borders
• Use the border classes to add or remove
borders from an element:
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
Border Color
• Add a color to the border with any of the
contextual border color classes:
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Border Radius
• Add rounded corners to an element with
the rounded classes:
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
Float and Clearfix
• Float an element to the right with the .float-
right class or to the left with .float-left, and
clear floats with the .clearfix class:
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
Responsive Floats
• Float an element to the left or to the right depending on
screen width, with the responsive float classes
• (.float*left|right where*is sm (>=576px), md (>=768px), lg
(>=992px) or xl (>=1200px)):
<div class="float-sm-right">Float right on small screens or
wider</div><br>
<div class="float-md-right">Float right on medium screens or
wider</div><br>
<div class="float-lg-right">Float right on large screens or
wider</div><br>
<div class="float-xl-right">Float right on extra large screens or
wider</div><br>
<div class="float-none">Float none</div>
Center Align
• Center an element with the .mx-auto class (adds
margin-left and margin-right: auto):
<div class="mx-auto bg-
warning" style="width:150px">Centered</div>
Width
• Set the width of an element with the w-* classes
(.w-25, .w-50, .w-75, .w-100, .mw-100):
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width
100%</div>
Height
• Set the height of an element with the h-* classes
(.h-25, .h-50, .h-75, .h-100, .mh-100):
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="mh-100 bg-
warning" style="height:500px">Max Height
100%</div>
</div>
Bootstrap classes
• Bootstrap classes refer to the predefined CSS
classes
provided by the Bootstrap framework.
• These classes allow you to apply various styles,
layouts, and functionality to your HTML elements
without having to write custom CSS from scratch.
• By adding these classes to your HTML elements,
you can quickly create visually appealing and
responsive designs.
Emphasis classes
• Along with <strong> and <em> , Bootstrap
offers a
few other classes that can be used to provide
emphasis.
• These could be applied to paragraphs, or
spans
Abbreviations
• The HTML <abbr> element provides markup for
abbreviations or acronyms, like WWW or HTTP.
• Bootstrap styles elements with a light dotted
border along the bottom, and reveals the full text
on hover (as long as you add that text to the title
attribute).
Example:
<abbr title=“Universal Student
Number">USN</abbr>
Output:
USN
• Emphasis:
• The default emphasis tag like <small> when
used within body tag shrinks the font of 85% of
the original size.
• Bold:
• To display the text in bold letter or to add the
font-weight-bold wrap the text in <strong> tag.
• Italics:
• For italics, use the <em> tag to the selected
text.
Alerts
• Alerts are created with the .alert class,
followed by one of the contextual
classes .alert-success, .alert-info, .alert-
warning, .alert-danger, .alert-primary, .alert-
secondary, .alert-light or .alert-dark:
<div class="container">
<h2>Alerts</h2>
<p>Alerts are created with the .alert class, followed by a contextual color classes:</p>
<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>
<div class="alert alert-primary">
<strong>Primary!</strong> Indicates an important action.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> Dark grey alert.
</div>
<div class="alert alert-light">
<strong>Light!</strong> Light grey alert.
</div>
</div>
Custom Forms
Custom Checkbox
• To create a custom checkbox, wrap a container element,
like <div>, with a class of .custom-control and .custom-
checkbox around the checkbox. Then add the .custom-
control-input to the input with type="checkbox".
• Tip: If you use labels for accompanying text, add
the .custom-control-label class to it. Note that the value of
the for attribute should match the id of the checkbox:
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-
input" id="customCheck" name="example1">
<label class="custom-control-
label" for="customCheck">Check this custom
checkbox</label>
</div>
</form>
Custom Switch
• To create a custom "toggle switch", wrap a
container element, like <div>, with a class
of .custom-control and .custom-switch around a
checkbox.
• Then add the .custom-control-input class to the
checkbox:
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-
input" id="switch1">
<label class="custom-control-
label" for="switch1">Toggle me</label>
</div>
Custom Radio buttons
• To create a custom radio button, wrap a container
element, like <div>, with a class of .custom-
control and .custom-radio around the radio button.
Then add the .custom-control-input to the input
with type="radio".
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-
input" id="customRadio" name="example1" value="c
ustomEx">
<label class="custom-control-
label" for="customRadio">Custom radio</label>
</div>
Grid System
Default Grid System
• An example of the 12 possible columns
• The default Bootstrap grid system utilizes 12
columns, making for a 940pxwide container
without responsive features enabled.
✓ With the responsive CSS file added, the grid
adapts to be 724px or 1170px wide, depending on
your viewport.
✓Below 767px viewports, such as the ones on
tablets and smaller devices, the columns become
fluid and stack vertically.
✓ At the default width, each column is 60 pixels
wide and offset 20 pixels to the left.
Basic grid Html
✓ To create a simple layout, create a container with a
that has a class of .row
and add the appropriate amount of .span* columns.
✓ Since we have a 12-column grid, we just need the
amount of .span* columns
to equal 12. We could use a 3-6-3 layout, 4-8, 3-5-4, 2-8-
2..etc
✓ The following code shows .span8 and .span4, which
adds up to 12
Offsetting columns
• Offsetting columns in bootstrap refers to randomly shifting the
columns of a dataset before resampling it.
• This technique is used to introduce additional randomness
and reduce the bias that can arise when resampling
correlated data.
• In traditional bootstrap resampling, we randomly sample rows
from a dataset with replacement to create a new sample.
• However, in some cases, the columns of the dataset may be
correlated with each other, which can lead to bias in the
resampled data.
• By randomly shifting the columns of the dataset before
resampling, we can break up the correlations and introduce
additional randomness, leading to a more accurate estimate
of the population parameters.
To implement Offsetting we use the ‘.offset-n’ class
where ‘n’ specifies the width by which a component has
to move from its original position.
Syntax: <div class="offset-n">
//content of div tag
</div>
Column Offsetting: Column offsetting is used to move or
push a column from its original position to a specified
width or space. To implement column offsetting we use
the ‘.col-m’ class with ‘.col-offset-n’ class which pushes
column by n columns.
Syntax: <div class="col-m col-offset-n">
//content of div tag
</div>
NESTING COLUMNS
• In Bootstrap, columns can be nested inside other columns to
create more complex layouts. This is achieved by adding a
new row and using the appropriate column classes to create a
grid of nested columns.
• To nest columns in Bootstrap, you should follow these steps:
1. Create a container element with the class "container" or
"container-fluid". This will hold all of your Bootstrap content.
2. Add a row element inside the container element. This will
create a new row in the grid.
3. Inside the row element, add one or more column elements
using the appropriate column classes (e.g. "col-sm-6" or "col-
lg-4"). These columns will be your top-level columns.
Here is an example of how to nest columns in Bootstrap:
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Top-level column 1</p>
<div class="row">
<div class="col-sm-6">
<p>Nested column 1</p>
</div>
<div class="col-sm-6">
<p>Nested column 2</p>
</div>
</div>
</div>
<div class="col-md-6">
<p>Top-level column 2</p>
<div class="row">
<div class="col-sm-4">
<p>Nested column 3</p>
</div>
<div class="col-sm-4">
<p>Nested column 4</p>
</div>
<div class="col-sm-4">
<p>Nested column 5</p> </div></div></div> </div></div>
In this example, there are two top-level columns (each with a width of 6
columns on medium-sized screens and above) and multiple levels of nesting.
The nested columns have different widths depending on the screen size (e.g.
6 columns on small screens and above for nested column 1 and 4 columns on
small screens and above for nested column 3).
Fluid grid system
• The fluid grid system uses percents instead of pixels for
column widths.
• It has the same responsive capabilities as our fixed grid
system, ensuring proper proportions for key screen
resolutions and devices. You can make any row “fluid” by
changing .row to .row- fluid.
• The column classes stay the exact same, making it easy
to flip between fixed and fluid grids.
• To offset, you operate in the same way as the fixed grid
system works by adding .offset* to any column to shift by
your desired number of columns.
Fluid Column Layout.
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset2">...</div>
</div>