Suggestions to fix columns in Bootstrap? - html

Question

How can I make 3 columns be dead centered?
They are spread out currently.
<div class="container container2">
<div class="row no-gutter">
<div class="col-md-4">
<h1>1</h1>
<p class="description1">elige<br>tu box</p>
<img class="crop-img" src="img/icono_elige.jpg" alt="delivery" />
<p class="description">elije entre la</br><b>box mensual</b> o la <b> </br> box personalizada</b></p>
</div>
<div class="col-md-4">
<h1>2</h1>
<p class="description1">elige<br>tus snacks</p>
<img class="crop-img" src="img/icono_snacks.jpg" alt="elige" />
<p class="description">encuentra mas de<br> <b>80 snacks</b> y<br>agregalos a tu box</p>
</div>
<div class="col-md-4">
<h1>3</h1>
<p class="description1">pide y<br>recibe</p>
<img class="crop-img" src="img/icono_delivery.png" alt=elige />
<p class="description">para ti, para<br> compartir o para<br>regalar</p>
</div>
</div>
http://imgur.com/a/UjOlV
Top - What I have
Bottom - What I need
Thanks for your help :)

Answer 1

All three boxes have the same width (some where around 33.3333%). I think you're using text-align: center; which will place the contents in the middle of the boxes. I think the best solution is making the middle box smaller.
You can also use col-push and col-pull.
To find more information about this, check http://getbootstrap.com/css/#grid-offsetting.
Just try using different sizes of columns and offsetting these.