0% found this document useful (0 votes)

31 views67 pages

Bootstrap5 GUIDE - MIIT

Uploaded by

dignifiedmt

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)

31 views67 pages

Bootstrap5 GUIDE - MIIT

Uploaded by

dignifiedmt

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

MUFTECH INSTITUTE OF INFORMATION TECHNOLOGY

STUDY
LENOVOGUIDE
USER [Date] [Course title]
MIIT – BOOTSTRAP 5 GUIDE

Table of Contents
INTRODUCTION ............................................................................................................................................ 3
CHAPTER 1: INTRODUCTION TO BOOTSTRAP 5 .......................................................................................... 4
Overview of Bootstrap 5 ........................................................................................................................... 4
Setting up a Bootstrap project .................................................................................................................. 5
Basic HTML structure with Bootstrap ....................................................................................................... 7
Grid system: creating responsive layouts ............................................................................................... 10
Bootstrap Components: Navigation Bar, Cards, Forms, Buttons............................................................ 12
CHAPTER 2: BOOTSTRAP CSS CLASSES ...................................................................................................... 29
Text and typography classes ................................................................................................................... 29
Color and background classes ................................................................................................................. 31
Border and spacing classes ..................................................................................................................... 31
Flexbox and alignment classes ................................................................................................................ 32
Responsive utilities: display, visibility, breakpoints ................................................................................ 34
Buttons .................................................................................................................................................... 35
CHAPTER 3: BOOTSTRAP JAVASCRIPT COMPONENTS ................................................................................ 37
Overview of Bootstrap JavaScript plugins .............................................................................................. 37
Modal and popovers ............................................................................................................................... 37
Dropdowns and tooltips ......................................................................................................................... 39
Carousel and accordion .......................................................................................................................... 40
Scrollspy and tabbed navigation ............................................................................................................. 43
WEEK 4: CUSTOMIZING BOOTSTRAP .......................................................................................................... 46
Customizing Bootstrap with Sass ............................................................................................................ 46
Overriding Bootstrap CSS classes ............................................................................................................ 48
Customizing Bootstrap JavaScript components...................................................................................... 49
Creating custom Bootstrap components ................................................................................................ 51
CHAPTER 5: ADVANCED TOPICS.................................................................................................................. 55
Accessibility with Bootstrap .................................................................................................................... 55
Optimizing performance with Bootstrap ................................................................................................ 56
Integrating Bootstrap with other front-end frameworks ....................................................................... 57
Exercises:..................................................................................................................................................... 58
CHAPTER 6: FINAL PROJECT .................................................................................................................... 59
CHAPTER 7: ................................................................................................................................................. 61

1|Page
MIIT – BOOTSTRAP 5 GUIDE

Additional Topics: ................................................................................................................................... 61

Responsive web design with Bootstrap .............................................................................................. 61
Best practices for Bootstrap customization ........................................................................................ 61
Integrating Bootstrap with third-party libraries and frameworks ...................................................... 62
Creating custom Bootstrap themes .................................................................................................... 63
Advanced JavaScript integration with Bootstrap................................................................................ 64
Design patterns and user experience with Bootstrap ........................................................................ 64

2|Page
MIIT – BOOTSTRAP 5 GUIDE

INTRODUCTION
Bootstrap is a popular front-end development framework that has been used by developers to
create responsive and mobile-first web designs. Bootstrap 5 is the latest version of the
framework that has been updated with new features and improvements. This guide is an
introduction to Bootstrap 5 that aims to provide a comprehensive guide for beginners who want
to learn how to use Bootstrap for their web development projects.

This guide is organized into chapters that cover the basics of Bootstrap 5, including its grid
system, components, and JavaScript plugins. The first chapter introduces the framework and
provides an overview of its features and benefits. The second chapter covers the basics of HTML
and CSS that are necessary for working with Bootstrap. The following chapters delve into more
advanced topics, such as creating custom styles and components, integrating Bootstrap with
JavaScript, and optimizing performance.

Throughout the guide, readers will learn how to use Bootstrap to create responsive and mobile-
first web designs. The chapters are structured to provide a step-by-step guide that walks readers
through the process of creating a complete web design project using Bootstrap 5. Each chapter
includes examples to help readers practice what they have learned and reinforce their
understanding.

Whether you are a beginner or an experienced developer, this guide is designed to provide a
comprehensive introduction to Bootstrap 5 that will help you create modern, responsive web
designs. By the end of this guide, you will have the skills and knowledge necessary to create
custom web designs using Bootstrap 5.

3|Page
MIIT – BOOTSTRAP 5 GUIDE

CHAPTER 1: INTRODUCTION TO BOOTSTRAP 5

Bootstrap 5 is a popular front-end development framework that enables developers to create
responsive and mobile-first web designs. Whether you're a beginner or an experienced
developer, learning Bootstrap 5 is an essential skill for building modern and efficient web
applications.

Bootstrap 5 comes with a comprehensive set of features and tools that make it easy to create
responsive and user-friendly designs. Its grid system allows developers to create layouts that are
optimized for different screen sizes, while its extensive collection of components, including
forms, buttons, and navigation bars, makes it easy to create consistent and visually appealing
designs.

In addition, Bootstrap 5 has improved upon its previous versions by providing more flexibility and
customization options for developers. With the inclusion of new features like custom icons,
improved forms, and utilities like Sass integration, Bootstrap 5 is a versatile and powerful tool for
front-end development.

In this introduction to Bootstrap 5, we will explore the basics of the framework, including its grid
system, components, and JavaScript plugins. We will also delve into more advanced topics, such
as customization, optimization, and integration with other frameworks and libraries. By the end
of this guide, you will have a solid understanding of how to use Bootstrap 5 to create responsive
and efficient web designs.

Whether you are a web developer looking to enhance your skills or a beginner interested in
learning about front-end development, this guide will provide you with the knowledge and tools
necessary to create professional and modern web designs using Bootstrap 5.

Overview of Bootstrap 5
Bootstrap 5 is the latest version of the popular front-end development framework that is used to
create responsive and mobile-first web designs. Bootstrap was originally developed by Twitter,
and it has been widely adopted by developers due to its comprehensive set of features and tools.

4|Page
MIIT – BOOTSTRAP 5 GUIDE

The framework is built on HTML, CSS, and JavaScript and includes a powerful grid system that
makes it easy to create layouts that are optimized for different screen sizes. Bootstrap 5 also
includes a collection of components, including forms, buttons, navigation bars, and more, that
make it easy to create consistent and visually appealing designs.

One of the major improvements in Bootstrap 5 is the removal of jQuery dependency, which
makes the framework more lightweight and faster. It also includes new features like custom
icons, improved forms, utilities like Sass integration, and improved documentation.

Bootstrap 5 also provides greater flexibility and customization options for developers, allowing
them to create custom styles and components that fit their unique needs. Additionally, Bootstrap
5 has improved accessibility features, making it easier for developers to create designs that are
inclusive and accessible to all users.

Overall, Bootstrap 5 is a powerful and versatile front-end development framework that provides
developers with the tools and features they need to create responsive, mobile-first, and visually
appealing web designs. Its flexibility and customization options make it an ideal choice for
developers looking to create unique and custom web designs.

Setting up a Bootstrap project

To set up a Bootstrap project, you will need to follow these steps:

1. Download the Bootstrap files: Go to the Bootstrap website (https://getbootstrap.com)

and download the latest version of Bootstrap. You can either download the compiled CSS
and JavaScript files or the source files, which include Sass and JavaScript files.

2. Create an HTML file: Create a new HTML file and link the Bootstrap CSS and JavaScript
files in the head section of the document. You can either link to the downloaded files or
use a CDN.

5|Page
MIIT – BOOTSTRAP 5 GUIDE

3. Add Bootstrap components: Once you have linked the Bootstrap files, you can start
adding Bootstrap components to your HTML file. You can use Bootstrap's built-in classes
to add styles to elements, such as buttons, forms, and navigation bars.

4. Customize Bootstrap: If you want to customize the styles and components, you can create
a custom CSS file and override the default Bootstrap styles. You can also modify the Sass
files and recompile the CSS files to create a custom version of Bootstrap.

5. Test the project: Finally, test the project to ensure that it is working as expected. Make
sure that the components are displaying correctly and that the project is responsive and
mobile-friendly.

By following these steps, you can set up a Bootstrap project and start creating responsive and
mobile-first web designs using Bootstrap.

Alternatively, you can also set up bootstrap using CDN (Content Delivery Network) using the steps
below;

1. Create an HTML file: Create a new HTML file and add the basic HTML structure.

2. Add the Bootstrap CDN links: In the head section of your HTML file, add the links to the
Bootstrap CSS and JavaScript files provided by a CDN. You can use the following links:

6|Page
MIIT – BOOTSTRAP 5 GUIDE

Note: The above links point to the latest version of Bootstrap available at the time of writing. You
may need to update the version number to match the version you want to use.

3. Add Bootstrap components: With the CDN links in place, you can start adding Bootstrap
components to your HTML file.

4. Customize Bootstrap: If you want to customize the styles and components, you can create
a custom CSS file and override the default Bootstrap styles.

5. Test the project: Finally, test the project to ensure that it is working as expected.

Using a CDN is a quick and easy way to add Bootstrap to your project without having to download
and host the files yourself. However, keep in mind that relying on a third-party service like a CDN
can introduce a dependency and potential performance issues if the CDN is down or slow to
respond.

Basic HTML structure with Bootstrap

To create a basic HTML structure with Bootstrap, follow these steps:

1. Create a new HTML file: Open a new text file and save it with the .html extension.

2. Add the basic HTML structure: In the file, add the basic HTML structure, which includes
the <!DOCTYPE html> declaration, the <html> element, the <head> element, and the
<body> element.

<!DOCTYPE html>
<html>
<head>

7|Page
MIIT – BOOTSTRAP 5 GUIDE

<title>My Bootstrap Website</title>

</head>
<body>

</body>
</html>

3. Add the Bootstrap files: In the <head> section of the HTML file, add the links to the
Bootstrap CSS and JavaScript files. You can either download the files and link to them
locally or use a CDN to link to the files.

<!DOCTYPE html>
<html>
<head>
<title>My Bootstrap Website</title>

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.c
ss" integrity="sha384-
sOezB+Xi/ZbT/tnvIMzx6OJ8REg0rZmEcd6JGm6kz8XweJIRyMbhg+2QmhJq0xhZ
" crossorigin="anonymous">

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
d10fj9uKK2EaBJyFkuMwWC+gbnk1M/fVZgzYtLPp7fZIzO/9QOy11afDyClSZV+k"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.
min.js" integrity="sha384-
RGpZUfPZr6KVhJ6C9FMSpJfKjyxx+1QWWJh3qLx2Znd+ewBZOczcIs78sWbLG1H
X" crossorigin="anonymous"></script>
</head>

8|Page
MIIT – BOOTSTRAP 5 GUIDE

4. Add Bootstrap components: With the Bootstrap files linked, you can start adding
Bootstrap components to your HTML file using Bootstrap's built-in classes. For example,
you can add a navigation bar using the following code:

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container">
<a class="navbar-brand" href="#">My Bootstrap Website</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>

9|Page
MIIT – BOOTSTRAP 5 GUIDE

</div>
</nav>
This code will create a navigation.

Grid system: creating responsive layouts

Bootstrap's grid system is one of its most powerful features. It allows you to easily create
responsive layouts that adjust to different screen sizes. Here's how you can use Bootstrap's grid
system to create responsive layouts:

1. Container: Start by adding a container to your page. This will provide a fixed width to your
layout and center it on the page. You can use the .container class for a fixed width
container or the .container-fluid class for a full-width container.

2. Rows: Inside the container, add a row. A row is a horizontal grouping of columns. You can
use the .row class to create a row.

3. Columns: Inside the row, add your columns. Columns are defined by their width, which is
specified using a number between 1 and 12. You can use the .col class to create columns.
To create a column that spans 6 out of 12 grid units, you can use .col-6.
<div class="container">

10 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

4. Responsive classes: To make your layout responsive, you can use responsive classes to
specify different column widths for different screen sizes. For example, to make a column
span 6 units on small screens and 4 units on medium screens and above, you can use .col-
sm-6 and .col-md-4

5. Nesting columns: You can also nest columns inside other columns. This allows you to
create more complex layouts. To nest columns, simply add a new row inside a column and
then add columns inside that row.

11 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

By using Bootstrap's grid system, you can create responsive layouts that look great on any device.

Bootstrap Components: Navigation Bar, Cards, Forms, Buttons

Bootstrap provides a wide range of pre-built UI components that you can use in your web
projects. These components include:

1. Alerts: Alerts provide a way to display a short message to the user. You can use the .alert
class to create an alert. You can also use different contextual classes such as .alert-
primary or .alert-danger to change the color of the alert.

<div class="alert alert-primary" role="alert">

This is a primary alert—check it out!
</div>

12 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

<div class="alert alert-secondary" role="alert">

This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>

2. Buttons: Buttons are used for triggering an action. You can use the .btn class to create a
button. You can also use different contextual classes such as .btn-primary or .btn-danger
to change the color of the 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>

13 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

3. Forms: Bootstrap provides a set of styles for form controls such as text inputs,
checkboxes, and radio buttons. You can use the .form-control class to create a styled form
control.

<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your
email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

14 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

4. Cards: Cards are a flexible and extensible content container. You can use the .card class
to create a card. Cards can be used to display images, text, and other types of content.

<div class="card" style="width: 18rem;">

<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and
make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

5. Navbar: The navbar is a navigation header that is used to provide easy navigation to
different parts of a website. You can use the .navbar class to create a navbar. Bootstrap
also provides different styles for navbar such as .navbar-dark or .navbar-light.

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">

15 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

<a class="nav-link" href="#">About</a>

</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

6. Dropdowns: Dropdowns provide a way to display a list of options to the user. You can use
the .dropdown class to create a dropdown. Bootstrap also provides support for different
types of dropdowns such as split dropdowns and dropdowns with icons.

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-bs-toggle="dropdown" aria-
expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

In this example, we have a button with the class dropdown-toggle and btn-secondary. The data-
bs-toggle attribute is set to dropdown and the aria-expanded attribute is set to false. This
indicates that the button is a dropdown and it's currently not expanded.

16 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

The dropdown menu is a ul element with the class dropdown-menu and it's associated with the
button using the aria-labelledby attribute.

The li elements inside the dropdown menu represent the individual items in the dropdown list,
and they have the class dropdown-item.

When the user clicks on the button, the dropdown menu will be displayed and the aria-expanded
attribute will be set to true.

7. Modals: Modals are used to display content in a popup window. You can use the .modal
class to create a modal. Bootstrap also provides support for different modal sizes such as
small, medium, and large.

<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#exampleModal">
Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

17 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

8. Carousel: The carousel is used to display a set of images or content in a rotating manner.
You can use the .carousel class to create a carousel. Bootstrap provides support for
different types of carousels such as automatic or manual.

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">

<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h5>First slide label</h5>
<p>Some text here</p>
</div>

18 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h5>Second slide label</h5>
<p>Some text here</p>
</div>
</div>
<div class="carousel-item">
<img src="image3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h5>Third slide label</h5>
<p>Some text here</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>

19 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

In this example, we have a div with an id of myCarousel and the classes carousel and slide. The
data-bs-ride attribute is set to carousel to enable automatic cycling.

The ol element with the class carousel-indicators contains a list of li elements that represent the
indicators for each slide in the carousel.

The div element with the class carousel-inner contains the slides themselves. Each slide is a div
element with the class carousel-item and an img element inside it. The img element has the class
d-block w-100 to make it fill the width of the parent container.

Each div element with the class carousel-item can also have a div element with the class
carousel-caption inside it. This is where you can add text or other content to each slide.

Finally, we have two a elements with the classes carousel-control-prev and carousel-control-
next to allow the user to navigate to the previous or next slide. The data-bs-slide attribute is set
to prev or next to specify the direction of the navigation.

9. Accordion: An accordion is used to display collapsible content panels. You can use the
.accordion class to create an accordion. Bootstrap provides support for different types of
accordion such as accordion with icons or accordion with colored panels.

<div class="accordion" id="myAccordion">

<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-
controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-
labelledby="headingOne" data-bs-parent="#myAccordion">
<div class="accordion-body">
20 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

This is the content for Accordion Item #1.

</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-
toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-
controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-
labelledby="headingTwo" data-bs-parent="#myAccordion">
<div class="accordion-body">
This is the content for Accordion Item #2.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-
toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-
controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-
labelledby="headingThree" data-bs-parent="#myAccordion">
<div class="accordion-body">
This is the content for Accordion Item #3.

21 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

</div>
</div>
</div>
</div>

In this example, we have a div element with the class accordion and an id of myAccordion. Inside
this div element, we have three div elements with the class accordion-item, each representing a
single item in the accordion.

Each accordion-item contains an h2 element with the class accordion-header, which contains a
button element with the class accordion-button. The button element has several data-bs
attributes that specify the behavior of the accordion, such as the target element for the content
(data-bs-target) and whether the item should be expanded or collapsed by default (aria-
expanded).

The content for each item is contained within a div element with the class accordion-collapse,
which has a unique id corresponding to the data-bs-target attribute of the button. The data-bs-
parent attribute of each collapse element is set to #myAccordion to specify that this accordion
is the parent of the collapse elements.

Finally, the content for each item is contained within a div element with the class accordion-
body. You can customize the content for each item by replacing the text inside these elements.

10. Tabs: Tabs are used to display multiple sections of content in a compact and organized
manner. You can use the .nav and .nav-tabs classes to create tabs. Bootstrap provides
support for different types of tabs such as tabs with icons or tabs with vertical orientation.

<ul class="nav nav-tabs" id="myTab" role="tablist">

22 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-
target="#profile" type="button" role="tab" aria-controls="profile" aria-
selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-
target="#contact" type="button" role="tab" aria-controls="contact" aria-
selected="false">Contact</button>
</li>
</ul>

<div class="tab-content" id="myTabContent">

<div class="tab-pane fade show active" id="home" role="tabpanel" aria-
labelledby="home-tab">
<p>Content for Home tab goes here.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-
labelledby="profile-tab">
<p>Content for Profile tab goes here.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-
labelledby="contact-tab">
<p>Content for Contact tab goes here.</p>
</div>
</div>

In this example, we have a ul element with the class nav and nav-tabs. This element contains
three li elements, each representing a single tab in the interface. Each li element has a button

23 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

element with the class nav-link, which serves as the clickable link to activate the corresponding
tab.

Each button element has several data-bs attributes that specify the behavior of the tabs, such as
the target element for the content (data-bs-target) and whether the item should be active by
default (aria-selected).

The content for each tab is contained within a div element with the class tab-pane, which has a
unique id corresponding to the data-bs-target attribute of the button. The role attribute is set to
"tabpanel" to specify that this element contains tab panel content.

Finally, the div element with the class tab-content contains all of the tab panel content. You can
customize the content for each tab by replacing the text inside these elements.

11. Progress bars: Progress bars are used to display the progress of a task or an operation.
You can use the .progress class to create a progress bar. Bootstrap also provides support
for different types of progress bars such as striped or animated.

In this example, we have a div element with the class progress. Inside that element, we have
another div element with the class progress-bar. The style attribute on the div element sets the
width of the progress bar to 75%.

The role attribute is set to "progressbar" to specify that this element represents a progress bar.
The aria-valuenow, aria-valuemin, and aria-valuemax attributes set the current value, minimum
value, and maximum value of the progress bar, respectively.

24 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

You can customize the appearance and behavior of the progress bar by adding additional classes
or modifying the style attribute. For example, you can change the color of the progress bar by
adding the class bg-success (for a green bar) or bg-danger (for a red bar).

12. Tooltips and popovers: Tooltips and popovers are used to display additional information
about an element when the user hovers over it. You can use the .tooltip and .popover
classes to create tooltips and popovers. Bootstrap also provides support for different
styles and positions for tooltips and popovers.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip"

data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>

In this example, we have a button element with the class btn and btn-secondary. The data-bs-
toggle attribute is set to "tooltip" to specify that this button should display a tooltip. The data-
bs-placement attribute sets the position of the tooltip relative to the button, in this case "top".
The title attribute specifies the text to display in the tooltip.

To create a popover, you can use similar markup:

<button type="button" class="btn btn-secondary" data-bs-toggle="popover"

data-bs-placement="top" title="Popover title" data-bs-content="Popover
content goes here.">
Popover on top
</button>

In this example, we have the same button element with the class btn and btn-secondary. The
data-bs-toggle attribute is set to "popover" to specify that this button should display a popover.
The data-bs-placement attribute sets the position of the popover relative to the button, in this

25 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

case "top". The title attribute specifies the text to display in the popover title, and the data-bs-
content attribute specifies the content of the popover.

You can customize the appearance and behavior of tooltips and popovers by adding additional
attributes or modifying the style of the tooltip or popover elements.

13. Spinners: Spinners are used to indicate that a task or operation is in progress. You can use
the .spinner-border or .spinner-grow classes to create spinners. Bootstrap provides
support for different styles and sizes of spinners.

<div class="spinner-border" role="status">

<span class="visually-hidden">Loading...</span>
</div>

In this example, we have a div element with the class spinner-border. The role attribute is set to
"status" to specify that this element represents a loading indicator. Inside the div element, we
have a span element with the class visually-hidden, which provides a text description of the
spinner for users who rely on screen readers.

By default, the spinner is displayed in blue. You can change the color of the spinner by adding the
class text-{color} (e.g., text-danger for a red spinner) to the div element.

Bootstrap also provides a growing spinner, which can be used to indicate that a process is ongoing
but with an uncertain duration. Here's an example of how to create a growing spinner:

<div class="spinner-grow" role="status">

<span class="visually-hidden">Loading...</span>
</div>

In this example, we have a div element with the class spinner-grow. Like the regular spinner, the
role attribute is set to "status" and there is a span element with the class visually-hidden. By

26 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

default, the growing spinner is displayed in blue, but you can change the color using the same
text-{color} classes as for the regular spinner.

You can also customize the size of the spinner by adding the class spinner-border-{size} (for the
regular spinner) or spinner-grow-{size} (for the growing spinner), where {size} is one of sm
(small), md (medium), or lg (large).

14. Jumbotron: A jumbotron is a large callout section that is used to highlight important
information. You can use the .jumbotron class to create a jumbotron. Bootstrap provides
support for different background colors and styles for jumbotrons.

By using these pre-built components, you can create a professional-looking website quickly and
easily. You can also customize these components to fit your specific needs and preferences.

<div class="jumbotron">
<h1 class="display-4">Welcome to my website</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component
for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within
the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

In this example, we have a div element with the class jumbotron. Inside the div element, we have
a h1 element with the class display-4 for the main heading, a p element with the class lead for
the subheading, and a hr element with the class my-4 for a dividing line. We also have a regular
p element for additional content and a a element with the classes btn btn-primary btn-lg for a
call-to-action button.

27 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

You can customize the Jumbotron's background color by adding a background color utility class
to the jumbotron element (e.g., bg-primary for a blue background). You can also customize the
text color by adding a text color utility class to the child elements (e.g., text-white for white text).

You can use the Jumbotron component as a hero section for your website, to introduce your
brand or your product, or to highlight a particular feature or benefit.

28 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

CHAPTER 2: BOOTSTRAP CSS CLASSES

Bootstrap provides several CSS classes for setting colors and backgrounds of elements. Here are
some commonly used color and background classes:

Text and typography classes

1. text-*: This class is used to set the text color of an element. The * can be replaced with a
color name or a hex code. For example, text-primary will set the text color to the primary
color defined by Bootstrap.

2. bg-*: This class is used to set the background color of an element. The * can be replaced
with a color name or a hex code. For example, bg-secondary will set the background color
to the secondary color defined by Bootstrap.

3. bg-light: This class is used to set a light background color.

4. bg-dark: This class is used to set a dark background color.

5. text-white: This class is used to set the text color to white.

6. bg-gradient-*: This class is used to create a gradient background. The * can be replaced
with a gradient type such as primary, secondary, info, warning, danger, or success. For
example, bg-gradient-primary will create a gradient background with the primary color
defined by Bootstrap.

7. text-muted: This class is used to set the text color to a muted or faded color.

8. text-black-50: This class is used to set the text color to 50% black.

9. text-white-50: This class is used to set the text color to 50% white.

10. bg-transparent: This class is used to create a transparent background.

11. text-uppercase: This class is used to make text uppercase.

12. text-lowercase: This class is used to make text lowercase.

13. text-capitalize: This class is used to capitalize the first letter of each word in a text.

29 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

14. bg-primary: This class is used to set the primary background color defined by Bootstrap.

15. bg-secondary: This class is used to set the secondary background color defined by
Bootstrap.

16. bg-info: This class is used to set the info background color defined by Bootstrap.

17. bg-warning: This class is used to set the warning background color defined by Bootstrap.

18. bg-danger: This class is used to set the danger background color defined by Bootstrap.

19. bg-success: This class is used to set the success background color defined by Bootstrap.

20. text-white-50: This class is used to set the text color to 50% white.

21. text-dark: This class is used to set the text color to a dark color.

22. text-muted: This class is used to set the text color to a muted or faded color.

23. text-primary: This class is used to set the text color to the primary color defined by
Bootstrap.

24. text-secondary: This class is used to set the text color to the secondary color defined by
Bootstrap.

25. text-success: This class is used to set the text color to the success color defined by
Bootstrap.

These classes can be combined with other Bootstrap classes to create a wide range of color and
background effects on your website.

30 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

Color and background classes

3. bg-light: This class is used to set a light background color.

4. bg-dark: This class is used to set a dark background color.

5. text-white: This class is used to set the text color to white.

7. text-muted: This class is used to set the text color to a muted or faded color.

8. text-black-50: This class is used to set the text color to 50% black.

9. text-white-50: This class is used to set the text color to 50% white.

10. bg-transparent: This class is used to create a transparent background.

Border and spacing classes

1. border: This class is used to add a border to an element.

2. border-*: This class is used to add a border with a specific color or style to an element.
The * can be replaced with a border color name or a border style name such as dotted,
dashed, solid, double, groove, ridge, inset, or outset. For example, border-primary will
add a border with the primary color defined by Bootstrap.

31 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

3. border-top, border-right, border-bottom, border-left: These classes are used to add

borders to specific sides of an element.

4. rounded: This class is used to add rounded corners to an element.

5. rounded-*: This class is used to add rounded corners with a specific radius to an element.
The * can be replaced with a value from 0 to 3, where 0 means no rounding and 3 means
maximum rounding.

6. m-*: This class is used to set the margin of an element. The * can be replaced with a value
from 0 to 5, where 0 means no margin and 5 means maximum margin.

7. mt-*, mr-*, mb-*, ml-*: These classes are used to set the margin of specific sides of an
element.

8. p-*: This class is used to set the padding of an element. The * can be replaced with a value
from 0 to 5, where 0 means no padding and 5 means maximum padding.

9. pt-*, pr-*, pb-*, pl-*: These classes are used to set the padding of specific sides of an
element.

10. mx-auto: This class is used to horizontally center an element within its parent container.

11. my-*: This class is used to set the vertical margin of an element. The * can be replaced
with a value from 0 to 5, where 0 means no margin and 5 means maximum margin.

Flexbox and alignment classes

Bootstrap provides several CSS classes for working with Flexbox, which is a powerful layout
system for arranging elements in a flexible and responsive way. Here are some commonly used
Flexbox and alignment classes:

1. d-flex: This class is used to create a Flexbox container.

2. justify-content-*: This class is used to align Flexbox items horizontally within a container.
The * can be replaced with a value such as start, end, center, between, or around.

32 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

3. align-items-*: This class is used to align Flexbox items vertically within a container. The *
can be replaced with a value such as start, end, center, baseline, or stretch.

4. flex-row: This class is used to create a Flexbox container with a horizontal layout.

5. flex-column: This class is used to create a Flexbox container with a vertical layout.

6. align-self-*: This class is used to align a Flexbox item within a container. The * can be
replaced with a value such as start, end, center, baseline, or stretch.

7. flex-wrap: This class is used to allow Flexbox items to wrap onto multiple lines if they
exceed the width of the container.

8. flex-fill: This class is used to make a Flexbox item fill the available space within a container.

9. flex-grow-*: This class is used to set the growth factor of a Flexbox item. The * can be
replaced with a value from 0 to 5, where 0 means no growth and 5 means maximum
growth.

10. flex-shrink-*: This class is used to set the shrink factor of a Flexbox item. The * can be
replaced with a value from 0 to 5, where 0 means no shrinking and 5 means maximum
shrinking.

11. align-content-*: This class is used to align Flexbox items within a container when there is
extra space on the cross-axis. The * can be replaced with a value such as start, end, center,
between, or around.

12. text-center: This class is used to horizontally center text within an element.

13. text-right: This class is used to align text to the right within an element.

14. text-left: This class is used to align text to the left within an element.

15. text-justify: This class is used to justify text within an element.

These classes can be combined with other Bootstrap classes to create a wide range of Flexbox
and alignment effects on your website.

33 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

Responsive utilities: display, visibility, breakpoints

Bootstrap provides several CSS classes for creating responsive layouts that adapt to different
screen sizes and devices. Here are some commonly used responsive utility classes:

1. d-*: This class is used to control the display of an element on different screen sizes. The *
can be replaced with a value such as none, block, inline, inline-block, flex, inline-flex, etc.
For example, d-none will hide an element on all screen sizes, while d-md-block will display
an element as a block on medium-sized screens and larger.

2. visible-* and invisible: These classes are used to control the visibility of an element on
different screen sizes. The * can be replaced with a value such as xs, sm, md, lg, or xl. For
example, visible-md will show an element on medium-sized screens and larger, while
invisible will hide an element on all screen sizes.

3. Breakpoints: Bootstrap defines several predefined breakpoints that correspond to

different screen sizes. These breakpoints are used in conjunction with responsive utility
classes to create responsive layouts. The breakpoints are:

• xs: Extra small devices (less than 576px).

• sm: Small devices (576px and up).

• md: Medium devices (768px and up).

• lg: Large devices (992px and up).

• xl: Extra large devices (1200px and up).

4. container and container-fluid: These classes are used to create responsive container
elements that adjust their width based on the screen size. The container class creates a
fixed-width container, while the container-fluid class creates a full-width container.

5. text-*: These classes are used to control the text alignment of an element on different
screen sizes. The * can be replaced with a value such as left, right, center, justify, or
nowrap. For example, text-md-center will center the text on medium-sized screens and
larger.

34 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

These classes can be combined to create complex responsive layouts that adapt to different
screen sizes and devices. By using these classes, you can ensure that your website looks great on
all devices, from small mobile screens to large desktop monitors.

Buttons
Bootstrap provides a wide range of CSS classes for creating buttons with different styles and sizes.

1. btn: This class is used to create a basic button.

2. btn-primary: This class is used to create a button with a primary color.

3. btn-secondary: This class is used to create a button with a secondary color.

4. btn-success: This class is used to create a button with a success color.

5. btn-danger: This class is used to create a button with a danger color.

6. btn-warning: This class is used to create a button with a warning color.

7. btn-info: This class is used to create a button with an informational color.

8. btn-light: This class is used to create a button with a light color.

9. btn-dark: This class is used to create a button with a dark color.

10. btn-link: This class is used to create a button that looks like a link.

11. btn-lg: This class is used to create a large button.

12. btn-sm: This class is used to create a small button.

13. btn-block: This class is used to create a button that fills the width of its parent element.

14. disabled: This class is used to disable a button.

15. active: This class is used to indicate an active button.

35 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

These classes can be combined to create a wide range of button styles and sizes. For example,
you could create a large primary button by using the classes btn btn-lg btn-primary, or a small
secondary button by using the classes btn btn-sm btn-secondary.

Example:

<button class="btn btn-block btn-success">Click me</button>

36 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

CHAPTER 3: BOOTSTRAP JAVASCRIPT COMPONENTS

Overview of Bootstrap JavaScript plugins

Bootstrap includes a number of JavaScript plugins that can enhance the functionality of your
website or web application. These plugins are designed to be easy to use and customizable, and
they provide a range of interactive features that can make your site more engaging and user-
friendly.

Modal and popovers

Modal and popovers are two of the most popular JavaScript plugins included in Bootstrap.

Modals are dialog boxes that are used to display content and messages to the user. They can be
triggered by clicking on a button, link or other element, and can contain text, forms, images,
videos or any other HTML content. Modals are highly customizable and can be styled to match
the design of your website.

Here's an example of how to create a basic modal in Bootstrap 5:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#exampleModal">
Launch demo modal
</button>

37 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-

label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Popovers, on the other hand, are small, customizable text boxes that appear when the user
hovers over or clicks on an element. They can contain text, images, or any other HTML content,
and can be used to provide additional information or context to the user.

Here's an example of how to create a basic popover in Bootstrap 5:

<button type="button" class="btn btn-secondary" data-bs-toggle="popover"

title="Popover title" data-bs-content="And here's some amazing content. It's very
engaging. Right?">Click to toggle popover</button>

These are just two examples of the many JavaScript plugins that are included in Bootstrap. They
can be easily customized to fit the needs of your project, and can help you create a more
interactive and engaging user experience.

38 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

Dropdowns and tooltips

Dropdowns and tooltips are two more JavaScript plugins included in Bootstrap.

Dropdowns are menus that allow the user to select from a list of options. They can be triggered
by clicking on a button or link, and can contain text, icons, or any other HTML content. Dropdowns
are highly customizable and can be styled to match the design of your website.

Here's an example of how to create a basic dropdown in Bootstrap 5:

Tooltips, on the other hand, are small, customizable text boxes that appear when the user hovers
over an element. They can contain text, images, or any other HTML content, and can be used to
provide additional information or context to the user.

Here's an example of how to create a basic tooltip in Bootstrap 5:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip"

data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>

39 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

These are just two more examples of the many JavaScript plugins included in Bootstrap. They can
be easily customized to fit the needs of your project, and can help you create a more interactive
and engaging user experience.

Carousel and accordion

Carousel and accordion are two more JavaScript plugins included in Bootstrap.

The Carousel plugin allows you to create a slideshow of images or other content, with controls
to navigate back and forth through the slides. The slides can contain any HTML content, and can
be customized with various options and settings.

Here's an example of how to create a basic carousel in Bootstrap 5:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">

<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="Image 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="Image 2">
</div>
<div class="carousel-item">
<img src="image3.jpg" class="d-block w-100" alt="Image 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>

40 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

<button class="carousel-control-next" type="button" data-bs-

target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

The Accordion plugin allows you to create collapsible content panels, with headings that can be
clicked to expand or collapse the panel. The panels can contain any HTML content, and can be
customized with various options and settings.

Here's an example of how to create a basic accordion in Bootstrap 5:

<div class="accordion" id="accordionExample">

<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-
controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-
labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for Accordion Item #1 goes here.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">

41 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

<button class="accordion-button collapsed" type="button" data-bs-

toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-
controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-
labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for Accordion Item #2 goes here.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-
toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-
controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-
labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for Accordion Item #3 goes here.
</div>
</div>
</div>
</div>

42 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

In this example, we use the accordion class to define the container for our accordion. Each
accordion item is defined using the accordion-item class. The h2 tag with the accordion-header
class defines the header for each item, and the button tag with the accordion-button class is
used to toggle the visibility of the content associated with that item.

The data-bs-toggle attribute is used to specify that clicking on the button should toggle the
visibility of the content, and the data-bs-target attribute is used to specify the ID of the element
containing the content.

Finally, we use the collapse class to define the content that is hidden by default and the show
class to show the content for the first item by default. The data-bs-parent attribute is used to
specify the ID of the accordion container, so that only one item can be open at a time.

Scrollspy and tabbed navigation

Bootstrap 5's Scrollspy is a JavaScript plugin that highlights navigation items based on the current
scroll position of the page. It is commonly used in one-page websites where the navigation links
lead to different sections on the same page.

To use Scrollspy in your Bootstrap project, you first need to add the data-spy="scroll" and data-
target attributes to the element that you want to spy on. The data-target attribute specifies the
navigation element that you want to highlight, and the data-spy attribute enables the Scrollspy
plugin.

<body data-spy="scroll" data-target="#navbar">

<nav id="navbar">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>

43 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

<div id="section1">Section 1</div>

<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
</body>

In this example, the body element has the data-spy and data-target attributes set. The navigation
links have href attributes pointing to the corresponding sections on the page.

Tabbed navigation is a user interface pattern that displays multiple panels of content in a single
window. Each panel is associated with a tab, and the user can switch between panels by clicking
on the corresponding tab.

Bootstrap provides a built-in tabbed navigation component that you can use to create tabbed
interfaces. To use tabbed navigation in Bootstrap 5, you need to use the nav and tab-content
classes, along with the data-bs-toggle="tab" and data-bs-target attributes. Here's an example
code snippet:

<ul class="nav nav-tabs" id="myTab" role="tablist">

<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-
target="#home" type="button" role="tab" aria-controls="home" aria-
selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-
target="#profile" type="button" role="tab" aria-controls="profile" aria-
selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-
target="#contact" type="button" role="tab" aria-controls="contact" aria-
selected="false">Contact</button>
</li>

44 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-
labelledby="home-tab">
<p>Home tab content goes here.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-
labelledby="profile-tab">
<p>Profile tab content goes here.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-
labelledby="contact-tab">
<p>Contact tab content goes here.</p>
</div>
</div>

45 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

WEEK 4: CUSTOMIZING BOOTSTRAP

Customizing Bootstrap is a powerful way to tailor the framework to fit your specific needs. By
making changes to the variables that control the design and layout of Bootstrap, you can create
a unique look and feel for your website or application.

1. Using Sass: Sass (short for "Syntactically Awesome Stylesheets") is a preprocessor that
allows you to write CSS in a more efficient and organized way. Bootstrap is built with Sass,
so you can customize the framework by editing the Sass variables. By changing the values
of these variables, you can modify the colors, fonts, spacing, and other design elements
of Bootstrap.

2. Creating a custom theme: Bootstrap provides a theming system that allows you to create
your own custom theme. You can either modify an existing theme or create a new one
from scratch. To create a custom theme, you'll need to define your own Sass variables
and use them to override the default values in Bootstrap.

3. Using custom CSS: If you don't want to use Sass or create a custom theme, you can still
customize Bootstrap by writing your own CSS. By targeting the specific classes and IDs
used by Bootstrap, you can override the default styles and create your own custom styles.

4. Customizing JavaScript plugins: Bootstrap includes a variety of JavaScript plugins, such as

modals, tooltips, and dropdowns. You can customize these plugins by modifying their
options and callbacks.

By customizing Bootstrap, you can create a unique and personalized design that fits your specific
needs. Whether you're building a website or application, Bootstrap provides the flexibility and
tools you need to create a polished and professional-looking interface.

Customizing Bootstrap with Sass

Bootstrap uses Sass (short for "Syntactically Awesome Stylesheets") as its CSS preprocessor. Sass
is a powerful tool that allows you to write CSS in a more efficient and organized way. By using
Sass, you can easily customize the look and feel of Bootstrap by modifying the Sass variables.

46 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

To customize Bootstrap with Sass, follow these steps:

1. Install Sass: Before you can customize Bootstrap with Sass, you need to install Sass on
your system. Sass can be installed using a package manager like npm or by downloading
the standalone Sass executable.

2. Create a custom Sass file: To customize Bootstrap, you'll need to create a custom Sass file.
This file should contain your custom Sass variables and any other Sass code you want to
use to customize Bootstrap. Save this file in a directory of your choice.

3. Import the Bootstrap Sass files: To use Bootstrap with Sass, you need to import the
Bootstrap Sass files into your custom Sass file. You can either import the entire Bootstrap
Sass file or individual modules. To import the entire Bootstrap Sass file, use the following
code:

@import "path/to/bootstrap.scss";

To import individual modules, use the following code:

@import "path/to/bootstrap/module";

1. Replace "module" with the name of the module you want to import.

2. Modify the Sass variables: Once you've imported the Bootstrap Sass files into your custom
Sass file, you can modify the Sass variables to customize the design and layout of
Bootstrap. Sass variables are defined using the "$" symbol, followed by the variable name
and value. For example, to change the primary color of Bootstrap, you can modify the
"$primary" variable like this:

$primary: #ff0000;

1. This will change the primary color of Bootstrap to red.

2. Compile your Sass file: Once you've made your customizations, you need to compile your
Sass file into CSS. You can do this using the Sass compiler, which will generate a CSS file
that you can use in your website or application.

47 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

By customizing Bootstrap with Sass, you can create a unique and personalized design that fits
your specific needs. Sass provides a powerful toolset for organizing and managing your CSS,
making it easier to create and maintain complex designs.

Overriding Bootstrap CSS classes

Sometimes, it may be necessary to override Bootstrap's default CSS classes to achieve a specific
design or layout. Here are some ways to override Bootstrap CSS classes:

1. Use more specific selectors: One way to override a Bootstrap CSS class is to use a more
specific selector. For example, instead of using the "btn" class to style a button, you can
use a more specific selector like ".my-btn" to apply your custom styles:

.my-btn {
background-color: red;
color: white;
border-radius: 5px;
}

This will override the default styles for the "btn" class and apply your custom styles to any
element with the "my-btn" class.

2. Use !important: Another way to override a Bootstrap CSS class is to use the "!important"
keyword. This tells the browser to prioritize your custom styles over the default styles.
For example:
.btn-primary {
background-color: red !important;
}

This will override the default background color for the "btn-primary" class and apply your custom
background color.

48 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

3. Modify the Bootstrap Sass variables: As mentioned earlier, you can customize Bootstrap
using Sass variables. By modifying the Sass variables, you can change the default styles of
Bootstrap without having to override specific classes. For example, to change the primary
color of Bootstrap, you can modify the "$primary" variable:
$primary: #ff0000;

This will change the primary color of all Bootstrap elements that use the "$primary" variable.

When overriding Bootstrap CSS classes, it's important to be aware of the potential impact on
other parts of your design. Overriding a class can affect other elements that use the same class,
so it's important to test your changes thoroughly to ensure that they don't cause unintended
consequences.

Customizing Bootstrap JavaScript components

Customizing Bootstrap JavaScript components can be done in a similar way to customizing the
CSS styles. Here are some ways to customize Bootstrap JavaScript components:

1. Use data attributes: Most Bootstrap JavaScript components rely on data attributes to
control their behavior. By adding or modifying these data attributes, you can customize
the component's behavior. For example, to customize the behavior of a modal
component, you can add data attributes to specify the size of the modal or to disable
animation:

<div class="modal" tabindex="-1" role="dialog" data-modal-size="large" data-

animation="false">
...
</div>

This will customize the size and animation behavior of the modal component.

2. Modify the JavaScript code: The JavaScript code for Bootstrap components is written in
jQuery. You can modify the jQuery code to change the behavior of the component.

49 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

However, this requires a good understanding of jQuery and may be more complex than
using data attributes. For example, to modify the behavior of the carousel component,
you can modify the jQuery code that controls the carousel:

$('.carousel').carousel({
interval: 5000,
pause: 'hover'
});

This will modify the interval and pause behavior of the carousel component.

3. Use plugins: Bootstrap provides a number of plugins that allow you to extend the
functionality of the JavaScript components. These plugins can be customized to add new
features or modify existing ones. For example, the "Modal" plugin provides a number of
events that you can use to customize the behavior of the modal component:

$('#myModal').on('show.bs.modal', function (event) {

var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// Update the modal's content
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})

This will customize the behavior of the modal component by updating its content when it is
shown.

When customizing Bootstrap JavaScript components, it's important to be aware of the potential
impact on other parts of your application. Customizing a component can affect its compatibility

50 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

with other components or with future updates to Bootstrap. It's important to test your changes
thoroughly and to use best practices for customizing JavaScript code.

Creating custom Bootstrap components

Creating custom Bootstrap components allows you to extend and enhance the functionality of
Bootstrap to meet specific project requirements. Here are the general steps to follow when
creating custom Bootstrap components:

1. Identify the requirements of the component you want to create.

2. Determine the appropriate HTML structure and CSS styles needed to achieve the desired
functionality.

3. Write the necessary JavaScript code to implement the component's behavior.

4. Test the component thoroughly to ensure it works as expected.

5. Integrate the custom component into your project by including the necessary HTML, CSS,
and JavaScript files.

When creating custom Bootstrap components, it's important to follow Bootstrap's naming
conventions and to avoid modifying the core Bootstrap files to ensure compatibility with future
updates. Instead, create a separate stylesheet and JavaScript file for your custom components
and include them after the Bootstrap files in your project.

Example:

Assuming you want to create a custom Bootstrap component for a pricing table with a unique
design that is not available in the default Bootstrap styles. Here are the steps you could follow:

1. Identify the requirements of the pricing table. For example, you may want to include
columns for different plans, pricing information, and features.

2. Determine the appropriate HTML structure and CSS styles needed to achieve the desired
functionality. Here is an example of the HTML structure you could use:

51 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

<div class="container">
<div class="row">
<div class="col-md-4">
<div class="pricing-table">
<div class="pricing-header">
<h3>Basic</h3>
<span class="price">$9.99/month</span>
</div>
<ul class="features">
<li>5 GB storage</li>
<li>10 users</li>
<li>24/7 support</li>
</ul>
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
<div class="col-md-4">
<div class="pricing-table recommended">
<div class="pricing-header">
<h3>Pro</h3>
<span class="price">$19.99/month</span>
</div>
<ul class="features">
<li>10 GB storage</li>
<li>25 users</li>
<li>24/7 support</li>
</ul>
<button class="btn btn-primary">Sign Up</button>

52 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

</div>
</div>
<div class="col-md-4">
<div class="pricing-table">
<div class="pricing-header">
<h3>Premium</h3>
<span class="price">$29.99/month</span>
</div>
<ul class="features">
<li>20 GB storage</li>
<li>50 users</li>
<li>24/7 support</li>
</ul>
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
</div>

You could then apply custom CSS styles to achieve the desired design.

3. Write the necessary JavaScript code to implement the component's behavior. For
example, you could add an event listener to the sign up button to open a modal window
with a form to collect user information.

4. Test the component thoroughly to ensure it works as expected. Check that the pricing
table is responsive, the buttons and links work correctly, and any JavaScript behavior is
functioning properly.

53 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

5. Integrate the custom component into your project by including the necessary HTML, CSS,
and JavaScript files. You could create a separate stylesheet and JavaScript file for your
custom components and include them after the Bootstrap files in your project.

By following these steps, you can create a custom Bootstrap component that meets your specific
project requirements while maintaining compatibility with future Bootstrap updates.

54 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

CHAPTER 5: ADVANCED TOPICS

Accessibility with Bootstrap

Bootstrap has several built-in accessibility features that help developers create accessible web
applications. Here are some of the key accessibility features of Bootstrap:

1. Keyboard Navigation: Bootstrap is designed to be navigable using keyboard inputs, which

is essential for users who are unable to use a mouse or other pointing device.

2. Semantic HTML: Bootstrap uses semantic HTML elements, such as <nav>, <article>, and
<aside>, which improve accessibility and help assistive technologies interpret the page.

3. ARIA Labels and Roles: Bootstrap also uses ARIA (Accessible Rich Internet Applications)
labels and roles to provide additional information to assistive technologies.

4. High Contrast Mode: Bootstrap includes a high-contrast mode, which can help users with
low vision or color blindness.

5. Screen Reader Support: Bootstrap is compatible with popular screen readers such as
JAWS and NVDA, which can help visually impaired users navigate the site.

6. Skip Navigation Links: Bootstrap includes skip navigation links, which allow users to skip
over the navigation and other repeated content to quickly access the main content of the
page.

7. Focus Styles: Bootstrap includes styles for focusable elements, which make it clear which
element has focus on the page.

8. Responsive Design: Bootstrap's responsive design helps ensure that web pages are usable
on a wide range of devices, including desktops, laptops, tablets, and smartphones.

9. Contrast Ratio: Bootstrap provides high contrast ratio for text and background colors,
making it easier for visually impaired users to read the content.

10. Accessible Forms: Bootstrap provides several form controls that are accessible by screen
readers and assistive technologies. These include aria-label, aria-labelledby, and aria-
describedby attributes.

55 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

By following the best practices of web accessibility and utilizing Bootstrap's built-in accessibility
features, developers can create web applications that are accessible to all users, regardless of
their abilities or disabilities.

Optimizing performance with Bootstrap

Optimizing performance with Bootstrap involves a few key steps:

1. Minification: One of the most basic ways to optimize the performance of your Bootstrap-
based website is to use minification. This involves removing any unnecessary white space
and comments from your code to make it smaller and more efficient. This can be done
using a tool like UglifyJS or similar.

2. Customizing Bootstrap: Another way to improve performance is to only include the

components and styles that you need. Bootstrap offers customization options that allow
you to include only the parts of the framework that you need. By removing any
unnecessary components and styles, you can reduce the size of your CSS and JavaScript
files.

3. CDN Hosting: Using a Content Delivery Network (CDN) can help speed up the delivery of
Bootstrap files. A CDN caches the files on servers around the world, making it faster for
users to access them.

4. Lazy Loading: Another technique for improving performance is to use lazy loading. This
involves loading only the components that are needed when they are needed, rather than
loading everything up front. This can help reduce the initial load time of your page and
make it faster for users to interact with your site.

5. Compression: Compressing your Bootstrap files can also help improve performance. This
can be done using Gzip or similar compression tools. Compressed files are smaller and
faster to download, which can help speed up your website.

56 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

6. Use the latest version: Always make sure you are using the latest version of Bootstrap.
Newer versions often include performance improvements and bug fixes.

7. Minimize external requests: Minimize the number of external requests that your website
makes, as this can slow down your site. Consider combining multiple CSS and JavaScript
files into one, and use image sprites to reduce the number of requests made for images.

8. Optimize images: Optimize images by compressing them without losing quality, and use
the appropriate image format (e.g., JPEG, PNG, SVG) depending on the type of image.

9. Use asynchronous loading: Use asynchronous loading for JavaScript files, which allows
them to be downloaded in the background while the rest of the page loads. This can help
speed up your site and improve user experience.

10. Use browser caching: Use browser caching to store files locally on the user's device,
reducing the amount of data that needs to be downloaded each time the user visits your
site.

By following these steps, you can optimize the performance of your Bootstrap-based website,
making it faster and more efficient for users to access and interact with.

Integrating Bootstrap with other front-end frameworks

Bootstrap can be integrated with other front-end frameworks to create a custom design that
meets your needs. Here are a few examples of how to integrate Bootstrap with other popular
front-end frameworks:

1. Bootstrap + React: React is a popular front-end framework for building single-page

applications. You can use Bootstrap with React by installing the react-bootstrap package,
which provides pre-built Bootstrap components that are optimized for use with React.

2. Bootstrap + Angular: Angular is a popular front-end framework for building dynamic web
applications. You can use Bootstrap with Angular by installing the ngx-bootstrap package,
which provides pre-built Bootstrap components that are optimized for use with Angular.

57 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

3. Bootstrap + Vue.js: Vue.js is a popular front-end framework for building user interfaces.
You can use Bootstrap with Vue.js by installing the vue-bootstrap package, which provides
pre-built Bootstrap components that are optimized for use with Vue.js.

4. Bootstrap + Material Design: Material Design is a popular design language created by

Google. You can use Bootstrap with Material Design by installing the material-bootstrap
package, which provides pre-built Bootstrap components that are styled according to
Material Design guidelines.

By integrating Bootstrap with other front-end frameworks, you can take advantage of the best
features of each framework and create a custom design that meets your specific needs.

Exercises:
• Build a responsive landing page using Bootstrap 5

• Create a custom navigation menu with Bootstrap

• Build a form with custom form controls using Bootstrap

• Create a carousel using Bootstrap JavaScript components

• Build a modal with custom styles and JavaScript integration

• Design and implement a custom Bootstrap theme for a website

58 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

CHAPTER 6: FINAL PROJECT

You are expected to design and submit a bootstrap project applying all the skill your leant
throughout this course.

Applying all the concepts learned in a final project is an excellent way to consolidate your
knowledge of Bootstrap. Here are some ideas for a final project:

1. E-commerce website: Create a fully functional e-commerce website using Bootstrap,

incorporating features such as product listings, shopping cart, and checkout.

2. Personal portfolio: Create a responsive and visually appealing personal portfolio website
that showcases your skills, work, and achievements.

3. Social media platform: Create a social media platform using Bootstrap, incorporating
features such as user profiles, messaging, newsfeed, and notifications.

4. Online education platform: Create an online education platform using Bootstrap,

incorporating features such as course listings, enrollment, payment, and progress
tracking.

5. Blog website: Create a blog website using Bootstrap, incorporating features such as blog
posts, comments, and search.

6. Event management website: Create a website for event management, incorporating

features such as event listings, ticket guideing, and event tracking.

7. Online marketplace: Create an online marketplace using Bootstrap, incorporating

features such as product listings, user reviews, and seller profiles.

8. Travel guideing website: Create a travel guideing website using Bootstrap, incorporating
features such as destination listings, search filters, and guideing management.

9. Real estate website: Create a real estate website using Bootstrap, incorporating features
such as property listings, search filters, and contact forms.

59 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

10. Music streaming website: Create a music streaming website using Bootstrap,
incorporating features such as music player, playlists, and user profiles.

11. Restaurant website: Create a restaurant website using Bootstrap, incorporating features
such as menu listings, online ordering, and reservation management.

12. Job board website: Create a job board website using Bootstrap, incorporating features
such as job listings, search filters, and application management.

These are just some ideas for a final project. You can choose a project that aligns with your
interests and skills, and apply all the concepts learned in the process. You can also decide to pick
a project outside the list provided above. Good luck!

60 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

CHAPTER 7:

Additional Topics:

Responsive web design with Bootstrap

Responsive web design is one of the key features of Bootstrap. Here are some concepts and
techniques you can use to create responsive designs with Bootstrap:

1. Grid system: Bootstrap's grid system is designed to be responsive, meaning that it adjusts
to the size of the screen it is viewed on. By using the grid system, you can create layouts
that are optimized for different screen sizes.

2. Breakpoints: Bootstrap includes several breakpoints that define the size of the screen at
which the layout should change. By using these breakpoints, you can create different
layouts for different screen sizes.

3. Fluid layout: Bootstrap's grid system is based on a percentage-based layout, which means
that it adjusts to the width of the screen. This makes it easier to create designs that are
responsive to different screen sizes.

4. Responsive images: Bootstrap includes classes for responsive images, which

automatically adjust the size of the image based on the screen size.

5. Responsive typography: Bootstrap also includes classes for responsive typography, which
adjust the font size and line height based on the screen size.

By using these techniques, you can create designs that look great on all devices, from desktops
to smartphones.

Best practices for Bootstrap customization

Here are some best practices for customizing Bootstrap:

1. Use Sass: If you plan on making extensive customizations to Bootstrap, it's a good idea to
use Sass instead of plain CSS. Sass allows you to easily override Bootstrap's default styles
without having to write a lot of code.

61 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

2. Use variables: Bootstrap provides a number of variables that you can use to customize
the look and feel of your site. By using these variables, you can easily change things like
colors, fonts, and spacing.

3. Avoid modifying Bootstrap's core files: It's generally not a good idea to modify Bootstrap's
core files, as this can make it difficult to upgrade to newer versions of the framework.
Instead, create a separate CSS file to override Bootstrap's styles.

4. Use custom classes: Instead of modifying Bootstrap's existing classes, create custom
classes to apply your own styles. This makes it easier to maintain your code and upgrade
to newer versions of Bootstrap.

5. Keep it simple: When customizing Bootstrap, it's important to keep things simple. Don't
try to override too many styles at once, and avoid adding unnecessary complexity to your
code.

By following these best practices, you can ensure that your Bootstrap customizations are well-
organized, maintainable, and easy to upgrade in the future.

Integrating Bootstrap with third-party libraries and frameworks

Integrating Bootstrap with third-party libraries and frameworks can extend the functionality and
flexibility of a project. Some of the popular third-party libraries and frameworks that can be used
with Bootstrap include:

1. Font Awesome: Font Awesome is a popular icon toolkit that can be used with Bootstrap
to add icons to your project.

2. jQuery: jQuery is a JavaScript library that can be used with Bootstrap to enhance the
interactivity of your web pages.

3. AngularJS: AngularJS is a popular JavaScript framework that can be used with Bootstrap
to create dynamic web applications.

62 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

4. React: React is a popular JavaScript library for building user interfaces, and it can be used
with Bootstrap to create responsive web applications.

5. Vue.js: Vue.js is a progressive JavaScript framework that can be used with Bootstrap to
create scalable and performant web applications.

When integrating Bootstrap with third-party libraries and frameworks, it is important to ensure
that the version compatibility is correct and that the integration does not cause conflicts with
existing code. It is also important to follow best practices for customization to ensure that the
integration is seamless and does not compromise the quality of the project.

Creating custom Bootstrap themes

Creating custom Bootstrap themes involves changing the default look and feel of Bootstrap
components to match the design requirements of a particular project. Here are some steps to
create custom Bootstrap themes:

1. Use the Bootstrap customizer: The easiest way to create a custom theme is by using the
Bootstrap customizer tool available on the Bootstrap website. It allows you to modify the
default settings of various Bootstrap components, including colors, fonts, and spacing.

2. Customize with Sass: You can also customize Bootstrap using Sass, a popular CSS
preprocessor. By downloading the Bootstrap Sass files, you can modify the variables used
to define the default look and feel of Bootstrap components.

3. Use third-party tools: There are several third-party tools available that can help you create
custom Bootstrap themes. These include Bootswatch, a collection of pre-designed
Bootstrap themes, and ThemeRoller, a tool that allows you to create custom themes for
Bootstrap and other frameworks.

4. Customize individual components: If you only need to modify the look and feel of a few
specific Bootstrap components, you can do so by targeting their CSS classes in your
custom stylesheets.

63 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

5. Test and iterate: Once you have created your custom theme, it's important to test it
thoroughly to ensure that it works as expected. You may need to make adjustments and
iterate on your design until you achieve the desired results.

By following these best practices, you can create custom Bootstrap themes that enhance the
visual appeal of your website or application while maintaining the benefits of the Bootstrap
framework.

Advanced JavaScript integration with Bootstrap

Advanced JavaScript integration with Bootstrap involves leveraging the full power of JavaScript
to add more interactivity to your Bootstrap-based web applications. This can include things like
dynamically updating content, triggering animations and effects, and managing user interactions.

One way to accomplish this is through the use of JavaScript plugins provided by Bootstrap, such
as the Collapse plugin, which allows you to create collapsible content areas on your page, or the
Modal plugin, which lets you display modal windows to the user.

Another way to integrate JavaScript with Bootstrap is by writing your own custom scripts that
interact with the Bootstrap components and CSS classes. For example, you could use the jQuery
library to create custom animations and effects on your Bootstrap elements, or use vanilla
JavaScript to manipulate the DOM and update content dynamically.

Overall, advanced JavaScript integration with Bootstrap requires a good understanding of

JavaScript fundamentals, as well as the inner workings of Bootstrap and its various components.
With this knowledge, you can create highly interactive and engaging web applications that take
full advantage of Bootstrap's capabilities.

Design patterns and user experience with Bootstrap

Design patterns and user experience are critical aspects of web development that impact the
success of a website or web application. While Bootstrap provides a range of pre-designed

64 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

components and layouts, it is essential to apply good design principles to create user-friendly and
engaging interfaces.

Some design patterns and best practices that can be applied with Bootstrap include:

1. Consistency: Ensure consistent use of typography, color, and layout across all pages of
the website or application.

2. Visual hierarchy: Use design elements such as size, color, and placement to guide users'
attention to the most critical information on the page.

3. Accessibility: Consider accessibility standards when designing with Bootstrap to ensure

that all users, including those with disabilities, can use the website or application.

4. Mobile-first design: Bootstrap is designed to be mobile-first, meaning that it prioritizes

mobile devices' user experience. As such, consider designing for small screens first before
scaling up to larger screens.

5. White space: Use white space to create a visual separation between different elements
on the page, making it easier for users to digest information.

6. User testing: Conduct user testing to gain insights into how users interact with the website
or application and identify areas for improvement.

By applying these design patterns and best practices, you can create engaging and user-friendly
interfaces that provide an excellent user experience for your audience.

In conclusion, Bootstrap is a powerful and popular front-end development framework that

provides a comprehensive set of tools and components for building responsive and modern web
applications. Its simplicity and ease of use, combined with its robustness and flexibility, have
made it a go-to choice for developers of all skill levels. With this guide, you have learned the
fundamental concepts and techniques of Bootstrap 5, as well as advanced topics such as
customization, integration with other frameworks, and creating custom themes. Armed with this
knowledge, you are well-equipped to take your web development skills to the next level and

65 | P a g e
MIIT – BOOTSTRAP 5 GUIDE

create stunning, high-performance applications with Bootstrap. Remember to keep exploring

new features and updates in the framework to stay current and up-to-date with the latest web
design trends. Happy coding!

66 | P a g e

Bootstrap 5 Foundations
100% (1)
Bootstrap 5 Foundations
172 pages
Bootstrap 5 Foundations
100% (1)
Bootstrap 5 Foundations
144 pages
Ans Practicebook U01 PDF
36% (14)
Ans Practicebook U01 PDF
2 pages
LM2500 and PGT25 Gas Turbine Families: Updated Shutdown and Restart Procedures
100% (2)
LM2500 and PGT25 Gas Turbine Families: Updated Shutdown and Restart Procedures
15 pages
Bootstrap 5
No ratings yet
Bootstrap 5
42 pages
Bootstrap 4
No ratings yet
Bootstrap 4
444 pages
PHP Lecture-8 CRUD
No ratings yet
PHP Lecture-8 CRUD
16 pages
SR No 2 - Edited
No ratings yet
SR No 2 - Edited
26 pages
Bootstrap
No ratings yet
Bootstrap
23 pages
Bootstrap
No ratings yet
Bootstrap
17 pages
Bootstrap
No ratings yet
Bootstrap
28 pages
Bootstrap and CSS
No ratings yet
Bootstrap and CSS
63 pages
Your First Week With Bootstrap
From Everand
Your First Week With Bootstrap
Syed Fazle Rahman
No ratings yet
19 Bootstrap Introduction
No ratings yet
19 Bootstrap Introduction
21 pages
Mastering Bootstrap 4
From Everand
Mastering Bootstrap 4
Benjamin Jakobus
5/5 (1)
Module 3
No ratings yet
Module 3
35 pages
Bootstrap 5 Report
No ratings yet
Bootstrap 5 Report
21 pages
UNIT 3 Module Uiux
No ratings yet
UNIT 3 Module Uiux
24 pages
CH 1
No ratings yet
CH 1
27 pages
SVKM's NMIMS University Mukesh Patel School of Technology Management & Engineering
No ratings yet
SVKM's NMIMS University Mukesh Patel School of Technology Management & Engineering
3 pages
Bootstrap Introduction
No ratings yet
Bootstrap Introduction
28 pages
Bootstrap in Enterprise Applications: Nikhil Chopra Madhuri Lad
No ratings yet
Bootstrap in Enterprise Applications: Nikhil Chopra Madhuri Lad
28 pages
Intro To Bootstrap
No ratings yet
Intro To Bootstrap
27 pages
Bootstrap Syllabus
No ratings yet
Bootstrap Syllabus
2 pages
Bootstraptesheassigment
No ratings yet
Bootstraptesheassigment
8 pages
Title: What Is Bootstrap?
No ratings yet
Title: What Is Bootstrap?
3 pages
Presentation 1
No ratings yet
Presentation 1
6 pages
Bootstrap for Rails
From Everand
Bootstrap for Rails
Syed Fazle Rahman
No ratings yet
Bootstrap: Presented by Afreen
No ratings yet
Bootstrap: Presented by Afreen
7 pages
What's New in Bootstrap 5
No ratings yet
What's New in Bootstrap 5
4 pages
Bootstrap 5 Interview Questions
No ratings yet
Bootstrap 5 Interview Questions
15 pages
Bootstrap and J Query
No ratings yet
Bootstrap and J Query
130 pages
Bootstrap For Web Development
No ratings yet
Bootstrap For Web Development
6 pages
BS Unit 5 My Notes
No ratings yet
BS Unit 5 My Notes
8 pages
Bootstrap
No ratings yet
Bootstrap
39 pages
Bootstrap5 ITIS243
No ratings yet
Bootstrap5 ITIS243
49 pages
Bootstrap Site Blueprints Volume II - Sample Chapter
No ratings yet
Bootstrap Site Blueprints Volume II - Sample Chapter
32 pages
What Is Bootstrap
No ratings yet
What Is Bootstrap
3 pages
(English (Auto-Generated) ) Bootstrap 5 Full Course 2023 - Bootstrap Zero To Mastery - Bootstrap Full Tutorial (DownSub - Com)
No ratings yet
(English (Auto-Generated) ) Bootstrap 5 Full Course 2023 - Bootstrap Zero To Mastery - Bootstrap Full Tutorial (DownSub - Com)
83 pages
Learning Bootstrap Sample Chapter
No ratings yet
Learning Bootstrap Sample Chapter
11 pages
Chapter 4 Bootstrap
No ratings yet
Chapter 4 Bootstrap
37 pages
Bootstrap1 (WAD Module2)
No ratings yet
Bootstrap1 (WAD Module2)
81 pages
Bootstrap Notes
No ratings yet
Bootstrap Notes
34 pages
ICT245 Web Programming Bootstrap Lecture1 2
No ratings yet
ICT245 Web Programming Bootstrap Lecture1 2
25 pages
Bootstrap
No ratings yet
Bootstrap
17 pages
Bootstrap PP
No ratings yet
Bootstrap PP
11 pages
Bootstrap Full Tutorial
No ratings yet
Bootstrap Full Tutorial
4 pages
Bootstrap Reference Guide Bootstrap 4 and 3 Cheat Sheets Collection Bootstrap 4 Quick Start
No ratings yet
Bootstrap Reference Guide Bootstrap 4 and 3 Cheat Sheets Collection Bootstrap 4 Quick Start
69 pages
Bootstrap 3.3 A Guide Book For Beginners To Learn Web Framework Fast! PDF
No ratings yet
Bootstrap 3.3 A Guide Book For Beginners To Learn Web Framework Fast! PDF
133 pages
Bootstrap (Front-End Framework)
No ratings yet
Bootstrap (Front-End Framework)
4 pages
Module 3
No ratings yet
Module 3
16 pages
Bootstrap Viva
No ratings yet
Bootstrap Viva
12 pages
5bootstrap EN v1
No ratings yet
5bootstrap EN v1
41 pages
W11S01 Bootstrap
No ratings yet
W11S01 Bootstrap
21 pages
Getting Started with Bootstrap 3.2
From Everand
Getting Started with Bootstrap 3.2
Ryan Flores
No ratings yet
Bootstrap 4 Cookbook
From Everand
Bootstrap 4 Cookbook
Ajdin Imsirovic
No ratings yet
Machine Learning in Production: Master the art of delivering robust Machine Learning solutions with MLOps (English Edition)
From Everand
Machine Learning in Production: Master the art of delivering robust Machine Learning solutions with MLOps (English Edition)
Suhas Pote
No ratings yet
Bootstrap by Example - Sample Chapter
100% (1)
Bootstrap by Example - Sample Chapter
22 pages
Team Foundation Server 2015 Customization
From Everand
Team Foundation Server 2015 Customization
Beeming Gordon
No ratings yet
Bootstrap Notes-6
No ratings yet
Bootstrap Notes-6
4 pages
WEEK 8 Introduction To Bootstrap 1577604054
No ratings yet
WEEK 8 Introduction To Bootstrap 1577604054
90 pages
Module1 Bootstrap
No ratings yet
Module1 Bootstrap
3 pages
Big Mumbai
No ratings yet
Big Mumbai
10 pages
05 eLMS Activity 1 Victoriano Joshua P
No ratings yet
05 eLMS Activity 1 Victoriano Joshua P
2 pages
Simplified Procurement Process PDF
No ratings yet
Simplified Procurement Process PDF
1 page
PDP Erik Conrath
No ratings yet
PDP Erik Conrath
8 pages
C Bus 5750WPL GY Document
No ratings yet
C Bus 5750WPL GY Document
1 page
IC Packaging 2008
No ratings yet
IC Packaging 2008
26 pages
ACTIVITY 2 - The PC System
No ratings yet
ACTIVITY 2 - The PC System
4 pages
OD2e L2 Word List
No ratings yet
OD2e L2 Word List
5 pages
Computer SSC CGL 2022 Tier II Paper I - RBE - Compressed
No ratings yet
Computer SSC CGL 2022 Tier II Paper I - RBE - Compressed
17 pages
Data Flow Diagram For Existing Inventory System
No ratings yet
Data Flow Diagram For Existing Inventory System
6 pages
SIMATIC IT Historian Pres
No ratings yet
SIMATIC IT Historian Pres
59 pages
220245-MSBTE-22619-PHP (Unit 5)
No ratings yet
220245-MSBTE-22619-PHP (Unit 5)
7 pages
Govt - Polytechnic College Nedumangadu: Seminar Report ON
No ratings yet
Govt - Polytechnic College Nedumangadu: Seminar Report ON
29 pages
Java Programming Made Notes
No ratings yet
Java Programming Made Notes
6 pages
QASs Presentation
No ratings yet
QASs Presentation
20 pages
August, 2009 Issue
No ratings yet
August, 2009 Issue
8 pages
Odoo Apps
100% (2)
Odoo Apps
70 pages
Strick Pack Dominador
No ratings yet
Strick Pack Dominador
9 pages
Adv - Micro. Programming ATmega8 Using Arduino IDE
No ratings yet
Adv - Micro. Programming ATmega8 Using Arduino IDE
8 pages
FNIS FNIS Readme 7.4.5
No ratings yet
FNIS FNIS Readme 7.4.5
17 pages
Repeater N Datalist Cont
No ratings yet
Repeater N Datalist Cont
6 pages
SEIR Catalog Flyer
No ratings yet
SEIR Catalog Flyer
2 pages
Linux Mpstat Command - Reports Processors Related Statistics
No ratings yet
Linux Mpstat Command - Reports Processors Related Statistics
4 pages
VSD 2022 HW1 Explanation
No ratings yet
VSD 2022 HW1 Explanation
26 pages
TRHW SettingGuide
No ratings yet
TRHW SettingGuide
356 pages
System Design Resources
No ratings yet
System Design Resources
25 pages
Data Warehouse ERD-3
No ratings yet
Data Warehouse ERD-3
1 page
Honeywell Ceiling Speaker 2015
No ratings yet
Honeywell Ceiling Speaker 2015
2 pages