Bootstrap Grid does not work!

Question

Bootstrap Grid does not work!

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)

3

I am developing a website and the grid bootstrap 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 instead of staying 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>

grid bootstrap

asked by anonymous 16.01.2018 / 14:05

3 answers

2

You should use Bootstrap 4 to use the -xl suffixes. Also, 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 view, causing that offset.

16.01.2018 / 14:10

2

Lucas I think you are confusing yourself a little between the Classes of Bootstrap3 and Bootstrap4 , it is not your fault, we researched Google and clicked on the link without noticing in the documentation of which we are 3 or 4 ... It would be interesting to include the <head> of your site in the question.

For example class="img-fluid" that is BS4 in BS3 would be class="img-responsive"

With Bootstrap 4: Run the Snippet as "All Page"

<!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><scriptsrc="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><scriptsrc="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 "All 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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

16.01.2018 / 15:34

Is there any way to get a particular row in a string? Is it possible to remove the first sequence of the last letter of the regex?

score 1 · Accepted Answer

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

If XS does not work, the problem may be related to the size of the images. If the width of the image is larger than the size of the column, the column will increase in size, even if you set overflow to hidden .

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