Ejemplo

Menú contextual switcheable para mostrar lista de enlaces. Hecho interactivo con el plugin JavaScript dropdown.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Acción</a></li>
  <li><a tabindex="-1" href="#">Otra acción</a></li>
  <li><a tabindex="-1" href="#">Otra acción más</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Enlace separado</a></li>
</ul>

Código

Acá está el HTML requerido. Tendrás que poner el elemento que activa el dropdown y el menú dropdown adentro de .dropdown, u otro elemento que use position: relative;. Después nada más creá el menú.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Acción</a></li>
    <li><a tabindex="-1" href="#">Otra acción</a></li>
    <li><a tabindex="-1" href="#">Otra acción más</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Enlace separado</a></li>
  </ul>
</div>

Opciones

Alineá menús a la derecha e incluí más niveles de dropdowns.

Alinear el menú

Agregá .pull-right a un .dropdown-menu para alinear el menú a la derecha.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Opciones de menú desactivadas

Agregá .disabled a un <li> en el dropdown para desactivar el enlace.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Enlace normal</a></li>
  <li class="disabled"><a tabindex="-1" href="#">Enlace desactivado</a></li>
  <li><a tabindex="-1" href="#">Otro enlace</a></li>
</ul>

Sub menús en dropdowns

Agregá un nivel más de menús dropdown que aparezcan en hover como los de OS X con algunos agregados de código sencillos. Agregá .dropdown-submenu a cualquier li en un menú dropdown existente para darle estilo automáticamente.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">Más opciones</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Ejemplos

Dos opciones básicas, junto con dos variaciones más específicas.

Un solo grupo de botones

Poné una serie de botones .btn dentro de un .btn-group.

<div class="btn-group">
  <button class="btn">Izquierda</button>
  <button class="btn">Centrado</button>
  <button class="btn">Derecha</button>
</div>

Varios grupos de botones

Combiná conjuntos de <div class="btn-group"> adentro de un <div class="btn-toolbar"> para hacer componentes más complejos.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Grupo de botones vertical

Hacé que un conjunto de botones aparezca apilado verticalmente en lugar de horizontales.

<div class="btn-group btn-group-vertical">
  ...
</div>

Estilos para casillas de verificación y radiales (checkbox & radio)

Grupos de botones pueden funcionar también como radiales, donde solamente un botón puede ser activado a la vez, o casillas de verificación, donde cualquiera de los botones puede estar activo a la vez. Mirá la documentación de JavaScript para instrucciones sobre cómo hacerlo.

Dropdowns en grupos de botones

¡Atención! Los botones con dropdowns tienen que estar insertados individualmente adentro de su propio .btn-group adentro de un .btn-toolbar para que se vean correctamente.

Resumen y ejemplos

Usá cualquier botón para activar un menú dropdown colocándolo dentro de un .btn-group y colocándole el código de menú correspondiente.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Acción
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Funciona con todos los tamaños de botones

Los dropdowns de botones funcionan a cualquier tamaño: .btn-large, .btn-small, o .btn-mini.

Requiere JavaScript

Los dropdowns de botones requieren que el plugin dropdown esté funcionando.

En algunos casos—como en teléfonos móviles—los menúes dropdown se extenderán fuera de la ventana. Tendrás que resolver la alineación manualmente o con código JavaScript personalizado.

Dropdown de botones divididos

Trabajando sobre el código y los estilos del grupo de botones, podemos crear fácilmente un botón dividido. Los botones divididos tienen una acción estándar a la izquierda y un botón de dropdown a la derecha con enlaces contextuales.

<div class="btn-group">
  <button class="btn">Acción</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Tamaños

Usá las clases de botones .btn-mini, .btn-small, o .btn-large para dar distintos tamaños.

<div class="btn-group">
  <button class="btn btn-mini">Acción</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Menúes dropup

Los menúes dropdown puede ser activados también de abajo hacia arriba con solamente agregar una clase al elemento contenedor de .dropdown-menu. Va a cambiar la dirección del .caret y reubicar el menú para que se mueva de abajo hacia arriba en lugar de arriba hacia abajo.

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Predeterminados livianos Mismo código, diferentes clases

Todos los componentes de navegación de acá —pestañas, pills y listas—usan el mismo código base y estilos a través de la clase .nav.

Pestañas básicas

Agarrá un <ul> básico con enlaces y agregale .nav-tabs:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Inicio</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Pills básicas

Usando el mismo HTML, reemplazá la clase por .nav-pills:

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Inicio</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Estado desactivado

Para cualquier componente de navegación (pestaña, pills, o lista), agregá .disabled para hacer los enlaces grises y sin efectos hover. Los enlaces seguirán siendo cliqueables, igualmente, a menos que elimines el atributo href. Como opción, podés implementar JavaScript personalizado para prevenir esos clics.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Inicio</a></li>
  ...
</ul>

Alineación de los componentes

Para alinear los enlaces de navegación, usá las clases utilitarias .pull-left o .pull-right. Ambas agregan un float en la dirección indicada.

Apilable

Como las pestañas y pills son horizontales de forma predeterminada, con agregar .nav-stacked se verán apiladas verticalmente.

Pestañas apiladas

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

Pills apiladas

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Dropdowns

Agregá menúes dropdown con un poco de HTML y el plugin de JavaScript para dropdowns.

Pestañas con dropdowns

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

Pills con dropdowns

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

Listas de navegación

Una forma simple y fácil de crear grupos de enlaces de navegación con encabezados opcionales. Quedan mejor en las barras laterales como el Finder de OS X.

Lista de navegación de ejemplo

Tomá una lista de enlaces y agregale class="nav nav-list":

<ul class="nav nav-list">
  <li class="nav-header">Encabezado de la lista</li>
  <li class="active"><a href="#">Inicio</a></li>
  <li><a href="#">Biblioteca</a></li>
  ...
</ul>

Nota Para anidar dentro de una lista de navegación, incluí class="nav nav-list" en todos los <ul> anidados.

Divisores horizontales

Agregá un divisor horizontal creando un ítem de menú vacío con la clase .divider, como este:

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

Pestañas navegables

Hacé que tus pestañas vivan con un simple plugin para cambiar el contenido a través de pestañas. BAstrap integra pestañas navegables en cuatro estilos: top (default), right, bottom, y left.

Ejemplo de pestañas navegables

Para hacer que las pestañas sean navegables, creá un .tab-pane con un ID único para cada pestaña y colocalas adentro de un .tab-content.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Sección 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Sección 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>Estoy en la Sección 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Hola, estoy en la Sección 2.</p>
    </div>
  </div>
</div>

Fundido en las pestañas

Para que las pestañas entren por fundido, agregá .fade a cada .tab-pane.

Navegables en cualquier dirección

Pestañas desde abajo

Da vuelta el orden del HTML y agregá una clase para poner las pestañas abajo.

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

Pestañas a la izquierda

Cambiá la clase para poner las pestañas a la izquierda.

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Pestañas a la derecha

Cambiá la clase para poner las pestañas a la derecha.

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Barra de navegación básica

Para empezar, las barras de navegación son estáticas (no están fijas arriba del todo) e incluyen la posibilidad de colocar un nombre de proyecto y navegación básica. Colocala en cualquier lado dentro de un .container, que le da el ancho a tu sitio y su contenido.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Título</a>
    <ul class="nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li><a href="#">Enlace</a></li>
      <li><a href="#">Enlace</a></li>
    </ul>
  </div>
</div>

Componentes de la barra de navegación

Marca

Un simple enlace para mostrar tu marca o nombre de proyecto solamente requiere una etiqueta <a>

<a class="brand" href="#">Nombre del proyecto</a>

Enlaces de navegación

Los ítems de navegación se agregan a través de una lista no ordenada.

<ul class="nav">
  <li class="active">
    <a href="#">Inicio</a>
  </li>
  <li><a href="#">Enlace</a></li>
  <li><a href="#">Enlace</a></li>
</ul>

Podés agregar divisores fácilmente a tus enlaces de navegación usando un ítem de lista vacío con una clase:

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

Formularios

Para darle estilo y posicionamiento correcto a un formulario dentro de la barra de navegación, agregá las clases apropiadas como se muestra abajo. Para un formulario predeterminado, incluí .navbar-form y .pull-left o .pull-right para alinearlo correctamente.

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">Enviar</button>
</form>

Formulario de búsqueda

Para un formulario de búsqueda más personalizado, agregá .navbar-search al form y .search-query al input para darle estilo especializado en la barra de navegación.

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Buscar">
</form>

Alineación de componentes

Alineá enlaces de navegación, formulario de búsqueda o texto usando .pull-left o .pull-right. Ambas clases van a agregar un float CSS apuntando a la dirección especificada.

Usando dropdowns

Agregá dropdowns y dropups a la navegación con un poco de código y el plugin JavaScript de dropdowns.

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Account
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Visitá la documentación de JavaScript dropdowns para más código e información sobre cómo llamar dropdowns.

Texto

Incluí textos dentro de elementos con clase .navbar-text, usualmente en una etiqueta <p> para un correcto espaciado y color.

Variaciones opcionales de visualización

Fijá la barra de navegación arriba de todo o abajo de todo en el navegador usando una clase adicional en el primer div .navbar.

Fija arriba

Agregá .navbar-fixed-top y recordá tener en cuenta el área oculta abajo agregando como mínimo 40px de padding al <body>. Asegurate de agregar esto después del código BAstrap CSS y antes del CSS responsive.

<div class="navbar navbar-fixed-top">
  ...
</div>

Fija abajo

Agregá .navbar-fixed-bottom en su lugar.

<div class="navbar navbar-fixed-bottom">
  ...
</div>

Barra de navegación estática arriba

Creá una barra de navegación de ancho máximo que se va al hacer scroll en la página agregando .navbar-static-top. A diferencia de la clase .navbar-fixed-top, no necesitás cambiar el padding en el body.

<div class="navbar navbar-static-top">
  ...
</div>

Barra de navegación responsive

Para implementar una barra de navegación que colapse en responsive, meté el contenido de tu barra de navegación en un div contenedor , .nav-collapse.collapse, y agregá el botón de activación/desactivación de la barra, .btn-navbar.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Nombre del proyecto</a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

    </div>
  </div>
</div>

Variación invertida

Modificá la apariencia de la barra de navegación agregando .navbar-inverse.

<div class="navbar navbar-inverse">
  ...
</div>

Ejemplos

Un ejemplo simple mostrando cómo se vería a través de varias páginas.

<ul class="breadcrumb">
  <li><a href="#">Inicio</a> <span class="divider">/</span></li>
  <li><a href="#">Biblioteca</a> <span class="divider">/</span></li>
  <li class="active">Datos</li>
</ul>

Paginación standard

Simple paginación, útil para aplicaciones y resultados de búsquedas. El bloque es grande, fácilmente escalable y provee áreas grandes donde hacer clic.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</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="#">Next</a></li>
  </ul>
</div>

Opciones

Estados desactivado y activado

Los enlaces se pueden personalizar para distintas circunstancias. Usá .disabled para enlaces no cliqueables y .active para indicar la página actual.

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

También podés reemplazar los enlaces por spans para eliminar la funcionalidad del enlace manteniendo el estilo.

<div class="pagination">
  <ul>
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

Tamaños

Agregá .pagination-large, .pagination-small, o .pagination-mini para tamaños adicionales.

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

Alineación

Agregá una de las dos clases opcionales para cambiar la alineación de los enlaces de paginación:: .pagination-centered y .pagination-right.

<div class="pagination pagination-centered">
  ...
</div>

<div class="pagination pagination-right">
  ...
</div>

Paginador

Enlaces de anterior y siguiente para una paginación simple.

Ejemplo predeterminado

De forma predeterminada el paginador centra los enlaces.

<ul class="pager">
  <li><a href="#">Anterior</a></li>
  <li><a href="#">Siguiente</a></li>
</ul>

Enlaces alineados

También podés ubicar cada enlace en un borde:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Anteriores</a>
  </li>
  <li class="next">
    <a href="#">Recientes &rarr;</a>
  </li>
</ul>

Estado opcional desactivado

Los enlaces del paginador también pueden usar la clase .disabled.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Anteriores</a>
  </li>
  ...
</ul>

Etiquetas

Insignia

Desaparición práctica

Para una implementación más fácil, las etiquetas y las insignias simplemente colapsarán (a través del selector CSS :empty ) cuando no exista contenido dentro de ellas.

Unidad héroe

Un componente liviano y flexible para mostrar un contenido especial en tu sitio.

<div class="hero-unit">
  <h1>Encabezado</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Ver más
    </a>
  </p>
</div>

Encabezado de página

Un div para envolver un h1 que le dará un especiado apropiado para el inicio de una sección de contenido de una página. Puede usar el elemento small.

<div class="page-header">
  <h1>Encabezado de página de ejemplo <small>Subtexto para el encabezado</small></h1>
</div>

Miniaturas predeterminadas

De forma predeterminada, las miniaturas están diseñadas para mostrar imágenes con un mínimo de código.

Altamente personalizable

Con un poco de código extra, es posible agregar cualquier contenido en las miniaturas, como encabezados, párrafos, o botones.

Por qué usar miniaturas

Las miniaturas son geniales para grillas de fotos o videos, resultados de búsqueda de imágenes, productos, portfolios, y mucho más. Pueden ser enlaces o contenido estático.

Código simple y flexible

El código de las miniaturas es simple—un ul con elementos li es todo lo que necesita. También es muy flexible, permitiendo cualquier tipo de contenido con solo agregar algo de código.

Usa los tamaños de las columnas de la grilla

El componente de miniaturas usa las clases existentes de la grilla —como .span2 o .span3—para controlar el tamaño de las miniaturas.

Código

Como mencionamos antes, el código requerido para las miniaturas es liviano y sencillo. Acá hay una muestra de un uso normal para imágenes enlazadas:

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

Para agregar HTML personalizado en las miniaturas, el código cambia un poco. Para permitir contenido de bloque en cualquier parte, reemplazamos el <a> por un <div>:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

Más ejemplos

Explorá todas las opciones con las clases de grilla que tenés disponibles. También podés usar diferentes tamaños de manera intercambiable.

Alerta predeterminada

Colocá cualquier texto y un botón opcional para descartar dentro de un .alert para obtener un mensaje básico de advertencia.

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>¡Atención!</strong> Tené cuidado con lo que hacés, no se ve bien.
</div>

Botones para desacartar

Los navegadores móviles Safari y Opera, además de requerir el atributo data-dismiss="alert", requieren un href="#" para descartar las alertas cuando se use un tag <a>.

<a href="#" class="close" data-dismiss="alert">&times;</a>

Otra solución es usar un elemento <button> con el atributo data, que es lo que se hizo en esta documentación. Cuando uses <button>, tenés que incluir type="button" o puede que tus formularios no se envíen.

<button type="button" class="close" data-dismiss="alert">&times;</button>

Descartar alertas a través de JavaScript

Usá el plugin jQuery de alertas para descartar fácilmente las alertas.

Opciones

Para mensajes más largos, aumentá el padding de arriba y de abajo agregando .alert-block.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>¡Atención!</h4>
  Tené cuidado con lo que hacés...
</div>

Alternativas contextuales

Agregá clases opcionales para cambiar la connotación de una alerta.

Error o peligro

<div class="alert alert-error">
  ...
</div>

Éxito

<div class="alert alert-success">
  ...
</div>

Información

<div class="alert alert-info">
  ...
</div>

Ejemplos y código

Básica

Barra de progreso predeterminada con un gradiente vertical.

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Rayada

Usa un gradiente para crear un efecto de rayas. No disponible en IE7-8.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Animada

Agregá .active a .progress-striped para animar las rayas de derecha a izquierda. No disponible en todas las versiones de IE.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Apiladas

Ubicá muchas barras dentro del mismo .progress para apilarlas.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Opciones

Más colores

Las barras de progreso usan algunas de las clases de botones y alertas para mantener un estilo consistente.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Barras rayadas

Se pueden combinar las clases de colores con el estilo rayado.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Capacidad de los navegadores

Las barras de progreso usan gradientes, transiciones y animaciones de CSS3 para lograr todos sus efectos. Estas funcionalidades no están contempladas en IE7-9 o versiones anteriores de Firefox.

Las animaciones no funcionan en versiones anteriores a Internet Explorer 10 y Opera 12.

Estilos abstractos de objetos para construir varios tipos de componentes (como comentarios de blog, tuits, etc.) que contienen una imagen alineada a la izquierda o a la derecha junto con contenido de texto.

Ejemplo predeterminado

El 'media' predeterminado permite flotar un objeto (imagen, video, audio) a la izquierda o a la derecha de un bloque de contenido.

Encabezado del medio

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Encabezado del medio

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Encabezado del medio

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Encabezado del medio</h4>
    ...

    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Lista de medios

Con un poco más de código podés usar medios dentro de una lista (útil para árboles de comentarios o listas de artículos).

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Encabezado del medio</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Pozos

Usá el pozo como un efecto simple sobre un elemento para darle un efecto hundido.

<div class="well">
  ...
</div>

Clases opcionales

Controlá el padding y las esquinas redondeadas con dos clases opcionales.

<div class="well well-large">
  ...
</div>

<div class="well well-small">
  ...
</div>

Ícono de cerar

Usá el ícono de cerrar genérico para descartar contenido como modales y alertas.

<button class="close">&times;</button>

Los dispositivos iOS requieren un href="#" para los eventos de clic, si usás un elemento a.

<a class="close" href="#">&times;</a>

Clases de ayuda

Clases simples y precisas para cambios pequeños en visualización o comportamiento.

.pull-left

Flota un elemento a la izquierda

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

Flota un elemento a la derecha

class="pull-right"

.pull-right {
  float: right;
}

.muted

Cambia el color de un elemento a #999

class="muted"

.muted {
  color: #999;
}

.clearfix

Limpia el float en cualquier elemento

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}