CODEWITHSUNDEEP
csstwitter-bootstrap
SASHI
SASHI

Reputation: 199

New Bootstrap layout not center

I am creating a design for my site using a recently downloaded bootstrap

I tried with row and span12 layout the container div is not centering to my screen. I'm using 58cm LED Monitor(its not looking centered).

The DIV width is showing 1170px(Firebug) its suppose to be 940px.

Please Check my design here http://rentbbsr.com/projects/daycare/

It suppose to be like this http://rentbbsr.com/projects/daycare/daycare.jpeg

I just want the header to be fixed and centered.

Upvotes: 0

Views: 660

Answers (1)

David Storey
David Storey

Reputation: 30414

There are a bunch of reasons. You have negative left margin on the row:

@media (min-width: 1200px)
    .row {
        margin-left: -30px;
    }
}
.row {
    margin-left: -20px;
}

Then you have another margin on the span:

@media (min-width: 1200px)
    [class*="span"] {
         float: left;
         min-height: 1px;
         margin-left: 30px;
}

class*="span"] {
       float: left;
       min-height: 1px;
       margin-left: 20px;
}

Then your container that you centered is wider than the contents. As it is wider, it centres that element, but it has a empty area. If you set it to the width of whatever you want to center, such as the tree graphic or the menu below, it will actually be centred.

In this case i set it to the width of the top graphic:

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 988px;
}

Remember to also set it in the media query.

So in summary, your wrapper elements are wider than the contents, and you have various margins all over the place, which adjust the width even more. If you remove those and set the correct width it will center as expected.

Upvotes: 1

Related Questions