Cuadrícula: dispositivos ultrapequeños Bootstrap 5

Ejemplo de cuadrícula de dispositivos ultrpequeños

XSmall Small Medium Large Extra Large XXL
Prefijo de clase .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Ancho de pantalla <576px >=576px >=768px >=992px >=1200px >=1400px

Supongamos que tenemos un diseño simple con dos columnas. Deseamos que las columnas seanTodosDivisión de dispositivos 25% / 75%.

Añadiremos las siguientes clases a las dos columnas:

<div class="col-3">....</div>
<div class="col-9">....</div>

El siguiente ejemplo provocará una división del 25% / 75% de todos los dispositivos (ultrpequeños, pequeños, medianos, grandes, extragrandes y gigantes).

Ejemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>La Fundación Mundial para la Naturaleza (WWF), fundada el 29 de abril de 1961, su logotipo es un panda gigante...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>En 1980, WWF llegó oficialmente a China, invitado por el gobierno chino para llevar a cabo el trabajo de protección del panda gigante y su hábitat...</p>
    </div>
  </div>
</div>

Prueba personalmente

Atención:Asegúrese de que el total sea igual o menor que 12 (no es necesario usar todas las 12 columnas disponibles):

Para la división 33.3/66.6%, debe usar .col-4 y .col-8Para la división 50/50%, debe usar .col-6 y .col-6):

Ejemplo

<!-- División 33.3/66.6% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>La Fundación Mundial para la Naturaleza (WWF), fundada el 29 de abril de 1961, su logotipo es un panda gigante...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>En 1980, WWF llegó oficialmente a China, invitado por el gobierno chino para llevar a cabo el trabajo de protección del panda gigante y su hábitat...</p>
    </div>
  </div>
</div>
<!-- División 50/50% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>La Fundación Mundial para la Naturaleza (WWF), fundada el 29 de abril de 1961, su logotipo es un panda gigante...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>En 1980, WWF llegó oficialmente a China, invitado por el gobierno chino para llevar a cabo el trabajo de protección del panda gigante y su hábitat...</p>
    </div>
  </div>
</div>

Prueba personalmente

Columnas de diseño automático

En Bootstrap 5, hay un método simple para crear columnas de diseño automático para todos los dispositivosColumnas de ancho igualSólo necesita partir de .col-* Elimine los números y úselos solo en el elemento col .col Clase. Bootstrap reconocerá cuántas columnas hay y cada columna obtendrá el mismo ancho:

<!-- Dos columnas: 50% de ancho -->
<div class="row">
  <div class="col">1 de 2</div>
  <div class="col">2 de 2</div>
</div>
<!-- Cuatro columnas: 25% de ancho -->
<div class="row">
  <div class="col">1 de 4</div>
  <div class="col">2 de 4</div>
  <div class="col">3 de 4</div>
  <div class="col">4 de 4</div>
</div>

Prueba personalmente

El siguiente capítulo mostrará cómo agregar diferentes porcentajes de división para dispositivos pequeños.