Victor's Blog

Live as if you were to die tomorrow. Learn as if you were to live forever

NAVIGATION - SEARCH

How to make a div center in Bootstrap3?

There are two ways you can make the div center in Bootstrap3

  1. The first approach uses Bootstrap's own offset classes so it requires no change in your html and no extra CSS. It set an offset equal to half of the remaining size of the row. So for example, a column of size 6 would be centred by adding an offset of 3, that's (12-6)/2.
    So the HTML look like
    <div class="row">
       <div class="col-lg-6 col-lg-offset-3 text-center">center</div>
    </div>
    However this method only works for even column sizes. Also you can't use it for extra small devices(phone) because it does't have offset.
  2. You can center any column size by using the proven margin: 0 auto; technique. This can be used with or without the Bootstrap's grid system.
    With grid:
    CSS:
    .col-centered{
        float: none;
        margin: 0 auto;
    }

    HTML
    <div class="row">
        <div class="col-md-2 col-centered text-center">center</div>
    </div>

    Without grid:
    CSS:
    .centered{
        margin: 0 auto;
    }
    Html:
    <div class="container">
        <div class="centered text-center">
            center
        </div>
    </div>

Hope this helps.

blog comments powered by Disqus