El problema reside en las clases de grilla que estás usando para tus columnas. Las clases col-xs
no funcionan para Bootstrap 4.
La versión 4.0 tiene opciones de grilla diferentes a las de la versión 3.x. Bootstrap 4 no cuenta con las clases col-xs-
que tiene la versión 3.x para las pantallas de menor tamaño, pero sí cuenta con las clases col-
, que cumplen el mismo propósito.
Eso si, debes tomar en cuenta, que las opciones de grilla tienen rangos de anchos de pantallas distintos entre versión y versión:
Bootstrap 4.0
col-
: Anchos bajo 576pxcol-sm-
: Anchos entre 576px y 767pxcol-md-
: Anchos sobre 768px y 991pxcol-lg-
: Anchos sobre 992px y 1199pxcol-xl-
: Anchos de 1200px en adelante
Bootstrap 3.x
col-xs-
: Anchos bajo 768pxcol-sm-
: Anchos entre 768px y 991pxcol-md-
: Anchos entre 992px y 1199pxcol-lg-
: Anchos de 1200px en adelante
Solución
Si estás usando Bootstrap 4, basta con reemplazar las clases col-xs-
de tus columnas de la última fila, por las clases col-
.
En este caso, col-xs-4
por col-4
:
<div class="col-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Prueba de Bootstrap</p>
</div>
Tu fila quedaría así:
<div class="row">
<div class="col-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Prueba de Bootstrap</p>
</div>
<div class="col-4" style="background-color:#bbb">
<h1> Columna 2</h1>
<p>Prueba de Bootstrap</p>
</div>
<div class="col-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Prueba de Bootstrap</p>
</div>
</div>
Código completo
El código completo quedaría así:
<div class="row">
<div class="col-lg-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Prueba de Bootstrap</p>
</div>
<div class="col-lg-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Prueba de Bootstrap</p>
</div>
<div class="col-lg-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Prueba de Bootstrap</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Prueba de Bootstrap</p>
</div>
<div class="col-md-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Prueba de Bootstrap</p>
</div>
<div class="col-md-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Prueba de Bootstrap</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Prueba de Bootstrap</p>
</div>
<div class="col-sm-4" style="background-color:#bbb">
<h1> Columna 2</h1>
<p>Prueba de Bootstrap</p>
</div>
<div class="col-sm-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Prueba de Bootstrap</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Prueba de Bootstrap</p>
</div>
<div class="col-4" style="background-color:#bbb">
<h1> Columna 2</h1>
<p>Prueba de Bootstrap</p>
</div>
<div class="col-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Prueba de Bootstrap</p>
</div>
</div>
Y aquí lo puedes ver en acción.