Welcome To Bootstrap 5 Framework

Bootstrap 5 | Introduction

Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. Bootstrap 5 was officially released on 16 June 2020 after several months of redefining its features.

The 90% things are similar in boostrap 4 and 5 so there is no need to revise it again so in this course we will learn the things are has been add to boostrap 5 .

Some important changes in Bootstrap 5:

Updated official documentation: The docs homepage of v4.5.0 has an updated look and there are some improvements in the rest of the official docs too. Bootstrap docs have some nice padding around the corners to make it more readable and highlight its content.

jQuery is removed completely: Earlier, bootstrap components like modals, tooltips, popovers etc, were dependent on jQuery and popper.js. After the release of the alpha 5 version, Bootstrap no longer depends on jQuery. While jQuery has been used in Bootstrap for more than 8 years, many developers had this issue that jQuery brought uneven access to complex JavaScript behaviors to them. The whole process made possible by their JavaScript maintainer https://github.com/johann-s
Switch to Vanilla JavaScript: JavaScript is the programming language of the web. Most of the modern websites are powered by JavaScript and all modern web browsers on phones, tablets, consoles, desktops include JavaScript Interpreters. One of the major reasons of dropping jQuery was to redefine the framework completely on modern JavaScript standards.
Dropped support of Internet Explorer 10 and 11: Internet Explorer was released in 1995 by Microsoft. As of today, Internet Explorer is no longer relevant with popular browsers like Chrome, Firefox and, Microsoft Edge which is built on chromium. When bootstrap decided to refine their framework purely on Vanilla JavaScript, they dropped the support of IE which is not compatible with modern JavaScript standards.
Responsive Fonts: Bootstrap has introduced responsive font sizes which will automatically resize the typography element according to the viewport size through the RFS Engine. RFS engine was developed to resize font sizes. It provides the facility to resize the CSS properties like “margin”, “padding”, “border-radius”, “box-shadow” by units.

Progress bar in boostrap 5

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. A progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. You can add a progress bar on a web page using predefined bootstrap classes. Bootstrap provides many types of progress bars. Progress components are built with two HTML elements which uses CSS to set the width and a few attributes. It doesn’t use the HTML5 <progress> element which makes it possible to stack progress bars, animate them, and place text labels over them. It uses the .progress as a wrapper to indicate the max value of the progress bar and the inner .progress-bar to indicate the progress so far.

<div class="progress"> Contents... <div>

<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" />
<script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">
</script>
</head>
<body style="text-align: center;">
<div class="container mt-3" style="width: 700px;">
<h1 style="color: red;">
CODOLEARN </h1>
<div class="progress">
<div class="progress-bar" style="width: 50%;">
</div>
</div>
</div>
</body>
</html>

Bootstrap 5 Alerts

Bootstrap 5 is the latest major release of Bootstrap where the UI has been revamped and various changes have been made. Alerts provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages. Bootstrap allows showing these alert messages on the website using predefined classes. Each of the classes has different colors associated with them.

And it Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Types: There are eight types of alerts available in Bootstrap 5. The classes of these alerts are given below:

alert-primary
alert-secondary
alert-success
alert-danger
alert-warning
alert-info
alert-light
alert-dark
alert-defualt

<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">
an example link</a>
. Give it a click if you like. </div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">
an example link</a>
. Give it a click if you like. </div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">
an example link</a>
. Give it a click if you like. </div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">
an example link</a>
. Give it a click if you like. </div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">
an example link</a>
. Give it a click if you like. </div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">
an example link</a>
. Give it a click if you like. </div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">
an example link</a>
. Give it a click if you like. </div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">
an example link</a>
. Give it a click if you like. </div>

</div>

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

<div class="alert alert-success" role="alert">
<h4 class="alert-heading">
CODOLEARN</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate, totam. Magnam dolor deleniti a saepe minus adipisci iure veritatis, autem laborum veniam tempora deserunt ipsum necessitatibus nesciunt itaque. Illum, beatae?</p>
<hr>
<p class="mb-0">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate,</p>
</div>

Closing Alerts

To close the alert message, add a .alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>
Success!</strong>
CODOLEARNERS </div>

Animated Alerts

The .fade and .in classes adds a fading effect when closing the alert message:

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

How does it work

Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
Clicking on the modal “backdrop” will automatically close the modal.
Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
Once again, due to position: fixed, there are some caveats with using modals on mobile devices. See our browser support docs for details.
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

How To Create a Modal

The following example shows how to create a basic modal:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal </button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">
Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">
×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body.. </div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>

Add animation

Use the .fade class to add a fading effect when opening and closing the modal:

<!-- Fading modal -->
<div class="modal fade">
</div>
<!-- Modal without animation -->
<div class="modal">
</div>

Modal Size

Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for large modals, or .modal-xl for extra large modals. Add the size class to the <div> element with class .modal-dialog:

small size

large size

exatra large size

Bootstrap 5 | Card

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. The card is a component provided by Bootstrap 5 which provides a flexible and extensible content container with multiple variants and options. It includes options for headers and footers. Cards support a wide variety of content, including images, text, list groups, links, and more/

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

<div class="card" style="width: 18rem;">
<img src="img.png" class="card-img-top" alt="img.png">
<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-warning">
Go somewhere</a>
</div>
</div>

Basic Card

<div class="card">
<div class="card-body">
Basic card</div>
</div>

Images: The images to the card are inserted with card-img-top and with card-img-bottomwith the help of these two and img tag is used with it to add the image.

<body style="text-align: center;">
<div class="container mt-3">
<h1 style="color: red;">
CODOLEARN </h1>
<div class="container mt-3" style="width: 600px;">
<div class="card">
<img class="card-img-top" src= "img.png" alt="Card image" style="width: 100%;" />
<div class="card-body">
<h4 class="card-title">
CODOLEARN</h4>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, necessitatibus vero nulla aut atque, id iusto est quidem voluptates aperiam sed asperiores facere impedit reiciendis debitis deserunt eius quibusdam tempora?</p>
<a href="#" class="btn btn-warning">
CODOLEARN</a>
</div>
</div>
</div>
</div>
</body>

Example of image in the buttom:

<body style="text-align: center;">
<div class="container mt-3">
<h1 style="color: red;">
CODOLEARN </h1>
<div class="container mt-3" style="width: 600px;">
<div class="card">
<div class="card-body">
<h4 class="card-title">
CODOLEARN</h4>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam id, quibusdam fuga cumque, non magni ipsum sapiente voluptate itaque a in quasi eligendi magnam reprehenderit officia laudantium quia mollitia temporibus?</p>
<a href="#" class="btn btn-warning">
CODOLEARN</a>
</div>
<img class="card-img-bottom" src= "img.png" alt="Card image" style="width: 100%;" />
</div>
</div>
</div>
</body>

Card Image Overlays

Turn an image into a card background and use .card-img-overlay to add text on top of the image:

<div class="card" style="width:500px">
<img class="card-img-top" src="img.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">
CODOLEARN</h4>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis voluptates doloribus ullam? Omnis ullam fugit adipisci sunt harum soluta expedita dolorem vel quas praesentium. Vitae ipsam ducimus incidunt deserunt a?</p>
<a href="#" class="btn btn-warning">
see more</a>
</div>
</div>

Colum cards

The .card-columns class creates a masonry-like grid of cards (like pinterest). The layout will automatically adjust as you insert more cards.

<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN fourth card</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN fifth card</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN sixth card</p>
</div>
</div>
</div>

Bootstrap 5 | Card

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

<div class="card" style="width: 18rem;">
<img src="img.png" class="card-img-top" alt="img.png">
<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-warning">
Go somewhere</a>
</div>
</div>

Basic Card

<div class="card">
<div class="card-body">
Basic card</div>
</div>

Images: The images to the card are inserted with card-img-top and with card-img-bottomwith the help of these two and img tag is used with it to add the image.

<body style="text-align: center;">
<div class="container mt-3">
<h1 style="color: red;">
CODOLEARN </h1>
<div class="container mt-3" style="width: 600px;">
<div class="card">
<img class="card-img-top" src= "img.png" alt="Card image" style="width: 100%;" />
<div class="card-body">
<h4 class="card-title">
CODOLEARN</h4>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, necessitatibus vero nulla aut atque, id iusto est quidem voluptates aperiam sed asperiores facere impedit reiciendis debitis deserunt eius quibusdam tempora?</p>
<a href="#" class="btn btn-warning">
CODOLEARN</a>
</div>
</div>
</div>
</div>
</body>

Example of image in the buttom:

<body style="text-align: center;">
<div class="container mt-3">
<h1 style="color: red;">
CODOLEARN </h1>
<div class="container mt-3" style="width: 600px;">
<div class="card">
<img class="card-img-top" src= "img.png" alt="Card image" style="width: 100%;" />
<div class="card-body">
<h4 class="card-title">
CODOLEARN</h4>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, necessitatibus vero nulla aut atque, id iusto est quidem voluptates aperiam sed asperiores facere impedit reiciendis debitis deserunt eius quibusdam tempora?</p>
<a href="#" class="btn btn-warning">
CODOLEARN</a>
</div>
</div>
</div>
</div>
</body>

Card Image Overlays

Turn an image into a card background and use .card-img-overlay to add text on top of the image:

<div class="card" style="width:500px">
<img class="card-img-top" src="img.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">
CODOLEARN</h4>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis voluptates doloribus ullam? Omnis ullam fugit adipisci sunt harum soluta expedita dolorem vel quas praesentium. Vitae ipsam ducimus incidunt deserunt a?</p>
<a href="#" class="btn btn-warning">
see more</a>
</div>
</div>

Colum cards

The .card-columns class creates a masonry-like grid of cards (like pinterest). The layout will automatically adjust as you insert more cards.

<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN fourth card</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN fifth card</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">
CODOLEARN sixth card</p>
</div>
</div>
</div>

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy.

in other word breadcrumb Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: red;">
CODOLEARN </h1>
</div>
<div style="width: 600px;height: 200px; margin:20px;">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active">
CODOLEARN </li>
</ol>
</nav>
</div>
</body>

Example 3: This example uses show the working of Breadcrumbs in Bootstrap 5.

<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: red;">
CODOLEARN </h1>
</div>
<div style="width: 600px;height: 200px;margin:20px;">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">
CODOLEARN</a>
</li>
<li class="breadcrumb-item">
<a href="#">
Boostrap 5</a>
</li>
<li class="breadcrumb-item active">
Bootstrap 5</li>
</ol>
</nav>
</div>
</body>

Carousel in boostrap 5

Bootstrap 5 provides Carousel which is a slideshow component for cycling through elements. It can be included in the webpage using bootstrap.js or bootstrap.min.js. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect. It is built with CSS 3D transforms and a bit of JavaScript.

<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Carousel </title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" />
<script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">
</script>
</head>
<style>
// Customizing the carousel for white background .carousel-indicators .active { background-color: red; } .carousel-indicators li { background-color: black; } </style>
<body style="text-align: center;">
<div class="container mt-3">
<h1 style="color: red;">
CODOLEARN </h1>
<div id="CODOLEARN" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#CODOLEARN" data-slide-to="0" class="active">
</li>
<li data-target="#CODOLEARN" data-slide-to="1">
</li>
<li data-target="#CODOLEARN" data-slide-to="2">
</li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src= "img.png" alt="CODOLEARN" />
</div>
<div class="carousel-item">
<img src= "img.png" alt="CODOLEARN" />
</div>
<div class="carousel-item">
<img src= "img.png" alt="CODOLEARN" />
</div>
</div>
<a class="carousel-control-prev" href="#CODOLEARN" data-slide="prev">
<span class="carousel-control-prev-icon">
</span>
</a>
<a class="carousel-control-next" href="#CODOLEARN" data-slide="next">
<span class="carousel-control-next-icon">
</span>
</a>
</div>
</div>
</body>
</html>

Add Captions to Slides: Use .carousel-caption inside .carousel-item class is used to add caption to the slide.

<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Carousel </title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" />
<script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">
</script>
</head>
<style>
// Customizing the carousel for white background .carousel-indicators .active { background-color: red; } .carousel-indicators li { background-color: black; } </style>
<body style="text-align: center;">
<div class="container mt-3">
<h1 style="color: red;">
CODOLEARN </h1>
<div id="CODOLEARN" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#CODOLEARN" data-slide-to="0" class="active">
</li>
<li data-target="#CODOLEARN" data-slide-to="1">
</li>
<li data-target="#CODOLEARN" data-slide-to="2">
</li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src= "img/png" alt="CODOLEARN" />
<div class="carousel-caption">
<h3 class="text-warning">
Image 1 </h3>
</div>
</div>
<div class="carousel-item">
<img src= "img.png" alt="CODOLEARN" />
<div class="carousel-caption">
<h3 class="text-warning">
Image 2 </h3>
</div>
</div>
<div class="carousel-item">
<img src= "img.png" alt="CODOLEARN" />
<div class="carousel-caption">
<h3 class="text-warning">
Image 3 </h3>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#CODOLEARN" data-slide="prev">
<span class="carousel-control-prev-icon">
</span>
</a>
<a class="carousel-control-next" href="#CODOLEARN" data-slide="next">
<span class="carousel-control-next-icon">
</span>
</a>
</div>
</div>
</body>
</html>

BOOTSTRAP Introduction