When I set up my rows and columns like below, the row widths are slightly different. Suggestions?
EDIT: The row widths are not different. The column width does not fill the space. The fiddle has also been update to illustrate the problem.
<div class="container">
<div class="row" style="background: red;">
<div class="col-xs-4" id="logo">
content
</div>
<div class="col-xs-8">
</div>
</div>
<div class="row">
<div class="col-xs-7 col-xs-push-3">
</div>
<div class="col-xs-3 col-xs-pull-7">
</div>
<div class="col-xs-2" style="background: #000">
content
</div>
</div>
link to fiddle: http://jsfiddle.net/PRP89/4/
Related
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-color:pink;">
<p>
test
</p>
</div>
<div class="col-sm-8 col-sm-offset-2" style="background-color:green;">
<div class="col-sm-8" style="background-color:red;">
<p>
red
</p>
</div>
<div class="col-sm-2" style="background-color:blue;">
<p>
blue
</p>
</div>
<div class="col-sm-2" style="background-color:yellow;">
<p>
yellow
</p>
</div>
</div>
</div>
</div>
https://jsfiddle.net/b7f5ob1g/1/
I created this layout, but i dont understand the sizing.
The outer div with the id="wrapper" got a col size from 8, offset from 2 (which means it gets pulled to the right by 2 cols, so there is 2 cols free space on the right.
So in total i have 8 cols for content.
Now with the 3 inner divs in my understanding i tried to size the columns
div1: col size 6
div2: col size 1
div3: col size 1
So it gets summed up to 8. But to then its too small, I have to sum it up to 12.
Like div1:8, div2:2, div3:2.
Do I have to count in such nested divs to 12 cols or can you explain this situation to me please?
In Bootstrap grid system all col-* elements have to be wrapped in a .row element. Inside each .row you have 12 columns, no matter how big/small is the parent column container. That said, your html should look like this:
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-color:pink;">
<p>test</p>
</div>
<div class="col-sm-8 col-sm-offset-2" style="background-color:green;" id="wrapper">
<div class="row">
<div class="col-sm-8" style="background-color:red;">
<p>red</p>
</div>
<div class="col-sm-2" style="background-color:blue;">
<p>blue</p>
</div>
<div class="col-sm-2" style="background-color:yellow;">
<p>yellow</p>
</div>
</div>
</div>
</div>
</div>
Fiddle here
This is my HTML code :
<div class="container">
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/300x600">
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
</div>
</div>
This is the output :
https://jsfiddle.net/bnxxkLzv/
After the right banner that has height of 600 pixels , second row is starting. What i want to achieve is to make second row start below the first on the left to 300x600 banner , by lets say some fixed margin of 15px . How can this be achieved?
Here is an idea how to stack 2 rows side by side
Design the page as columns and it will be easy to stack it side by side just like nested columns
Look at this DEMO
To add margin you can declare a class wherever you deem fit and give property value
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>
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
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>