<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
Related
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
This is the starting point:
http://www.bootply.com/r88hL82f3m
<div class="container">
<div class="row">
<div class="col-xs-0 col-md-3">
</div>
<div class="col-xs-12 col-md-9 text-right">
<div id="id1">Div1 Div2</div>
</div>
</div>
</div>
I need Div1 and Div2 to split into two rows only for small screen and extra-small screen, meaning Div1 occupies first row and Div2 occupies second row.
While below bootply may look like a solution, it does not work because I don't want Div1 and Div2 to split up into columns on medium screen upwards - I want them to stay in one column on medium, large and extra-large screen.
http://www.bootply.com/RkxKSdYZ2F
Use visible-* and hidden-* classes to use two different containers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 visible-xs visible-sm">
<div class="id1">Div1</div>
<div class="id2">Div2</div>
</div>
<div class="col-xs-12 hidden-xs hidden-sm">
<div class="id1">Div1 Div2</div>
</div>
</div>
</div>
This isn't very need, but it does the trick
<div class="container">
<div class="row">
<div class="col-xs-0 col-md-3">
</div>
<div class="col-xs-12 col-md-9 text-right">
<div id="id1" class="visible-md visible-lg col-md-12">Div1 Div2</div>
<div id="id1" class="visible-xs visible-sm col-xs-12">Div1</div>
<div id="id1" class="visible-xs visible-sm col-xs-12">Div2</div>
</div>
</div>
</div>
bootply
In Bootstrap, I am using col-md-6 to bring two columns but how to remove the gap in the middle and fill the spaces?
For example in photoshop:
HTML Code:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Note: I just want to apply for this section only, not everything by default.
Assuming that you want to have just the backgrounds touching, then you don't need to do anything. The column gutters (that are represented on your photoshop file by the blue lines) in Bootstrap are produced by padding. So, you can simply do the following to achieve what's in your photoshop file:
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 blue-section">
1
</div>
<div class="col-md-6 red-section">
2
</div>
</div>
</div>
CSS:
.blue-section{background:blue;}
.red-section{background:red;}
This will result in still having padding for your content.
Use the .row with negative margins to remove the gutter (padding) between columns..
<div class="row">
<div class="col-md-6">
<div class="row blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="row red-section">
2
</div>
</div>
</div>
Demo: http://www.bootply.com/TytFvxummt
It's a pretty old question, but just to make it helpful for anyone coming now, Bootstrap now has a g (gutter) class which removes the spaces in between edges of columns.
<div class="row g-0"> // the g-0 will remove all spaces. Ranges from 0-5.
<div class="col-6">
// content
</div>
<div class="col-6">
// content
</div>
</div>
For Bootstrap 5, you can refer to this link as well if needed: https://getbootstrap.com/docs/5.0/layout/gutters/
i think you have to take your structure like this
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">1</div>
</div>
<div class="col-md-6">
<div class="row">2</div>
</div>
</div>
</div>
Using this:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Will achieve that, have you added any padding or margins on the divs? By default there is none on the bootstrap rows/cols. So it must be with the css on .red-section & .blue-section?
I added a background colour to the cols so you can see, http://jsfiddle.net/bnyrL54u/
Hope this helps.
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/
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>