Problems with col-xs (Boostrap)

Navigation
1

The problem is that in my browser the divs col-xs are not seen correctly. However here if it looks good. I leave a photo:

HTML 

<!doctype html>
<html>
<head>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <meta name"viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="container">

    <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-xs-4" style="background-color:#aaa">
        <h1>Columna 1</h1>
        <p>Prueba de Bootstrap</p>
      </div>
      <div class="col-xs-4" style="background-color:#bbb">
        <h1> Columna 2</h1>
        <p>Prueba de Bootstrap</p>
      </div>
      <div class="col-xs-4" style="background-color:#ccc">
        <h1>Columna 3</h1>
        <p>Prueba de Bootstrap</p>
      </div>
    </div>

  </div>
</body>
</html>
    
asked by Vendetta 15.08.2017 в 15:29
source

1 answer

5

The problem lies in the grid classes you are using for your columns. The col-xs classes do not work for Bootstrap 4.

Version 4.0 has different grid options than version 3.x. Bootstrap 4 does not have the col-xs- classes that version 3.x has for smaller screens, but it does have col- classes, which serve the same purpose.

That is, you must take into account that the grid options have width ranges of different screens between versions and versions:

Bootstrap 4.0

  • col- : Widths below 576px
  • col-sm- : Widths between 576px and 767px
  • col-md- : Widths between 768px and 991px
  • col-lg- : Width between 992px and 1199px
  • col-xl- : Widths of 1200px onwards

Bootstrap 3.x

  • col-xs- : Widths below 768px
  • col-sm- : Widths between 768px and 991px
  • col-md- : Width between 992px and 1199px
  • col-lg- : Widths of 1200px onwards

Solution

If you are using Bootstrap 4, just replace the col-xs- of your columns in the last row, by the col- classes.

In this case, col-xs-4 per col-4 : 

<div class="col-4" style="background-color:#aaa">
  <h1>Columna 1</h1>
  <p>Prueba de Bootstrap</p>
</div>

Your row would look like this: 

 <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>

Full code

The complete code would look like this: 

  <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>

And here you can see it in action.

See also

answered by 16.08.2017 / 20:32
source
recover data and put them in a select Cancel AsyncTask and the ProgressDialog when pressing back button on Android