CODEWITHSUNDEEP
csstwitter-bootstrap
CyberPunkCodes
CyberPunkCodes

Reputation: 3777

Bootstrap - Wrapping Columns Around Larger Column

I know how to do standard columns and such in Bootstrap. However, I have something I haven't encountered yet and I can't seem to Google the answer. Maybe I don't know what to call it, hence why I can't find it.

I have essentially a bunch of boxes, with one large box on the right, and more of the smaller boxes under it. I think I am confused because normally I would have a row, with 4 columns 3 wide, but the larger column needs to take up multiple rows..

Here is a quick example I made in paint:

Bootstrap column wrap larger column

The smaller boxes are kind of like thumbnails for a portfolio, they are all the same size. The larger box is a Twitter news feed, which is a div Twitter provides to place a newsfeed on your site.

I am not sure if I should create two sections (top half and bottom half) or how to approach this. I thought about making the top section 2 columns, then in the 1st have it split into two more (6 and 6). Then do a separate section below it as normal.

However, you can easily add an image into a paragraph and have the text wrap around the image. I am wanting the same thing, only with the Twitter newsfeed and columns..

I can add code once I get an approach if I am still stuck.

I tried to put another set of rows and cols inside my 1st column, but it broke the spacing between the columns which would mean adding CSS to fix the spacing.

Hoping someone has done something like this, or can see by my image, how to approach this.

Upvotes: 2

Views: 3165

Answers (3)

Raja Khoury
Raja Khoury

Reputation: 3195

Can you show your HTML/CSS to see where and why the code broke ? As you approach is correct, I would have done the same. see below

<div class="container">
<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
        </div>
        <div class="col-xs-6"></div>
    </div>
</div>
<div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
</div>
<div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
</div>

enter image description here

Upvotes: 2

borracciaBlu
borracciaBlu

Reputation: 4225

You have just to annidate more rows inside an existing column.

Eg:

    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-3">1</div>
                    <div class="col-lg-3">2</div>
                </div>
                <div class="row">
                    <div class="col-lg-3">3</div>
                    <div class="col-lg-3">4</div>
                </div>
                <div class="row">
                    <div class="col-lg-3">5</div>
                    <div class="col-lg-3">6</div>
                </div>

            </div>
            <div class="col-lg-6">Big content</div>
        </div>
    </div>

Upvotes: 0

Russ Weakley
Russ Weakley

Reputation: 26

Try something like this:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            row1-col1
            <div class="row">
                <div class="col-sm-6">
                    Sub-row1-Sub-col1
                </div>
                <div class="col-sm-6">
                    Sub-row1-Sub-col2
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    Sub-row2-Sub-col1
                </div>
                <div class="col-sm-6">
                    Sub-row2-Sub-col2
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    Sub-row3-Sub-col1
                </div>
                <div class="col-sm-6">
                    Sub-row3-Sub-col2
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            row1-col2
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            row2-col1
        </div>
        <div class="col-sm-3">
            row2-col2
        </div>
        <div class="col-sm-3">
            row2-col3
        </div>
        <div class="col-sm-3">
            row2-col4
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            row3-col1
        </div>
        <div class="col-sm-3">
            row3-col2
        </div>
        <div class="col-sm-3">
            row3-col3
        </div>
        <div class="col-sm-3">
            row3-col4
        </div>
    </div>
</div>

Upvotes: 0

Related Questions