I'm using the Bootstrap CSS Grid System for the first time and I have noticed that in Google Chrome when I resize the window (from small to large) the design is responsive and fluid with the Divs keeping their ratio size. In Mozilla Firefox this isn't the case, although the class="container-fluid" Divs will stretch with the resize the Divs within the row class divs keep their small sizes (they don't get any larger, don't stretch). I tried adding .col-sm-* after the .col-xs-* classes but this has no effect / makes no difference (see the comment in the code). Am I making a silly, nubie error? Can anyone answer my issue whilst I go through the Bootstrap Documentation?  
<header>
    <div class="container-fluid header">
        <div class="row">
            <div class="col-xs-2">☰</div>
            <div class="col-xs-8 text-center">
                <img src="../img/some-image.png" alt="Some Image">
                <span class="strapline">Nice Strap line</span>
            </div>
            <div class="col-xs-2 col-sm-2 text-right"> + </div>
        </div>
    </div>
    <div class="container-fluid search">
        <div class="row">
            <div class="col-xs-3"></div>
            <div class="col-xs-6 text-center"></div>
            <div class="col-xs-3 text-right"></div>
        </div>
    </div>
    <!--col-sm-* added here... -->
    <div class="container-fluid filter-menu">
        <div class="row">
            <div class="col-xs-4 col-sm-4 filter-buttons">
                Menu Button 1
                <span class="filter-green">12.03.14, 12:30</span>
            </div>
            <div class="col-xs-4 col-sm-4 filter-buttons">
                Menu Filter
                <span class="green-count">1</span>
            </div>
            <div class="col-xs-4 col-sm-4 filter-buttons-last">
                Sort By
                <span class="filter-green">Rating</span>
            </div>
        </div>
    </div>
</header>
Please note that .filter-green, filter-buttons, .filter-menu, .text-center, .text-right, .header and .search are custom CSS classes that I have produced and these don't have any conflict with the Bootstrap Grid
UPDATE **
Please note that I think I may have to use the .row-fluid class and the make columns the same height I added the following overwrite on the following bootstrap class
  // bootstrap overwrite...
  .row {
    display: table;
  }
  [class*="col-"] {
    // float: none;
    display: table-cell;
    vertical-align: top;
  }
I just started using the .row-fluid class instead of .row and I removed my clearfix overwrite which is above. Problem solved!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With