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/
Related
I am trying to lay 4 elements in a row with a custom horizontal gutter, I tried to put each element in a col with the class of col-md-2 for a certain screen size, and modify the margin-right of each element to my need.. but it didn't look very good, when applying the col-md-3 obviously there is no room for adding a margin to each element, surprisingly when I tried applying col-md-2.5 class, it worked on big screens, however, when I want to have the element span to 10 cols in the smaller screens, it does, but when i go back to the bigger screen, it behaves like the small screen again, Here is my HTML code and i will leave a screenshot down below to illustrate the behavior that I want.
[class^="col"]:not(:last-child){
margin-right: 60px;
}
<div class="container">
<div class="row">
<div class="col col-md-2.5">1</div>
<div class="col col-md-2.5">2</div>
<div class="col col-md-2.5">3</div>
<div class="col col-md-2.5">4</div>
</div>
</div>
<!--I know it may look weird but this above HTML along with the CSS
achieved my goal on the big screens -->
<!-- things get messy again when i do the following to adjust the
view of elements on smaller screens -->
<div class="container">
<div class="row">
<div class="col-10 offset-1 col-md-2.5">1</div>
<div class="col-10 offset-1 col-md-2.5">2</div>
<div class="col-10 offset-1 col-md-2.5">3</div>
<div class="col-10 offset-1 col-md-2.5">4</div>
</div>
</div>
<!-- it works fine in small screen, but when I back to big
screens with this set up, it doesn't give me the initial
behavior and spans every element to columns !!
Here is the screenshot of the desired behavior
thanks in advance!
I don't quite get your problem. Have you just tried simply applying paddings to the left and right of your 4 columns using {property}{sides}-{breakpoint}-{size} notation?
https://getbootstrap.com/docs/4.1/utilities/spacing/#notation
That way you don't have to use offset on your columns. Instead, you can just use col.
For example, if you only want big left and right paddings on large scrren, you can apply px-lg-5 on col class.
<div class="container">
<div class="row">
<div class="col px-lg-5">
...
</div>
<div class="col px-lg-5">
...
</div>
<div class="col px-lg-5">
...
</div>
<div class="col px-lg-5">
...
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/aq9Laaew/241204/
You're missing your target screen:
<div class="container">
<div class="row">
<div class="col-10 offset-1 col-md-2.5">1</div>
<div class="col-10 offset-1 col-md-2.5">2</div>
<div class="col-10 offset-1 col-md-2.5">3</div>
<div class="col-10 offset-1 col-md-2.5">4</div>
</div>
</div>
Add whichever size you want: xs, sm, md, lg to the col and the offset like this:
<div class="container">
<div class="row">
<div class="col-10 col-sm-offset-1 col-md-2.5">1</div>
<div class="col-10 col-sm-offset-1 col-md-2.5">2</div>
<div class="col-10 col-sm-offset-1 col-md-2.5">3</div>
<div class="col-10 col-sm-offset-1 col-md-2.5">4</div>
</div>
</div>
Here's a reference:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
EDIT: It looks like you may have to specify which screen you're targeting when using the offset class. But, you're correct about not needing the other option.
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 want a Bootstrap column to resize buttons nicely when the screen type changes. But the buttons end up with no space between them and and two separate lines (on the small screen).
How do I get them to resize into smaller buttons, and not split onto a new line?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example!</div>
<div class="panel-body">
<div class="form-group">
<div class="col-xs-3 col-xs-offset-4">
Add Item
</div>
<div class="col-xs-3">
Remove Item
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you want the same styling for small devices as well as large devices, you can omit the md styling and just use sm. If the width get's really small, you can remove the offset and use that gained width on the elements instead on xs widths.
To fix the buttons being cut off, remove the btn-block class.
Demo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-3 col-xs-6">
Add Item
</div>
<div class="col-sm-3 col-xs-6">
Remove Item
</div>
</div>
As a side note, if you want the buttons to be centered here, use offset 3 instead of 4.
If i am clear then try my updated code.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-3 col-xs-6 text-center">
Add Item
</div>
<div class="col-sm-3 col-xs-6 text-center">
Remove Item
</div>
</div>
You could use col-xs-3 instead of col-md-3 and col-xs-offset-4 instead of col-md-offset-4
Remember that bootstrap grid row is of 12 column, so what ever offset or column you are using it should add up to 12 and to target small screen devices such as mobile use col-xs-*. Everything else is fine.
<div class="form-group">
<div class="col-xs-3 col-xs-offset-6">
Add Item
</div>
<div class="col-xs-3">
Remove Item
</div>
</div>
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 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>