Bootstrap add space between columns

Question

I'm stuck with a spacing problem. Here's the code:

.border {
  border: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-4 border">
    <p>.......</p>
  </div>
  <div class="col-md-4 border">
    <p>.......</p>
  </div>
  <div class="col-md-4 border">
    <p>.......</p>
  </div>
</div>

Without the border, it looks find. But add the border, and they touch one another. Looks very ugly. Adding margin-left and right doesn't help. The last column will be dumped on the next row. Compensating the margin with a negative padding doesn't work either.

I'm out of options. What do I need to do to add some space between the columns?

One solution is to add the border inside the col-md-4 div instead of adding to it. I'm working on a Joomla template. I have to add the code to the Module Class Suffix. I've tried .margin {-10px;} in front of col-md-4, but that doesn't help. — Jos
– Jos, Commented Jul 12, 2016 at 4:38

vanburen · Accepted Answer · 2016-07-12 04:31:19Z

1

Apply your rules to the content inside the column, not the column itself/

.border {
    border: 1px solid red;
}

<div class="col-md-4">
    <div class="border">Content>/div>
</div>

Example:

body {
  padding-top: 60px;
}
.border {
  border: 1px solid red;
  padding: 10px;
  background-color: aliceblue;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p class="border">Hello</p>
    </div>
    <div class="col-md-4">
      <p class="border">Hello</p>
    </div>
    <div class="col-md-4">
      <p class="border">Hello</p>
    </div>
  </div>
</div>

answered Jul 12, 2016 at 4:31

vanburen

21.7k7 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ismail Farooq · Accepted Answer · 2016-07-12 06:29:58Z

0

Just remove right border from all element except last one for example

.border:not(:last-child) {
  border-right: none;
}

Demo

answered Jul 12, 2016 at 6:29

Ismail Farooq

6,9372 gold badges32 silver badges47 bronze badges

Collectives™ on Stack Overflow

Bootstrap add space between columns

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related