CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3jquery-masonry
Jonathan Vanasco
Jonathan Vanasco

Reputation: 15680

creating a masonry gutter with bootstrap 3 grid

I'm having trouble making a particular bootstrap grid responsive. This worked before under a fixed-container concept.

I have a 2-column bootstrap page which contains a col-sm-9 "main" section alongside a col-sm-3 sidebar.

The col-sm-9 section contains a masonry tile, which has 3 columns.

The problem that I've run into, is that I can't seem to enact a gutter on the masonry section. I want the masonry to have a 15px gutter, and otherwise resize normally.

In the following example, I show the basis of 2 failed attempts ( i experimented on both to no luck , with masonry and css options, this is just the core of the approaches i thought of ):

http://www.bootply.com/121056

Attempt 1-

I tile a bunch of col-sm-4 , but can't create a gutter on them.

Attempt 2-

I nest the background color within the column to make use of padding to ƒake a gutter. unfortunately, this means I am subject to the outer padding, which doesn't look right.

I can't seem to figure out the right approach. does anyone have a suggestion?

Upvotes: 0

Views: 1283

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362640

The id of the container should be..

<div class="container" id="content_container">

http://www.bootply.com/121233

Upvotes: 2

Related Questions