CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Kingisback
Kingisback

Reputation: 155

How to achieve a particular width using col-mds in bootstrap 3.0?

I'm using Bootstrap 3.0 and it provides widths in terms of col-md-value(value-1-12).I have to design a page using it.The total page width is 1000px and its divided into 2 sections of width 280 and 720 respectively.

To achieve 1000px i have changed the max-width of the 'container' to 1000px but to achieve 280px if i use col-md-3 it gives 25% width in terms of pixels 250px ans if i use col-md-4 it give 300 somethng

So my question here is how to achieve these two widths by using col-mds because if we make our own custom style to achieve that then bootstrap will not provide us its responsive nature? The mark looks like this as hown below:

   <div class="container"><---1000px max-width-->
     <div class="col-md-12"> <--100% width--->
        <div class="col-md-value"> 
         </div>
        <div class="col-md-value">
         </div>
      </div>
    </div>

Upvotes: 1

Views: 2701

Answers (2)

MER
MER

Reputation: 1561

There seems to be an inconsistency in what you are being required to do.

First off... why is the requirement 720 & 280 for a total of 1000px if the requirement is also to have a responsive page? Is there any chance you can convince whoever has decided the absolute widths of the two sections that relative widths will work much better for a page/site that is actually responsive?

The Problem

As I understand it the fundamental problem you will have is that bootstrap utilizes a 12 column grid. This means it splits the actual number of pixels into 12 equal sections for determining column width.

If we divide 1000px into 12 (1000/12) sections:

We get: 1000/12=83.333(repeating) ... ...
This means you are working with fractions of pixels.
If you want to have a 720px area then divide 720x83.3 ... you will get roughly 9 (depending on how many decimal places you go out the closer to 9 you will get).
For clarity, that is 9 of the available 12 grid sections.
However because of the way the grid system works in boostrap you can choose exactly 9 (col-md-9) or exactly 8 (col-md-8). You can not choose 8.7... which would get you very close to 720px (again depending on how accurate you get with the decimal places.

Neither of the above will give you 720px... 9 will give you basically 750px (not sure how this is handled in the browsers but I would expect standard rounding to occur).

8 on the other hand would give you, most likely, 667px.

As may be obvious if you do the above with the remaining either 3 or 4 grid sections, you will not get 280px either.

A Possible Solution

If you can convince the necessary persons that 1000px split into 2 sections of 280px & 720px are NOT optimal then your range of options increases considerably.

The easiest option given the change away from the set widths of the sections is to keep the 1000px width and be ok with col-md-9 & col-md-4... which would give you roughly a 750px section & a 333px section (still dealing with fractions of pixels so not sure how the browser will handle this... but I'm sure it will round in some way). If you want to be closer to the original ratio you could increase or decrease the maximum width to say 1080px (because 12 goes evenly into it) or 970px ... I mention 970px because this is the expected width of .col-md as noted here in the bootstrap documentation.
I recommend 1080px for getting the closest to the original ratio. With a width of 1080px if you choose col-mid-8 for the 720px section this section will actually be exactly 720px. With a width of 1080px if you choose col-mid-3 for the 280px section this section will actually be approx 279px.

Still, in the end, if you really need to go with an absolute width of the page and absolute width of the two sections, I suspect you will have to do what was suggested by @Pradip Borde

OR, alternately, just write the CSS yourself.

Upvotes: 0

Pradip Borde
Pradip Borde

Reputation: 2626

you can add your custom css using media queries

e.g 

@media only screen and (min-width:1000px){
.col-md-value{
width: ---;
}

.col-md-value{
width: ---;
}
}

This style will apply to only the screens having more than 1000px display width; and bootstrap will work for other resolutions.use any approximate values for col-md.

Upvotes: 1

Related Questions