Otros Componentes

Breadcrumbs Indica la ubicación de la pagina actual dentro de una jerarquía de navegación.

You can put anything here

Los separadores se agregan automáticamente en CSS a través de :before y content.

Breadcrumb Demo


<ol class="breadcrumb">
    <li class="active">Home</li>
</ol>

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li class="active">Library</li>
</ol>

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

Paginación

You can put anything here

Paginación default

Estado deshabilitado y activo

Utiliza .disabled para deshabilitar y .active para indicar la pagina actual.


Default
<ul class="pagination">
    <li>
        <a href="" aria-label="Previous">
            <i class="md md-chevron-left"></i>
        </a>
    </li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li>
        <a href="" aria-label="Next">
            <i class="md md-chevron-right"></i>
        </a>
    </li>
</ul>

Disabled and active states

<ul class="pagination">
    <li class="disabled"><a href="" aria-label="Previous"><i class="md md-chevron-left"></i></a></li>
    <li class="active"><a href="">1 <span class="sr-only">(current)</span></a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="" aria-label="Next"><i class="md md-chevron-right"></i></a></li>
</ul>

Jumbotron

You can put anything here

Título

Texto de contenido

Para hacer el jumbotron de ancho completo y sin esquinas redondeadas, ponlo afuera de todo .containers y agrega un .container dentro.


<div class="jumbotron">
    <h1>Título</h1>
    <p>Texto de contenido.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Ver Más</a></p>
</div>

Grupos de Listas

You can put anything here

Ejemplo básico

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Con Badges

14 Cras justo odio
2 Dapibus ac facilisis in
1 Morbi leo risus
25 Porta ac consectetur ac
119 Vestibulum at eros

Elementos con ligas

119 Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Elementos deshabilitados

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros


Basic Example
<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

With Badges
<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        Cras justo odio
    </li>
    <li class="list-group-item">
        <span class="badge">2</span>
        Dapibus ac facilisis in
    </li>
    <li class="list-group-item">
        <span class="badge">1</span>
        Morbi leo risus
    </li>
    <li class="list-group-item">
        <span class="badge">25</span>
        Porta ac consectetur ac
    </li>
    <li class="list-group-item">
        <span class="badge">119</span>
        Vestibulum at eros
    </li>
</ul>

Linked Items
<div class="list-group">
    <a href="#" class="list-group-item active"><span class="badge">119</span> Cras justo odio</a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Disabled items
<div class="list-group">
    <a href="#" class="list-group-item disabled">Cras justo odio</a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item disabled">Morbi leo risus</a>
    <a href="#" class="list-group-item disabled">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>