Thanks to visit codestin.com
Credit goes to www.scribd.com

0% found this document useful (0 votes)
13 views35 pages

Module 3

Module 3 covers Bootstrap, a free front-end framework for web development that includes design templates and JavaScript plugins for responsive design. It details the advantages of Bootstrap 5, its CDN usage, and provides examples for creating web pages with fixed and fluid containers, contextual colors, and tables. The module emphasizes the mobile-first approach and compatibility with modern browsers while highlighting the differences from previous versions.

Uploaded by

Rajendra Jotawar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
13 views35 pages

Module 3

Module 3 covers Bootstrap, a free front-end framework for web development that includes design templates and JavaScript plugins for responsive design. It details the advantages of Bootstrap 5, its CDN usage, and provides examples for creating web pages with fixed and fluid containers, contextual colors, and tables. The module emphasizes the mobile-first approach and compatibility with modern browsers while highlighting the differences from previous versions.

Uploaded by

Rajendra Jotawar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

Module-3 Bootstrap 20MCA23

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

What is Responsive Web Design?

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.

Why Use Bootstrap?

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.

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 1


Module-3 Bootstrap 20MCA23

Where to Get Bootstrap 5?

There are two ways to start using Bootstrap 5 on your own web site.

You can:

 Include Bootstrap 5 from a CDN


 Download Bootstrap 5 from getbootstrap.com

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).

jsDelivr provides CDN support for Bootstrap's CSS and JavaScript:

<!-- Latest compiled and minified CSS -->


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstra
p.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstra
p.bundle.min.js"></script>

Downloading Bootstrap 5

If you want to download and host Bootstrap 5 yourself, go to https://getbootstrap.com/, and


follow the instructions there.

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 2


Module-3 Bootstrap 20MCA23

Create Your First Web Page With Bootstrap 5

1. Add the HTML5 doctype

 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

 Bootstrap 5 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, 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.

3. Containers

Bootstrap 5 also requires a containing element to wrap site contents.


There are two container classes to choose from:
1. The .container class provides a responsive fixed width container
2. The .container-fluid class provides a full width container, spanning the entire width of
the viewport

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 3


Module-3 Bootstrap 20MCA23

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>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 4


Module-3 Bootstrap 20MCA23

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

 Use the .container class to create a responsive, fixed-width container.


 Note that its width (max-width) will change on different screen sizes:

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>

d) Container Border and Color


Other utilities, such as borders and colors, are also often used together with containers:
Example:

<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>

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>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 6


Module-3 Bootstrap 20MCA23

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">

<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 mt-3">


<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>

</body>
</html>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 7


Module-3 Bootstrap 20MCA23

Output:

 You can also add 50% opacity for black or white text with the .text-black-50
or .text-white-50 classes:

3.2 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.

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 8


Module-3 Bootstrap 20MCA23

<div class="container mt-3">


<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>

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:

<div class="container mt-3">


<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 9


Module-3 Bootstrap 20MCA23

<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>

4.2 Striped Rows

The .table-striped class adds zebra-stripes to a table:

<table class="table table-striped">

4.3 Bordered Table


The .table-bordered class adds borders on all sides of the table and cells:

<table class="table table-bordered">

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 10


Module-3 Bootstrap 20MCA23

4.4 Hover Rows


The .table-hover class adds a hover effect (grey background color) on table rows:
<table class="table table-hover">

4.5 Black/Dark Table

The .table-dark class adds a black background to the table:

<table class="table table-dark">

4.6 Borderless Table


The .table-borderless class removes borders from the table:

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 11


Module-3 Bootstrap 20MCA23

4.7 Contextual Classes


Contextual classes can be used to color the whole table (<table>), the table rows (<tr>) or table
cells (<td>).

<div class="container mt-3">


<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color the table, table rows or table
cells. The classes that can be used are: .table-primary, .table-success, .table-
info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light
and .table-dark:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>[email protected]</td>
</tr>
<tr class="table-success">
<td>Success</td>
Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 12
Module-3 Bootstrap 20MCA23

<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>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 13


Module-3 Bootstrap 20MCA23

The contextual classes that can be used are:

4.8 Table Head Colors


You can also use any of the contextual classes to only add a background color to the table
header:

4.9 Small table


The .table-sm class makes the table smaller by cutting cell padding in half:

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 14


Module-3 Bootstrap 20MCA23

<table class="table table-bordered table-sm">


<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

4.10 Responsive Tables


The .table-responsive class adds a scrollbar to the table when needed (when it is too big
horizontally):

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 15


Module-3 Bootstrap 20MCA23

5. Bootstrap Images
Image Shapes

5.1 Rounded Corners


The .rounded class adds rounded corners to an image:

Example: <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

<div class="container mt-3">


<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p>
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
</div>

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):

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

5.4 Aligning Images


Float an image to the left with the .float-start class or to the right with .float-end:

Example:
<img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end">

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 16


Module-3 Bootstrap 20MCA23

5.5 Centered Image


Center an image by adding the utility classes .mx-auto (margin:auto) and
.d-block (display:block) to the image:
Example:
<img src="paris.jpg" class="mx-auto d-block">

5.6 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:

Example: <img class="img-fluid" src="ny.jpg" alt="New York">

6. Bootstrap 5 Buttons
6.1 Button Styles
Bootstrap 5 provides different styles of buttons:

<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>

The button classes can be used on <a>, <button>, or <input> elements:

<a href="#" class="btn btn-success">Link Button</a>


<button type="button" class="btn btn-success">Button</button>
<input type="button" class="btn btn-success" value="Input Button">
<input type="submit" class="btn btn-success" value="Submit Button">
<input type="reset" class="btn btn-success" value="Reset Button">

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 17


Module-3 Bootstrap 20MCA23

6.2 Button Outline


Bootstrap 5 also provides eight outline/bordered buttons.
Move the mouse over them to see an additional "hover" effect:

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>

6.3 Button Sizes


Use the .btn-lg class for large buttons or .btn-sm class for small buttons:

Example:

<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>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 18


Module-3 Bootstrap 20MCA23

6.4 Block Level Buttons


To create a block level button that spans the entire width of the parent element, use the .d-
grid "helper" class on the parent element:

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:

<div class="d-grid gap-3">


<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>

6.5 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. 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>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 19


Module-3 Bootstrap 20MCA23

6.6 Spinner Buttons


You can also add "spinners" to a button.

<button class="btn btn-primary">


<span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">


<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

<button class="btn btn-primary" disabled>


<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

<button class="btn btn-primary" disabled>


<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>

7. Button Groups
Bootstrap 5 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 to create a button group:


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>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 20


Module-3 Bootstrap 20MCA23

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>

7.1 Vertical Button Groups

Use the class .btn-group-vertical to create a vertical button group:

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>

7.2 Button Groups Side by Side


• Button groups are "inline" by default, which makes them appear side by side when you
have multiple groups:

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 21


Module-3 Bootstrap 20MCA23

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>

7.3 Nesting Button Groups & Dropdown Menus


Nest button groups to create dropdown menus (you will learn more about dropdowns in a later
chapter):

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>

8. Bootstrap 5 Progress Bars


8.1 Basic Progress Bar

A progress bar can be used to show how far a user is in a process.

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 22


Module-3 Bootstrap 20MCA23

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>

8.2 Progress Bar Height

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:

<div class="progress" style="height:20px">


<div class="progress-bar" style="width:40%;height:20px"></div>
</div>

8.3 Progress Bar Labels


Add text inside the progress bar to show the visible percentage:

Example:

<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 23


Module-3 Bootstrap 20MCA23

8.4 Colored Progress Bars

By default, the progress bar is blue (primary). Use any of the contextual background classes to
change its color:

<!-- Blue -->


<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>

<!-- Green -->


<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>

<!-- Turquoise -->


<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>

<!-- Orange -->


<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>

<!-- Red -->


<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div>

<!-- White -->


<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 24


Module-3 Bootstrap 20MCA23

<!-- Grey -->


<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>

<!-- Light Grey -->


<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>

<!-- Dark Grey -->


<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>

8.5 Striped Progress Bars

Use the .progress-bar-striped class to add stripes to the progress bars:


Example:

<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

8.6 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>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 25


Module-3 Bootstrap 20MCA23

8.7 Multiple Progress Bars


Progress bars can also be stacked:

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>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 26


Module-3 Bootstrap 20MCA23

<div class="form-check mb-3">


<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

9.2 Textarea

<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

9.3 Form Row/Grid (Inline Forms)

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>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 27


Module-3 Bootstrap 20MCA23

9.4 Form Control Size

You can change the size of .form-control inputs with .form-control-lg or .form-control-sm:

<input type="text" class="form-control form-control-lg" placeholder="Large input">


<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control form-control-sm" placeholder="Small input">

9.5 Disabled and Readonly

Use the disabled and/or readonly attributes to disable the input field:

<input type="text" class="form-control" placeholder="Normal input">


<input type="text" class="form-control" placeholder="Disabled input" disabled>
<input type="text" class="form-control" placeholder="Readonly input" readonly>

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:

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 28


Module-3 Bootstrap 20MCA23

<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>

10.2 Border Width


Use .border-1 to .border-5 to change the width of the border:

10.3 Border Color


Add a color to the border with any of the contextual border color classes:

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 29


Module-3 Bootstrap 20MCA23

10.4 Border Radius


Add rounded corners to an element with the rounded classes:

<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>

10.5 Float and Clearfix


Float an element to the right with the .float-end class or to the left with .float-start, and clear
floats with the .clearfix class:

10.6 Responsive Floats

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)):

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 30


Module-3 Bootstrap 20MCA23

10.7 Center Align


Center an element with the .mx-auto class (adds margin-left and margin-right: auto):

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:

<div class="alert alert-success">


<strong>Success!</strong> Indicates a successful or positive action.
</div>

11.1 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>

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 31


Module-3 Bootstrap 20MCA23

11.2 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>

11.3 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">

12.Bootstrap 5 Grid System


The Grid System
 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).

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 32


Module-3 Bootstrap 20MCA23

12.1 Grid Classes

The Bootstrap 5 grid system has six 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)
 .col-lg- (large devices - screen width equal to or greater than 992px)
 .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
 .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

The classes above can be combined to create more dynamic and flexible layouts.

12.2 Basic Structure of a Bootstrap 5 Grid


The following is a basic structure of a Bootstrap 5 grid:

<!-- 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>

<!-- Or let Bootstrap automatically handle the layout -->


<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.

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 33


Module-3 Bootstrap 20MCA23

12.3 Grid Options

The following table summarizes how the Bootstrap 5 grid system works across different screen
sizes:

Reference: 1. W3SCHOOLS.COM

2. Bootstrap essentials by Snig by Packt-open source.

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 34


Module-3 Bootstrap 20MCA23

Prof. Praveen Banasode Dept, of MCA,JCE Belagavi Page 35

You might also like