Responsive Layout with Twitter Bootstrap

Question

I am trying to build a responsive layout using bootstrap. I am confused how to code the area below to make sure it works naturally with bootstrap.

According to Twitter Convention i am already using div.row and div.span12. Inside this area i have a box with the border as show below.

There is a box with a border and inside the box i need to have three span of equal width. how do i achieve this using bootstrap.

http://play.mink7.com/h/minkstock/

Answer 1

Equal width divs can be obtained with display: table : CSS side by side div's auto equal widths Then you'll have 3 divs of equal width no matter what.

Bootstrap's spans will end up one above the other when the window width is reduced but that may be better than three tiny divs of equal width on a smartphone.

Also, you could make use of bootstrap's responsive utility classes to design different chart headers as needed.