Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ashish Mehra
Ashish Mehra
471 Points

margin in bootstrap grid ?

Check out the image here of site layout https://www.facebook.com/dgexplore/photos/a.474658576074614.1073741826.473822756158196/617931335080670/?type=3&theater

Here I want 4 grid in 1 row but when I set margin the last grid move in next line.

<div class="row child-section">

            <div class="col-sm-3 other-post clearfix">
               <img src="img/header.jpg" class="img-responsive">
               <h1 class="post-heading">Integer vitae libero ac risus egestas placerat</h1>
                   <p class="small-desc">                
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede...
                   <p>
                   <a href="" class="read-btn pull-right">READ MORE</a>
            </div>

            <div class="col-sm-3 other-post clearfix">
               <img src="img/header.jpg" class="img-responsive">
               <h1 class="post-heading">Integer vitae libero ac risus egestas placerat</h1>
                   <p class="small-desc">                
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede...
                   <p>
                   <a href="" class="read-btn pull-right">READ MORE</a>
            </div>

            <div class="col-sm-3 other-post clearfix">
               <img src="img/header.jpg" class="img-responsive">
               <h1 class="post-heading">Integer vitae libero ac risus egestas placerat</h1>
                   <p class="small-desc">                
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede...
                   <p>
                   <a href="" class="read-btn pull-right">READ MORE</a>
            </div>

            <div class="col-sm-3 other-post clearfix">
               <img src="img/header.jpg" class="img-responsive">
               <h1 class="post-heading">Integer vitae libero ac risus egestas placerat</h1>
                   <p class="small-desc">                
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede...
                   <p>
                   <a href="" class="read-btn pull-right">READ MORE</a>
            </div>

        </div>