Create a user-defined gap between two Bootstrap columns

Question

I want to create little panels/dashboard for my interface. In my case I want to have two panels like so

+-------------------------------+    +-------------------------------+
|                               |    |                               |
|                               |    |                               |
+-------------------------------+    +-------------------------------+

Generally it is easy with Bootstrap 3.

<div class="row">
  <div class="col-md-5">
  </div>
  <div class="col-md-5 pull-right">
  </div>
</div>

The problem is, the gap of col-md-2, as it is the case here, is way too big. I cannot use a col-md-1 gap, because then both sides do not have an equal size.

I also tried to add padding right and left, but that had not effect, too. What can I do here?

Solution 1

You could add a class which modifies the width of col-md-6. The width of this class is set to 50%. A smaller gap is achieved by reducing the width like so:

.dashboard-panel-6 {
   width: 45%;
}

Add this to your div elements. This way the width rule of col-md-6 gets overriden.

<div class="row">
  <div class="col-md-6 dashboard-panel-6">...</div>
  <div class="col-md-6 dashboard-panel-6">...</div>
</div>

Solution 2

You can use another div inside and give padding to that.

<div class="row">
  <div class="col-md-6">
    <div class="inner-div">
    </div>
  </div>
  <div class="col-md-6 pull-right">
    <div class="inner-div">
    </div>
  </div>
</div>

.inner-div{
   padding: 5px;
 }

Solution 3

Here's another possibility:
Live view
Edit view

You will see that it uses 2 col-md-6, each with a nested col-md-11, and you position the nested row in the second div to the right.

The suggestion from Ken has clean HTML which I like. If your left and right panels use elements with widths defined by Bootstrap though (eg wells or form elements) the column padding could cause hassles and break the layout. This nested approach might be easier in this situation.

HTML

<div class="container">
  <div class="row">

    <div class="col-md-6">
      <div class="row">
        <div class="col-md-11">nested row col-md-11</div>
      </div><!-- end nested row -->
    </div>

    <div class="col-md-6">
      <div class="row">
        <div class="col-md-11 col-md-offset-1">nested row col-md-11</div>
      </div><!-- end nested row -->
    </div>

  </div>
</div>

Good luck!

Solution 4

I posted this here already but it is still relevant the original question.

I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.

I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.

This was the end result we were going for

Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.

this is the markup for the two columns

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column

This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.

The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.

Hope this helps

View more solutions

Comments

[Max Rhan]

But how does that change the fact, that both columns have just the size of a col-md-5? If it would work I would do: 5.5-1-5.5

[David Taiaroa]

@MaxRhan you could go with this solution and on the first inner div have right padding of half the width of col-md-1 ( about 4.666% at 992px or above) and on the second inner div have this same padding on the left.

[Nelu]

I used this method and added a media query to remove the spacing when col-md.. becomes 100% of screen width (on mobile).

[ZekeDroid]

Pretty awesome solution. Just a question though, what would the pull-right class do in this case, if anything? I think it's irrelevant if the columns are 6 and 6 right?

[Konrad Reiche]

@ZekeDroid Indeed, that's just confusion. Removed it.

[Batman]

You're missing an open bracket after the @media query. Also your raised block rules add borders and other things which aren't entirely relevant to the question. Otherwise, this seems to work nicely without messing with the bootstrap defaults. Thanks.

[Joe Fitzgibbons]

@Batman thanks for catching the typo. Glad it worked for you. I would appreciate it if you up-voted it if it worked for you.