How to Change Close Button Color in Bootstrap 5?

How to Change Close Button Color in Bootstrap 5?

Last Updated : 30 Jul, 2024

Changing the color of the close button in Bootstrap 5 involves customizing the styles using CSS. The close button in Bootstrap 5 has a specific class .btn-close, and you can override its styles to achieve the desired color. In this article, we will see how we can do it.

Preview

Screenshot-2024-05-23-230112

Prerequisites

Approach

Start by including Bootstrap 5 in your HTML document. This is achieved by linking to Bootstrap's CSS file from a CDN (Content Delivery Network). This ensures that your webpage has access to Bootstrap's predefined styles.
Define a custom CSS class to modify the appearance of the close button. In the provided code, a class named .btn-close-custom is created to apply the desired color effect to the close button.
Create the HTML structure for the webpage content, including any Bootstrap components you want to customize. In this example, a modal component is used, which includes a close button in the header section.
Assign the custom CSS class .btn-close-custom to the close button element within the Bootstrap component. This ensures that the close button inherits the custom styling defined in the CSS, resulting in the desired color change.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content=
     "width=device-width, initial-scale=1.0">
  <title>Custom Close Button Color in Bootstrap 5</title>
  <link rel="stylesheet" href=
 "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
        crossorigin="anonymous">
  <script src=
 "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" 
          integrity=
"sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" 
          crossorigin="anonymous">
    </script>
  <style>
       .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #2e2e2e;
            padding: 10px 20px;
            color: #fff;
        }

        .navbar img {
            max-width: 200px;
            display: block;
            margin: 0 auto;
        }
        .btn-close-custom {
            filter: invert(0.5) sepia(1) 
            saturate(5) hue-rotate(175deg);
        }
  </style>
</head>
<body>
    <nav class="navbar">
        <img src=
    "https://media.geeksforgeeks.org/gfg-gg-logo.svg" 
            alt="Logo">
    </nav>
    <div class="container mt-5">
        <h1>Bootstrap 5 Custom Close Button</h1>
        <p>This is an example of a Bootstrap 5 modal with a 
            custom colored close button.</p>
    
        <!-- Button trigger modal -->
        <button type="button" 
                class="btn btn-primary" 
                data-bs-toggle="modal" 
                data-bs-target="#exampleModal">
            Launch demo modal
        </button>

        <!-- Modal -->
        <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="btn-close btn-close-custom" 
                        data-bs-dismiss="modal"
                            aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    This is the content of the modal. 
                    Notice the custom close button
                    color in the top-right corner.
                </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>
    </div>   
</body>
</html>

Output:

How to Change Close Button Color in Bootstrap 5?

A

ashishrew7vh

Improve

Article Tags :

Similar Reads

How to Change Button Color in Bootstrap 5 ?

Bootstrap 5 provides developers with a lot of capabilities that enable them to create responsive and aesthetically pleasing online apps. Developers frequently require customizations, such as altering button colors to better reflect their branding or design philosophies. This post will walk you throu

How to Change Colors for a Button in React-Bootstrap?

In this tutorial, we will learn how to change the colors of buttons in React-Bootstrap. The Button component in React-Bootstrap is a simple button with CSS and the effects of Boostrap. We can apply different colors based on the different situations like Error, Success, etc. Steps to create the appli

How to Change Accordion Button Collapsed Icon Color in Bootstrap ?

This article demonstrates how to customize the colors of the accordion button icons in a Bootstrap accordion. By default, Bootstrap accordions use a plus/minus arrow icon to indicate the collapsed or expanded state of accordion items. This tutorial provides step-by-step instructions on how to change

How to change the position of modal close button in bootstrap?

The Modal component is a dialog box or a popup window that displays on top of the page. Modals can be used as alert windows as well as for accepting some input values. Example of a basic modal: For changing the position of the close button, we need to create a modal element. The below code will crea

Bootstrap 5 Close button White variant

Bootstrap 5 Close button is used to add more user access and enhance user experience to a website and its components. Generally, the default version of this button is dark/black and it goes universally with all the colors except the dark/black colored background or component which goes well and look