ck777 ck777 - 1 year ago 55
CSS Question

How to add padding to the left and right side of grid in Bootstrap WITHOUT padding between grid boxes using col-sm-3

I am building a website using Bootstrap and Less.

I have a bootstrap grid, and although I know how to add padding to the left and right using CSS, I only want the padding to be on the left of the first grid box and on the right of the last grid box in the row. There are 4 in a fluid row at the moment. I want them to stay in a row but some space, around 100px between the page edges and the start/end of the grid row.

I do want padding in between the info/text of each grid box, but I want a larger amount on the very far left and the very far right.

At the moment, if I add it to the left and right it obviously adds it to the left and right of each box in the grid row, making the distance between each grid box larger than the distance on the outer sides.

I want a big gap between the row and the edge of the page, but a small gap between each grid box.

I have tried making a class just on the left grid box and setting the padding on just in CSS that but it doesnt work properly, it shifts one of the col-sm-3 boxes underneath the rest.

I have also tried a margin instead of padding but it does the same thing.

Am I doing the right thing slightly wrong or is there a smarter way?

I am new to this so any help much appreciated. Thanks.

Here is part of my code:

HTML


<div class="container-fluid">
<p class="lead text-center">
<div class="text-center">
<H1>title title </H1></div>
</p>
<div class="row-fluid" >
<div class="paddingleft">
<div class="col-sm-3">
<div class="text-center">
<img src="assets/images/image2.png" >
</div>
<h3>title</h3>
<p>info</p>
</div>
</div>
<div class="col-sm-3">
<div class="text-center">
<img src="assets/images/image1.png" >
</div>
<h3>title</h3>
<p> info
</p>

</div>
<div class="col-sm-3">
<div class="text-center">
<img src="assets/images/image3.png" >
</div>
<h3>Title</h3>
<p>info </p>

</div>

<div class="col-sm-3">
<div class="text-center">
<img src="assets/images/image4.png" >
</div>
<h3>title</h3>
<p>info</p>

</div>






.whatwedo paddingleft {
padding-left:100px;
}


Thanks guys!

Answer Source

If you need to usse col-sm-3 class then a way is use one more class and use this structure

HTML

<div class="row">
    <div class="col-sm-12">
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
    </div>
</div>

CSS

.inner_div{
   padding-left:0;
   padding-right:0;
}

you can also remove col-sm-3 class "if possible" and use this html

HTML

<div class="row">
    <div class="col-sm-12 clearfix">
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
    </div>
</div>

CSS

.inner_div{
    float:left;
    width:25%;
}

col-sm-12 class on main div will give padding to left and right but not between the grids.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download