Barra de progreso Bootstrap y Jumbotron

Artículos de BootStrap:

1. Introducción e instalación
2. Sistema de red
3. Botones, Glyphicons, Tablas
4. Formularios verticales, formularios horizontales, formularios en línea
5. Pestañas desplegables y receptivas

Barra de progreso

Todos hemos visto una barra de progreso mientras ejecutamos algún proceso en nuestro ordenador. Una barra de progreso muestra cuánto del proceso se completó y cuánto queda. Puede agregar una barra de progreso en su página web utilizando clases de arranque predefinidas. Bootstrap tiene algunas clases predefinidas que se pueden usar fácilmente con HTML para diseñar sus páginas web de manera brillante y hacer que su página web responda. Bootstrap proporciona muchos tipos de barras de progreso.
Podemos agregar una barra de progreso a nuestra página web usando la clase de progreso en una clase div.
Use este código en su código HTML para agregar una barra de progreso predeterminada.
Para crear una barra de progreso:

1. Use el progreso de la clase dentro de una clase div.
2. Dentro de la clase div ya creada, agregue otra etiqueta div con una clase .progress-bar .
3. Mencione el progreso de la barra bajo un atributo de estilo usando el ancho como porcentaje. Por ejemplo, estilo = «ancho: 50%

Código para la barra de progreso predeterminada con etiqueta.

<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>

Producción:

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

<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>

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

Este artículo es una contribución de Ayush Saxena . Si te gusta GeeksforGeeks y te gustaría contribuir, también puedes escribir un artículo usando write.geeksforgeeks.org o enviar tu artículo por correo a review-team@geeksforgeeks.org. Vea su artículo que aparece en la página principal de GeeksforGeeks y ayude a otros Geeks.

Escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema tratado anteriormente.