Bootstrap Grid does not work!
I am developing a website and the Bootstrap grid is not working... the MD and SM are working properly, but when I test the responsiveness of the site XL does not work.. the images are one below the other rather than 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>
3 answers
You can add the Class col-lg-* for screens wider than 1200px.
If it is XS that does not work, the problem may be related to the size of the images. If the image width is larger than the column size, the column will increase in size unless you set overflow to hidden.
Simply put, in the tags <img> you should add the Class img-responsivefor a better adaptation of the images to the different screen sizes, regardless of the size of the images. yourself.
You must use Bootstrap 4 to use the class suffixes -xl. Still, you should note that the other classes added to the element (wow and bounceInLeft) do not have CSS attributes like float and display that modify the display, causing this offset.
Lucas I think you are getting a little confused between the classes of Bootstrap3 and Bootstrap4, it is not your fault, because sometimes we search Google and click on the link without realizing in the documentation of which we are 3 or 4... It would be interesting for you to include your website's <head> in the question.
For example class="img-fluid" which is from BS4 in BS3 would be class="img-responsive"
With Bootstrap 4: run the Snippet as " Page All "
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name=
content=
>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
</style>
</head>
<body>
<div class="container">
<h2>Parceiros</h2>
<div class="row">
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>With Bootstrap 3: run the Snippet as"Whole Page"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
</style>
</head>
<body>
<div class="container">
<h2>Parceiros</h2>
<div class="row">
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>
<div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>