Sistema de cuadrícula

CSS

Estructura con CSS

Bootstrap

Apilado en horizontal
Estructura con Bootstrap
Sistema básico de cuadrícula

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 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.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
.col-xs-6 .col-sm-4 .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-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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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>
               

Ejemplo de texto de ayuda

Hombre Mujer
Recordarme

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

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

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

email@example.com

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

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" />
                  
Laujar de Andarax
<img src="..." 
 class="img img-thumbnail" />
                  
Laujar de Andarax
<img src="..." 
 class="img img-circle" />
                  
Laujar de Andarax

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.

Paisaje 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
.visible-sm Visible
.visible-md Visible
.visible-lg Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

Ejemplos de prueba

Visible en...
✔ Visible en muy pequeños
✔ Visible en pequeños
Medio ✔ Visible en el medio
✔ Visible en grandes
✔ Visible en muy pequeño y pequeño
✔ Visible en el medio y grande
✔ Visible en muy pequeño y medio
✔ Visible en pequeños y grandes
✔ Visible en muy pequeños y grandes
✔ 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
Pequeños
Medio ✔ Oculto en medianos
Grande
Muy pequeño y pequeño
Medio y grande
Muy pequeño y medio
Pequeño y grande
Muy pequeño y grande
Pequeño y medio
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 grande