Module 3
Introduction to Bootstrap
• Bootstrap is the most popular HTML, CSS and JavaScript
framework for developing a responsive and mobile
friendly website.
• It facilitates users to develop a responsive website.
• It is compatible on most of browsers like Chrome,
Firefox, Internet Explorer, Safari and Opera etc.
• website is called responsive website which can
automatically adjust itself to look good on all devices,
from smart phones to desktops etc.
Get starting with bootstrap
• Mobile-first styles are part of the core framework of
Bootstrap.
• You have to add the following <meta> tag inside the
<head> element for proper rendering and touch zooming:
1.<meta name="viewport" content="width=device-
width, initial-scale=1">
• The "width=device-width" part is used to set the width of
the page to follow the screen-width of the device (vary
according to the devices).
• The initial-scale=1 part is used to set the initial zoom level
when the page is first loaded by the browser.
• Containers: container is used to wrap the site contents.
There are two container classes.
• 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.
• Hence, if you want your page to be of fixed width in the middle of the
screen irrespective of the width of the browser window, then use
container class.
• On the other hand, if you want that your page always consumes the full
screen, you need to use container-fluid class instead
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is a Bootstrap example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/[Link]">
</head>
<body>
<div class="container">
<h1> First Bootstrap web page</h1>
<p>Write your text here..</p>
</div>
<script src="[Link]
<script src="[Link]
script>
</body>
</html>
• Understanding the basics Across all the packaged classes and styles Bootstrap
uses four different markers for controlling and mentioning element and device
sizes.
Bootstrap Elements
Bootstrap Images
• There are a few utility classes for styling your image.
• For example, if you want your image to be rendered with soft rounded corners
you use the class .img-rounded.
• It does nothing but add a 6px border radius to the image:
<img src="[Link]" class="img-
rounded" alt="abc" width="300" height="250">
.img-rounded
{
border-radius: 6px;
}
• The class .img-circle is used to shape the image to a circle
<img src="[Link]" class="img-
circle" alt="abc" width="300" height="250">
• The class .img-thumbnail is used to shape an image to a
thumbnail.
• if you want a small outline border for your image, use the class .imgthumbnail.
Thus, to create a rounded responsive image you use both the classes .img-
rounded and .img-responsive:
<img src="img/[Link]" class="img-thumbnail" alt="Product 1"
title="Product 1">
<img src="img/[Link]" class="img-rounded img-responsive" alt=""
title="">
The grid system
• Bootstrap offers very strong framework of grid system with extensive
use of div elements which is dynamically compatible with all the
devices and screens currently available in the market.
• Basic architecture of the grid system of Bootstrap is that the screen is
horizontally divided into maximum 12 columns (logically).
• And Bootstrap has provided classes to create each combination of
columns – for each device sizes.
• The following matrix illustrates this
• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)
• One of the most important points here is that the total size of the columns
must always be 12 – if it is less than 12, some space will be left unused, if it is
more than 12, the last placeholder will be wrapped in the next line.
<div class="container">
<h1>Grid Example</h1>
<div class="row">
<div class="col-md-3"style="background-color:lavender;">Rahul</div>
<div class="col-md-6"style="background-color:lavenderblush;">Vijay</div>
<div class="col-md-2"style="background-color:lavender;">Kartik</div>
<div class="col-md-1"style="background-color:lavenderblush;">Ajeet</div>
</div>
</div>
Constructing data entry forms
<form>
<div class="container">
<div class="form-group">
<label for="yourName" class=“control-label">Name</label>
<input type="text" class="form-control" id="yourName"
placeholder="Your name please">
</div>
</div>
</form>
<form class="form-horizontal">
<div class="container">
<div class="form-group">
<label for="yourName" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="yourName"
placeholder="Your name please">
</div>
</div>
<div class="form-group">
<label for="yourEmail" class="col-sm-3 control-label">Email address</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-envelope"></span>
<input type="email" class="form-control" id="yourEmail"
placeholder="Your Email Id">
</div>
</div
• The .form-group class is used to encapsulate multiple controls in a
group – just as we have done for labels and corresponding text boxes.
• The .control-label and .form-control classes are used to style the
labels and form elements respectively.
• If you want to create a form with horizontal labels and controls – use
the .form-horizontal class and place the labels and controls as grid
columns.
The .control-group class will act as each row in the form.
• Using the .input-group class you can associate multiple controls in
adjacently.
• You can create inline forms using the .form-inline class, instead of the
form-horizontal class.
•.form-control class added.
• Use .has-success, .has-warning, .has-error classes to reflect various
validation states.
• In order to control the sizes you can use .input-lg, .input-sm classes.
• For controlling the size of a group you can use .form-group-lg
or .form-group-sm classes.
• For showing up any help texts, you can use .help-block class in a
separate label. This will show the texts in a new line.
• We have styled our button with .btn-primary class. Apart from this
the other available classes are .btn-success, .btn-warning, .btn-
info, .btn-danger and .btn-link.
• We have used Glyphicons to beautify the form. This concept is
detailed in later chapters.
Alerts
just create a div element with the .alert class in Bootstrap.
• <div class=“alert alert-info”>You last visited us on ...</div>
• You can use any of these classes to show contextual information—
• alert-info,
• alert-warning,
• alert-success
• alert-danger
• Putting links inside alert would require you to add the .alert-link in the
anchor tag.
• This will ensure that the links will also be displayed in the
corresponding contextual color
<div class="alert alert-info">You last visited us on Thursday, 20th
March 2015. Please <a href="/[Link]" class="alert-link">let us
know</a> in case of any issues or feedback.</div>
Buttons
• <button type="button" class="btn">Basic</button>
• <button type="button" class="btn btn-primary">Primary
</button>
• btn btn-secondary
• btn btn-success
btn btn-info
• btn btn-warning
• btn btn-danger
• btn btn-dark
• btn btn-light
• btn btn-link
Button Outline
<button type="button" class="btn btn-outline-
primary">Primary</button>
btn btn-outline-secondary
btn btn-outline-success
btn btn-outline-info
btn btn-outline-warning
btn btn-outline-danger
btn btn-outline-dark
btn btn-outline-light text-dark
Button Sizes
Use the .btn-lg class for large buttons or .btn-sm class for small buttons:
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Block Level Buttons
Add class .btn-block to create a block level button that spans the entire
width of the parent element.
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Active/Disabled Buttons
• the class .active makes a button appear pressed, and
the disabled attribute makes a button unclickable.
• <button type="button" class="btn btn-primary
active">Active Primary</button>
<button type="button" class="btn btn-
primary" disabled>Disabled Primary</button>
button groups
• For grouping a number of buttons together, we would use the
.btn-group class.
• This class creates a group of buttons; however, each of these buttons
must have the .btn class associated.
• For example, use the following code:
<div class="btn-group">
<button type="button" class="btn btn-success">Add</button>
<button type="button" class="btn btn-warning">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
Text Colors
• Bootstrap 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,
• .text-danger,
• .text-secondary,
• .text-white
• .text-dark
• .text-body (default body color/often black) and
• .text-light:
<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>
Background Colors
• The classes for background colors are:
• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light.
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
Tables
• The .table class is used to add basic styling to a table.
<table class="table">
<tr><th>Id</th><th>Name</th><th>Age</th></
tr>
<tr><td>101</td><td>Rahul</td><td>23</td></
tr>
<tr><td>102</td><td>Umesh</td><td>22</td></
tr>
<tr><td>103</td><td>Max</td><td>29</td></
tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></
tr>
• The .table-striped class is used to add zebra-stripes to a
table
• The .table-bordered class is used to add borders on all sides
of the table and cells
• The .table-hover class is used to enable a hover state on
table rows
• The .table-condensed class is used to make a table more
compact by cutting cell padding in half
• The .table-responsive class is used to create a responsive
table. You can open the responsible table even on small devices
(under 768px). Then the table will be scrolled horizontally.
Displays larger than 768px wide, there is no difference.
• The .table-dark class is used to add a black background to
the table:
• Combine the .table-dark class and .table-striped class to create
a dark, striped table:
Bootstrap Contextual classes
• Contextual classes are used to color table rows (<tr>)
or table cells (<td>):
Class Description
.active It is used to apply the hover
color to the table row or table
cell
.success It indicates a successful or
positive action
.info It indicates a neutral
informative change or action
.warning It specifies a warning that
might need attention
.danger It indicates a dangerous or
potentially negative action
<table class="table">
<tr class="success"><th>Id</th><th>Name</th><th>Age</
th></tr>
<tr class="active"><td>101</td><td>Rahul</td><td>23</
td></tr>
<tr class="danger"><td>102</td><td>Umesh</td><td>22</
td></tr>
<tr class="info"><td>103</td><td>Max</td><td>29</td></
tr>
<tr class="warning"><td>104</td><td>Ajeet</td><td>21</
td></tr>
</table>
Bootstrap Progress Bar
• The class .progress within a <div> element is used to
create a default progress bar in bootstrap.
<div class="container">
<h2>Default Progress Bar</h2>
<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>
</div>
Bootstrap Custom Forms
• Bootstrap comes with customized form elements, that
are meant to replace browser defaults:
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".
<form action="/action_page.php">
<div class="custom-control custom-checkbox>
<input type="checkbox" class="custom-control-input“
id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Custom
checkbox</label>
</div>
<input type="checkbox" id="defaultCheck" name="example2">
<label for="defaultCheck">Default checkbox</label>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
1. Custom Switch : .custom-switch
2. Custom Radio buttons : .custom-radio
3. Inline Custom Form Controls : .custom-control-inline
4. Custom Select Menu : .custom-select class
5. Custom Select Menu Size : Use the .custom-select-
sm class to create a small select menu and
the .custom-select-lg class for a large one
6. Custom Range : .custom-range
7. Custom File Upload : To create a custom file upload,
wrap a container element with a class of .custom-file
around the input with type="file". Then add
the .custom-file-input to it.
Bootstrap utilities
• Bootstrap 4 has a lot of utility/helper classes to quickly
style elements without using any CSS code.
Borders
• Use the border classes to add or remove borders from an element:
<div class="container">
<h2>Borders</h2>
<p>Use the border classes to add or remove borders from an element:</p>
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
</div>
• Border Color
<div class="container">
<h2>Borders</h2>
<p>Use a contextual border color to add a color to the border:</p>
<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>
</div>
• Border Radius
<div class="container">
<h2>Borders</h2>
<p>Round the corner of an element with the rounded classes:</p>
<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>
</div>
• Float and Clearfix
<div class="container">
<h2>Float</h2>
<p>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.</p>
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
</div>
Center alignment
• The center alignment shows function in the center position of
the web page. The "mx-auto" class helps to create a function
in the middle position of the application.
Syntax
<div class = "alignment">
<div class = "mx-auto bg-info" style = "width:120px"> Center alignment </div>
</div>
Bootstrap width
• The w-* classes specifies the width of an element. The
bootstrap 5 version provides w-25, w-50, w-75, w-100,
mw-100, and mw-auto classes to set the width size.
<div class = "w-50"> </div>
Example:
<div class = "alignment">
<div class = "mx-auto bg-info w-25"> width-25 </div>
<div class = "mx-auto bg-success w-50"> width-50 </
div>
<div class = "mx-auto bg-warning w-75"> width-75 </
div>
</div>
Bootstrap height
• The h-* classes specify the height of an element. The
bootstrap 5 version provides h-25, w-50, h-75, h-100,
mh-100, and mh-auto classes to set the height size.
<div class = "h-50"> </div>
Example:
<div class = "h-25 bg-primary"> Height 25 </div>
<div class = "h-50 bg-dark"> Height 50 </div>
Bootstrap visibility
• Bootstrap provides a visibility class to show and hide
the element.
• The "visible" class appears as the required element, and
the “invisible" class disappears from the web page.
<div class = "visibility">
<div class = "visible|invisible"> </div>
Bootstrap Spacing
• The margin creates space outside the element using the
"m-*" class. The padding creates space inside the
element using the "p-*" class.
• The following syntax shows a basic margin:
<span class = "m-*"> </span>
• The following syntax shows basic padding.
<span class = "p-*"> </span>