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:
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.
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>
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>
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>
Related
I have the following structure
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
Is there a possibility with bootstrap to easily show the following order on small screens?
|box1|
|box3|
|box2|
I could not figure out how to swap rows in this manner. Thank you
Instead of putting the box column in other row. you can have all the box column in same row. You can achieve the column order in bootstrap using col-sm-push-* or col-sm-pull-* utility.
Check demo here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>
I have a problem with Bootstrap columns - there is an empty space between the columns like it's shown in the picture:
My code is straightforward - one div with class row for all columns and each column has class col-xs-2
<div class="row">
<div class="col-xs-2">
.... checkboxes with labels....
</div>
/* col-xs-2 is repeated a few times */
</div>
I've read about clearfix on similar posts here on StackOverflow but I don't know how to apply it in my case. Thanks for any help provided!
Spilt the two columns first and then start a new row like so:
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
Red box content
</div>
</div>
<div class="row">
<div class="col-md-12">
blue box content
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
green box content
</div>
</div>
<div class="row">
<div class="col-md-12">
Other box content
</div>
</div>
</div>
</div>
I'm stack with a pretty simple question, and I was wondering maybe you can help, cause you always do..
So what I have is a very basic bootstrap layout.. say:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">looong-long-text</div>
<div class="col-md-6">long-text</div>
<div class="col-md-6">another long text</div>
<div class="col-md-6">and another long text</div>
</div>
</div>
Please check the image link to see what i need
Is there any simple way to achieve such results with bootstrap? Tnx.
I have two solutions for you:
First (better in my opinion, less code):
<div class="container">
<div class="row">
<div class="col-md-6">
<div>First</div>
<div>Third</div>
</div>
<div class="col-md-6">
<div>Second</div>
<div>Fourth</div>
</div>
</div>
</div>
Second:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div>First</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>Third</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div>First</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>Third</div>
</div>
</div>
</div>
</div>
</div>
CODEPEN
You could try out the new Bootstrap version 4 card column feature.
You can't do this with bootstrap out of the box, but there are other tools to help you do this. Here is one of them:
http://masonry.desandro.com/
Wondering how to achieve a layout like pictured in the attached image. I'm guessing it's a mess of columns and rows but I've tried several different ways and can't seem to get it. Unless I'm approaching this from the wrong direction?
It's do-able with Bootstrap, but the columns must have a defined height..
http://codeply.com/go/5sGEBmNdMv
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
</div>
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
</div>
<div class="col-md-12">
</div>
</div>
</div>
</div>
</div>
I want to create a (more or less Pinterest like) grid layout like in the below below. The two columns have different rows, but do appear side to side. How can I do this using the twitter bootstrap grid framework?
If I'm not mistaken the normal row/col behaviour would give me the layout below.
You should be able to achieve the layout by using two columns which themselves have rows:
<div class="row">
<div class="col-xs-6">
<div class="col-xs-12">1</div>
<div class="col-xs-12">2</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="col-xs-12">5</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">6</div>
<div class="col-xs-6">7</div>
</div>
</div>
<div class="col-xs-12">8</div>
</div>
</div>
http://jsfiddle.net/zz4ug/
Create the illusion of incongruous rows via background color or image:
<div class="container">
<div class="row">
<div class="col-xs-6 red"> </div>
<div class="col-xs-6 orange"> </div>
</div>
<div class="row">
<div class="col-xs-6 red"> </div> <--This will appear to be on row 1
<div class="col-xs-3 blue"> </div>
<div class="col-xs-3 green"> </div>
</div>
</div>
Check out this jsFiddle