CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mike Sav
Mike Sav

Reputation: 15291

Bootstrap columns not responsive / fluid

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">&#9776;</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;
  }

Upvotes: 4

Views: 11810

Answers (1)

Mike Sav
Mike Sav

Reputation: 15291

I just started using the .row-fluid class instead of .row and I removed my clearfix overwrite which is above. Problem solved!

Upvotes: 3

Related Questions