Module 3
Module 3
MODULE – 3: Bootstrap
1. Introduction
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
Responsive web design is about creating web sites which automatically adjust themselves to look good
on all devices, from small phones to large desktops.
Bootstrap Versions
Bootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013); with new
components, faster stylesheet and more responsiveness.
Bootstrap 5 supports the latest, stable releases of all major browsers and platforms. However,
Internet Explorer 11 and down is not supported.
The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched
to vanilla JavaScript instead of jQuery.
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, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap 5 is compatible with all modern browsers (Chrome,
Firefox, Edge, Safari, and Opera). Note that if you need support for IE11 and down, you
must use either BS4 or BS3.
There are two ways to start using Bootstrap 5 on your own web site.
You can:
Bootstrap 5 CDN
If you don't want to download and host Bootstrap 5 yourself, you can include it from a CDN
(Content Delivery Network).
Downloading Bootstrap 5
Bootstrap 5 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 title and character set:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 5 is mobile-first
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.
3. Containers
Container Example - The following example shows the code for a basic Bootstrap 5 page
(with a responsive fixed width container):
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<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>
</body>
</html>
Container Fluid Example - The following example shows the code for a basic Bootstrap 5 page
(with a full width container):
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>
2. Bootstrap 5 Containers
Bootstrap 5 Containers
Bootstrap requires a containing element to wrap site contents.
Containers are used to pad the content inside of them, and there are two container classes
available:
a) The .container class provides a responsive fixed width container
b) The .container-fluid class provides a full width container, spanning the entire width of
the viewport.
a) Fixed Container
Example:
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
b) 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%):
Example:
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
c) Container Padding
Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 5
Module-3 Bootstrap 20MCA23
By default, containers have left and right padding, with no top or bottom padding.
Therefore, we often use spacing utilities, such as extra padding and margins to make
them look even better. For example, .pt-5 means "add a large top padding":
Example:
<div class="container pt-5"></div>
e) Responsive Containers
You can also use the .container-sm|md|lg|xl classes to determine when the container
should be responsive.
The max-width of the container will change on different screen sizes/viewports:
Example:
<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>
<div class="container-xxl">.container-xxl</div>
3. Bootstrap elements:
3.1 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:
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">
</head>
<body>
</body>
</html>
Output:
You can also add 50% opacity for black or white text with the .text-black-50
or .text-white-50 classes:
4. Bootstrap 5 Tables
4.1 Basic Table
A basic Bootstrap 5 table has a light padding and horizontal dividers.
The .table class adds basic styling to a table:
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>[email protected]</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>[email protected]</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>[email protected]</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>[email protected]</td>
</tr>
<tr class="table-dark">
<td>Dark</td>
<td>Bo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table">
...
</table>
</div>
5. Bootstrap Images
Image Shapes
5.2 Circle
The .rounded-circle class shapes the image to a circle:
Example:
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
5.3 Thumbnail
The .img-thumbnail class shapes the image to a thumbnail (bordered):
Example:
<img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end">
6. Bootstrap 5 Buttons
6.1 Button Styles
Bootstrap 5 provides different styles of buttons:
Example:
<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>
Example:
Example:
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>
If you have many block-level buttons, you can control the space between them with
the .gap-* class:
Example:
The class .active makes a button appear pressed, and the disabled attribute makes a button
unclickable. Note that <a> elements do not support the disabled attribute and must therefore use
the .disabled class to make it visually appear disabled.
Example:
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
7. Button Groups
Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button
group:
Example:
<div class="btn-group btn-group-lg">
<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>
Example:
<div class="btn-group-vertical">
<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>
Example:
<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>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
Example:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
To create a default progress bar, add a .progress class to a container element and add
the .progress-bar class to its child element. Use the CSS width property to set the width of the
progress bar:
Example:
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
The height of the progress bar is 1rem (usually 16px) by default. Use the CSS height property to
change it. Note that you must set the same height for the progress container and the progress bar:
Example:
Example:
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
By default, the progress bar is blue (primary). Use any of the contextual background classes to
change its color:
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
Example:
<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>
9. Bootstrap Forms
9.1 Stacked Form
All textual <input> and <textarea> elements with class .form-control get proper form styling:
Example:
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
9.2 Textarea
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
If you want your form elements to appear side by side, use .row and .col:
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
You can change the size of .form-control inputs with .form-control-lg or .form-control-sm:
Use the disabled and/or readonly attributes to disable the input field:
10.Bootstrap 5 Utilities
Utilities / Helper Classes
Bootstrap 5 has a lot of utility/helper classes to quickly style elements without using any CSS
code.
10.1 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-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
Float an element to the left or to the right depending on screen width, with the responsive float
classes (.float-*-start|end – where *
is sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):
11.Bootstrap Alerts
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:
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).
The classes above can be combined to create more dynamic and flexible layouts.
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
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.
The following table summarizes how the Bootstrap 5 grid system works across different screen
sizes:
Reference: 1. W3SCHOOLS.COM