Sistema de cuadrícula

CSS

Bootstrap

Apilado en horizontal

Ejemplo: dispositivos móviles y de escritorio

<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

.col-xs-12 col-md-8

.col-xs-6 .col-md-4

.col-xs-6

Ejemplo: dispositivos móviles, de escritorio y tabletas

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-sm-6 .col-md-4

.col-xs-6 .col-sm-4 .col-md-4

Desplazamiento de columnas

Se pueden desplazar las columnas usando las clases .col-md-offset-*

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
      <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

Tipografía

Todos los encabezados de HTML, de <h1> a <h6> están disponibles.

Encabezado h1

Encabezado h2

Encabezado h3

Encabezado h4

Encabezado h5

Encabezado h6

Texto del cuerpo

El tamaño de letra predeterminado de Bootstrap es de 14px, aplicado al body de la página. Además, los párrafos <p> recibe un margen de 10px de forma predeterminada.

Texto inicial resaltado

Se puede resaltar una parte del texto añadiendo la clase .lead

Ejemplo:

<span class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Donec nec leo eu lectus ultrices consectetur et ut dui. Duis nec bibendum leo. Nullam rhoncus lacinia lacus sit amet eleifend. Nullam scelerisque arcu sit amet purus rhoncus, sed placerat lorem interdum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec leo eu lectus ultrices consectetur et ut dui. Duis nec bibendum leo. Nullam rhoncus lacinia lacus sit amet eleifend.Nullam scelerisque arcu sit amet purus rhoncus, sed placerat lorem interdum.

Énfasis

Permite utilizar diferentes tipos de énfasis para el texto.

Texto pequeño

	<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Texto en negrita

	<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Texto en cursiva

	<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Alternativa en HTML5

HTML5 permite utilizar las etiquetas <b> y <i>.

<b> se utiliza para resaltar palabras sin agregar importancia adicional, mientras que <i> se utiliza para voz, términos técnicos, etc.

Clases de alineación

    <p class="text-left">Texto a la izquierda</p>
    <p class="text-center">Texto centrado</p>
    <p class="text-right">Texto a la derecha</p>

Texto a la izquierda

Texto centrado

Texto a la derecha

Clases de énfasis

Permite mostrar el significado de un mensaje por medio del color utilizando una serie de clases destinadas para dar énfasis al texto.

    <p class="text-muted">Lorem ipsum dolor</p>
    <p class="text-primary">Lorem ipsum dolor</p>
    <p class="text-success">Lorem ipsum dolor</p>
    <p class="text-info">Lorem ipsum dolor</p>
    <p class="text-warning">Lorem ipsum dolor</p>
    <p class="text-danger">Lorem ipsum dolor</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Abreviaturas

Permite mostrar una ampliación con el significado de las siglas cuando situamos el ratón encima.

Abreviatura básica

	<abbr title="HyperText Markup Language o Lenguaje de marcas de hipertexto">HTML</abbr> hace referencia al lenguaje para la elaboración de páginas Web.

HTML hace referencia al lenguaje para la elaboración de páginas Web.

Abreviatura más pequeña

	<abbr title="HyperText Markup Language o Lenguaje de marcas de hipertexto" class="initialism">HTML</abbr> hace referencia al lenguaje para la elaboración de páginas Web.

HTML hace referencia al lenguaje para la elaboración de páginas Web.

Bloques de citas

Se utiliza la etiqueta <blockquote> para resaltar una cita. Permite enfatizar el texto cumpliendo la normativa de citas y referencias bibliográficas, dejando un margen izquierdo, al que además incluye un borde. La referencia a la cita, según la normativa, debe de escribirse en un tamaño menor utilizando la etiqueta small.

Al utilizar la etiqueta small dentro de una etiqueta blockquote se incluye una línea antes del texto.

    <blockquote>
      <p><em>Todo tiene algo de belleza pero no todos son capaces de verlo.</em></p>
      <small>Confucio</small>
    </blockquote>

Todo tiene algo de belleza pero no todos son capaces de verlo.
Confucio

Listas

Además de todas las opciones que da HTML para crear listas (ordenadas, no ordenadas y descripción), Bootstrap lo complementa con diferentes clases, que permiten manipular fácilmente el aspecto de las listas.

A continuación se muestran diferentes ejemplos:

Lista sin estilo

<ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetur adipiscing elit</li>
   <li style="display: none;">
	<ul>
   	   <li>Integer molestie lorem at massa</li>
      	   <li>Facilisis in pretium nisl aliquet</li>
	</ul>
   </li>
</ul>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet

Lista alineada verticalmente

    <ul class="list-group">
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipiscing elit</li>
        <li class="list-group-item">Integer molestie lorem at massa</li>
        <li class="list-group-item">Facilisis in pretium nisl aliquet</li>
    </ul>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet

Lista alineada horizontalmente

    <ul class="list-group list-inline">
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipiscing elit</li>
        <li class="list-group-item">Integer molestie lorem at massa</li>
        <li class="list-group-item">Facilisis in pretium nisl aliquet</li>
    </ul>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet

Lista de descripción

    <dl>
        <dt>Lista ordenada</dt>
        <dd>Muestra una serie de ítem en un orden concreto indicado por números o letras.</dd>
        <dt>Lista no ordenada</dt>
        <dd>Muestra una serie de ítem sin importar el orden en absoluto.</dd>
        <dt>Lista de descripción</dt>
        <dd>Una lista de descripción es idónea para definir términos.</dd>
    </dl>

Lista ordenada: Muestra una serie de ítem en un orden concreto indicado por números o letras.
Lista no ordenada: Muestra una serie de ítem sin importar el orden en absoluto.
Lista de descripción: Una lista de descripción es idónea para definir términos.

Lista de descripción horizontal

Permite alinear los terminos y las descripciones de forma lateral.

    <dl class="dl-horizontal">
        <dt>Lista ordenada</dt>
        <dd>Muestra una serie de ítem en un orden concreto indicado por números o letras.</dd>
        <dt>Lista no ordenada</dt>
        <dd>Muestra una serie de ítem sin importar el orden en absoluto.</dd>
        <dt>Lista de descripción</dt>
        <dd>Una lista de descripción es idónea para definir términos.</dd>
    </dl>

Lista ordenada: Muestra una serie de ítem en un orden concreto indicado por números o letras.
Lista no ordenada: Muestra una serie de ítem sin importar el orden en absoluto.
Lista de descripción: Una lista de descripción es idónea para definir términos.

Código

Código alineado

Cuando queremos resaltar código HTML en una sola línea, podemos utilizar la etiqueta <code>

Este código <section> aparecerá en una sola línea

Bloque de código

Si lo que queremos mostrar son varias líneas de código, utilizaremos la etiqueta <pre>

    <dl class="dl-horizontal">
        <dt>Lista ordenada</dt>
        <dd>Muestra una serie de ítem en un orden concreto indicado por números o letras.</dd>
        <dt>Lista no ordenada</dt>
        <dd>Muestra una serie de ítem sin importar el orden en absoluto.</dd>
        <dt>Lista de descripción</dt>
        <dd>Una lista de descripción es idónea para definir términos.</dd>
    </dl>

Si queremos mostrar un código extenso, la clase <pre-scrollable> fija una altura máxima de 350px, añadiendo una barra de desplazamiento en caso necesario.

    <dl class="dl-horizontal">
        <dt>Lista ordenada</dt>
        <dd>Muestra una serie de ítem en un orden concreto indicado por números o letras.</dd>
        <dt>Lista no ordenada</dt>
        <dd>Muestra una serie de ítem sin importar el orden en absoluto.</dd>
        <dt>Lista de descripción</dt>
        <dd>Una lista de descripción es idónea para definir términos.</dd>
    </dl>
    <dl class="dl-horizontal">
        <dt>Lista ordenada</dt>
        <dd>Muestra una serie de ítem en un orden concreto indicado por números o letras.</dd>
        <dt>Lista no ordenada</dt>
        <dd>Muestra una serie de ítem sin importar el orden en absoluto.</dd>
        <dt>Lista de descripción</dt>
        <dd>Una lista de descripción es idónea para definir términos.</dd>
    </dl>
    <dl class="dl-horizontal">
        <dt>Lista ordenada</dt>
        <dd>Muestra una serie de ítem en un orden concreto indicado por números o letras.</dd>
        <dt>Lista no ordenada</dt>
        <dd>Muestra una serie de ítem sin importar el orden en absoluto.</dd>
        <dt>Lista de descripción</dt>
        <dd>Una lista de descripción es idónea para definir términos.</dd>
    </dl>

Cuadros y tablas

Ejemplo básico

Para una tabla básica, con rellenos y solamente líneas horizontales, añadir la clase <table>.

    <table class="table">
    ...
    </table>

Nombre	Apellido	Edad
Salvador	Tudela	22
Nacho	Olmedo	27
Manuel	Manzano	24

Filas marcadas con franjas

Para utilizar una tabla con las filas impares sombreadas, añadiremos la clase <.table-striped>.

    <table class="table table-striped">
    ...
    </table>

Nombre	Apellido	Edad
Salvador	Tudela	22
Nacho	Olmedo	27
Manuel	Manzano	24

Tabla con bordes

Añadiendo la clase <.table-borderer> conseguiremos mostrar bordes alrededor de todas las celdas de la tabla.

    <table class="table table-borderer">
    ...
    </table>

Nombre	Apellido	Edad
Salvador	Tudela	22
Nacho	Olmedo	27
Manuel	Manzano	24

Filas marcadas al pasar el ratón por encima

La clase <.table-hover> hace que cuando pasemos el ratón por encima de las diferentes filas de la tabla, estas se sombrearán.

    <table class="table table-hover">
    ...
    </table>

Nombre	Apellido	Edad
Salvador	Tudela	22
Nacho	Olmedo	27
Manuel	Manzano	24

Tabla con filas condensadas

Para disminuir el relleno de las celdas de la tabla, utilizaremos la clase <.table-condensed>.

    <table class="table table-condensed">
    ...
    </table>

Nombre	Apellido	Edad
Salvador	Tudela	22
Nacho	Olmedo	27
Manuel	Manzano	24

Clases contextuales

Las clases contextuales permiten colorear texto, filas de tablas completas o celdas individuales.

.active
.success
.warning
.danger

    <table class="table table-hover">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Edad</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>Salvador</td>
                <td>Tudela</td>
                <td>22</td>
            </tr>
            <tr class="success">
                <td>Nacho</td>
                <td>Olmedo</td>
                <td>27</td>
            </tr>
            <tr>
                <td class="warning">Manuel</td>
                <td class="danger">Manzano</td>
                <td>24</td>
            </tr>
        </tbody>
    </table>

Nombre	Apellido	Edad
Salvador	Tudela	22
Nacho	Olmedo	27
Manuel	Manzano	24

Tabla responsiva

Para permitir que la tabla o cuadro se adapte correctamente a cualquier resolución, deberemos de añadir la etiqueta <.table-responsive>.

    <table class="table table-responsive">
    ...
    </table>

Nombre	Apellido	Edad
Salvador	Tudela	22
Nacho	Olmedo	27
Manuel	Manzano	24

Formularios

Ejemplo básico

Los elementos de un formulario, por defecto reciben un estilo global, por ejemplo, el ancho predeterminado es el 100% del tamaño del elemento padre.

La clase preestablecida .form-group permite agrupar en bloques los diferentes elementos, añadiendo a la vez el espaciado óptimo con los demás bloques de elementos de formulario.

La clase .form-control permite establecer un tamaño óptimo de los elementos, ajustandose además al tamaño del elemento contenedor o elemento padre.

   <form role="form">
      <div class="form-group">
         <label for="InputEmail">Email</label>
         <input type="email" class="form-control" id="InputEmail" placeholder="example@example.com">
      </div>
      <div class="form-group">
         <label for="InputPassword">Contraseña</label>
         <input type="password" class="form-control" id="InputPassword" placeholder="********">
      </div>
      <div class="form-group">
         <label for="InputFile">Subir archivo</label>
         <input type="file" id="InputFile">
         <p class="help-block">Ejemplo de texto de ayuda</p>
      </div>
      <div class="form-group">
         <label>Sexo: </label>
         <input type="radio" name="sexo" value="h"> Hombre
         <input type="radio" name="sexo" value="m"> Mujer 
      </div>
      <div class="checkbox">
            <input type="checkbox" value="mem"> Recordarme
      </div>
      <button type="submit" class="btn btn-default">Enviar</button>
   </form>

Formulario alineado

Para alinear el formulario añadiremos la clase .form-inline. Esta clase, alineará los elementos a la izquierda permitiendo hacer un formulario compactado.

Importancia de las etiquetas

Se debe poner una etiqueta para cada entrada debido a que los lectores de pantalla pueden tener problemas para interpretar correctamente el formulario.

Para este formulario alineado, puede ocultar las etiquetas usando la clase .sr-only

   <form class=""form-inline" role="form">
      <div class="form-group">
         <label for="InputEmail" class="sr-only">Email</label>
         <input type="email" class="form-control" id="InputEmail" placeholder="example@example.com">
      </div>
      <div class="form-group">
         <label for="InputPassword"class="sr-only">Contraseña</label>
         <input type="password" class="form-control" id="InputPassword" placeholder="********">
      </div>
      <div class="checkbox">
            <input type="checkbox" value="mem"> Recordarme
      </div>
      <button type="submit" class="btn btn-default">Enviar</button>
   </form>

Formulario en bloques horizontal

Se pueden utilizar las clases predefinidas de cuadrícula de Bootstrap para alinear las etiquetas en un esquema horizontal agregando la clase .form-horizontal a los elementos.

Además, de esta forma no tendremos que incluir la clase .row.

      <form class="form-horizontal" role="form">
         <div class="form-group">
            <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
            <div class="col-lg-5">
               <input type="email" class="form-control" id="inputEmail1" placeholder="example@example.com">
            </div>
         </div>
         <div class="form-group">
            <label for="inputPassword1" class="col-lg-2 control-label">Contraseña</label>
            <div class="col-lg-5">
               <input type="password" class="form-control" id="inputPassword1" placeholder="********">
            </div>
         </div>
         <div class="form-group">
            <div class="col-lg-offset-2 col-lg-5">
               <div class="checkbox">
                  <label>
                     <input type="checkbox"> Recordarme
                  </label>
               </div>
            </div>
         </div>
         <div class="form-group">
            <div class="col-lg-offset-2 col-lg-5">
               <button type="submit" class="btn btn-default">Enviar</button>
            </div>
         </div>
      </form>
   </div>

Controles compatibles

Casilleros de verificación y botones radio

Apilado

   <div class="checkbox">
      <label>
         <input type="checkbox" value="¿Desea recibir noticias por correo?">
            ¿Desea recibir noticias semanalmente por correo?
      </label>
   </div>
   <span><strong>Licencia:</strong></span>
   <div class="radio">
      <label>
         <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
            Acepto
      </label>
   </div>
   <div class="radio">
      <label>
         <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
            No acepto
      </label>
   </div>

¿Desea recibir noticias semanalmente por correo?

Licencia:

Acepto

No acepto

Casilleros alineados

Utilizando la clase .checkbox-inline para casillas de verificación o .radio-inline para botones de selección, desplegando los elementos en una sola línea

   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
   </label>

1 2 3

   <label class="radio-inline">
      <input type="radio" name="sexo" value="h">Hombre
   </label>
   <label class="radio-inline">
      <input type="radio" name="sexo" value="m">Mujer
   </label>

Hombre Mujer

Control estático

Si se necesita colocar texto llano al lado de una etiqueta de forma guardando una alineación correcta, se puede utilizar la clase .form-control-static.

   <form class="form-horizontal" role="form">
      <div class="form-group">
         <label class="col-lg-2 control-label">Email</label>
         <div class="col-lg-10">
            <p class="form-control-static">email@example.com</p>
         </div>
      </div>
      <div class="form-group">
         <label for="inputPassword" class="col-lg-2 control-label">Password</label>
         <div class="col-lg-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
         </div>
      </div>
   </form>

Estado de los elementos

Enfoque para la entrada de datos

Cuando el cuadro de texto obtiene el foco del cursor, aplica un box-shadow.

	<input class="form-control" type="text" value="Cuadro de texto...">

Entradas desactivadas

Cuando queremos desactivar un campo de formulario, HTML5 nos da la opción de agregar el atributo disabled

Cuando agregamos este atributo, Bootstrap además activa un formato levemente alterado.

	<input class="form-control" type="text" value="Cuadro de texto..." disabled>

Conjunto de campos desactivados

Igual que en el ejemplo anterior, podemos añadir el atributo disabled a un fieldset para desactivar todos los campos que lo contengan.

   <form role="form">
      <fieldset disabled>
         <div class="form-group">
            <label for="disabledTextInput">Campo desactivado</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="Desactivado">
         </div>
         <div class="form-group">
            <label for="disabledSelect">Menú desplegable desactivado</label>
               <select id="disabledSelect" class="form-control">
                  <option>Opción desactivada</option>
               </select>
         </div>
         <div class="checkbox">
            <label>
               <input type="checkbox"> No puedes marcar esto
            </label>
         </div>
         <button type="submit" class="btn btn-primary">Submit</button>
      </fieldset>
   </form>

Estados de validación

Para facilitar al usuario información sobre la validación de un campo de formulario, existen diferentes clases para incluir estilos de validación para los estados de error, advertencia y éxito.

Además, cuando el campo de texto obtiene el foco, sigue cambiando el aspecto del campo añadiendole el efecto con box-shadow.

Nota

Las clases de validación se deben de aplicar a un elemento de agrupación como un div. Si se aplica al elemento en sí directamente no aplicará el aspecto de la clase.

   <div class="form-group has-success">
      <label class="control-label" for="inputSuccess">Input con success</label>
      <input type="text" class="form-control" id="inputSuccess">
   </div>
   <div class="form-group has-warning">
      <label class="control-label" for="inputWarning">Input con warning</label>
      <input type="text" class="form-control" id="inputWarning">
   </div>
   <div class="form-group has-error">
      <label class="control-label" for="inputError">Input con error</label>
      <input type="text" class="form-control" id="inputError">
   </div>

Input con success

Input con warning

Input con error

Tamaño

Altos

Se pueden crear campos de distintos tamaños haciéndo que coincidan con el tamaño de los botones.

   <div class="col-md-8 espacio">
      <input class="form-control input-lg" type="text" placeholder="Grande .input-lg" />
   </div>
   <div class="col-md-3 espacio">
      <input type="button" class="btn btn-primary btn-lg" value="Boton" />
   </div>
   <div class="col-md-8 espacio">
      <input class="form-control" type="text" placeholder="Predeterminado">
   </div>
   <div class="col-md-3 espacio">
      <input type="button" class="btn btn-primary " value="Boton" />
   </div>
   <div class="col-md-8 espacio">
      <input class="form-control input-sm" type="text" placeholder="Pequeño .input-sm">
   </div>
   <div class="col-md-3 espacio">
      <input type="button" class="btn btn-primary btn-sm" value="Boton" />
   </div>

Anchos

El ancho de los campos se adapta al ancho del elemento que los contiene al añadirle la clase form-control, aunque si además, a la capa contenedora le añadimos una clase de estructura especificando un tamaño, el elemento del formulario se adaptará a esta.

   <div class="col-md-3">
    <input type="text" class="form-control" placeholder=".col-md-2">
   </div>
   <div class="col-md-5">
    <input type="text" class="form-control" placeholder=".col-md-3">
   </div>
   <div class="col-md-8">
    <input type="text" class="form-control" placeholder=".col-md-4">
   </div>

Texto de ayuda

Permite establecer un texto a nivel de bloque, añadiendo un determinado estilo que hará que se reconozca más fácilmente el propósito de dicho texto.

Para conseguir este efecto, solamente deberemos de añadir la clase .help-block en una etiqueta de párrafo p o por ejemplo una etiqueta span.

   <div class="form-group col-md-8">
      <input type="text" class="form-control" placeholder="Campo de texto..." />
      <span class="help-block">Este es un texto de ayuda</span>
   </div>

Este es un texto de ayuda

Botones

Tipos de botones

Existen clases predefinidas que permiten crear rápidamente botones aplicando diferentes estilos.

   <div class="col-md-12 row">
      <input type="button" class="btn btn-default" value="Default" />
      <input type="button" class="btn btn-primary" value="Primary" />
      <input type="button" class="btn btn-success" value="Success" />
      <input type="button" class="btn btn-info" value="Info" />
      <input type="button" class="btn btn-warning" value="Warning" />
      <input type="button" class="btn btn-danger" value="Danger" />
      <input type="button" class="btn btn-link" value="Link" />
   </div>

Tamaño de los botones

Además del tipo de botón, permite elegir el tamaño de estos con tan solo añadir las clases .btn-lg, .btn-sm o .btn-xs.

   <div class="col-md-8 col-md-offset-1">
      <div class="row espacio">
         <input type="button" value="Botón grande" class="btn btn-default btn-lg" />
         <input type="button" value="Botón grande" class="btn btn-primary btn-lg" />
      </div>
      <div class="row espacio">
         <input type="button" value="Botón predeterminado" class="btn btn-success" />
         <input type="button" value="Botón predeterminado" class="btn btn-default" />
      </div>
      <div class="row espacio">
         <input type="button" value="Botón pequeño" class="btn btn-sm btn-info" />
         <input type="button" value="Botón pequeño" class="btn btn-sm btn-warning" />
      </div>
      <div class="row espacio">
         <input type="button" value="Botón muy pequeño" class="btn btn-xs btn-danger" />
         <input type="button" value="Botón muy pequeño" class="btn btn-xs btn-link" />
      </div>
   </div>

Si queremos crear botones a nivel de bloque, es decir, que se ajusten al tamaño de ancho del elemento padre, añadiremos la clase .btn-block.

   <div class="col-md-7">
      <input type="button" value="Botón .col-md-7" class="btn btn-primary btn-block" />
   </div>
   <div class="col-md-10">
      <input type="button" value="Botón .col-md-10" class="btn btn-success btn-xs btn-block" />
   </div>

Desactivar botones

Al igual que los campos de los formularios se pueden desactivar de forma que no se puedan utilizar o seleccionar, los botones también permiten esta funcionalidad, al igual que los demás elementos de los formularios, añadiéndole el atributo disabled.

Nota

Este atributo es aplicable tanto a elementos de formularios, como a botones, como a enlaces.

Los enlaces deberán convertirse en botón añadiendole, al menos la clase btn, aunque se pueden utilizar clases para modificar el estilo y tamaño de este.

Enlace desactivado

Enlace activado

Imágenes

La etiqueta img permite añadir imágenes guardadas en nuestro servidor o alojadas en Internet.

Además de enlazar esta etiqueta a un archivo de imágen, permite modificar su aspecto utilizando determinadas clases predefinidas de Bootstrap, mostradas a continuación:

<img src="..." 
 class="img img-rounded" />

<img src="..." 
 class="img img-thumbnail" />

<img src="..." 
 class="img img-circle" />

Imágenes con respuesta

Las imágenes pueden hacerse responsivas añadiendo la clase .img-responsive.

Esta clase aplica max-width: 100% y height: auto, de forma que se ajustará siempre al contenido del elemento padre, sin importar la resolución del dispositivo, pudiéndose ver correctamente tanto en ordenadores, tablet o smartphone.

Foto de gvillena, pincha aquí para verla en flickr.

Compatibilidad

Las clases predefinidas mostradas anteriormente, no son compatibles con Internet Explorer 8.

Internet Explorer 8 no permite el uso de esquinas redondas.

Clases de ayuda

Icono para cerrar

Permite cerrar ventanas modales y alertas

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

.pull-left y .pull-right

Existen las clases .pull-left y .pull-right que permiten flotar un elemento hacia la izquierda o derecha respectivamente.

   <div class="col-md-5 borde pull-left">Contenido izquierda</div>
   <div class="col-md-5 borde pull-right">Contenido derecha</div>

Contenido izquierda

Contenido derecha

.clearfix

El atributo float: left; indica que la caja con este estilo se colocará a la izquierda y el resto de cajas que se crean a continuación se colocarán a la derecha de ésta. Esto permite crear una estructura de capas para las páginas de un sitio Web.

Cuando queremos evitar que las capas se sigan colocando a la derecha de la qe tiene el atributo float asociado, en CSS creamos una capa nueva sin contenido asignando el valor clear.

Para conseguir eliminar el flujo se suele crear una capa vacía en la que se aplica un atributo CSS llamado clear. Bootstrap permite utilizar la clase predefinida .clearfix, consiguiendo el mismo efecto.

A continuación veremos el efecto que produce:

Sin utilizar la clase .clearfix

<div style="border: 2px solid red; width: 600px;">
   <div style="border:2px solid green;float:left;width:45%;height:70px;">Capa izquierda</div>
   <div style="border:2px solid blue;float:right;width:45%;">Capa derecha</div>
</div>
<div style="border: 2px solid brown;">Capa de abajo</div>

Capa izquierda

Capa derecha

Capa de abajo

Utilizando la clase .clearfix

<div class="clearfix" style="border:2px solid red;width:600px;">
   <div style="border:2px solid green;float:left;width:45%;height:70px;">Capa izquierda</div>
   <div style="border:2px solid blue;float:right;width:45%;">Capa derecha</div>
</div>
<div style="border: 2px solid brown;">Capa de abajo</div>

Capa izquierda

Capa derecha

Capa de abajo

.sr-only

Permite ocultar un elemento para los usuarios permitiendo ser leído por los lectores de pantalla.

Es necesario dar la mayor accesibilidad posible y esta es una buena práctica para ello, debido a que si eliminamos los elementos de información, por ejemplo en un formulario, los lectores de pantalla podrían no funcionar correctamente.

Sin utilizar la clase .sr-only

<form>
   <div class="form-group col-md-6">
      <label for="InputUsuario">Nombre de usuario</label>
      <input type="text" class="form-control" id="InputUsuario" placeholder="Nombre de usuario" />
   </div>
</form>

Utilizando la clase .sr-only

<form>
   <div class="form-group col-md-6">
      <label for="InputUsuario" class="sr-only">Nombre de usuario</label>
      <input type="text" class="form-control" id="InputUsuario" placeholder="Nombre de usuario" />
   </div>
</form>

Utilidades de respuesta

Permite desarrollar componentes compatibles con móviles utilizando distintas clases que muestran y ocultan contenido dependiendo del dispositivo y su resolución mediante consultas de medios.

Se debe intentar no hacer un abuso de estas clases, utilizándose para completar la presentación para cada dispositivo.

Actualmente están disponibles solo para bloques y cuadros, no permitiéndose en elementos de cuadros y alineados.

Clases disponibles

Se pueden utilizar las clases solas o combinandolas entre sí para activar o desactivar contenido para las distintas resoluciones de los dispositivos en los que se puede visitar la página.

	Dispositivos muy pequeños Teléfonos (<768px)	Dispositivos pequeños Tabletas (≥768px)	Dispositivos de tamaño mediano Computadoras de escritorios (≥992px)	Dispositivos grandes Computadoras de escritorio (≥1200px)
`.visible-xs`	Visible	Oculto	Oculto	Oculto
`.visible-sm`	Oculto	Visible	Oculto	Oculto
`.visible-md`	Oculto	Oculto	Visible	Oculto
`.visible-lg`	Oculto	Oculto	Oculto	Visible
`.hidden-xs`	Oculto	Visible	Visible	Visible
`.hidden-sm`	Visible	Oculto	Visible	Visible
`.hidden-md`	Visible	Visible	Oculto	Visible
`.hidden-lg`	Visible	Visible	Visible	Oculto

Ejemplos de prueba

Visible en...

Muy pequeños

✔ Visible en muy pequeños

Pequeños

✔ Visible en pequeños

Medio

✔ Visible en el medio

Grande

✔ Visible en grandes

Muy pequeño y pequeño

✔ Visible en muy pequeño y pequeño

Medio y grande

✔ Visible en el medio y grande

Muy pequeño y medio

✔ Visible en muy pequeño y medio

Pequeño y grande

✔ Visible en pequeños y grandes

Muy pequeño y grande

✔ Visible en muy pequeños y grandes

Pequeño y medio

✔ Visible en pequeño y medio

Oculto en...

Los marcados en verde representan los que se verían en su ventana actual.

Muy pequeños

✔ Oculto en muy pequeño

Pequeños

✔ Oculto en pequeño

Medio

✔ Oculto en medianos

Grande

✔ Oculto en grande

Muy pequeño y pequeño

✔ Oculto en muy pequeño y pequeño

Medio y grande

✔ Oculto en medianos y grandes

Muy pequeño y medio

✔ Oculto en muy pequeños y medianos

Pequeño y grande

✔ Oculto en pequeño y grande

Muy pequeño y grande

✔ Oculto en muy pequeño y grande

Pequeño y medio

✔ Oculto en pequeños y medianos

Ejemplo alternativo

<div class="col-md-12 borde text-center text-danger label-info visible-md">
   <span class="bold">Visible en medio</span>
</div>
<div class="col-md-6 pull-left">
   <div class="hidden-md hidden-lg visible-sm visible-xs borde text-center label-warning text-info">
      <span class="bold">Visible en pequeño y muy pequeño</span>
   </div>      
</div>
<div class="col-md-6 pull-right">
   <div class="borde text-center label-warning text-info visible-lg">
      <span class="bold">Visible en grande</span>
   </div>
</div>

Visible en medio

Visible en pequeño y muy pequeño

Visible en grande