How do I center a Bootstrap div with a spanX class

Question

I use bootstrap and am trying to center a div span7  like that    lt div class  row-fluid  gt       lt div id  main  class  span7  gt          Lorem ipsum dolor sit amet      lt  div gt   lt  div gt    my css code is    main      margin 0px auto      But it isn t set at the center  How can i set center   EDIT  span7 is now col-7 in Bootstrap 4 and row-fluid is deprecated Instead of this  use container-fluid and row

User · Accepted Answer

Twitter s bootstrap  span classes are floated to the left so they won t center by usual means  So  if you want it to center your span simply add float none to your  main rule   CSS   main    margin 0 auto   float none

User · Answer

Update  As of BS3 there s a  center-block helper class  From the docs      Classes  center-block     display  block    margin-left  auto    margin-right  auto        Usage as mixins  element      center-block        There is hidden complexity in this seemingly simple problem  All the answers given have some issues    1  Create a Custom Class  Major Gotcha   Create  col-centred class  but there is a major gotcha    col-centred      float  none  important     margin  0 auto      lt  -- Bootstrap 3 -- gt   lt div class  col-lg-6 col-centred  gt    Centred content   lt  div gt   lt  -- Bootstrap 2 -- gt   lt div class  span-6 col-centred  gt    Centred content   lt  div gt    The Gotcha  Bootstrap requires columns add up to 12  If they do not they will overlap  which is a problem   In this case the centred column will overlap the column above it  Visually the page may look the same  but mouse events will not work on the column being overlapped  you can t hover or click links  for example   This is because mouse events are registering on the centred column that s overlapping the elements you try to click   The Fixes  You can resolve this issue by using a clearfix element  Using z-index to bring the centred column to the bottom will not work because it will be overlapped itself  and consequently mouse events will work on it    lt div class  row  gt     lt div class  col-lg-12  gt      I get overlapped by  col-lg-7 centered  unless there s a clearfix     lt  div gt     lt div class  clearfix  gt  lt  div gt     lt div class  col-lg-7 centred  gt     lt  div gt   lt  div gt    Or you can isolate the centred column in its own row    lt div class  row  gt     lt div class  col-lg-12  gt     lt  div gt   lt  div gt   lt div class  row  gt     lt div class  col-lg-7 centred  gt      Look I am in my own row     lt  div gt   lt  div gt    2  Use col-lg-offset-x or spanx-offset  Major Gotcha    lt  -- Bootstrap 3 -- gt   lt div class  col-lg-6 col-lg-offset-3  gt    Centred content   lt  div gt   lt  -- Bootstrap 2 -- gt   lt div class  span-6 span-offset-3  gt    Centred content   lt  div gt    The first problem is that your centred column must be an even number because the offset value must divide evenly by 2 for the layout to be centered  left right    Secondly  as some have commented  using offsets is a bad idea  This is because when the browser resizes the offset will turn into blank space  pushing the actual content down the page   3  Create an Inner Centred Column  This is the best solution in my opinion  No hacking required and you don t mess around with the grid  which could cause unintended consequences  as per solutions 1 and 2    col-centred      margin  0 auto      lt div class  row  gt     lt div class  col-lg-12  gt       lt div class  centred  gt          Look I am in my own row       lt  div gt     lt  div gt   lt  div gt

User · Answer

Incidentally  if your span class is even-numbered  e g  span8  you can add an offset class to center it      for span8 that would be offset2  assuming the default 12-column grid   for span6 it would be offset3 and so on  basically  half the number of remaining columns if you subtract the span-number from the total number of columns in the grid    UPDATE Bootstrap 3 renamed a lot of classes so all the span classes should be col-md-  and the offset classes should be col-md-offset-   assuming you re using the medium-sized responsive grid   I created a quick demo here  hope it helps  http   codepen io anon pen BEyHd

User · Answer

If anyone wants the true solution for centering BOTH images and text within a span using bootstrap row-fluid  here it is  how to implement this and explanation follows my example    css  div row-fluid  class   span    center-in-span       float  none      margin  0 auto      text-align  center      display  block      width  auto      height  auto      html   lt div class  row-fluid  gt      lt div class  span12  gt         lt img class  center-in-span  alt  MyExample  src   path to example jpg   gt      lt  div gt   lt  div gt    lt div class  row-fluid  gt      lt div class  span12  gt         lt p class  center-in-span  gt this is text lt  p gt      lt  div gt   lt  div gt    USAGE  To use this css to center an image within a span  simply apply the  center-in-span class to the img element  as shown above   To use this css to center text within a span  simply apply the  center-in-span class to the p element  as shown above   EXPLANATION  This css works because we are overriding specific bootstrap styling  The notable differences from the other answers that were posted are that the width and height are set to auto  so you don t have to used a fixed with  good for a dynamic webpage   also  the combination of setting the margin to auto  text-align center and display block  takes care of both images and paragraphs    Let me know if this is thorough enough for easy implementation

User · Answer

Define the width as 960px  or whatever you prefer  and you re good to go    main    margin  0 auto  important   float  none  important   text-align  center   width  960px       I couldn t figure this out until I fixed the width  nothing else worked

[css] How do I center a Bootstrap div with a 'spanX' class?

Examples related to css

Examples related to twitter-bootstrap