Navegación y Progreso

<nav class="navbar navbar-marca"
     aria-label="Navegación principal">
  <a class="navbar-brand" href="/">Univalle</a>
  <ul class="navbar-nav" role="list">
    <li><a href="/inicio">Inicio</a></li>
    <li><a href="/programas">Programas</a></li>
  </ul>
</nav>

<!-- Variantes: navbar-light | navbar-marca | navbar-dark -->

<nav aria-label="Ruta de navegación">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">Inicio</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/oferta">Oferta académica</a>
    </li>
    <li class="breadcrumb-item active"
        aria-current="page">
      Ingeniería de Sistemas
    </li>
  </ol>
</nav>

<nav aria-label="Paginación de resultados">
  <div class="pagination">
    <a class="page-btn" href="?p=1"
       aria-label="Página anterior">‹</a>
    <a class="page-btn" href="?p=1">1</a>
    <a class="page-btn active" href="?p=2"
       aria-current="page">2</a>
    <a class="page-btn" href="?p=3">3</a>
    <a class="page-btn" href="?p=3"
       aria-label="Página siguiente">›</a>
  </div>
</nav>

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

<!-- Tamaños -->
<div class="progress progress-sm">...</div>
<div class="progress progress-lg">...</div>

<!-- Variantes de color -->
<!-- progress-marca | progress-primary | progress-success -->
<!-- progress-danger | progress-warning | progress-info   -->