converting bootstrap 3 col to bootstrap 2

I am looking at this example where it can do a dynamic column adjustment, so that when the width of the window is small such that it can't fit 4 columns, it dynamically shows 2 columns instead. How can I do this in bootstrap 2 since that there's no notion of column, and there's only span4, span2, etc (please don't tell me to convert to bootstrap3) ?

Here's the html:

   <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>

Answers


You should use the row-fluid:

<div class="row-fluid">
  <div class="span3">...</div>
  <div class="span3">...</div>
  [...]
  <div class="span3">...</div>
</div>

But you won't be able to use col-lg-3 col-md-4 col-xs-6 since Bootstrap 2.X just support one .span class.

Instead you could just use .spanwithout the number and set the size of the element with css:

HTML:

<div class="row-fluid custom-thumbnails">
  <div class="span thumb">...</div>
  <div class="span thumb">...</div>
  [...]
  <div class="span thumb">...</div>
</div>

CSS:

.custom-thumbnails .thumb {
  @media (max-width: 480px) {
    width: ...px;
  }

  @media (min-width: 768px) and (max-width: 979px) {
    width: ...px;
  }

  [...]

}

For rows :

<div class="row-fluid">

For columns :

<div class="span3">

eg :

<div class="container-fluid">
   <div class="row-fluid">
    <div class="span3"> Image/Content </div>
    <div class="span3"> Image/Content </div>
    <div class="span3"> Image/Content </div>
    <div class="span3"> Image/Content </div>
   <div>
</div>

This is for fluid / responsive layout in bootstrap, the page is split into 12 Spans, Nesting supported.

For more info

http://getbootstrap.com/2.3.2/

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem


Need Your Help

difference between static functions in C++

c++ function static

Can anybody explain difference between static function defined within class and static function declared e.g. in file.hpp and defined in file.cpp (I can only use this static function within this fi...

Change URL using JSP or Javascript

jsp url-rewriting

I'm currently working on a document management system that gets a BLOB from a database and displays the document (usually a pdf, but this shouldn't matter). My code works to open the document, but...