PUBLISHED ON: JUNE 2, 2021
Bootstrap Close Button
Bootstrap 5 provides a new component called the Close Button. This close button is used to dismiss the content of modals and alerts. The default style of the close button is limited. But it can be modified using the Saas variable. Let's understand by examples.
Example: Adding a close button to a webpage
Add .btn-close class to dismiss any component. For screen readers be sure to add aria-label=close. Here is a small example to add a close button to your webpage using bootstrap 5.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-light mt-3">
<h4 style="text-align: left;">
Close Button
<button type="button" class="btn-close " aria-label="Close"></button>
</h4>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Example: Adding disabled State to a Close Button
To add a disable state to the close button add disabled aria-label="close" within the <button> element. The disabled close buttons change their opacity.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-light mt-3">
<h4 style="text-align: left;">
Close Button
<button type="button" class="btn-close " disabled aria-label="Close"></button>
</h4>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Example: Adding White variant Close Button
Add .btn-close-white class with .btn-close class to change the default close button to its white variant. Here is a program to create a white variant close button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-success mt-3">
<h4 style="text-color: white;">
Close Button
<button type="button" class="btn-close btn-close-white " aria-label="Close"></button>
</h4>
<h4 style="text-align: left;">
Disabled Close Button
<button type="button" class="btn-close btn-close-white " disabled aria-label="Close"></button>
</h4>
</div>
</body>
</html>
Output:
Here is the output of the above program
Conclusion
So now you can easily add close buttons to your components to dismiss them not only that you can customize the close button to its white variant and also add disabled state to make them non-functional.
