Bootstrap 5 Approach Classes

Last Updated : 03 Jul, 2023

Bootstrap 5 is a popular front-end framework used by web developers to create responsive and mobile-first websites. One of the most useful features of Bootstrap 5 is the approach classes. Bootstrap 5 Approach Classes are a new set of classes introduced in Bootstrap 5 that allow developers to style components in a more flexible and customizable way. These classes are designed to provide an easy and intuitive way to modify various properties of components such as padding, margins, text alignment, background color, and more.

Approach classes are a set of Bootstrap utilities that can be used to add custom styles to elements without having to write custom CSS. These classes can be used to modify padding, margins, borders, and other styles.

Syntax:

<div class="bootstrap-approach-class-names"> 
    Content... 
</div>

Below are some examples to demonstrate Bootstrap 5, Approach Classes.

Example 1: In this example, we will change the background color.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-info">  
            GeeksforGeeks 
        </h1> 
          
        <div class="bg-primary p-3"> 
            Primary with contrasting color 
        </div> 
        <div class="bg-secondary p-3"> 
            Secondary with contrasting color 
        </div> 
        <div class="bg-success p-3"> 
            Success with contrasting color 
        </div> 
        <div class="bg-danger p-3"> 
            Danger with contrasting color 
        </div> 
        <div class="bg-warning p-3"> 
            Warning with contrasting color 
        </div> 
        <div class="bg-info p-3"> 
            Info with contrasting color 
        </div> 
        <div class="bg-light p-3"> 
            Light with contrasting color 
        </div> 
        <div class="bg-dark p-3"> 
            Dark with contrasting color 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will see that when we applied the CSS on the div element and also we applied the Bootstrap classes on that element. The CSS doesn’t override the Bootstrap classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
        <style> 
            #mydiv{ 
                background-color: aquamarine; 
            } 
        </style> 
</head> 
  
<body> 
    <div class="mx-auto mt-3 p-4 bg-dark" 
         style="width: 350px;" 
         id="mydiv"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
    </div> 
</body> 
  
</html>