Bootstrap 5 Reboot Page Defaults

Last Updated : 07 May, 2023

Bootstrap 5 Reboot is a powerful set of default styles that helps us normalize and standardize how webpages are rendered on different browsers and devices. In this article, we will see about Bootstrap5 page defaults which help us provide page-wide defaults on <HTML> and <body> elements. We do not need any special syntax for BootStrap 5 Reboot as it is included in the Bootstrap framework. We just need to add Bootstrap to your application and to use Bootstrap 5 reboot, we need to include the “bootstrap.min.css” file in your HTML document.

Page Defaults used Properties:

box-sizing: border-box: Bootstrap 5 Reboot sets box-sizing property to “border-box” globally on every element including *::before and *::after, to “border-box“, this ensures that the width declared does not exceed due to padding or border.
font-size: 16px: Bootstrap 5 Reboot sets font-size to 16px for the HTML elements which is browser defaults, and font-size:1 rem is applied on the body tag for easy and responsive type-scaling using the CSS media-queries. It also makes it look eligible and readable across different devices.
background-color: #fff: Bootstrap 5 Reboot also sets the CSS background-color for the body to “#fff” (white color) and it is good as all other elements are clearly visible and improve readability.
color:#212529: Bootstrap 5 Reboot sets the default text-color for all <body> elements to #212529 which is dark grey color. this color provides dark contrast and it looks much more readable with white background.

Example 1: In this example, we have created a simple webpage with two headings with h1 and h2 tags and a paragraph using the default font-size, box-sizing, background-color, and text-color provided by Reboot page defaults in Bootstrap 5.

Now, if you see clearly in the head section in our HTML file, we have added Bootstrap and the stylesheet that we are linking is the “bootstrap.min.css” file which contains the page defaults style for HTML and body elements. We have two headings one with <h1> tag and the other with <h2> tag. The <h1> tag is shown in green color because we have applied an inline style to it which overwrites default styles and the <h2> tag does not have any inline styles, so it follows the default styles.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Bootstrap 5 Reboot Example 
    </title> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"> 
    </script> 
  
    <script> 
        function Click() { 
            $(document).ready(function () { 
                $('head').find('link').remove(); 
            }); 
        } 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h3>Bootstrap 5 Reboot Example</h3> 
        <p> 
            This is the simple example for adding  
            & removing the default styles provided 
            by Bootstrap 5 Reboot. 
        </p> 
        <button onclick="myFunction()"> 
            Click Me to Add 
        </button> 
        <button onclick="Click()"> 
            Click Me to Remove 
        </button> 
    </div> 
</body> 
  
<script> 
    function myFunction() { 
        var head = document.getElementsByTagName('HEAD')[0]; 
        var link = document.createElement('link'); 
        link.rel = 'stylesheet'; 
        link.type = 'text/css'; 
        link.href = 
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"; 
        head.appendChild(link); 
    } 
</script> 
  
</html>

Output: From the output, this illustrates without using the Bootstrap5 Reboot Page defaults & With using the Bootstrap5 Reboot Page defaults.

Example 2: In this example, we use the above example & added a navigation bar. We have used the default background color and text color for the navbar and also used the default font size and box-sizing for the links in the navbar as provided by Reboot page defaults.

In this example, we also have <h1> tag with the inline style which overwrites the default style and we have added a navbar which is following default styles. You can see with the Bootstrap5 Reboot page default <ul> has no margin-top and a margin-bottom of 1 rem is added. The padding-left and padding-right are reset, and font-color and size are reset to default 16px and dark-grey color respectively.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Reboot Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"> 
</head> 
  
<body> 
    <ul> 
        <li>My Website</li> 
        <li>Home</li> 
        <li>About</li> 
        <li>Contact</li> 
    </ul> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h2>Bootstrap 5 Reboot Example</h2> 
    <p> 
        This is an example of the default styles 
        provided by Bootstrap 5 Reboot. 
    </p> 
</body> 
  
</html>