This code is from w3schools.com examples:
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Example page: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex4
Why all the columns are stacked on each other. It is rendering like this:
8
6
6
4
It should render like this as per my understanding:
--------|----|
8 4
----|----
6 6
This code should work fine. The columns will stack on screen widths less than 992px. If you want the columns to never stack, you would use the col-xs-* classes..
<div class="row">
<div class="col-xs-8">
.col-xs-8
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
http://www.bootply.com/oYL80uQpSY
Col-sm are for small devices, try using col-md-x
You're not opening your browser window to a wide enough size. The render window doesn't match the "sm" media query.
your code works fine, you just have to try it at the correct screen size, you can always add more classes to adjust to screen sizes like this:
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
.col-sm-8
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">.col-sm-6</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">.col-sm-6</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-sm-4</div>
</div>
They are 12-grid systems of bootstrap.
In your code col-sm-8 is 8-grid layout and col-sm-6 is 6 grid layout.
So, you have 8-grid layout and within this 6-grid layout are maintained but since there can only be 8-grid layout but combining 6-grid + 6-grid would be 12-grid layout and which is never gonna occupy within the 8-grid layout and this is why col-md-6 goes below and produces the result what you see.
Related
I have a simple bootstrap grid layout. I do not want the columns to stack vertically even on small devices.
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-4 col-md-4">1</div>
<div class="col-sm-4 col-xs-4 col-md-4">2</div>
<div class="col-sm-4 col-xs-4 col-md-4">3</div>
</div>
The columns are stacking vertically because you're using Bootstrap 4, and the -xs- infix is no longer used. Just use col-4..
<div class="container border-show center-div">
<div class="row">
<div class="col-4 border-show">1</div>
<div class="col-4 border-show">2</div>
<div class="col-4 border-show">3</div>
</div>
</div>
http://www.codeply.com/go/sCct2CzZte
I can't quite make out the question because the HTML you posted does exactly what you want it to do: It never stacks the columns vertically for that row.
Could you clarify what you're trying to ask? See How To Ask for a reference of how to ask good questions.
For example, what would:
<div class="row">
<div class="col-xs-12 col-xs-10">
</div>
</div>
...do? How would that be different from:
<div class="row">
<div class="col-xs-12">
</div>
</div>
That isn't the intended usage. The xs prefix stands for "extra small" screens. You can mix different prefixes to resize columns for different mobile breakpoints.
<div class="row">
<div class="col-xs-12 col-md-10 col-lg-5"></div>
</div>
This means 12 wide on extra small screens, 10 wide on medium screens, 5 wide on large screens.
Reference: http://getbootstrap.com/css/#grid
I am using bootstrap to make a responsive website. I have to column one is <div class="col-md-4 column"> on the LEFT and other is <div class="col-md-8 column"> on the RIGHT.
When I see it on sm or xs, every grid is changing to 12 column which is good.
I want the RIGHT column to appear first then the LEFT column.
This is what I have, which is not working.
<div class="col-md-4 column col-sm-push-12 col-xs-push-12">
<div class="col-md-8 column col-sm-pull-12 col-xs-pull-12">
Have a look here: http://www.bootply.com/qlstG12Aea
<div class="container">
<div class="row">
<div id="r-column" class="col-xs-12 col-sm-12 col-md-push-4 col-md-8">right</div>
<div id="main" class="col-xs-12 col-sm-12 col-md-pull-8 col-md-4">main</div>
</div>
</div>
Do it the other way. Declare for mobile first, xs and sm full width and on md-Devices push an pull it to the right order.
The trick is to change the order of your columns in your html:
<div class="row">
<div class="col-md-4 col-md-push-8">column 2</div>
<div class="col-md-8 col-md-pull-4">column 1</div>
</div>
So, you really will be changing the order in LG and MD and SM and XS will show the real order of your html code.
Example working: http://jsfiddle.net/cj4vqxv5/
I have a two column layout which I would like to switch order on mobile devices.
When I try col-xs-push-12 it doesn't switch the columns, it merely places the first column out of sight.
Here is the code
<div class="row">
<div class="col-sm-6 col-xs-12 col-xs-push-12">
<h2>Title</h2>
</div>
<div class="col-sm-6 col-xs-12">
Content will go here
</div>
</div>
UPDATE: It appears its being push'd on viewports outside xs too.
A work around would be to take a mobile-first approach and do something like this:
<div class="row">
<div class="col-sm-6 col-sm-push-6">
Content will go here
</div>
<div class="col-sm-6 col-sm-pull-6">
<h2>Title</h2>
</div>
</div>
i'm working with bootstrap V3.
i'm trying to use the grid property to make a responsive website
<div class="row">
<div class="col-xs-7 backgroundcolor">7</div>
<div class="col-xs-4 backgroundcolor">4</div>
<div class="col-xs-1 backgroundcolor">1</div>
</div>
but when i view this code on a smartphone the col-xs-1 does not show on the same line as the others.
if i change the lines to this:
<div class="row">
<div class="col-xs-1 backgroundcolor">1</div>
<div class="col-xs-4 backgroundcolor">4</div>
<div class="col-xs-7 backgroundcolor">7</div>
</div>
the col-xs-7 is not show on the same line as the col-xs-1 and col-xs-4.
on a large screen there is no problem.
you find my code also on http://www.bootply.com/87060.
I am not sure, if this is connected to your problem, but try
<div class="container">
in line 2 instead of
class="col-xs-12
This would be the right way to use the Bootstrap-grid.