CODEWITHSUNDEEP
twitter-bootstrap-3
user3748315
user3748315

Reputation: 159

How to get control over Bootstrap 3 fluid width

How can I get better control over how Bootstrap 3 is scaling my col width.

Lets say for example that i create two columns using the following code:

   <div class="xs-col-6"></div>
   <div class="xs-col-6"></div>

When I re-size the window I want the the first column to take up 80% of the space and the right one to use 20% of the space. How can i do this?

This is what I tried:

    <div class="xs-col-6" style="width:80%;"></div>
    <div class="xs-col-6" style="width:20%;"></div>

Upvotes: 1

Views: 43

Answers (1)

Joffrey Maheo
Joffrey Maheo

Reputation: 2919

With bootstrap you can use column, they are 12, so you can have this (9+3 = 12):

<div class="col-xs-9"></div>
<div class="col-xs-3"></div>

also, you can have different behavior depending on the device size with col-sm-*, col-md-* and col-lg-*. Like this : 

<div class="col-xs-12 col-sm-9 col-md-6"></div>
<div class="col-xs-12 col-sm-3 col-md-6"></div>

And if you want overwrite bootstrap css, you can, but maybe you need to add !important to your css property

Upvotes: 1

Related Questions