Bootstrap 5 Background Color Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report Bootstrap is designed for front-end web development that prioritizes mobile responsiveness. It facilitates quicker web page design due to its built-in CSS, JS, etc. Bootstrap 5 provides a few color utility classes, using which you may use a background color to convey a message. It includes support for opacity, lightning, and darkening, as well as dynamic backdrop colors on different triggers. Bootstrap 5 Background color Class: .bg-primary: This class gives a primary color as the background..bg-success: This class gives a green background..bg-info: This class gives a teal background. .bg-warning: This class gives a yellow background..bg-danger: This class gives a red background. .bg-secondary: This class gives a gray background..bg-dark: This class gives a dark gray background. .bg-light: This class gives a light gray background..bg-transparent: This class gives a transparent background. Example: Here is an example of all informative background color classes. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background color</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body class="ms-2 me-2"> <div class="text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Background colors</strong> <div class="p-3 mb-2 bg-primary text-white"> .bg color-primary</div> <div class="p-3 mb-2 bg-secondary text-white"> .bg-secondary</div> <div class="p-3 mb-2 bg-success text-white"> .bg-success</div> <div class="p-3 mb-2 bg-danger text-white"> .bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark"> .bg-warning</div> <div class="p-3 mb-2 bg-info text-dark"> .bg-info</div> </div> </body> </html> Output: Bootstrap 5 bg-color Example 2: In this example, we will use normal background color classes like white, black, transparent, etc. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background color</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body class="ms-2 me-2"> <div class="text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Background colors</strong> <div class="p-3 mb-2 bg-light text-dark"> .bg-light</div> <div class="p-3 mb-2 bg-dark text-white"> .bg-dark</div> <div class="p-3 mb-2 bg-body text-dark"> .bg-body</div> <div class="p-3 mb-2 bg-white text-dark"> .bg-white</div> <div class="p-3 mb-2 bg-transparent text-dark"> .bg-transparent</div> </div> </body> </html> Output: Bootstrap bg-color Reference: https://getbootstrap.com/docs/5.0/utilities/background/#background-color Comment More infoAdvertise with us Next Article Bootstrap 5 Background gradient A aryanmishra2252 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Background Bootstrap 5 Background is used with the help of the keyword bg. It offers various colors like primary, success, info, warning, danger, secondary, dark, and light.Background Color: The background color of the elements is set to contextual class like .bg-primary, .bg-success, and so on.Background grad 2 min read Bootstrap 5 Badges Background colors Bootstrap 5 Badges Background colors provide different utility classes for backgrounds that help to enhance the appearance of a badge. The default background of any badge is ".bg-light", which can be used with text color utility, like .text-dark class, which helps to enhance its styling. Badges Back 3 min read Bootstrap 5 Progress Background The Bootstrap 5 Progress is used to show the progress of a task to the user. A progress bar displays how much your process progressed or is completed and left. We can use background utility classes to change the appearance of progress bars. Prerequisite: Bootstrap 5 Progress component to create, sta 2 min read Bootstrap 5 Background gradient Bootstrap 5 Background gradient is used to add a gradient to the background. Semi-transparent white serves as the gradient's starting point and fades off toward the bottom. By using the gradient in CSS, we can create variants styling of images which can help to make an attractive webpage. iframe { w 2 min read Bulma Background Color Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. Background class accepts lots of value in Bulma which all the properties are covered in class form. By us 2 min read Bootstrap 5 Colors Bootstrap 5 Colors utility is used to set the text colors, into green as a success, and blue as a primary. There are lots of other informative colors that we need like danger, warning, and so on. In this article, we will know about all the text colors that can be used through Bootstrap 5. iframe { w 3 min read Like