Two-column layout in Bootstrap (max-width and fixed size columns)

Question

How can I achieve the following two-column layout in Bootstrap?

• Column 1: Width adjusts to available size, between a min and max width
• Column 2: Fixed size width

For example, if I have:

• Column 1 min width: 300px
• Column 1 max width: 800px
• Column 2 width: 400px

In a resolution with a width of 800px available, I would expect both columns to be 400px wide. In a resolution with 2000px available, I would expect the first column to be 800px, the second column to be 400px, and there would be 800px of blank space at the right of the screen.

Answer 1

Hard because bootstrap is usefull for responsive, non static...

Can it be correct with this way : http://bootply.com/98214

html

<div class="row">
  <div id="col1" class="col-xs-6 col-md-5">coco 1</div>
  <div id="col2" class="col-xs-6 col-md-2">coco 2</div>
</div>

css

#col1{
  background:green;
  max-width:800px !important;
}

#col2{
  background:yellow;
  max-width:400px !important;
}

You shouldn't use min-width because in case of extra small device, it won't have a good render