Bootstrap (Part-8) | Badges, Labels, Page Headers

  1. Introduction and Installation
  2. Buttons, Glyphicons, Tables
  3. Vertical Forms, Horizontal Forms, Inline Forms
  4. DropDowns and Responsive Tabs
  5. Progress Bar and Jumbotron

Badges

We all have seen some numerical indicators beside some links in various websites. These are called badges. These badges tells how many items are available or associated with the link.
To add a badges to your webpage, add a class .badge to a span element like this-

filter_none

edit
close

play_arrow

link
brightness_4
code

<a href="#">Messages <span class="badge">2</span></a><br>
<a href="#">Drafts <span class="badge">3</span></a><br>
<a href="#">Comments <span class="badge">4</span></a

chevron_right




Output

Badges inside buttons
To insert badges inside buttons, add a class .badge to a button element like this-

filter_none

edit
close

play_arrow

link
brightness_4
code

<button type="button" class="btn btn-primary">Messages 
<span class="badge">2</span></button

chevron_right



Output

Labels

We all have seen some additional information beside some links in various websites. These are called lables. These lables tells additional information about the link or text.
To add a lables to your webpage, add a class .lable to a span element like this-

  1. Use the following classes to style the colour of the lable
    Grey – lable-default
    Green – lable-success
    Blue – lable-info
    Yellow –lable-warning
    Red – lable-danger

filter_none

edit
close

play_arrow

link
brightness_4
code

<span class="label label-default">Grey Label</span>
<span class="label label-success">Green Label</span>
<span class="label label-info">Blue Label</span>
<span class="label label-warning">Yellow Label</span>
<span class="label label-danger">Red Label</span

chevron_right


Panels

We all have seen a box around some text or any information in various websites. These are called panels. These panels are bordered box with some padding which can be easily added around some text using bootstrap classes.
The content we need to write inside the panel is written in a div element with a class.panel-body
To add a panels to your webpage, add a class .panel to a div element like this-

  • Use the following classes to style the colour of the lable
    Grey – panel-default
    Green – panel-success
    Blue – panel-info
    Yellow –panel-warning
    Red – panel-danger
  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div class="panel panel-default">
      <div class="panel-body">Panel</div>
    </div>

    chevron_right

    
    



    Coloured Panels


    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div class="panel panel-default">
       <div class="panel-body">Panel</div>
     </div>
     
     <div class="panel panel-primary">
       <div class="panel-body">Panel</div>
     </div>
     
     <div class="panel panel-success">
       <div class="panel-body">Green Panel</div>
     </div>
     
     <div class="panel panel-info">
       <div class="panel-body">Blue Panel</div>
     </div>
     
     <div class="panel panel-warning">
       <div class="panel-body">Yellow Panel</div>
     </div>
     
     <div class="panel panel-danger">
       <div class="panel-body">Red Panel</div>
     </div>

    chevron_right

    
    


    Output

    Page Header

    Page header allows us to write a heading on our webpage with proper spacing around it so that it can be distinguished from other text on the webpage.
    To add a pageheader to your webpage, add a class .page-header to a div element like this-

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div class = "page-header">
        <h1>
          Hi !
       </h1>
     </div>
    <p>My name is Ayush.</p>

    chevron_right

    
    


    Output

    Note the difference if we don’t use page-header class

    This article is contributed by Ayush Saxena. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.



    My Personal Notes arrow_drop_up


    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.