On my widescreen monitor, my cover page looks like this (which is how I want it to look):
But on my smaller screen laptop, the words and the buttons (which are each in two separate columns) get spread out and my cover page looks like this:
I've tried several things but I can't seem to get them to stick together on smaller screens. Here is the relevant HTML code:
HTML:
<div class="container h-100">
<div class="row d-flex h-100 justify-content-center align-items-center g-0">
<div class="col-sm-6">
<div class="row">
<h1 class="title">transfer your</h1>
</div>
<div class="row">
<h1 class="title">music</h1>
</div>
<div class="row">
<h2 class="subtitle">between Spotify & YouTube</h2>
</div>
</div>
<div class="col-sm-4">
<div class="row mb-3">
<a class="btn" id="sp-to-yt" href="#" role="button">
</a>
</div>
<div class="row">
<a class="btn" id="yt-to-sp" href="#" role="button">
</a>
</div>
</div>
</div>
</div>
It's based on a percentage width. You can use the responsive classes to manage each screen size.
For small screens use <div class="col-sm-6"></div> which will display half-width on small screens. You can use multiple responsive classes like so...
<div class="col-sm-6 col-md-8 col-lg-3 col-xl-4"></div>
The responsive elements can be remembered as sm = small, md = medium, lg = large, etc, and will control each breakpoints div widths. Remember the max number of columns by default is 12.
Also, in your row.. <div class="row d-flex h-100 justify-content-center align-items-center g-0"> you don't need to define the display flex as .row is already a display flex class.
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 have the following div in Bootstrap:
<div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
<div class="d-flex justify-content-between align-items-center">
<div class="h5 mb-0">Text text</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i
class="far fa-heart mr-1"></i>
50</a>
<a href="#" class="action-item"><i class="far fa-eye mr-1"></i>
250</a>
</div>
</div>
</div>
<p class="font-size-1">Text text text text text
</p>
</div>
On medium and small devices I would like that the second div having class="actions" to go on top of the first and aligned left.
I have tried so far to do something like below but it doesn't work. Something I'm missing:
#media only screen and (max-width: 960px) {
.col-xs-12 {
display: flex;
flex-direction: column-reverse;
}
}
Some tips? Thanks
Assuming you're using Bootstrap 4:
Bootstrap is built for mobile-first, so the easiest solution is to layout the code in order from the .sm view, which would be the div you want first as the first one in that entire .row.
Here is the section in Bootstrap 4 covering this: https://getbootstrap.com/docs/4.4/layout/grid/#order-classes
You'll have to add .order-lg-2 to the div you want to show first on sm and md screens (remember, mobile first). You can also use things Bootstrap classes like .justify-content-[sm, md, lg]-[start, center, between, end, around] to set its position. You may also have to add .d-flex to the second div (that's how it all worked for me in a project).
Here is an example of what I've used that worked (these sections were side-by-side on lg+, so your column sizes might need to be adjusted):
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 order-lg-2 justify-content-center justify-content-sm-start"> <!-- shows first on sm/md, 2nd on lg -->
<!-- your code -->
</div>
<div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 order-lg-1 justify-content-center justify-content-md-start"> <!-- shows 2nd on sm/md, 1st on lg -->
<!-- more code -->
</div>
</div>
</div>
Here is a quick CodePen I set up to show you how it works:
Codepen
I'm trying to use Bootstrap, and having an issue that in medium resolution two columns that should be side-by-side, are displaying underneath each other, see screenshot http://dynanetics.com/problem-screenshot.png, the code is at http://dynanetics.com
At higher resolutions (large and xlarge) this works correctly. Why is this happening at medium resolution?
Any help would be appreciated, thanks.
The relevant code is below:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-3 d-block float-left">
<img src="logo-sitesmall.png" class="d-block float-none">
</div>
<div class="col-md-6 d-block float-left text-center">
<h1 class="brandname">Test site name</h1>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
I think your div="col-md-4", after first row div is too small for both the content to be on same line in medium resolution, try to increase it.
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