CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
adit
adit

Reputation: 33644

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>

Upvotes: 1

Views: 2198

Answers (2)

Andre Zimpel
Andre Zimpel

Reputation: 2343

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;
  }

  [...]

}

Upvotes: 1

Dasith
Dasith

Reputation: 1095

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

Upvotes: 0

Related Questions