how can I center these 3 columns using bootstrap

Question

I'm relatively new to bootstrap I am trying to get the following 3 columns centered but they are off-center. The columns are col-md-3 each and the first one has an offset of 1 and I can understand why this is not centered but I can't work out how to get them centered.

I have created the example in bootply

Answer 1

The issue with your layout is that in order to center your 3 columns, you would have to offset the left column by 1.5 (half of the leftover columns):

// 12 Column Layout, 3 columns of col-md-3, offset of 1.5 needed (which isn't a class) 
12 - (3 + 3 + 3) = 3 / 2 = 1.5

Since that won't work (as col-md-offset-1.5 isn't a class) I think you have 2 options here:

Option 1: Change your col-md-3 to col-md-4 and put it in a container:

<div class="container">
  <div class="col-md-4 box">
    <div>                            
      <h4>box 1</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-4 box">
    <div>                            
      <h4>box 2</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-4 box">
    <div>                            
      <h4>box 3</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
</div>

Bootply Example 1

Option 2: Change your col-md-3 to col-md-2 and col-md-offset-1 to col-md-offset-3 and put it in container-fluid:

<div class="container-fluid">
  <div class="col-md-2 col-md-offset-3 box">
    <div>                            
      <h4>box 1</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-2 box">
    <div>                            
      <h4>box 2</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-2 box">
    <div>                            
      <h4>box 3</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
</div>

Bootply Example 2

Both methods change the layout so that the full 12 columns are taken up (or offset correctly), but one gives you a bit more space to work with.

For more info on the Bootstrap Grid see the Documentation

Answer 2

You can do this: Try to use a div wrap row with offset 2. The 3th block will be divided by 2 each side (1.5). And make a fuild container wrapping all.

<div class="container-fluid">           
            <div class="row col-md-offset-2">
                    <div class="col-md-3 box">
                    <div>                            
                            <h4>box 1</h4>
                            <p>some text dfgdfgdfgdfg</p>                        
                    </div>
                </div>
                <div class="col-md-3 box">
                    <div>                            
                            <h4>box 2</h4>
                            <p>some text dfgdfgdfgdfg</p>                        
                    </div>
                </div>
                <div class="col-md-3 box">
                    <div>                            
                            <h4>box 3</h4>
                            <p>some text dfgdfgdfgdfg</p>                        
                    </div>
                </div>
            </div>
</div>