Skip to main content Skip to docs navigation
Ver en GitHub

Diseño (Layout)

Da estructura a tus formularios —desde diseños en línea hasta horizontales o implementaciones de cuadrícula personalizadas— con nuestras opciones de diseño de formulario.

En esta página

Formularios

Cada grupo de campos de formulario debe residir en un elemento <form>. Bootstrap no proporciona ningún estilo predeterminado para el elemento <form>, pero hay algunas funciones potentes del navegador que se proporcionan de forma predeterminada.

  • ¿Eres nuevo en los formularios del navegador? Considera revisar la documentación de formularios de MDN para obtener una descripción general y una lista completa de los atributos disponibles.
  • Los botones <button> dentro de un <form> tienen por defecto el type="submit", así que esfuérzate por ser específico y siempre incluye un atributo type.

Dado que Bootstrap aplica display: block and width: 100% a casi todos nuestros controles de formulario, los formularios se apilarán verticalmente de forma predeterminada. Se pueden utilizar clases adicionales para variar este diseño según cada formulario.

Utilidades

Las utilidades de margen son la forma más sencilla de estructurar los formularios. Proporcionan agrupación básica de etiquetas, controles, texto de formulario opcional y mensajes de validación de formulario. Recomendamos apegarse a las utilidades margin-bottom y usar una sola dirección en todo el formulario para mantener la consistencia.

Siéntete libre de crear tus formularios como quieras, con <fieldset>, <div> o casi cualquier otro elemento.

html 
<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Etiqueta de ejemplo</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Marcador de posición de entrada de ejemplo">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Otra etiqueta</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Otro marcador de posición de entrada">
</div>

Cuadrícula de formulario (Form grid)

Se pueden construir formularios más complejos utilizando nuestras clases de cuadrícula. Úsalas para diseños de formulario que requieran múltiples columnas, anchos variados y opciones de alineación adicionales. Requiere que la variable Sass $enable-grid-classes esté habilitada (activada por defecto).

html 
<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="Nombre" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Apellido" aria-label="Last name">
  </div>
</div>

Canales (Gutters)

Al agregar clases modificadoras de canales (gutters), puedes controlar el ancho del canal tanto en dirección horizontal (inline) como vertical (block). También requiere que la variable Sass $enable-grid-classes esté habilitada (activada por defecto).

html 
<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="Nombre" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Apellido" aria-label="Last name">
  </div>
</div>

También se pueden crear diseños más complejos con el sistema de cuadrícula.

html 
<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Correo electrónico</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Contraseña</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Dirección</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Dirección 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartamento, estudio o piso">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">Ciudad</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">Estado</label>
    <select id="inputState" class="form-select">
      <option selected>Elige...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Código postal</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Márcame
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Iniciar sesión</button>
  </div>
</form>

Formulario horizontal

Crea formularios horizontales con la cuadrícula agregando la clase .row a los grupos de formularios y usando las clases .col-*-* para especificar el ancho de tus etiquetas y controles. Asegúrate de agregar también .col-form-label a tus etiquetas <label> para que queden centradas verticalmente con sus controles de formulario asociados.

A veces, es posible que necesites utilizar utilidades de margen o relleno (padding) para crear la alineación perfecta que necesitas. Por ejemplo, eliminamos el padding-top en la etiqueta de nuestras entradas de radio apiladas para alinear mejor la línea base del texto.

Botones de opción (Radios)
html 
<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Correo electrónico</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Contraseña</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Botones de opción (Radios)</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          Primer botón de opción
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Segundo botón de opción
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Tercer botón de opción deshabilitado
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Casilla de verificación de ejemplo
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Iniciar sesión</button>
</form>

Tamaño de las etiquetas de formulario horizontales

Asegúrate de aplicar .col-form-label-sm o .col-form-label-lg a tus etiquetas <label> o leyendas <legend> para seguir correctamente el tamaño de .form-control-lg y .form-control-sm.

html 
<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Correo electrónico</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Correo electrónico</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Correo electrónico</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

Tamaño de columna (Column sizing)

Como se muestra en los ejemplos anteriores, nuestro sistema de cuadrícula te permite colocar cualquier cantidad de columnas .col dentro de una fila .row. Dividirán el ancho disponible por igual entre ellas. También puedes elegir un subconjunto de tus columnas para que ocupen más o menos espacio, mientras que las columnas .col restantes dividen el resto por igual, con clases de columnas específicas como .col-sm-7.

html 
<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="Ciudad" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Estado" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Código postal" aria-label="Zip">
  </div>
</div>

Ajuste automático de tamaño (Auto-sizing)

El ejemplo a continuación utiliza una utilidad flexbox para centrar verticalmente el contenido y cambia .col a .col-auto para que tus columnas solo ocupen el espacio necesario. Dicho de otra manera, la columna se dimensiona sola según su contenido.

@
html 
<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Nombre</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Nombre de usuario</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preferencia</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Elige...</option>
      <option value="1">Uno</option>
      <option value="2">Dos</option>
      <option value="3">Tres</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Recuérdame
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Enviar</button>
  </div>
</form>

Luego puedes combinar eso una vez más con clases de columna de tamaño específico.

@
html 
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Nombre</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Nombre de usuario</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preferencia</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Elige...</option>
      <option value="1">Uno</option>
      <option value="2">Dos</option>
      <option value="3">Tres</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
      <label class="form-check-label" for="autoSizingCheck2">
        Recuérdame
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Enviar</button>
  </div>
</form>

Formularios en línea (Inline forms)

Utiliza las clases .row-cols-*\ para crear diseños horizontales responsivos. Al agregar clases modificadoras de canales (gutters), tendremos canales en direcciones horizontales y verticales. En ventanas gráficas móviles estrechas, la clase .col-12 ayuda a apilar los controles de formulario y más. El .align-items-center alinea los elementos del formulario al medio, logrando que .form-check se alinee correctamente.

@
html 
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Nombre de usuario</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preferencia</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Elige...</option>
      <option value="1">Uno</option>
      <option value="2">Dos</option>
      <option value="3">Tres</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Recuérdame
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Enviar</button>
  </div>
</form>