Wednesday, November 30, 2022
HomeSoftware DevelopmentBootstrap 5 Badge Headings - GeeksforGeeks

Bootstrap 5 Badge Headings – GeeksforGeeks


Enhance Article

Save Article

Like Article

Enhance Article

Save Article

Badge headings can be utilized to label the newest details about the headings. The dimensions of badges scales in accordance with the heading dimension. It simply matches the dimensions of the father or mother aspect (makes use of relative models). So, you may immediately use the badge class inside any tag (like span) whose father or mother is the heading tag. In order for you any particular shade for the badge, you should utilize contextual courses.

Badges Headings Class: There isn’t any class for the Badge heading, we simply want to make use of the badge class on header components.

Syntax:

<h1> ...
    <span class="badge ...">...</span>
</h1>

Under instance illustrate the Bootstrap 5 Badge Headings:

Instance 1: Right here, on this instance, you may see that now we have used the badge class contained in the span tag whose father or mother aspect is the heading tags. Additionally, now we have used the background shade class bg-primary so you may see the badge.

HTML

<!DOCTYPE html>

<html>

  

<head>

    <hyperlink href=

          rel="stylesheet"

          integrity=

"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"

          crossorigin="nameless" />

    <title>Bootstrap 5 Badge Headings</title>

</head>

  

  

<physique>

    <middle>

        <h1 class="text-success">GeeksforGeeks</h1>

        <h2 class="text-center">Bootstrap 5 Badge Headings</h2>

  

        <h1>

            GeeksforGeeks

            <span class="badge bg-primary">h1 Badge </span>

        </h1>

        <h2>

            GeeksforGeeks

            <span class="badge bg-primary">h2 Badge </span>

        </h2>

        <h3>

            GeeksforGeeks

            <span class="badge bg-primary">h3 Badge </span>

        </h3>

        <h4>

            GeeksforGeeks

            <span class="badge bg-primary">h4 Badge </span>

        </h4>

        <h5>

            GeeksforGeeks

            <span class="badge bg-primary">h5 Badge </span>

        </h5>

        <h6>

            GeeksforGeeks

            <span class="badge bg-primary">h5 Badge </span>

        </h6>

    </middle>

</physique>

</html>

Output:

Bootstrap 5 Badge Headings

Bootstrap 5 Badge Headings

Instance 2: The background shade of heading badges might be modified through the use of the contextual courses together with the badge class.

HTML

<!DOCTYPE html>

<html>

  

<head>

    <hyperlink href=

          rel="stylesheet"

          integrity=

"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"

          crossorigin="nameless" />

    <title>Bootstrap 5 Badge Headings</title>

</head>

  

  

<physique>

    <middle>

        <h1 class="text-success">GeeksforGeeks</h1>

        <sturdy>Bootstrap 5 Badge Headings</sturdy

          

        

        <h4>

            GeeksforGeeks

            <span class="badge bg-primary">h1 Badge </span>

        </h4>

        <h4>

            GeeksforGeeks

            <span class="badge bg-secondary">h2 Badge </span>

        </h4>

        <h4>

            GeeksforGeeks

            <span class="badge bg-success">h3 Badge </span>

        </h4>

        <h4>

            GeeksforGeeks

            <span class="badge bg-warning">h4 Badge </span>

        </h4>

        <h4>

            GeeksforGeeks

            <span class="badge bg-danger">h5 Badge </span>

        </h4>

        <h4>

            GeeksforGeeks

            <span class="badge bg-info">h5 Badge </span>

        </h4>

    </middle>

</physique>

  

</html>

Output:

 

Reference: https://getbootstrap.com/docs/5.0/parts/badge/#headings

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments