Using bootstrap, with this sample :
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
After passing the breakpoint of 768px your cols will go from a vertical alignment to an horizontal alignment. How can I reverse this effect ? I need my cols to start horizontal then go vertical after the breakpoint.
Just add col-md-12 (breakpoint of 768px or higher will be full width).
Then, add col-4 as well, that will affect from this breakpoint down.
<div class="row">
<div class="col-4 col-md-12"></div>
<div class="col-4 col-md-12"></div>
<div class="col-4 col-md-12"></div>
</div>
You can see more in the Bootstrap documentation how this grid system works.
Related
I'm very new to Bootstrap and have been working through some tutorials. I'm currently trying to rebuild Google's homepage and have run into some difficulty with the responsiveness of the grid system.
I've created a very basic layout of the top bar on Google's homepage and it more or less looks fine as it is fullscreen; however, when I resize the window, the text on the right hand side spills over the width of the window.
<body>
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-1 justify-content-start aboutlink">
About
</div>
<div class="col-1 justify-content-start">
Store
</div>
<div class="col-8">
</div>
<div class="col-1 justify-content-end gmaillink">
Gmail
</div>
<div class="col-1 justify-content-end">
Images
</div>
</div>
</div>
Here's an image of the issue:
The classes "aboutlink" and "gmaillink" are simply aligning the text to the right and the topbar id has a 15px margin and sets the font size.
I've had a read through the responsive breakpoints and grid system documentation, but can't seem to fix this issue. Would be grateful if anyone could share some advice?
Thank you.
What is going wrong?
If we add a border to the columns and allow the word to wrap if it doesn't fit, we can see better what is happening.
Take a look at this example, and you will see that on smaller screens the words are not fitting into the col-1 divs, and because words don't wrap by default it is causing the col to grow bigger than it should be to accommodate the size of the text:
.col-1 {
overflow-wrap: break-word; border: 1px solid lightgray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-1 aboutlink">
About
</div>
<div class="col-1">
Store
</div>
<div class="col-8">
</div>
<div class="col-1 gmaillink">
Gmail
</div>
<div class="col-1">
Images
</div>
</div>
</div>
1. Breakpoints and padding classes
Bootstrap's grid classes to allow you to set the breakpoints for the cols. So for example these classes mean: give the column 6/12 of the space on screens up to the md breakpoint (768px), and 8/12 of the space from 768px and up:
<div class="col-6 col-md-8">
Bootstrap also has spacing classes that can be used to change the padding of the columns. The px-* classes set the padding for the left and right padding. The default is px-3, so we can use px-1 to make the padding smaller and so the same size columns can fit in more content.
Example using col-sm-* and px-*:
.row div {border:1px solid lightgray;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-2 col-sm-1 aboutlink px-1">
About
</div>
<div class="col-2 col-sm-1 px-1">
Store
</div>
<div class="col-4 col-sm-8">
</div>
<div class="col-2 col-sm-1 gmaillink px-1">
Gmail
</div>
<div class="col-2 col-sm-1 px-1">
Images
</div>
</div>
</div>
2. Bootstrap Auto classes
A better option in this case (as you don't need a defined structure) might be to use the col-auto Bootstrap classes that will use only the space needed to fit the content - this can overcome the problem of having to set the cols to a specific proportion of the width, such as 1/12 or 2/12.
In the example below, we set the width of the first 2 and last 2 columns to col-auto so they will resize to fit the text inside them, and then give the middle column the col class to take the rest of the available space:
.col-auto{ border:1px solid lightgray;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-auto aboutlink px-1">
Abouttttt
</div>
<div class="col-auto px-1">
Store
</div>
<div class="col">
</div>
<div class="col-auto gmaillink px-1">
Gmail
</div>
<div class="col-auto px-1">
Images
</div>
</div>
</div>
FYI: the justify-content-* classes are for flexbox layouts & don't work with the grid classes, so I have removed them from the examples.
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.
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.
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.