Chapter Five
Bootstrap
Introduction
The most popular HTML, CSS, and JavaScript framework for
creating responsive, mobile-first websites.
With just the knowledge of HTML and CSS anyone can get started
with Bootstrap.
Bootstrap's responsive CSS adjusts to Desktops, Tablets and
Mobiles
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
Cont…
Responsive web design is about creating web sites
which automatically adjust themselves to look good on
all devices, from small phones to large desktops.
Where to Get Bootstrap 5?
There are two ways to start using Bootstrap 5 on your
own web site.
Include Bootstrap 5 from a CDN
Download Bootstrap 5 from [Link]
Cont…
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">
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.
Containers
Bootstrap 5 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
Cont…
Fixed Container
Use the .container class to create a responsive, fixed-width
container.
Note that its width (max-width) will change on different screen
sizes:
Fluid Container
Use the .container-fluid class to create a full width container, that
will always span the entire width of the screen (width is always
100%):
Cont…
Container Border and Color
The max-width of the container will change on different screen
sizes/viewports:
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
Responsive Containers
You can also use the .container-sm|md|lg|xl classes to determine when
the container should be responsive.
Grids
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:
The grid system is responsive, and the columns will re-arrange
automatically depending on the screen size.
Make sure that the sum adds up to 12 or fewer (it is not required
that you use all 12 available columns).
Cont…
Cont…
Grid Classes
The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px
wide)
lg (for laptops and desktops - screens equal to or greater than
1200px wide)
Cont…
First example:
create a row (<div class="row">). Then, add the desired number
of columns (tags with appropriate .col-*-* classes).
The first star (*) represents the responsiveness: sm, md, lg, xl or xxl, while
the second star represents a number, which should add up to 12 for each
row.
Second example:
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, while three cols = 33.33% width to each col. Four
cols = 25% width, etc. You can also use .col-sm|md|lg|xl|xxl to make
the columns responsive.
Cont…
<div class="container-fluid mt-3">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the
row class - this will create four equal-width columns.</p>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
Cont…
<h1> - <h6>
Bootstrap 5 styles HTML headings (<h1> to <h6>) with a bolder font-weight
and a responsive font-size.
You can also use .h1 to .h6 classes on other elements to make them behave
as headings
<small>
In Bootstrap 5 the HTML <small> element (and the .small class) is used to
create a smaller, secondary text in any heading:
<mark>
Bootstrap 5 will style <mark> and .mark with a yellow background color and
some padding:
E.g: <p>Use the mark element to <mark>highlight</mark> text.</p>
Cont…
<abbr>
Bootstrap 5 will style the HTML <abbr> element with a dotted border
bottom and a cursor with question mark on hover:
E.g: <p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
Bootstrap will style the HTML <blockquote> element in the following way:
<blockquote>
<p>Live as if you were to die tomorrow. Learn as if you were to live
forever..</p>
<footer>Mahatma Gandhi</footer>
</blockquote>
Use class .blockquote-reverse to show the quote on the right.
Cont…
<code>
Bootstrap will style the HTML <code> element in the following
way:
<p>The following HTML elements: <code>span</code>,
<code>section</code>, and <code>div</code> defines a section in a
document.</p>
<kbd>
Bootstrap will style the HTML <kbd> element in the following
way:
<p>Use <kbd>ctrl + c</kbd> to copy some text </p>
Cont…
Cont…
Text Colors
Bootstrap 5 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:
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.
Note that background colors do not set the text color, so in some cases
you'll want to use them together with a .text-* color class.
Tables
A basic Bootstrap 5 table has a light padding and horizontal
dividers.
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:
Black/Dark Table
The .table-dark class adds a black background to the table:
Cont…
Dark Striped Table
Combine .table-dark and .table-striped to create a dark, striped table:
Borderless Table
The .table-borderless class removes borders from the table:
Contextual Classes
Contextual classes can be used to color the whole table (<table>), the
table rows (<tr>) or table cells (<td>).
Cont…
Cont…
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):
Images
Rounded Corners
The .rounded class adds rounded corners to an image:
<img src="[Link]" class="rounded" alt="Cinque Terre">
Circle
The .rounded-circle class shapes the image to a circle:
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail (bordered):
Aligning Images
Float an image to the left with the .float-start class or to the right with .float-end:
Centered Image
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block
(display:block) to the image:
Jumbotron
A jumbotron was introduced in Bootstrap 3 as a big padded box for calling extra
attention to some special content or information.
Jumbotrons are no longer supported in Bootstrap 5. However, you can use a <div>
element and add special helper classes together with a color class to achieve the
same effect:
This component can optionally increases the size of headings and add a lot of
margin for landing page content.
<div class="jumbotron">
<div class="container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button"> Learn more</a>
</p>
</div>
</div>
Alerts
Bootstrap 5 provides an easy way to create predefined alert messages:
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="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Alert Links
Add the .alert-link class to any links inside the alert box to create "matching colored
links":
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this
message</a>.
</div>
Cont…
Closing Alerts
To close the alert message, add a .alert-dismissible class to the
alert container.
Then add class="btn-close" and data-bs-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">
<button type="button" class="btn-close" data-bs-
dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a
successful or positive action.
</div>
Cont…
Animated Alerts
The .fade and .show classes adds a fading effect when closing
the alert message:
<div class="alert alert-danger alert-dismissible fade show"
Button
Bootstrap provides different styles of buttons:
Bootstrap has the following classes:
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
Cont…
<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>
Button size
Bootstrap provides four button sizes:
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Cont…
A button can be set to an active (appear pressed) or a disabled (unclickable) state:
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Glyphicons
Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.
Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
Here are some examples of glyphicons:
Envelope glyphicon:
Print glyphicon:
Search glyphicon:
Download glyphicon:
<span class="glyphicon glyphicon-name"></span>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
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.
A default progress bar in Bootstrap looks like this:
To create a default progress bar, add a .progress class to a <div> element:
<div class="container">
<h2>Progress Bar With Label</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-
valuemin="0" aria-valuemax="100" style="width:70%"> 70%
</div>
</div>
Cont…
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
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-
valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
Cont…
Progress bars can also be striped:
Add class .progress-bar-striped to add stripes to the progress bars:
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-
striped" role="progressbar" aria-
valuenow="40" ariavaluemin="0" ariavaluemax="100" style="width:40%">40%
Complete (success)
</div>
</div>
Add class .active to animate the progress bar:
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
Stacked Progress Bars
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>
Basic Pagination
If you have a web site with lots of pages, you may wish to add
some sort of pagination to each page.
A basic pagination in Bootstrap looks like this:
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
The active state shows what is the current page:
Add class .active to let the user know which page he/she is on:
Breadcrumbs
Another form for pagination, is breadcrumbs:
The .breadcrumb class indicates the current page's location within a navigational hierarchy:
<div class="container">
<h2>Breadcrumbs</h2>
<p>The .breadcrumb class indicates the current page's location within a navigational
hierarchy:</p>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
</div>
Cont…
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
Read more on the following
Card
Modal
Tooltip
Icons
Filters
