CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3rowsmultiple-columns
mzrnsh
mzrnsh

Reputation: 2360

Increase number of nested columns on lower resolution with bootstrap 3

I am building a website using Bootstrap v3.3.1

I have the following design for one of the sections (please view the image). I am going to use .col-lg-4 and .col-lg-8 for the two columns. When the viewport is small enough for the columns to span on full-width, I would like the left column content (those eight 'rows' with colored icons) to be displayed in 3 columns, then in 2 and only on very low resolutions in one column.

However, right now I can not think of a simple solution how to increase number of columns when on smaller resolution. First I tried to have left column content in nested rows, which makes no sense as I can not display them in one row.

I read bootstrap official documentation and also tried to search online, but I was not able to find what I want. I believe this is a really easy task for bootstrap and it should be possible in a natural, painless way. Maybe there is some special word or term for this technique which I do not know and that's why I was not able to find the solution.

I just need an idea to approach this right. Thanks

enter image description here

UPDATE:

I just made a quick edit to the picture to make it clearer what this section should look like on a smaller resolution:

enter image description here

Upvotes: 1

Views: 1211

Answers (3)

indubitablee
indubitablee

Reputation: 8206

So if I understood the question correctly, you want to dynamically change the number of columns of just the left column contents based on the screen resolution as follows:

large: col-lg-4 on the left (only 33% of the view)

medium: 3 columns of content from the left side(spanning the whole view)

small: 2 columns of content from the left side(spanning the whole view)

really small: 1 column of content from the left side(spanning the whole view)

If the above is correct, I believe you should use the nesting capabilities of bootstrap shown below:

<div class="row">
    <div class="col-lg-4">
        <div class="row">
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
        </div>
    </div>
    <div class="col-lg-8">
        RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT 
    </div>
</div>

and heres the fiddle demo : http://jsfiddle.net/swm53ran/4/ To view the dynamic changing of the columns, drag the result column to change it's width to simulate resolution change. Hope this helps!

Upvotes: 3

BReal14
BReal14

Reputation: 1584

You can stack the classes by size order:

eg

<div class ="col-lg-4 col-md-3 col-sm-2">LEFT</div>
<div class ="col-lg-8 col-md-9 col-sm-10">RIGHT</div>

I would probably skip large and use:

<div class ="col-md-4 col-sm-3 col-xs-2">LEFT</div>
<div class ="col-md-8 col-sm-9 col-xs-10">RIGHT</div>

Upvotes: 0

hungerstar
hungerstar

Reputation: 21695

To get varied column groupings at various screen sizes you can apply multiple classes for your columns.

See Bootstrap mobile and desktop example.

<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6"></div>

With the above css classes the DIV will adjust itself to 12, 10, 8 or 6 columns depending on the viewport size.

Upvotes: 0

Related Questions