Twitter Bootstrap Help

[ashleybush26]

Hey guys, I’m using the latest version of Twitter Bootstrap for a responsive site and was wondering if anyone here could shine some light on how I would go about changing the 480 view to 2 columns instead of 1 column. I’m working on a portfolio site that has mainly images, and for the mobile view they would like the thumbnails to be viewed in 2 columns like the Pinterest app for android. Also, this is probably a really stupid question – but how can I reorder how things appear in the 480 view? I’d like switch some things around.

I’m really sorry if my ignorance is laughable (as I’m sure it is), I’m slowly learning. (side note for people learning: twitter bootstrap is great for getting acquainted with responsive design!)

This question is probably super vague, and I don’t have the site up anywhere to view it. But here’s the of the CSS 480 view. & if you’re familiar with bootstrap you’ll know how it does the columns & rows –

@media (max-width: 480px) {

.nav-collapse {

-webkit-transform: translate3d(0, 0, 0);

}

.page-header h1 small {

display: block;

line-height: 20px;

}

input[type="checkbox"],

input[type="radio"] {

border: 1px solid #ccc;

}

.form-horizontal .control-group > label {

float: none;

width: auto;

padding-top: 0;

text-align: left;

}

.form-horizontal .controls {

margin-left: 0;

}

.form-horizontal .control-list {

padding-top: 0;

}

.form-horizontal .form-actions {

padding-left: 10px;

padding-right: 10px;

}

.modal {

top: 10px;

left: 10px;

right: 10px;

}

.modal-header .close {

padding: 10px;

margin: -10px;

}

.carousel-caption {

position: static;

}

Not sure if that’s even a good place to start, kind of feeling my way around in the dark. Assuming I have to adjust the floats and widths, etc..

Anyways, super long-winded.. thanks for any help anyone can give me!! :)

[TheDoc]

That little bit of code doesn’t really help me much! Maybe somebody more familiar with the bootstrap will know what they are looking at.

[Mottie]

If you are using the scaffolding, it’s broken up into 12 columns (ref). So in order to show two column blocks, you need to set two divs to span 6 columns each. I know that sounds confusing until you realize that no matter what size the screen is, there will always be 12 defined columns. You just need to figure out how many to span to get the number of visible columns you want.

| 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |

|          Column 1           |          Column 2           | 

and you do this by using the “span#” class:

...


...


 

[Author]

Posts