CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Amr SubZero
Amr SubZero

Reputation: 1276

Bootstrap 3 columns beside each other?

I'm trying to make a grid of responsive images using bootstrap 3, but when i try to put them together, one beside one using the code below the last 2 columns goes away down from the other columns :

enter image description here

This is what i try to achieve :

enter image description here

HTML :

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <img class="img" src="path/to/image" />
        </div>
    </div>
</div>

CSS :

.row { overflow:hidden; }
.img { min-width:100%; max-width:100%; min-height:100%; max-height:100%; }
.col-md-3 { min-height:100%; max-height:100%; }

NOTE : if i set the max-min/height-width by pixels and i resized the window the columns overlapping each other, so i've to set it by percentage! and still not getting the result that i want.

will appreciate any help.

Upvotes: 4

Views: 10536

Answers (4)

Shawn Taylor
Shawn Taylor

Reputation: 15750

You actually can solve this issue very simply, without any custom CSS and only minor changes to your HTML. 2 ways actually.

1 - You can put each row of cols into it's own <div class="row">:

2 - Or throw a <div class="clearfix"></div> after the last item of each row (not .row), or combine it with the hidden/visible helper classes if #1 messes with your responsive layout.

http://www.bootply.com/yC3nVhlb64

Upvotes: 1

Raul Neto
Raul Neto

Reputation: 11

If you don't need that all boxes have the same height, you should try to use Mansory plugin http://desandro.github.io/masonry/. It's the best plugin for this type of grid. But if you need that all boxes have the same height. You can get the highest height and set for all boxes. Like that:

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 item">
            <img class="img src="path/to/image" />
        </div>
    </div>
</div>

var highestH = 0;
var height = 0;
$('.container-fluid .item').removeAttr('style');
    $('.container-fluid .item').each(function () {
        // verify highest height
        height = $(this).outerHeight();
        if (height > highestH) {
            highestH = height;
        }
        height = highestH;

    });
    $('.container-fluid .item').outerHeight(height);

Upvotes: 1

Junaid S.
Junaid S.

Reputation: 2652

Simple solution

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>

    </div>
    <div class="row">
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>

    </div>
    ... more rows
</div>

CSS:

div.row > div {
   padding-bottom: 30%; // This will give height 
}

Upvotes: 1

Christina
Christina

Reputation: 34642

Here's a way to do it by converting the grid, in this instance only, to inline-block. That is the css and html below. Another way is to use a script that sets up the grid like masonry blocks that tuck under each other, you can use jscripts like masonry, mason, isotope, shuffle and a number of other scripts. Here's an example of shuffle https://jsbin.com/vaquci/2

DEMO: https://jsbin.com/rurap/1/

https://jsbin.com/rurap/1/edit?html,css,output

enter image description here

CSS

/* demo */
.col-sm-4 {border:1px solid red;}
.well {height:200px;}
.height1 {height:250px}
.height2 {height:300px}
/* demo */


@media (min-width:768px) {
    .inline-block-row {
        word-spacing: -1em;
        letter-spacing: -1em;
        overflow:hidden;
    }
    .inline-block-row .col-sm-4 {
        word-spacing: normal;
        vertical-align: top;
        letter-spacing: normal;
        display: inline-block;
        float:none;
    }
}
@media (min-width:992px) {
    .inline-block-row .col-md-3 {
        float:none;
    }
}

HTML:

<div class="container-fluid">
   <h1>Inline Block Grid</h1>
   <div class="row inline-block-row">
      <div class="col-sm-4 col-md-3">
         <div class="well height1">1</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well">2</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well">3</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 4</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 5</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well height2"> 6</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 7</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well height1"> 7</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 7</div>
      </div>
   </div>
</div>

Upvotes: 6

Related Questions