CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Hunter
Hunter

Reputation: 159

Bootstrap: row of size three on the left and on the right?

i have something like the following

<div class=content-fluid>
    <div class=page-header>
        <div class=row>
            <div class="pull-left col-md-3">
                ...
            </div>
            <div class="pull-right col-md-3">
                <div class="row">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

What I'd like is that the right column always maintains its size, rather than going into "small-mode" where each column becomes a full-width row, and that when the window is too small, the right column slides underneath the left column. This is turning out to be pretty complicated to achieve!

Thanks for any help.

Upvotes: 1

Views: 675

Answers (2)

BrainHappy
BrainHappy

Reputation: 432

You will have to implement's bootstrap col-sm-3 and col-xs-3 classes in addition to your col-md-3 class. You can view their grid documentation on the official bootstrap website.

So therefore... <div class="col-xs-3">

You can also utilize them to be at different widths depending on viewport size, per example: <div class="col-md-3 col-sm-4 col-xs-6">

Upvotes: 2

ScaisEdge
ScaisEdge

Reputation: 133380

should be you sue bootstrap grid this way 

<div class=content-fluid>
        <div class=page-header>
            <div class=row>
                <div class="pull-left col-md-3 col-sm-12 col-xs-12">
                    ...
                </div>
                <div class="pull-right col-md-3 col-xs-3 col-sm-3 col-lg-3">
                    <div class="row">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>

use col-3 for all the "size" of the bootstrap grid and 12 for the small size on left

Upvotes: 1

Related Questions