Signup/Sign In

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.

Close Button

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.

Disabled close button

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

White variant Close button

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.