center a row using Bootstrap 3

Question

How to center a row  12 column  in Bootstrap 3   I do not want to use the offset  I am using this way but not worked    x000D   x000D       col-centered  x000D          float  none  x000D          margin  0 auto  x000D        x000D       lt div class  row  style  max-width  300px   gt  x000D           lt div class  col-md-12 col-xs-12 col-centered  gt  x000D               lt div class  input-group  gt  x000D                   lt div class  input-group-btn  gt  x000D                       lt button id  ItemForSearch  type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  gt  x000D                          All Items  x000D                                       lt span class  caret  gt  lt  span gt  x000D                       lt  button gt  x000D                       lt ul id  NormalSearch  class  dropdown-menu customize-dropdown-menu  gt  x000D                           lt li gt  lt a href     gt  Test 1  lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt  Test 2  lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt  Test 3  lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt  Test 4  lt  a gt  lt  li gt  x000D                       lt  ul gt  x000D                   lt  div gt  x000D                   lt  --  btn-group -- gt  x000D                   lt input type  text  class  form-control  gt  x000D                   lt span class  input-group-btn  gt  x000D                       lt button class  btn btn-default  type  button  gt  x000D                           lt i class  fa fa-search  gt  lt  i gt  x000D                       lt  button gt  x000D                   lt  span gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   x000D   x000D    Is there any solution to this  I have not an idea for this work

User · Answer

I know this question was specifically targeted at Bootstrap 3, but in case Bootstrap 4 users stumble upon this question, here is how i centered rows in v4:

<div class="container">
  <div class="row justify-content-center">
  ...

More related to this topic can be found on bootstrap site.

User · Answer

Add this to your css    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      Then  in your HTML code        lt div class   row row-centered  gt           lt div class  col- -   col-centered gt             Your content          lt  div gt       lt  div gt

User · Answer

I use this peace of code and I have successeful   lt div class  row  center-block  gt   lt div style  margin  0 auto width  90    gt        lt div class  col-md-12  style  top 10px   gt       lt  div gt       lt div class  col-md-12  style  top 10px   gt       lt  div gt    lt  div gt

User · Answer

Why not using the grid system   The bootstrap grid system consist of 12 columns  so if you use the  Medium  columns it will have a 970px width size     Then you can divide it to 3 columns  12 3 4  so use 3 divs with  col-md-4  class    lt div class  col-md-4  gt  lt  div gt   lt div class  col-md-4  gt  lt  div gt   lt div class  col-md-4  gt  lt  div gt    Each one will have 323px max width size  Keep the first and the last empty and use the middle one to get your content centerd    lt div class  col-md-4  gt  lt  div gt   lt div class  col-md-4  gt      lt p gt Centered content  lt  p gt   lt  div gt   lt div class  col-md-4  gt  lt  div gt

User · Answer

I use text-align-center in a row like this    lt div class  row tac  gt       lt h1 gt Centered content lt  h1 gt   lt  div gt    lt style gt    tac   text-align  center   lt  style gt

User · Answer

Instead of trying to center div s  just add this to your local css    col-md-offset-15       margin-left  12 4999999      which is roughly  offset-1 and half of offset-1   8 333    4 166     12 4999    This worked for me

User · Answer

you can use grid system without adding empty columns   lt div class  col-xs-2 center-block  style  float none  gt       lt  div gt    change col-xs-2 to suit your layout   check preview  http   jsfiddle net rashivkp h4869dja

User · Answer

We can also use col-md-offset like this  it would save us from an extra divs code  So instead of three divs we can do by using only one div    lt div class  col-md-4 col-md-offset-4  gt Centered content lt  div gt

User · Answer

Instead of   lt div class  col-md-4  gt  lt  div gt   lt div class  col-md-4  gt  lt  div gt   lt div class  col-md-4  gt  lt  div gt    You could just use   lt div class  col-md-4 col-md-offset-4  gt  lt  div gt    As long as you don t want anything in columns 1  amp  3 this is a more elegant solution  The offset  adds  4 columns in front  leaving you with 4  spare  after   PS I realise that the initial question specifies no offsets but at least one previous answer uses a CSS hack that is unnecessary if you use offsets  So for completeness  sake I think this is valid

User · Answer

this peace of code can help you   lt div class  row  style  display  flex  justify-content  center   gt  lt  div gt

User · Answer

What you are doing is not working  because you apply the margin  auto to the full-width column   Wrap it in a div and center that one  E g    lt div class  i-am-centered  gt     lt div class  row  gt     lt  div gt   lt  div gt        i-am-centered   margin  auto  max-width  300px     http   www bootply com 93751  Its a cleaner solution anyway  as it is more expressive and as you usually don t want to mess with the grid

User · Answer

Try this  it works    lt div class  row  gt       lt div class  center  gt           lt div class  col-xs-12 col-sm-4  gt               lt p gt hi 1  lt  div gt           lt  div gt           lt div class  col-xs-12 col-sm-4  gt               lt p gt hi 2  lt  div gt           lt  div gt           lt div class  col-xs-12 col-sm-4  gt               lt p gt hi 3  lt  div gt           lt  div gt       lt  div gt   lt  div gt    Then  in css define the width of center div and center in a document    center       margin  0 auto      width  80

User · Answer

Simply use text-center class    lt div class  row  gt        lt div class  col-md-12  gt             lt h3 class  text-center  gt Here Comes your Text lt  h3 gt        lt  div gt    lt  div gt

[css] center a row using Bootstrap 3

Examples related to css

Examples related to twitter-bootstrap