Bootstrap (Part-6) | Progress Bar and Jumbotron

BootStrap articles :

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

Progress Bar

We all have seen a progress bar while executing some process in our computer. A progress bar shows how much of the process is completed and how much is left. You can add a progress bar in your web page using predefined bootstrap classes. Bootstrap has some predefined classes which can be easily used with HTML to style your webpages brilliantly and make your webpage responsive. Bootstrap provides many types of progress bars.
We can add a progress bar to our webpage using progress class in a div class.
Use this code in your HTML code to add a default progress bar.
To create a progress bar:

  1. Use class progress inside a div class.
  2. Inside the already made div class, add another div tag with a class .progress-bar.
  3. Mention the progress of the bar under a style attribute using width as percentage. For eg- style=”width:50%

Code for default progress bar with label.

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="50"
          aria-valuemin="0" aria-valuemax="100" style="width:50%">
               <span>50% Complete</span>
    </div>
</div>

chevron_right


Output:



To remove the label from the progress bar, remove the span tag from the code.
Code for progress bar without label

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="50"
    aria-valuemin="0" aria-valuemax="100" style="width:50%">
    </div>
</div>

chevron_right


Output

Coloured Progress Bar
To add coloured progress bars ,we use different classes for different colours.

Green – .progress-bar-success
Blue – .progress-bar-info
Yellow- .progress-bar-warning
Red – .progress-bar-danger
Use these class inside the div element to colour your progress bar
Code for Coloured Progress Bar

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="progress">
     <div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
     </div>
 </div>

chevron_right


Output

Jumbotron

Jumbotron is a big grey box used to indicate some text which require extra attention. Any text that seems to be important can be written inside a jumbotron to make it appear big and noticeable.
To add a Jumbotron –

  1. Inside a div element, use a jumbotron class.
  2. After this div tag, you can add any text or information you want.
  3. CLose the div element with class jumbotron.
    Code for a jumbotron

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div class="container">
      <div class="jumbotron">
        <h1>Jumbotron</h1>
        <p>This is a Jumbotron.</p>
      </div>
    </div>

    chevron_right

    
    

    Output

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.