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

Question

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!

Solution 1

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.

Solution 2

A good practice when using columns in the bootstrap and foremost with bootstrap 4 is without wrapping the columns with an element that has the ".row" class. This element should always be used with a parent that has positive padding such as: ".container, .container-fluid, and all '.col- *', because it has padding with negative values.

Please see this example I put on jsbin.com or run code snippet with full page.

I hope I had helped.

p{
  background: #333;
  color: #dddddd;
  padding: 1em;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="row">
          <div class="col-sm-4">
            <p>item-1</p>
          </div>
          <div class="col-sm-4">
            <p>item-2</p>
          </div>
          <div class="col-sm-4">
            <p>item-3</p>
          </div>
        </div>
      </div>
      
      <div class="col-sm-6 col-md-4">
        <div class="row">
          <div class="col-sm-4">
            <p>item-1</p>
          </div>
          <div class="col-sm-4">
            <p>item-2</p>
          </div>
          <div class="col-sm-4">
            <p>item-3</p>
          </div>
        </div>
      </div>
      
      <div class="col-sm-6 col-md-4">
        <div class="row">
          <div class="col-sm-4">
            <p>item-1</p>
          </div>
          <div class="col-sm-4">
            <p>item-2</p>
          </div>
          <div class="col-sm-4">
            <p>item-3</p>
          </div>
        </div>
      </div>
    </div>
  </div>

Comments

[ck777]

Thanks for this! Makes sense, I think! I just sorted it as I saw your answer, I set everything in the grid that I wanted to have padding round the edges into a div class, the in CSS I set the width at 90% and the margin at 10px.

[Gaurav Aggarwal]

no i think u r good going...still i would be interested to see you page if possible to check properly