Andrus Andrus - 6 months ago 15
jQuery Question

How to center whole bootstrap 3 page contents horizontally

Bootstrap 3 site pages content needs to centered horizontally if its width is smaller that bowser window width and in small zoom levels.

I tried to center whole page horizontally using

body {
display: inline-block;
margin: 0px auto;
}


But content still appears in left side.

page content is inside bootstrap

<div class="containner-fluid">


element.
I tried to add fixed heightr using

.container-fluid {
width: 1500px;
}


But content appear still in left side.
How to center content horizontally ?

Use mose wheel to decrease zoom level in chrome to minimum.
Content is still left-aligned, not in center of brower window.

Bootstrap3, jquery, jquery-ui, ASP.NET MVC3 are used

Answer

Use .container instead of .container-fluid.

.container-fluid uses the full width.

Bootstrap Containers:

Use .container for a responsive fixed width container.

Use .container-fluid for a full width container, spanning the entire width of your viewport.


EDIT: As mentioned by @SeRu: Remove the body's display: inline-block