Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap: Centering col-md-5?

I feel like this is a very weird question but I couldn't seem to find a solution online.

If I have a col-md-5, I can't seem to center it. As far as I understood the grid system, if I choose a column size (1-12), in order to control the position of the column I use col-##-offset-#.

So if I have a col-md-4, I would use col-md-offset-4 to push it 4 columns from the left, and then it will be centered. The idea is that, to center a column, there must be the same amount of columns within the grid from the left of it and from the right of it.

Now, what if I have a, let's say, col-md-5? How can I center it? Doing something like col-md-4 will leave 3 from the right. I tried several things but no success.

Thanks in advance.

like image 564
Ethan McKee Avatar asked Oct 27 '15 22:10

Ethan McKee


2 Answers

Bootstrap 4

In Bootstrap 4 this can be done simply with mx-auto for auto left/right margins...

<div class="container">
  <div class="row">
     <div class="col-sm-5 mx-auto">
        Centered
    </div>
  </div>
</div>
like image 158
Zim Avatar answered Oct 16 '22 16:10

Zim


<div class="col-md-10 col-md-offset-1">
    <div class="col-md-6 col-md-offset-3">
    </div>
</div>
like image 29
Ryan Friedman Avatar answered Oct 16 '22 17:10

Ryan Friedman