Bootstrap 5 Reboot Misc elements

Bootstrap 5 Reboot Misc elements are some other tags that are used to reset browser defaults and can be used when we do not want to specify CSS explicitly.

Reboot Misc Elements:

Address: Reboot Address element is used to change the font style from italic to normal text. It inherits line height and the margin-bottom is set to 1 rem.
Blockquote: This is used for writing a blockquote with a margin of 1em 40px.These are used when we want to quote content from other sources.
Summary: Text elements can be made interactive to show a summary. The default value of the cursor on it is text
Inline Elements: To point out some elements in the paragraph. It looks different from other texts.

Example 1: In this example, we will learn about address and blockquote.

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

Example 2: In this example, we will learn about inline elements and summary

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">
    <title>BootStrap5 Reboot Misc elements</title>
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2> 
            BootStrap5 Reboot Misc elements
        </h2>
        <p class="text-danger">
            Inline Elements
        </p>
        <p> 
            <abbr title="www.geeksforgeeks.org">
                GeeksforGeeks
            </abbr>
            is a Computer Science Portal 
        </p>
        <p class="text-danger">Summary</p>
        <details>
            <summary>
                GeeksforGeeks
            </summary>
            <cite>
                is best computer science portal
            </cite>
        </details>
    </div>
</body>

</html>

Output

Reference: https://getbootstrap.com/docs/5.0/content/reboot/#misc-elements

Bootstrap 5 Reboot Misc elements

Explore