Bootstrap Reboot

Last Updated : 07 May, 2024

Bootstrap Reboot is used to reboot all the styles of some specific elements. It normalizes HTML elements with opinionated styles, sets better defaults for <html> and <body> elements, optimizes text rendering with native font stacks, and resets margins, paddings, and other styles for consistency across devices and browsers.

Bootstrap 5 Reboot:

Feature	Description
Reboot	Normalize HTML elements with opinionated styles using only element selectors.
Page defaults	Set better page-wide defaults for <html> and <body> elements.
Native font stack	Use the "native font stack" or "system font stack" for optimal text rendering on all devices.
Headings and paragraphs	Remove the default margin for HTML header tags (margin-bottom: .5rem) and paragraphs (margin-bottom: 1rem).
Lists	Reset padding-left on <ul> and <ol> elements.
Inline code	Wrap code in <code> tags.
Code blocks	Place code inside <pre> tags, avoiding angle brackets.
Variables	Reboot var tag elements.
User input	Style input typically entered via keyboard.
Sample output	Indicate sample output from a program using <samp> tag.
Tables	Reboot table borders, padding, and more.
Forms	Reset form elements to base styles, removing inherited styles.
Misc elements	Reset browser defaults for various tags.
HTML5 [hidden] attribute	Use [hidden] attribute to hide sections from rendering on the webpage.

Examples of Bootstrap Reboot

Example 1: In this example, we Bootstrap 5 to create a container with centered text. It includes headings, an address, and a blockquote, styled with Bootstrap classes for text color and alignment.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body class="m-3">
    <center>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>
            BootStrap5 Reboot inline code
        </strong>
    </center>
    <code>
        #include>stdio.h> 
            int main() { 
            printf("Hello Geeks"); 
            } 
    </code>
</body>

</html>

Output:

Bootstrap-Reboot — Bootstrap Reboot Example Output

Example 2: In this example, we showcases various Bootstrap 5 Reboot miscellaneous elements within a centered container. It includes headings, an address, and a blockquote, styled with Bootstrap classes for text color and alignment.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            BootStrap5 Reboot Misc elements
        </h2>
        <p class="text-danger">
            Address
        </p>
        <address>
            <Strong>GeeksforGeeks</Strong> <br>
            A-143, 9th Floor, Sovereign Corporate Tower,<br>
            Sector- 136, Noida, Uttar Pradesh (201305)<br>
            +91-7838223507 (Course related Queries)<br>
        </address>
        <p class="text-danger">
            Blockquote
        </p>
        <blockquote title="www.geeksforgeeks.org" class="blockquote">
            GeeksforGeeks
        </blockquote>
        <p>
            is best computer science portal
        </p>
    </div>
</body>

</html>