0

block's width should takes as much space as is left on the screen width on sides. enter image description here

Thank you

user3378283
  • 307
  • 3
  • 11
  • You need to make it more clear in your question what happens with the first and third columns at screen widths too small to show them. What's their minimum width? – isherwood Aug 30 '14 at 22:06
  • possible duplicate of [Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes](http://stackoverflow.com/questions/19231742/bootstrap-3-0-fluid-grid-that-includes-fixed-column-sizes) – isherwood Aug 30 '14 at 22:07

1 Answers1

0

what would you do with does blocks on small screens, where the container gets full width? Why don't you do something like this:

<div class="container-fluid">
  <div class="row">
    <div class='col-md-2'><!-- Block --></div>
    <div class='col-md-8'><!-- Container --></div>
    <div class='col-md-2'><!-- Block --></div>
  </div>
</div>

Or if you want the blocks on the side to be hidden on mobile:

<div class="container-fluid">
  <div class="row">
    <div class='col-md-2 hidden-sm'><!-- Block --></div>
    <div class='col-md-8 col-sm-12'><!-- Container --></div>
    <div class='col-md-2 hidden-sm'><!-- Block --></div>
  </div>
</div>
Pevara
  • 14,242
  • 1
  • 34
  • 47
  • my container takes max-970px and if screen have more space then user should see these blocks. – user3378283 Aug 30 '14 at 21:46
  • Ideally, I should make page with one block - 970px in the middle and if screen have free space - then add two blocks in the left and right of middle block and fill this space. For design important that middle block take 970px and is in the middle. – user3378283 Aug 30 '14 at 21:55
  • 1
    then you'll have to write some custom css, not possible with pure bootstrap I believe – Pevara Aug 30 '14 at 22:01