Center a column using Twitter Bootstrap 3

Question

How do I center a div of one column size within the container  12 columns  in Twitter Bootstrap  3   x000D   x000D   centered     background-color  red    x000D   lt  -- Latest compiled and minified CSS -- gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt    lt body class  container  gt     lt div class  col-lg-1 col-offset-6 centered  gt       lt img data-src  holder js 100x100  alt      gt     lt  div gt   lt  body gt  x000D   x000D   x000D   I want a div  with a class  centered to be centered within the container  I may use a row if there are multiple divs  but for now I just want a div with the size of one column centered within the container  12 columns   I am also not sure the above approach is good enough as the intention is not to offset the div by half  I do not need free spaces outside the div and the contents of the div shrink in proportion  I want to empty space outside the div to be evenly distributed  shrink till the container width is equal to one column

User · Answer

To be more precise Bootstrap s grid system contains 12 columns and to center any content let   s say  for instance  the content takes up one column  One will need to occupy two columns of Bootstrap s grid and place the content on half of the two occupied columns    lt div class  row  gt      lt div class  col-xs-2 col-xs-offset-5 centered  gt            your content   data will come here         lt  div gt   lt  div gt     col-xs-offset-5  is telling the grid system where to start placing the content    col-xs-2  is telling the grid system how many of the left over columns should the content occupy    centered  will be a defined class that will center the content   Here is how this example looks like in Bootstrap s grid system   Columns   1   2   3   4   5   6   7   8   9   10   11   12         offset           data          not used

User · Answer

Use mx-auto in your div class using Bootstrap 4    lt div class  container  gt     lt div class  row  gt       lt div class  mx-auto  gt        You content here      lt  div gt     lt  div gt   lt  div gt

User · Answer

Bootstrap 4 solution    lt div class  container  gt     lt div class  row  gt       lt div class  col align-self-center  gt        Column in the middle  variable width      lt  div gt     lt  div gt   lt  div gt

User · Answer

lt div class  container-fluid  gt       lt div class  row  gt           lt div class  col-lg-4 col-lg-offset-4  gt               lt img src  some jpg  gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

For those looking to center the column elements on the screen when you don t have the exact number to fill your grid  I have written a little piece of JavaScript to return the class names   function colCalculator totalNumberOfElements  elementsPerRow  screenSize        var arrayFill   function  size  content            return Array apply null  Array size   map String prototype valueOf  content               var elementSize   parseInt 12   elementsPerRow  10       var normalClassName    col-    screenSize    -    elementSize      var numberOfFittingElements   parseInt totalNumberOfElements   elementsPerRow  10    elementsPerRow      var numberOfRemainingElements   totalNumberOfElements - numberOfFittingElements      var ret   arrayFill numberOfFittingElements  normalClassName       var remainingSize   12 - numberOfRemainingElements   elementSize      var remainingLeftSize   parseInt remainingSize   2  10       return ret concat arrayFill numberOfRemainingElements  normalClassName     col-    screenSize    -push-    remainingLeftSize        If you have 5 elements and you want to have 3 per row on a md screen  you do this   colCalculator 5  3   md    gt  gt    col-md-4    col-md-4    col-md-4    col-md-4 col-md-push-2    col-md-4 col-md-push-2     Keep in mind  the second argument must be dividable by 12

User · Answer

Another approach of offsetting is to have two empty rows  for example    lt div class  col-md-4  gt  lt  div gt   lt div class  col-md-4  gt Centered Content lt  div gt   lt div class  col-md-4  gt  lt  div gt

User · Answer

Simply add the following to your custom CSS file  Editing Bootstrap CSS files directly is not recommended and cancels your ability to use a CDN    center-block       float  none  important     Why   Bootstrap CSS  version 3 7 and lower  uses margin  0 auto   but it gets overridden by the float property of the size container   PS   After you add this class  don t forget to set classes by the right order    lt div class  col-md-6 center-block  gt Example lt  div gt

User · Answer

With Bootstrap v4  this can be accomplished just by adding  justify-content-center to the  row  lt div gt    lt div class  row justify-content-center  gt       lt div class  col-1  gt centered 1 column lt  div gt   lt  div gt    https   getbootstrap com docs 4 0 utilities flex  justify-content

User · Answer

You can use text-center for the row and can make sure the internal divs have display inline-block  with not float    As    lt div class  container  gt       lt div class  row text-center  style  background-color   black   gt           lt div class  redBlock  gt A red block lt  div gt           lt div class  whiteBlock  gt A white block lt  div gt           lt div class  yellowBlock  gt A yellow block lt  div gt       lt  div gt   lt  div gt    And CSS    redBlock       width  100px      height  100px      background-color  aqua      display  inline-block    whiteBlock       width  100px      height  100px      background-color  white      display  inline-block    yellowBlock       width  100px      height  100px      background-color  yellow      display  inline-block     The fiddle  http   jsfiddle net DTcHh 3177

User · Answer

Don t forget to add  important  Then you can be sure that element really will be in the center    col-centered    float  none  important    margin  0 auto  important

User · Answer

We can achieve this by using the table layout mechanism  The mechanism is   Wrap all columns in one div  Make that div as a table with a fixed layout  Make each column as a table cell  Use vertical-align property to control content position   The sample demo is here

User · Answer

With bootstrap 4 you can simply try justify-content-md-center as it is mentioned here   lt div class  container  gt       lt div class  row justify-content-md-center  gt           lt div class  col col-lg-2  gt                1 of 3          lt  div gt           lt div class  col-md-auto  gt              Variable width content          lt  div gt           lt div class  col col-lg-2  gt                3 of 3          lt  div gt       lt  div gt       lt div class  row  gt           lt div class  col  gt               1 of 3          lt  div gt           lt div class  col-md-auto  gt                  Variable width content          lt  div gt           lt div class  col col-lg-2  gt                3 of 3          lt  div gt       lt  div gt   lt  div gt

User · Answer

Just set your one column that displays content to col-xs-12  mobile-first  -  and configure the container only to control how wide you want your centred content to be  so    x000D   x000D   container   x000D    background-color  blue  x000D    x000D   centered   x000D      background-color  red  x000D    x000D   lt body class  container col-xs-offset-3 col-xs-6  gt  x000D       lt div class  col-xs-12 centered  gt  x000D           lt img data-src  holder js 100x100  alt      gt  x000D       lt  div gt  x000D   lt  body gt  x000D   x000D   x000D     x000D   x000D   lt body class  container col-xs-offset-1 col-xs-10  gt  x000D       lt div class  col-xs-12 centered  gt  x000D           lt img data-src  holder js 100x100  alt      gt  x000D       lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    For a demo  see http   codepen io Kebten pen gpRNMe  -

User · Answer

You can use the very flexible solution flexbox to your Bootstrap   justify-content  center    can center your column   Check out flex

User · Answer

This is not my code  but it works perfectly  tested on Bootstrap 3  and I don t have to mess around with col-offset     Demo    x000D   x000D     centered columns styles    x000D   x000D   col-centered   x000D    display  inline-block  x000D    float  none  x000D       inline-block space fix    x000D    margin-right  -4px  x000D    background-color   ccc  x000D    border  1px solid  ddd  x000D    x000D   lt div class  container  gt  x000D     lt div class  row text-center  gt  x000D       lt div class  col-xs-6 col-centered  gt Column 6 lt  div gt  x000D       lt div class  col-xs-6 col-centered  gt Column 6 lt  div gt  x000D       lt div class  col-xs-3 col-centered  gt Column 3 lt  div gt  x000D       lt div class  col-xs-3 col-centered  gt Column 3 lt  div gt  x000D       lt div class  col-xs-3 col-centered  gt Column 3 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

As koala dev used in his approach 1  I would prefer the offset method instead of center-block or margins which has limited usage  but as he mentioned      Now  there s an obvious drawback for this method  it only works for even column sizes  so only  col-X-2   col-X-4  col-X-6  col-X-8 and col-X-10 are supported    This can be solved using the following approach for odd columns    lt div class  col-xs-offset-5 col-xs-2  gt       lt div class  col-xs-offset-3  gt             Your content here      lt  div gt   lt  div gt

User · Answer

This works  A hackish way probably  but it works nicely  It was tested for responsive  Y     centered       background-color  teal      text-align  center

User · Answer

Bootstrap version 3 has a  text-center class   Just add this class   text-center   It will simply load this style    text-center       text-align  center      Example    lt div class  container-fluid  gt     lt div class  row text-center  gt        lt div class  col-md-12  gt            Bootstrap 4 is coming            lt  div gt     lt  div gt   lt  div gt

User · Answer

To center the col- we need to use the below code  cols are floater elements besides margin auto  We will also set it to float none    lt body class  container  gt       lt div class  col-lg-1 col-md-4 centered  gt           lt img data-src  holder js 100x100  alt      gt       lt  div gt   lt  body gt    To center the above col-lg-1 with class of centered  we will write    centered       float  none      margin-left  auto      margin-right  auto      To center the content inside the div  use text-align center    centered       text-align  center      If you want to center it only on the desktop and larger screen  not on mobile  then use the following media query    media  min-width  768px         centered           float  none          margin-left  auto          margin-right  auto            And to center the div only on mobile version  use the below code    media  max-width  768px         centered           float  none          margin-left  auto          margin-right  auto

User · Answer

I suggest simply to use the class text-center    lt body class  container  gt       lt div class  col-md-12 text-center  gt           lt img data-src  holder js 100x100  alt      gt       lt  div gt   lt  body gt

User · Answer

Append the following snippet inside your  row or your  col  This is for Bootstrap 4    d-flex justify-content-center

User · Answer

My approach to center columns is to use display  inline-block for columns and text-align  center for the container parent   You just have to add the CSS class  centered  to the row   HTML    lt div class  container-fluid  gt     lt div class  row centered  gt       lt div class  col-sm-4 col-md-4  gt          Col 1      lt  div gt       lt div class  col-sm-4 col-md-4  gt          Col 2      lt  div gt       lt div class  col-sm-4 col-md-4  gt          Col 3      lt  div gt     lt  div gt   lt  div gt    CSS    centered      text-align  center     font-size  0     centered  gt  div      float  none     display  inline-block     text-align  left     font-size  13px      JSFiddle  http   jsfiddle net steyffi ug4fzcjd

User · Answer

This is probably not the best answer  but there is one more creative solution to this  As pointed out by koala dev the column offsetting works only for even column sizes  However  by nesting rows you can achieve centering uneven columns as well     To stick with the original question where you want to center a column of 1 inside a grid of 12     Center a column of 2 by offsetting it 5 Make a nested row  so you get a new 12 columns inside your 2 columns  Since you want to center a column of 1  and 1 is  half  of 2  what we centered in step 1   you now need to center a column of 6 in your nested row  which is easily done by offsetting it 3     For example    lt div class  container  gt     lt div class  row  gt       lt div class  col-md-offset-5 col-md-2  gt         lt div class  row  gt           lt div class  col-md-offset-3 col-md-6  gt            centered column with that has an  original width  of 1 col          lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    See this fiddle  please note that you have to increase the size of the output window in order too see the result  otherwise the columns will wrap

User · Answer

Try this code    lt body class  container  gt       lt div class  col-lg-1 col-lg-offset-10  gt           lt img data-src  holder js 100x100  alt      gt       lt  div gt   lt  body gt    Here I have used col-lg-1  and the offset should be 10 for properly centered the div on large devices  If you need it to center on medium-to-large devices then just change the lg to md and so on

User · Answer

Try this   lt div class  row  gt       lt div class  col-xs-2 col-xs-offset-5  gt  lt  div gt   lt  div gt    You can use other col as well like col-md-2  etc

User · Answer

The preferred method of centering columns is to use  quot offsets quot   ie  col-md-offset-3  Bootstrap 3 x centering examples For centering elements  there is a center-block helper class  You can also use text-center to center text  and inline elements   Responsive Demo  http   bootply com 91632 EDIT - As mentioned in the comments  center-block works on column contents and display block elements  but won t work on the column itself  col-  divs  because Bootstrap uses float   Update 2020 Now with Bootstrap 4  the centering methods have changed    text-center is still used for display inline elements mx-auto replaces center-block to center display block elements offset-  or mx-auto can be used to center grid columns  mx-auto  auto x-axis margins  will center display block or display flex elements that have a defined width      vw  px  etc     Flexbox is used by default on grid columns  so there are also various flexbox centering methods  Demo Bootstrap 4 Horizontal Centering For vertical centering in BS4 see https   stackoverflow com a 41464397 171456

User · Answer

Because I never have the need to center only a single  col- within a  row  I set the following class on the wrapping  row of my target columns    col-center  gt   class   col-         float  none      margin-left  auto      margin-right  auto      Example   lt div class  full-container  gt       lt div class  row col-center  gt           lt div class  col-xs-11  gt              Foo          lt  div gt           lt div class  col-xs-11  gt              Bar          lt  div gt       lt  div gt   lt  div gt

User · Answer

Note if you are using Bootstrap 4  you can use  align-items-center in your row as Boostrap 4 now uses the flex system

User · Answer

If you put this on your row  all of the columns inside will be centered    row-centered       display  flex      justify-content  space-between

User · Answer

There are two approaches to centering a column  lt div gt  in Bootstrap 3   Approach 1  offsets    The first approach uses Bootstrap s own offset classes so it requires no change in markup and no extra CSS  The key is to set an offset equal to half of the remaining size of the row  So for example  a column of size 2 would be centered by adding an offset of 5  that s  12-2  2   In markup this would look like    lt div class  row  gt       lt div class  col-md-2 col-md-offset-5  gt  lt  div gt   lt  div gt    Now  there s an obvious drawback for this method  It only works for even column sizes  so only  col-X-2   col-X-4  col-X-6  col-X-8  and col-X-10 are supported     Approach 2  the old margin auto   You can center any column size by using the proven margin  0 auto  technique  You just need to take care of the floating that is added by Bootstrap s grid system  I recommend defining a custom CSS class like the following    col-centered      float  none      margin  0 auto      Now you can add it to any column size at any screen size  and it will work seamlessly with Bootstrap s responsive layout    lt div class  row  gt       lt div class  col-lg-1 col-centered  gt  lt  div gt   lt  div gt    Note  With both techniques you could skip the  row element and have the column centered inside a  container  but you would notice a minimal difference in the actual column size because of the padding in the container class     Update   Since v3 0 1 Bootstrap has a built-in class named center-block that uses margin  0 auto  but is missing float none  you can add that to your CSS to make it work with the grid system

User · Answer

Now Bootstrap 3 1 1 is working with  center-block  and this helper class works with the column system   Bootstrap 3 Helper Class Center   Please check this jsfiddle DEMO    lt div class  container  gt       lt div class  row  gt           lt div class  center-block  gt row center-block lt  div gt       lt  div gt       lt div class  row  gt           lt div class  col-md-6 brd  gt               lt div class  center-block  gt 1 center-block lt  div gt           lt  div gt           lt div class  col-md-6 brd  gt               lt div class  center-block  gt 2 center-block lt  div gt           lt  div gt       lt  div gt   lt  div gt   lt div class  row  gt       lt div class  col-xs-2 col-center-block  gt row col-xs-2 col-center-block lt  div gt   lt  div gt      Row column center using col-center-block helper class    col-center-block       float  none      display  block      margin  0 auto         margin-left  auto  margin-right  auto

User · Answer

Bootstrap 3 now has a built-in class for this  center-block   center-block     display  block    margin-left  auto    margin-right  auto      If you are still using 2 X then just add this to your CSS

User · Answer

lt div class  quot container quot  gt       lt div class  quot row row-centered quot  gt           lt div class  quot col-xs-6 col-centered quot  gt Column 6 lt  div gt           lt div class  quot col-xs-6 col-centered quot  gt Column 6 lt  div gt           lt div class  quot col-xs-3 col-centered quot  gt Column 3 lt  div gt           lt div class  quot col-xs-3 col-centered quot  gt Column 3 lt  div gt           lt div class  quot col-xs-3 col-centered quot  gt Column 3 lt  div gt       lt  div gt   lt  div gt   CSS    centered columns styles     row-centered       text-align center     col-centered       display inline-block      float none         reset the text-align        text-align left         inline-block space fix        margin-right -4px      text-align  center      background-color   ccc      border  1px solid  ddd

User · Answer

To center more than one column in a Bootstrap row - and the number of cols are odd  simply add this css class to all the columns in that row    many-cols-centered       To horizontally center bootstrap odd cols  eg col-lg-9  col-md-3  works well in lg   display inline-block    float none      So in your HTML you have something like    lt div class  row text-center  gt   lt  -- text-center centers all text in that row -- gt       lt div class  col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered  gt           lt img src  assets image1 jpg  gt           lt h3 gt You See lt  h3 gt           lt p gt I love coding  lt  p gt       lt  div gt       lt div class  col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered  gt           lt img src  assets image2 jpg  gt           lt h3 gt You See lt  h3 gt           lt p gt I love coding  lt  p gt       lt  div gt       lt div class  col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered  gt           lt img src  assets image3 jpg  gt           lt h3 gt You See lt  h3 gt           lt p gt I love coding  lt  p gt       lt  div gt   lt  div gt

[css] Center a column using Twitter Bootstrap 3

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to centering