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.
Related
In my post section of the web site which I am creating I have 4 columns with post in each post with different height based on it's contents . bootstrap 4 grid system. As per photo under
When I resize the 4th column re-arrange.
As u can see on the above image the 4th column is shifted under number 1 but its align base on the height of the 3rd column. I want to be stacked like the photo bellow.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row pt-3 port-folio-margins pb-5 pr-4 pl-4">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
</div>
So the question is how to achieve that CSS formatting with Bootstrap or without bootstrap . I have tried putting "float" using "flex wrap" also "clearfix" without result.
Bootstrap has a built in utility for this problem you can use cards and wrap them in card columns. See the documentation here
This is a tricky issue that is often just worked around. Web-pages are much easier to code in grids, so things tend to be in columns and rows. In your example, when wrapped the row needs to be tall enough to contain your third item. That means that if the fourth item sat where you want it, it would be within the cell of the first item.
You can use something like Masonary, which I believe calculates top and left positions as you resize. Or I think you can use flex and a whole lot of wrapper divs, but that will get messy and be horrible maintenance. It's so messy I've never got it into production, either because I lost my mind trying, or hated the thought of maintaining it when it was working in just a small example.
Masonary allows a fairly simple layout
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
</div>
JSFiddle example
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/
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.
I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>
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>