Skip to main content
4 de 5
Como complemento, se agregaron todos los rangos de anchos de pantalla de Bootstrap 3.x y 4.
cristiancajiaos
  • 1.2k
  • 2
  • 9
  • 19

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 576px
  • col-sm-: Anchos entre 576px y 767px
  • col-md-: Anchos sobre 768px y 991px
  • col-lg-: Anchos sobre 992px y 1199px
  • col-xl-: Anchos de 1200px en adelante

Bootstrap 3.x

  • col-xs-: Anchos bajo 768px
  • col-sm-: Anchos entre 768px y 991px
  • col-md-: Anchos entre 992px y 1199px
  • col-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.

Véase también

cristiancajiaos
  • 1.2k
  • 2
  • 9
  • 19