how to get div content in middle using bootstrap

Question

I have 3 divs in a row, I need 3 divs should be aligned in the center.

<div class="row">
  <div class="center">
    <div class="col-sm-4" id="ph-container"></div>
    <div class="col-sm-4" id="do-container"></div>
    <div class="col-sm-4" id="water-temperature-container"></div>
  </div>
</div>

Answer 1

Use text-center instead of center .

<div class="row">
  <div class="text-center">
    <div class="col-sm-4 col-sm-offset-1" id="ph-container"></div>
    <div class="col-sm-4" id="do-container"></div>
    <div class="col-sm-4" id="water-temperature-container"></div>
  </div>
</div>

Adding an offset will help you in making the view better.

Answer 2

<div class="row">
    <div class="col-sm-offset-1 col-sm-3" id="ph-container"></div>
    <div class="col-sm-3" id="do-container"></div>
    <div class="col-sm-3" id="water-temperature-container"></div>
</div>

This makes the three divs slightly narrower, and pushes them from the left, making them appear in the centre of the page.

Bear in mind, by making the divs narrower, your graphs may not look correct, so you'll need to correct your styling to adapt into the new div sizes.

This might help you actually: Bootstrap 3 1.5 column offset

Answer 3

the total number of cols is 12, if you use 12 cols (4+4+4=12) it will be not in center cose they wil be take all with of parent block. So you must use less cols

<div class="row">
    <div class="col-sm-pull-1 col-sm-3" id="ph-container"></div>
    <div class="col-sm-3" id="do-container"></div>
    <div class="col-sm-3" id="water-temperature-container"></div>
</div>