Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center align a column in twitter bootstrap [duplicate]

I've started learning Bootstrap. My question is how to center align a column horizontally, bootstrap contains 12 column layout, there is no middle number. To be more clear if it was 11 column layout, the middle number would have been 6 (5 columns left, 1 column middle, 5 columns right)

like image 469
majorhavoc Avatar asked Aug 03 '13 11:08

majorhavoc


People also ask

How do I center align a column in Bootstrap?

Use d-flex justify-content-center on your column div. This will center everything inside that column. If you have text and image inside the column, you need to use d-flex justify-content-center and text-center . <div class="col text-center"> worked for me.

Is it possible to center a column in Bootstrap?

Columns can be centered using offset, auto-margins or justify-content-center (flexbox). There are multiple horizontal centering methods in Bootstrap 4... mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..).

How do I center align an item in Bootstrap?

To align a flex item in the center with Bootstrap 4, use the . align-self-center class.

How do I center something vertically in Bootstrap?

1 — Vertical Center Using Auto Margins One way to vertically center is to use my-auto . This will center the element within it's flexbox container (The Bootstrap 4 . row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.


1 Answers

The question is correctly answered here Center a column using Twitter Bootstrap 3

For odd rows: i.e., col-md-7 or col-large-9 use this

Add col-centered to the column you want centered.

<div class="col-lg-11 col-centered">     

And add this to your stylesheet:

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

For even rows: i.e., col-md-6 or col-large-10 use this

Simply use bootstrap 3's offset col class. i.e.,

<div class="col-lg-10 col-lg-offset-1"> 
like image 154
Lawrence Black Avatar answered Sep 19 '22 13:09

Lawrence Black