CODEWITHSUNDEEP
csstwitter-bootstrap
Debiprasad
Debiprasad

Reputation: 6183

Center align a div horizontally using default Twitter Bootstrap CSS

I know how to center align a div horizontally in CSS. You need to make the width to something less than 100% and have auto margin on both left and right sides. I want to do this default styles of Twitter Bootstrap. I don't want to write additional CSS. Wondering whether it's possible to achieve using default style used in Twitter Bootstrap.

To set width of the div, I am using span*. But span* is float: left. Is there any class, which can set the width of the div, but will not add float: left?

Upvotes: 6

Views: 42712

Answers (5)

Zouzias
Zouzias

Reputation: 2360

Based on @JayGee's answer.

<div class="row">
     <div class="col-sm-offset-4 col-md-offset-4 col-lg-offset-4 col-sm-4 col-md-4 col-lg-4">
     ... content here ...
     </div>
</div>

Upvotes: 0

yanychar
yanychar

Reputation: 652

Bootstrap's way to center content seems to be by assigning class="center-block" to it: a link to Bootstrap 3 doc page.

However, it won't work on a heading or a paragraph. class="text-center" seems to work in those cases.

Upvotes: 2

Rockbot
Rockbot

Reputation: 973

If the element you want to align horizontal is an odd span (@JayGee) and you don´t want to write additional CSS (not even inline?) then the answer should be: No, that´s not possible. Otherwise I´d go for @JayGee´s answer.

Upvotes: 0

JayGee
JayGee

Reputation: 342

To horizontally align a div that is using an even span styles (span2, span4, etc...), you need to use offset.

<div class="offset3 span6">
    ...
</div>

Upvotes: 9

Shail
Shail

Reputation: 3649

Use class pagination-centered inside a div like :

   <div class="row">
    <div class="span12 pagination-centered">
    <p> content</p>
   </div>
</div>

Upvotes: 3

Related Questions