Bootstrap grid not behaving when wrapping on smaller screens

Question

I've found this issue in a number of places (eg: Bootstrap: Dyamic columns with container-fluid and row not wrapping properly), and every time it's a matter of adding a clearfix div in the location where some size screens will be wrapping, but I'm already doing that.

misaligned icons

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-md-2">
      <img class="img-responsive center-block bottom10" src="/assets/filetypes/pdf.png" alt="Pdf">
    </div>
    <div class="col-xs-4 col-md-2">
      <img class="img-responsive center-block bottom10" src="/assets/filetypes/doc.png" alt="Doc">
    </div>
    <div class="col-xs-4 col-md-2">
      <img class="img-responsive center-block bottom10" src="/assets/filetypes/html.png" alt="Html">
    </div>

    <div class="clearfix visible-xs-block"></div>

    <div class="col-xs-4 col-md-2">
      <img class="img-responsive center-block bottom10" src="/assets/filetypes/mp3.png" alt="Mp3">
    </div>
    <div class="col-xs-4 col-md-2">
      <img class="img-responsive center-block bottom10" src="/assets/filetypes/mov.png" alt="Mov">
    </div>
    <div class="col-xs-4 col-md-2">
      <img class="img-responsive center-block bottom10" src="/assets/filetypes/ppt.png" alt="Ppt">
    </div>
  </div>
</div>

i asked because this side effect happens only when you have different height columns. Here is the test with the same height img http://plnkr.co/edit/o3Zn6RfSMwGfhSixgost?p=preview — iurii, Jul 11 '15 at 22:01
It turns out they are not quite the same size. MOV & HTML are 1px shorter than the others. Still doesn't explain why the clearfix div is not resolving the issue though?? — Dan, Jul 11 '15 at 22:31
your clearfix class is applied only for mobile devices so I assume you are checking on sm size devices. Remove visible-xs-block class. — iurii, Jul 11 '15 at 22:51
I can just test by resizing the window, but yes I've tested on mobile devices also. And yes, I've done testing w/ and w/o the clearfix div. — Dan, Jul 11 '15 at 22:54
I resized the two images that were off by 1px and that resolved the issue. Not particularly satisfying -- the clearfix should resolve according to documentation, but good enough. — Dan, Jul 11 '15 at 22:55

score 0 · Answer 1 · answered Jul 11 '15 at 23:29

Dan, Hi there. It is clear that the clearfix is not helping you here, when the 3rd image is 1px smaller in height.
So to get around this if not making all images the same size, just use 2 rows.
Each row holds 3 images.

This code works for what you need here.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Bootstrap grid not behaving when wrapping on smaller screens</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
<style>
body {
    padding-top: 50px;
}
.spacer {
    margin-top: 2%;
    margin-bottom: 2%;
}    

.bottom10 {
      margin-bottom: 10px;
    }   
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    
<div class="container col-lg-12 spacer"></div>
        
<div class="container">
    <div class="row col-xs-12 col-sm-6">
        <div class="col-xs-4">
            <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/40/nature" alt="Pdf">
        </div>
        <div class="col-xs-4">
            <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/40/nature" alt="Doc">
        </div>
        <div class="col-xs-4">
            <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/39/nature" alt="Html">
        </div>
        
    </div>
    
    <div class="row col-xs-12 col-sm-6">
        <div class="col-xs-4">
            <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/40/nature" alt="Mp3">
        </div>
        <div class="col-xs-4">
            <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/40/nature" alt="Mov">
        </div>
        <div class="col-xs-4">
            <img class="img-responsive center-block bottom10" src="http://lorempixel.com/40/40/nature" alt="Ppt">
        </div>
    </div>
</div>
    

    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    

    
</body>
</html>

align images

Bootstrap grid not behaving when wrapping on smaller screens

1 Answers1