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>

Answer 1

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.

Answer 2

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>