twitter-bootstrap – Bootstrap Grid not working!

Question:

I am developing a website and the bootstrap grid is not working… the MD and SM are working correctly, but when I go to test the responsiveness of the site the XL does not work… the images are one under the other instead of two per line.

  <div class="container">
<h2>Parceiros</h2>
<div class="row">

    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="img/parceiros/1.png" alt="" class="img-fluid"></div>
    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="img/parceiros/2.png" alt="" class="img-fluid"></div>

    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="img/parceiros/4.png" alt="" class="img-fluid"></div>
    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="img/parceiros/5.png" alt="" class="img-fluid"></div>

    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="img/parceiros/3.png" alt="" class="img-fluid"></div>             
    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="img/parceiros/6.png" alt="" class="img-fluid"></div>                

</div>

Answer:

You can add the col-lg-* class for screens col-lg-* than 1200px.

If it's XS that doesn't work, the problem could be related to the size of the images. If the image width is greater than the column size, the column will increase in size unless you set the overflow to hidden .

Simply put, in the <img> tags you should add the img-responsive class to better adapt the images to different screen sizes, regardless of their size.

Scroll to Top