Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 220
Debiprasad Avatar asked Feb 27 '13 13:02

Debiprasad


People also ask

How do I center a div horizontally in bootstrap?

Just add the class . text-center to the parent element of the text to center content horizontally.

How do I center a div horizontally in CSS?

To center a div horizontally on a page, simply set the width of the element and the margin property to auto. That way, the div will take up whatever width is specified in the CSS and the browser will ensure the remaining space is split equally between the two margins.

How do I center a div in CSS bootstrap?

To center div both vertically and horizontally use flexbox utilities. See the examples. Add d-flex align-items-center justify-content-center classes to the parent element to center its content vertically and horizontally.

How do you make a div align horizontally?

To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.


2 Answers

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>
like image 161
JayGee Avatar answered Nov 05 '22 08:11

JayGee


Use class pagination-centered inside a div like :

   <div class="row">
    <div class="span12 pagination-centered">
    <p> content</p>
   </div>
</div>
like image 40
Shail Avatar answered Nov 05 '22 08:11

Shail