Tutorialspoint examples

Learn java tutorial with examples for beginners online

Bootstrap 4 Colored Progress Bars Tutorial

A progress bar is a graphical control element used to visualize the progression of an extended computer operation. Bootstrap provides several types of progress bars. The .progress class is used with div element to create default progress bar.

Bootstrap provides the following contextual classes to provide “meaning through colors”. By default, the progress bar is blue.
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-white
• .bg-secondary
• .bg-light
• .bg-dark

Bootstrap 4 Colored Progress Bars Example:

<!DOCTYPE html>
<html lang="en">
  <title>Bootstrap Colored Progress Bars Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <h2> Bootstrap Colored Progress Bars Example</h2>
  <!-- Blue -->
  <div class="progress">
    <div class="progress-bar" style="width:10%"></div>
  <!-- Green -->
  <div class="progress">
    <div class="progress-bar bg-success" style="width:20%"></div>
  <!-- Turquoise -->
  <div class="progress">
    <div class="progress-bar bg-info" style="width:30%"></div>
  <!-- Orange -->
  <div class="progress">
     <div class="progress-bar bg-warning" style="width:40%"></div>
  <!-- Red -->
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:50%"></div>
  <!-- White -->
  <div class="progress border">
    <div class="progress-bar bg-white" style="width:60%"></div>
  <!-- Grey -->
  <div class="progress">
    <div class="progress-bar bg-secondary" style="width:70%"></div>
  <!-- Light Grey -->
  <div class="progress border">
    <div class="progress-bar bg-light" style="width:80%"></div>
  <!-- Dark Grey -->
  <div class="progress">
    <div class="progress-bar bg-dark" style="width:90%"></div>

Try it:

Bootstrap Colored Progress Bars Example on jsbin.com

Bootstrap 4 Tutorial

Bootstrap 4 Overview.
Bootstrap 4 package tutorial.
Bootstrap 4 CDN link tutorial.
Create First Web Page With Bootstrap 4.
Bootstrap 4 Grid System.
Bootstrap 4 grid equal columns example.
Bootstrap 4 grid responsive equal columns.
Bootstrap 4 grid responsive unequal columns.
Bootstrap 4 Jumbotron tutorial.
Bootstrap 4 Full Width Tutorial.
Bootstrap 4 Page Header Tutorial.
Bootstrap 4 Well tutorial.
Bootstrap 4 Alert Tutorial.
Bootstrap 4 Alert Link Tutorial.
Bootstrap 4 Closing Alerts tutorial.
Bootstrap 4 Animated Alerts.
Bootstrap 4 Buttons Style.
Bootstrap 4 Buttons Outline Tutorial.
Bootstrap 4 Buttons Size Tutorial.
Bootstrap 4 Block Level Buttons tutorial.
Bootstrap 4 Buttons States Tutorial.
Bootstrap 4 Button Groups Tutorial.
Bootstrap 4 Vertical Button Groups.
Bootstrap 4 Justified Button Groups.
Bootstrap 4 Nesting Button Groups.
Bootstrap 4 Split Button Dropdowns.
Bootstrap 4 Badges Tutorial.
Bootstrap 4 Basic Progress Bar.
Bootstrap 4 Progress Bar Height.
Bootstrap 4 Progress Bar With Label.
Bootstrap 4 Colored Progress Bars.
Bootstrap 4 Striped Progress Bars.
Bootstrap 4 Animated Progress Bars.
Bootstrap 4 Stacked Progress Bars.
Bootstrap 4 Pagination Tutorial.
Bootstrap 4 Pagination – Active State.
Bootstrap 4 Pagination – Disabled State.
Bootstrap 4 Pagination – Sizing.
Bootstrap 4 Pagination Breadcrumbs.
Bootstrap 4 List Groups Tutorial.
Bootstrap 4 List Group With Linked Items.
Bootstrap 4 Active Item in a List Group.
Bootstrap 4 Disabled Item in a List Group.
Bootstrap 4 Group Contextual Classes.
Bootstrap 4 Basic Panel Tutorial.
Bootstrap 4 Panel Heading Tutorial.
Bootstrap 4 Panel Footer Tutorial.
Bootstrap 4 Cards Tutorial.
Bootstrap 4 Contextual Cards.
Bootstrap 4 Card Titles, Text and Links.
Bootstrap Card Image Tutorial.
Bootstrap Card Image Overlay.
Bootstrap 4 Dropdowns Tutorial.
Bootstrap 4 Dropdowns Divider tutorial.
Bootstrap 4 Dropdowns Header Tutorial.
Bootstrap 4 Dropdowns Active Items.
Bootstrap 4 Dropdowns Disabled Items.
Bootstrap 4 Dropdowns Position Tutorial.
Bootstrap 4 Dropup Tutorial.
Bootstrap 4 Simple Collapsible.
Bootstrap 4 Collapsible Panel Tutorial.
Bootstrap Collapsible List Tutorial.
Bootstrap 4 Stacked Form Tutorial.
Bootstrap 4 Inline Form Tutorial.
Download tutorialspointexamples Android App
Copyright © 2018 Tutorialspoint examples DMCA.com Protection Status