Clever Geek Handbook

Twitter bootstrap horizontal middle alignment container

I have a problem with centering a container .

<div class="row centered-form center-block">
    <div class="container col-md-10">
        <ul class="nav nav-tabs" id="projectTabs">
            <li role="presentation" class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
            <li role="presentation"><a href="#Tab2" data-toggle="tab">Tab2</a></li>
        </ul>
    </div>
</div>

The main line is centered at about 65% width, but the container containing the navigation tabs is on the left of that main line .

Thanks in advance.

+3


source to share


1 answer


Use class col-md-offset-1

to move the container to the center. Bootstrap uses a 12 column layout system, so col-md-10

it makes your container

10 columns wide, but starts from the left. Use offset to move the item to the right by the specified amount, so it col-md-offset-1

moves it 1 column to the right.



<div class="row centered-form center-block">
    <div class="container col-md-10 col-md-offset-1">
        ...
    </div>
</div>
+13


source






More articles:


All Articles