Normalize in Bootstrap

Last Updated : 12 Apr, 2023

In Bootstrap, Normalize is a CSS file that aims to provide a consistent set of styles across all modern browsers, making it easier to create consistent and predictable designs. It is a reset stylesheet that overrides default styles provided by browsers and sets them to a consistent baseline. In this article, we will know about Normalize in Bootstrap, along with understanding its basic implementation with the help of examples.

Why do we use Normalize in Bootstrap?

We use normalize in Bootstrap to ensure consistent rendering of HTML elements across different web browsers. Different browsers have their own default styles for HTML elements, which can result in the inconsistent rendering of these elements on different browsers. For instance, a heading may have a larger font size or margin on one browser compared to another. This can lead to a lack of consistency in the visual appearance of a website, which can be a problem for designers and developers who want their website to look the same across different platforms. Normalize.css, which is a CSS file that comes with Bootstrap, includes a set of CSS rules that standardize the rendering of HTML elements across different browsers. It resets or normalizes the default styles of HTML elements, making them consistent across different browsers. This helps to ensure that the design of a website is consistent and predictable across different platforms, which can lead to a better user experience for visitors to the website.

In short, we use normalize in Bootstrap to eliminate inconsistencies in the default styles of HTML elements across different browsers, resulting in a more consistent and predictable design for our web pages.

We will explore this concept with the help of suitable examples.

Example 1: In this example, we have used the Bootstrap CDN link along with using Normalize.css properties locally.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <title>My Bootstrap Website</title> 
    
    <!-- Link to Bootstrap CSS -->
    <link rel="stylesheet" 
          href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
    
    <!-- Link to normalize.css -->
    <link rel="stylesheet" 
          href="normalize.css"> 
</head> 
  
<body> 
    <h1>Welcome to GeeksforGeeks</h1> 
    <p class="text-danger h4"> 
      A computer science portal for geeks. 
      </p> 
</body> 
  
</html>

normalize.css

CSS

body { 
    margin: 0; 
    margin-top: 45px; 
    margin-left: 465px; 
    font-family: 'Lucida Sans',  
                 'Lucida Sans Regular',  
                 'Lucida Grande',  
                 'Lucida Sans Unicode', 
                    Geneva, Verdana, sans-serif; 
} 
h1 { 
    font-size: 2em; 
    margin: 0.67em 0; 
    color: green
}

Here, we have used a few of the properties of Normalize.css to see the change in the effect. You may download the Normalize.css from the official website. The text inside the <p> tag utilizes the Bootstrap class, whereas, the <h1> element is styled with the help of Normalize.css. To normalize the font sizes of headings, we don’t need to write any custom CSS. The normalize.css file takes care of this for us by setting a consistent font size for all headings. This CSS rule sets the font size of all headings to 1.5 times the default font size of the parent element (which is usually the body element). By doing this, the font size of headings is consistent across different browsers, and we don’t need to worry about adjusting the font size for each browser separately.

Output:

Example 2: In this example, we have used the Javascript function to include the Normalize.css & Bootstrap CDN links, by clicking the button. Note that, while clicking the button for Normalize.css, it removes the left margin, whereas including the Bootstrap CDN link, it enhances the overall user experience by styling them.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <script> 
        function Click() { 
            var head = document.getElementsByTagName('BODY')[0]; 
            var link = document.createElement('link'); 
            link.rel = 'stylesheet'; 
            link.type = 'text/css'; 
            link.href = 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"; 
            head.appendChild(link); 
        } 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3>Normalize.css</h3> 
    <p> 
        Welcome to GeeksforGeeks 
    </p> 
    <button onclick="myFunction()"> 
        Click Me to Add Normalize CSS 
    </button> 
    <button onclick="Click()"> 
        Click Me to Add Bootstrap 
    </button> 
</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/normalize/8.0.1/normalize.min.css"; 
        head.appendChild(link); 
    } 
</script> 
  
</html>