Aleksandr Karev Aleksandr Karev - 5 months ago 11
CSS Question

Bootstrap: How to correctly centre a 6 column DIV inside of a fluid container

I am curious to know what is the proper way of centring a DIV (col-lg-6) inside of a fluid container (12 columns) using Bootstrap?

Here is a screenshot of my design mockup, which explains what I am trying to achieve: http://d.pr/i/1iBrP .

So far I've read on Bootstraps website that this sort of thing can be achieved by adding an offset class e.g.:

<div class="container-fluid">
<div class="row">
<h1 class="col-xs-12 col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3">Auto cargo</h1>
</div>
</div>


Is it a correct way of doing it or is there a better (or preferable) way of achieving this task?

Also, what if the width of the DIV would be 7 columns, meaning that the number of columns on the side of the DIV would be different because 12 - 7 = 5 columns and 5 is not an even number?

Thank you very much in advance.

Answer
  1. If you have 7 columns you can't center it with pure Bootstrap, you can do it like this:

.col-center {
  float: none;
  margin: 0 auto;
}

<div class="col-md-7 col-center">
  1. Your code is correct, but you don't need to set col-xs-12 class (it will automaticaly set 12 columns on mobile without that class - div width = 100%.
  2. You set col-md-6 and col-md-offset-3 for medium screen sizes, it means that it will be the same on large(lg) screens, if you want to reset it on large screen you have to do it like this (change column size and reset offset):

<h1 class="col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3 col-lg-12 col-lg-offset-0">Auto cargo</h1>
  1. You shouldn't set this class on h1 element, this is better way:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3"> 
      <h1>Auto cargo</h1>
    </div>
  </div>
</div>
Comments