Bootstrap grid not working!

Asked

Viewed 1,222 times

3

I am developing a site and the bootstrap grid is not working... MD and SM are working properly, but when I test the site responsiveness XL does not work.. the images are one below 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>
twitter-bootstrap bootstrap-3 bootstrap-4 grid

  • Place Your HTML, including with <head> and if you’re using any CSS other than Bootstrap

  • Do you mean XS instead of XL? How wide the images are. See my answer

  • Guys got it here.. I actually opened a bootstrap css file and copied the Xs part and pasted it into my css and it’s all solved.. thanks!

3 answers

3

You must use Bootstrap 4 to use the class suffixes -xl . Still, you should note if 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 displacement.

  • 1

    But in the documentation of bootstrap 3.3.7 already has Xl.. and I am using it..

  • Can you pass the doc link.? Bootstrap 3 only reaches -lg

  • https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js <- ta pulling from there.. and on the website is Xl.. https://getbootstrap.com/docs/3.3/css/#grid

  • Sorry I’m a beginner. kkkk

3


You can add the class col-lg-* for screens of a width exceeding 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 greater than the column size, the column will increase in size unless you set the overflow as hidden.

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

3

Lucas I think you’re getting a little confused between the Classes of Bootstrap3 and Bootstrap4, it’s not your fault, because sometimes we search in Google and click on the link without noticing in the Documentation of which we are 3 or 4... It would be interesting to include the <head> from your site in question.

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

With Bootstrap 4: Run the Snippet as "Whole 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>
    <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>

Browser other questions tagged twitter-bootstrap bootstrap-3 bootstrap-4 grid

You are not signed in. Login or sign up in order to post.