Open In App

Bootstrap Reboot

Last Updated : 07 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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:

FeatureDescription
RebootNormalize HTML elements with opinionated styles using only element selectors.
Page defaultsSet better page-wide defaults for <html> and <body> elements.
Native font stackUse the “native font stack” or “system font stack” for optimal text rendering on all devices.
Headings and paragraphsRemove the default margin for HTML header tags (margin-bottom: .5rem) and paragraphs (margin-bottom: 1rem).
ListsReset padding-left on <ul> and <ol> elements.
Inline codeWrap code in <code> tags.
Code blocksPlace code inside <pre> tags, avoiding angle brackets.
VariablesReboot var tag elements.
User inputStyle input typically entered via keyboard.
Sample outputIndicate sample output from a program using <samp> tag.
TablesReboot table borders, padding, and more.
FormsReset form elements to base styles, removing inherited styles.
Misc elementsReset browser defaults for various tags.
HTML5 [hidden] attributeUse [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/bootstrap@5.0.2/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/bootstrap@5.0.2/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>

Output:

Bootstrap-Reboot-Example

Bootstrap Reboot Example output


Reference: https://getbootstrap.com/docs/5.0/content/reboot/



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads