Cleanest way of decreasing space between content in Bootstrap

Question

I use Bootstrap v3 and AdminLTE. Here I want to decrease the space between each content.

When I just set margin-left and margin-right, the right-margin of rightmost content and the left margin of far left content are affected which I dont want to. How is the cleanest way to achieve that?

Answer 1

You can chain the :not and :first-of-type pseudo-classes to apply rules to any element other than the first match.

In your case, you'll want to apply margin-right to :not(:first-of-type)
(or margin-left to :not(:last-of-type)).

This can be seen in the following, simplified example:

.item {
  height: 100px;
  border: 1px solid black;
}

.item:not(:first-of-type) {
  color: red;
}

<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>