I am trying to divide a col-md-4 again in to a col-md-6 and col-md-6 and its not working what i was expecting was to get the two col-md-6s in the the same line .but i am getting the second col-md-6 beneath the first col-md-6.
Here is my HTML
<div class="col-md-1" style="background-color:lavender;">.col-md-2
<div class="col-md-10" style="background-color:red;">
red
</div>
<div class="col-md-1" style="background-color:green;">
green
</div>
</div>
Here is the fiddle illustrating the issue.Please update what has gone wrong or if this should be attained in some other way.
For the bootstrap grid system to work properly, the format should be row > col + col. In your code, you don't have any elements with a row class.
Bootstrap also has predefined classes for extra-small devices, small-devices, large-devices and you should use them appropriately depending upon what you want.
Read more about Bootstrap grid system here to understand it better.
Hence, this should work :
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row" style="background-color:lavender;">
<div class="col-md-6 col-sm-6 col-lg-6 col-xs-6" style="background-color:red;">
red
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-xs-6" style="background-color:green;">
green
</div>
</div>
</div>
Take note of col-md-6, col-sm-6 etc. They all define how these divs will look on different devices. Check out this example demo on the official Bootstrap site. For quick reference in the future, I am leaving this screenshot here (which explains these classes) :
Here is your updated Fiddle
you need to put a div class="row" inside the div class="col-md-1"
<div class="col-md-1" style="background-color:lavender;">.col-md-2
<div class="row">
<div class="col-md-10" style="background-color:red;">
red
</div>
<div class="col-md-1" style="background-color:green;">
green
</div>
</div>
</div>
If I'm not wrong then do you want this ? Click to see
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-md-2">
<div class="col-md-10" style="background-color:red; float:right">
red
</div>
<div class="col-md-1" style="background-color:green; float:right">
green
</div>
</div>
</div>
You need to use the .row class, try this:
<div class="col-md-1" style="background-color:lavender;">.col-md-2
<div class="row">
<div class="col-md-10" style="background-color:red;">
red
</div>
<div class="col-md-1" style="background-color:green;">
green
</div>
</div> </div>
Have a look at this link for more information
Related
I want to have 2 divs besides each other for col-md and higher, while having them above each other for col-sm and lower. So I tried to use the push and pull feature as mentioned in the docs but somehow it's not working. What I'm trying to do is get the RIGHT div above the LEFT div on col-sm and lower, basically reversing the order.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-sm-12 col-sm-push-12 col-md-7">LEFT</div>
<div class="col-sm-12 col-sm-pull-12 col-md-5">RIGHT</div>
</div>
</div>
Here's a fiddle: https://jsfiddle.net/ko7euh77/1/
You just need to think "mobile-first"..
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-push-7 col-md-5">RIGHT</div>
<div class="col-sm-12 col-md-pull-5 col-md-7">LEFT</div>
</div>
</div>
Demo: http://www.codeply.com/go/2SN4r7KGwV
Bootstrap 4 Update
The push pull class are now order-* (using flexbox) in Bootstrap 4.
https://www.codeply.com/go/l3BOOH6JM9
<div class="row">
<div class="col-md-5 order-md-2">
<div class="card card-body">RIGHT</div>
</div>
<div class="col-md-7 order-md-1">
<div class="card card-body">LEFT</div>
</div>
</div>
It totally depends on the version you are using, for bootstrap 4 and above you can push and pull like this:
one more thing here order doesn't mean to the grid of the scree it will be the no.
<div class="row">
<div class="col-sm-2 order-md-2 order-sm-1" >
<div >RIGHT</div>
</div>
<div class="col-sm-10 order-md-1 order-sm-2 ">
<div >LEFT</div>
</div>
</div>
Here are the bootstrap docs for further reading
I have been using html/css for a while now. And I have never ran into this kind of grid problem with Bootstrap 3. I am trying to find a way to combine a 50% width (inside a <div class="container-fluid">) with a 50% width div (inside a <div class="container">). Like the grid in the following picture:
Example of the template
Yellow overlay: <div class="container"></div>
The problem is that they won't work together cause of the widths.
So how do I simulate this?
<section>
<div class="container-fluid">
<div class="col-sm-12 col-md-6 no-padding"></div>
<div class="container">
<p>content</p>
</div>
</div>
<div class="col-sm-12 col-md-6 no-padding photo"></div>
</div>
</section>
If I'm understanding what you're trying to achieve, there are a couple of problems. Firstly, you still need a row div to wrap the columns, which is in turn nested in the container. Also, by default, the container would have some padding, so that would need to be removed with some basic CSS as well.
Here is the HTML structure
<div class="container-fluid">
<div class="row">
<div class="col-lg-6" id="left">
Left Side
</div>
<div class="col-lg-6" id="right">
Right Side
</div>
</div>
</div>
Also, here's a live example you can play with: http://www.bootply.com/MKe7aJwKuc
Let me know if I missed the mark on what you're trying to do and I can try to rework it and help you out.
Should be this schema
<section>
<div class="container-fluid">
<div class="col-sm-12 col-md-6 no-padding"></div>
<div class="col-sm-12 col-md-6 no-padding photo"></div>
<div class="container">
<div class= "row">
<div class="col-sm-12 col-md-6 no-padding">Content</div>
<div class="col-sm-12 col-md-6 no-padding photo"></div>
</div>
</div>
</div>
</section>
on Bootstrap 4
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="elem left">Left Side</div>
</div>
<div class="col-lg-6">
<div class="elem right">Right Side</div>
</div>
</div>
</div>
sass
#mixin fluidwidth($widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
width: calc(100% + ((100vw - #{$container-max-width})/2) );
}
}
}
.elem.right{#include fluidwidth;}
I have such code:
<div class="row inner">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1>image is here...</h1>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h2>Add</h2>
<div class="row">
<h3>text1</h3>
<p><span>BlaBlaBla1</span></p>
</div>
<div class="row">
<h3>text2</h3>
<p><span>BlaBlaBla2</span></p>
</div>
</div>
</div>
and so it looks like on mobile:
link
but i need that my second column appears on the top on mobile (not on the bottom)...
can i achieve it somehow without changing html code?
plunker: https://plnkr.co/edit/BKPhHxbZO0VQnubblh7f?p=preview
If using bootstrap why not just add push and pull classes? If you do not want to modify the markup you could do this javascript also. Why would you not want to modify the markup?
<div class="row inner">
<div class="col-md-6 col-md-push-6">
<h2>Add</h2>
<div class="row">
<h3>text1</h3>
<p><span>BlaBlaBla1</span></p>
</div>
<div class="row">
<h3>text2</h3>
<p><span>BlaBlaBla2</span></p>
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<h1>image is here...</h1>
</div>
</div>
edit
Also, If you want to right align something in bootstrap for a particular media query add it to the stylesheet. So on mobile it would be text-align: right and on your next media to reset it you can add text-align: left
I'm looking for the optimal method of centering a group of responsive bootstrap columns inside a row.
<li class="row hazRow">
//center this to the middle of the row
<div class="col-xs-3">
<img class="icon" href="#" title="icon" src="img/table/icon.svg">
</div>
<div class="col-xs-4">
<p>Title</p>
</div>
//end center
</li>
I was thinking of using just blank col either side, but feels like a waste and would not be able to center odd column(s) widths like 7.
I also tried wrapping the columns in a div with class of .center-block and .text-center, but this did not change the positions.
Should I abandon responsive bootstrap grids for this?
How can I center these columns?
You can accomplish this by borrowing slightly from Foundation
As others have suggested the first step is to nest your columns in an 'outer' column:
<div class="row">
<div class="col-xs-7 centered">
<div class="row hazRow">
<div class="col-xs-5">
icon.svg
</div>
<div class="col-xs-7">
<p>Title</p>
</div>
</div>
</div>
</div>
(Notice the outer column has your desired width of 7 and the inners now add up to 12)
Then add css to stop the outer column from floating and center it:
.centered {
float:none;
margin:0 auto;
}
jsfiddle example
This is where we use nested row and col classes...
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
</div>
For odd columns: (if you need 9 colums)
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-4 col-md-offset-1"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
This will give you an approx 9 column width.
Try this...
<div class="col-xs-6 text-right">
<img class="icon" href="#" title="icon" src="img/table/icon.svg">
</div>
<div class="col-xs-6 text-left">
<p>Title</p>
</div>
What I am trying to do is to have two columns of 3 nested pink squares each, at the large and med settings, then on small screen tablet a single column with 3 pink squares then another single column with 3 pink squares under that. Then at the xs mobile level I'm trying to again have two columns but with 1 column of nested pink squares in each. I thought this is what my css is requesting, but that's not what is happening :( What am I doing wrong here?
Here's a plunker
Here's the html:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle</h4>
<div ng-repeat="x in things">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle 2</h4>
<div ng-repeat="x in things2">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
It seems like you're confused by the number at the end of the class.
While nesting .col-xs-6 inside another .col-xs-6, you will get a column which takes only 50% of the width.
It's a primary principle of 12 column grid. Divide 100% / 12 = 8.33333333333% and you will get width property of a single column in percents, please have in mind that the width in percents is calculated according to the parent width.
Bootstrap's grid is not informative while nesting.
Eg. think of .col-xs-6 as width: 50%;, .col-xs-4 is width: 33.33333%;
halfzebra is right. If you you nest columns you always have new 12 columns inside another one.
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
This will fill col-md-6
</div>
</div>
</div>
And like in example above I always like to use rows when Im starting one.
I don't know if I got you right but you could do something like this:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things2">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
</div>
Keep in mind that your red boxes are not always fitting in to the columns. I changed width to 100% so you can see how columns are acting.
Plunker: http://plnkr.co/edit/EE4eWrrGIJ0lFdPBcq7T?p=preview