Bootstrap grid system
Existen 4 en bootstrap:
xs
: dispositivos móviles
sm
: tablets
md
: laptops
lg
: desktops
Si más de 12 columnas son puestas dentro de la misma fila, cada grupo de columnas extra será puesto dentro de una nueva línea.
http://getbootstrap.com/css/#grid-example-wrapping
Las clases grid para un tamaño de pantalla específico, aplican para ese tamaño de pantalla y para los tamaños de pantalla más grandes a menos que se indique lo contrario explicitamente.
Para los tamaños de pantalla inferiores toma por defecto el valor de 1 columna, por ejemplo si no se define xs tomará por defecto: col-xs-12
.
En el siguiente ejemplo se definen 2 columnas para tamaños de pantalla sm
, por lo tanto los tamaños de pantalla md
y lg
tendrán 2 columnas:
Si no se definen los tamaños de pantalla inferiores al definido en la columna (en este caso xs
), toma por defecto 1 columna (col-xs-12
)
<div class="container">
<div class="row">
<div class="col-sm-6">
col 1
</div>
<div class="col-sm-6">
col 2
</div>
</div>
</div>
Resultado para pantallas sm
,md
y lg
:
--------------------------
| | |
| | |
| | |
| | |
| | |
--------------------------
Resultado para pantallas xs
:
--------------------------
| |
| |
|------------------------|
| |
| |
--------------------------
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system