CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kin
Kin

Reputation: 4596

How to center colls in row in bootstrap?

I need to divide the browser window into two fluid rows so that regardless of size, they are stretched across the screen. In the first row i need to add different columns which should be centered automatically. Basically it looks like this:

enter image description here

The problem is that I can not center cols in first row and rows are not stretch to the browser height. My code looks like this:

<div class="container-fluid">
    <div class="row" style="text-align:center">
        <div class="col-md-3">.col-md-1</div>
        <div class="col-md-3">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
    </div>
</div>

Upvotes: 0

Views: 299

Answers (2)

heinkasner
heinkasner

Reputation: 425

Also take a look at the Alignment Classes on twitter bootstrap documentation (Twitter Bootstrap Documentation). You should be able to apply these to any element tag in html. It worked for me.. Hope this helps..

Upvotes: 0

Joffrey Maheo
Joffrey Maheo

Reputation: 2919

You can use offset to center div 

<div class="container-fluid">
    <div class="row">
        <div class="col-md-offset-3 col-md-3">.col-md-1</div>
        <div class="col-md-3">.col-md-1</div>
    </div>
</div>

And you can change padding for ajust space between blocs.

See on fiddle http://jsfiddle.net/JtzE6/

Upvotes: 1

Related Questions