Bootstrap Progress Bar and Jumbotron - GeeksforGeeks

12 Jan, 2022
BootStrap articles :
Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive Tabs
Introduction and Installation
Grid System
Buttons, Glyphicons, Tables
Vertical Forms, Horizontal Forms, Inline Forms
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:
Use class progress inside a div class.Inside the already made div class, add another div tag with a class .progress-bar.Mention the progress of the bar under a style attribute using width as percentage. For eg- style=”width:50%
Use class progress inside a div class.
Inside the already made div class, add another div tag with a class .progress-bar.
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.
<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>
Output:
<div class="progress">    <div class="progress-bar" role="progressbar" aria-valuenow="50"    aria-valuemin="0" aria-valuemax="100" style="width:50%">    </div></div>
Output
Green – .progress-bar-successBlue – .progress-bar-infoYellow- .progress-bar-warningRed – .progress-bar-dangerUse these class inside the div element to colour your progress barCode for Coloured Progress Bar
<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>
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 –
Inside a div element, use a jumbotron class.After this div tag, you can add any text or information you want.CLose the div element with class jumbotron.Code for a jumbotron<div class="container">  <div class="jumbotron">    <h1>Jumbotron</h1>    <p>This is a Jumbotron.</p>  </div></div>Output
Inside a div element, use a jumbotron class.
After this div tag, you can add any text or information you want.
CLose the div element with class jumbotron.Code for a jumbotron<div class="container">  <div class="jumbotron">    <h1>Jumbotron</h1>    <p>This is a Jumbotron.</p>  </div></div>Output
<div class="container">  <div class="jumbotron">    <h1>Jumbotron</h1>    <p>This is a Jumbotron.</p>  </div></div>
Output
This article is contributed by Ayush Saxena. If you like GeeksforGeeks and would like to contribute, you can also write an article using write.geeksforgeeks.org or mail your article to review-team@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.
Web technologies
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?