transforming bootstrap 3 column into bootstrap 2

Is it possible to achieve dynamic column adjustment in Bootstrap 2 like the example shown here? I want the layout to display 4 columns when the window is wide enough, but switch to 2 columns when the width of the window decreases. Since Bootstrap 2 only uses span classes such as span4 and span2, how can I implement this without converting to Bootstrap 3?

Below is a snippet of the HTML code:

<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>
csstwitter-bootstraptwitter-bootstrap-3

Answer №1

It is recommended to utilize the row-fluid class for creating a responsive grid layout:

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

Due to Bootstrap 2.X limitations, you cannot use classes like col-lg-3 col-md-4 col-xs-6. Only one .span class is supported.

As an alternative, you can use the generic .span class and adjust the element size 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;
  }

  [...]

}

Answer №2

When organizing content in rows, use the following:

<div class="row-fluid">

To structure columns, utilize the code below:

<div class="span3">

Example of implementation:

<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 method is ideal for creating fluid and responsive layouts using Bootstrap's 12-span system with support for nesting.

For further details, visit:

http://getbootstrap.com/2.3.2/

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for integrating bootstrap jquery with dynamically generated HTML in Angular2

Currently, I am in the process of dynamically creating a sidebar that can be collapsed or expanded by simply clicking the menu item. I have tried using <div [innerHtml]="function()"></div> and it works to collapse the submenus as intended. Ho ...

twitter-bootstrapangularangular2-directivesangular-components

Angular causing alignment issues for items not centered

I'm having trouble centering the contents of a div with my code. The properties I am applying don't seem to work. Any idea why this is happening? <div class='center'> <form (ngSubmit)="loginUser()" style="background: steel ...

cssangular

What strategies can I use to ensure that the navigation bar is responsive when viewed on a

Check out my CSS file here for the navigation styling. See the screenshot of my HTML file showcasing the navigation panel here. I'm seeking assistance in making my navigation responsive on all mobile devices, as it is currently not functioning prope ...

htmlcssgithub

Styling a multilevel list with CSS that includes a combination of

Hello everyone! I am looking to create a mixed multilevel list in CSS, similar to the one shown in this image: image description here. I have attempted the following code snippet, but it seems to apply the counter to unordered lists: ol { counter-res ...

htmlcss

What is the best way to ensure the proper formatting of my initial form?

Hello, I am encountering some challenges with formatting my form. As a beginner in web coding, I apologize for what may seem like a simple issue - this is the first form I am attempting to code. My objective is as follows: On screens and tablets: have fo ...

htmlcssflexbox

The height of adjacent divs should be uniform, resize seamlessly, and contain an absolutely positioned element within

Is there a way to make these neighboring divs the same height, responsive to browser window resizing, and with icons positioned on the corners? This method using display:table-cell works in most browsers but fails in Firefox due to a bug that causes the ic ...

htmlcssfirefoxheight

What is preventing the Navbar from aligning to the right side in Bootstrap 5?

I'm trying to position only the "Account" navbar all the way on the right side using ms-auto, but it doesn't seem to be working correctly. Here's my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="u ...

htmltwitter-bootstrapbootstrap-5

Expand Navigation Bar upon Hover

My goal is to recreate a Navigation Bar similar to the one found on this website: I want the Navigation Block to expand and show Menu Items when hovered over, just like the example on the website mentioned above. I've attempted to use Bootstrap and ...

jqueryhtmlcsstwitter-bootstrap

How can you give a custom icon to the 'startIcon' of a MaterialUI button?

Below is the current code I am using: import { Button, Grid, Typography, } from '@material-ui/core'; import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; <Grid item> <Button variant="outlined" ...

cssreactjsmaterial-ui

What is the best way to switch the background color of a dropdown div when hovering over it?

I've been working on getting the color to fill the entire dropdown area based on the text you're hovering over, but it's only filling the space around the word. I've set up a Fiddle to demonstrate the issue I'm facing. I'm ne ...

htmlcsshover

The stylesheet link for "contact.css" is unresponsive

I have been reorganizing my website portfolio by categorizing CSS, images, and other files into different folders. <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/contact.css"> However, I am facing an issue where ...

htmlcss

Convert the HTML content into a PDF while retaining the CSS styles using either JavaScript or Django

Looking to create a PDF of an HTML element with background color and images. Seeking a solution, either client-side or server-side using Django/Python. Tried jsPDF on the client side, but it does not support CSS. Considering ReportLab for Django, but uns ...

javascriptpythoncssdjangopdf-generation

Using PHP to filter data using $_GET variables?

https://i.sstatic.net/vDqe3.png In order to sort the small divs based on specific filters like AB Main Hall, AB Club, Huis 23, I believe using $_GET is necessary. Here is the code snippet I currently have. <?php $concert = [ [ "datum" =& ...

phphtmlcssarraysget

Combine several CSS classes into a single class for easier styling

I have implemented specific styling on my webpage based on the city or state of the user. For instance, if someone is from New Jersey, the background color will be red. Currently, I am achieving this using the following method: Using a combination of HTML ...

phphtmlcss

Webpage unable to scroll

Having trouble with scrolling on my webpage and I can't figure out why! The issue is happening when trying to view this page: Within the main file, I have included 2 other php files: <?php include '../../include/menu.php'; inclu ...

htmlcssscroll

Tips for creating a layout with two responsive columns side by side: one with text and the other with an image, using Bootstrap 4

How can I create two responsive columns in Bootstrap 4, one with text and the other with an image, similar to the layout shown in the image below? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" int ...

htmlcssbootstrap-4

What is the best way to align a <div> element below another without being on the same line?

I'm currently working on developing a snake game. My focus right now is figuring out how to make the body parts of the snake follow the head and be positioned after it. <!--Player--> <div class="snake"></div> So here we have the sn ...

javascriptjqueryhtmlcss

Changing the style.backgroundImage property overrides any image transition effects

I am currently working on creating a button for a player. You can check out the video (here) The button works, but in order to give it a "pressed" effect, I have to change its background-image on click. However, this action seems to override the transitio ...

javascripthtmlcsscss-animationscss-transitions

Just starting out with Boostrap; looking for ways to tidy up this code and achieve the intended effect

UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...

htmlcsstwitter-bootstrap

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

I am experiencing an issue with my dropdown menu. Whenever I click on a "dropdown link", it opens another page on my website, but the menu closes in the process. I want to ensure that the menu stays open and highlights the clicked "dropdown link" in bold. ...

javascriptjqueryhtmlcssajax