How to add space between columns with Bootstrap

Question

I want to add space between this columns, how can I do it with bootstrap.

<div class="container">
    <h1 class="my_h">title</h1>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <div>Widget 1</div>
                </div>
                <div class="col-md-4">
                    <div>Widget 2</div>
                </div>
                <div class="col-md-4">
                    <div>Widget 3</div>
                </div>
            </div>
        </div>
</div>

Ionut Necula · Accepted Answer · 2016-12-21 11:01:30Z

7

You can use col-md-offset-*:

<div class="container">
    <h1 class="my_h">title</h1>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4 col-md-offset-2">
                    <div>Widget 1</div>
                </div>
                <div class="col-md-4">
                    <div>Widget 2</div>
                </div>
                <div class="col-md-4">
                    <div>Widget 3</div>
                </div>
            </div>
        </div>
</div>

You can read more about this here.

answered Dec 21, 2016 at 11:01

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

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

Comments

Komal · Accepted Answer · 2016-12-21 11:08:02Z

Try this with css and offset

 .widget-box {
      padding: 20px 5px;
    }

<div class="container">
  <h1 class="my_h">title</h1>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <div class="widget-box">Widget 1</div>
      </div>
      <div class="col-md-4">
        <div class="widget-box">Widget 2</div>
      </div>
      <div class="col-md-4">
        <div class="widget-box">Widget 3</div>
      </div>
    </div>
  </div>
</div>

OR

Set offset

<div class="container">
  <h1 class="my_h">title</h1>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-md-offset-1">
        <div class="widget-box">Widget 1</div>
      </div>
      <div class="col-md-3 col-md-offset-1">
        <div class="widget-box">Widget 2</div>
      </div>
      <div class="col-md-3">
        <div class="widget-box">Widget 3</div>
      </div>
    </div>
  </div>
</div>

marc_s · Accepted Answer · 2017-01-20 17:35:23Z

1

Bootstrap always uses 15px padding on columns to separate the content of the columns.

So there is a standard 30px space between column content

edited Jan 20, 2017 at 17:35

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Dec 21, 2016 at 11:04

Pizza lord

76313 silver badges28 bronze badges

Comments

JohnnyKB · Accepted Answer · 2016-12-21 11:05:14Z

Suggested solution for a long-term, personalised fix

If you are looking to maintain the 12-column grid system, and not use empty columns to create the spacing you're looking for, the best solution for you would be to customize your own settings for Bootstrap.

Most specifically, this link: http://getbootstrap.com/customize/#grid-system

Quick and dirty fix

If, on the other hand, you want to use empty columns, the offset classes are here for you. Bear in mind you will probably struggle to align 3 columns correctly:

<div class="container">
    <h1 class="my_h">title</h1>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3 col-md-offset-2">
                    <div>Widget 1</div>
                </div>
                <div class="col-md-3 col-md-offset-1">
                    <div>Widget 2</div>
                </div>
                <div class="col-md-3">
                    <div>Widget 3</div>
                </div>
            </div>
        </div>
</div>

Collectives™ on Stack Overflow

How to add space between columns with Bootstrap

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related