How to keep cards in a card-group attached next to each other on a smaller screen?
They are attached on lager screen, but separate on smaller screen. I'm hiding the extra cards on a smaller screen and prefer to use the first ones attached.
With this code the cards separate under 575px.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="card-group">
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card d-none d-md-block">
...
</div>
<div class="card d-none d-lg-block">
...
</div>
<div class="card d-none d-xl-block">
...
</div>
</div>
</div>
How to keep showing the first three cards attached on small screen?
card-group is losing it's display: flex; at 575px by default w/ Bootstrap. What you can do to is set the card-group to have a flex-display all the time either with CSS or inline Bootstrap classes. You can also look into using the grid-system w/ rows However, the parent, card-group will still lose flex at 575.
Just add d-flex as a class on your parent.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="card-group d-flex">
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card d-none d-md-block">
...
</div>
<div class="card d-none d-lg-block">
...
</div>
<div class="card d-none d-xl-block">
...
</div>
</div>
</div>
Related
I'm having a hard time wrangling with 3 images that are in a 1 row spanning / 2 row 2 column layout (please view picture). I can get it to look perfect at one resolution, but viewing it in other breakpoints, the ratio become all wrong because of static padding size.
Code:
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col-5 text-center">
<img class="img-fluid ratio ratio-1x1" src="/assets/mood1-8dc4fbf7f86401c523a66983158d7366ce7b41c40b9b568c9a79f2455ae983f4.png">
</div>
<div class="col-md-5 d-flex flex-column">
<img class="img-fluid d-none d-md-block mb-2 ratio ratio-16x9" src="/assets/mood2-6b77bce1c8930fd5638d4d982b0c01b357dc38d6212588db2ef12ef67dc8f0e4.png">
<img class="img-fluid d-none d-md-block mt-2 ratio ratio-16x9" src="/assets/mood3-1baca87fe953122237237cbe216e5574d0b6b8b0af20b14057c93281f10d426b.png">
</div>
</div>
</div>
</section>
XXL:
Note how the bottom and top of the images in both columns line up perfectly.
Medium:
Note how the bottom no longer lines up. The padding is not being responsive, throwing the ratios off. Any ideas to better approach this?
Adding h-100 to your image may help.
You can also use bootstrap gutters here gx-3, to set your gutters spacing as your needs
Result.
Expand snippet to see result
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section>
<div class="container">
<div class="row justify-content-center gx-3">
<div class="col-5 text-center">
<img class="img-fluid ratio ratio-1x1 h-100" src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="col-md-5 d-flex flex-column">
<img class="img-fluid d-none d-md-block mb-2 ratio ratio-16x9 h-100" src="https://apprendre-la-photo.fr/wp-content/uploads/2018/07/photo-vitesse-obturation-elevee_laurent-breillat-1200x900.jpg">
<img class="img-fluid d-none d-md-block mt-2 ratio ratio-16x9 h-100" src="https://www.designer.io/wp-content/uploads/2019/10/1-1024x698.png">
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
I'm making a responsive layout for a ecommerce productdetailpage. I would like to order the columns different on mobile without getting white spaces. This is what it looks like currently:
The problem is on desktop when for example there is not content for box 3. There will be a huge white gap above box 5. So box 5 has to move under box 2. Like this:
I don't know if this is even possible through using framework Bootstrap 4, if not I'm looking forward to see how you would doing this without. Hopefully someone can help me out.
For the structure i use the following bootstrap grid:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-lg-7">
1
</div>
<div class="col-lg-5">
<div>2</div>
<div>3</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
4
</div>
<div class="col-lg-5">
5
</div>
</div>
It is necessary to know what layout should be applied, e.g. though JavaScript. Then when we will know what layout should be used, we can apply our layout.
So we car create a div and divide this div into two parts. Then using flex-grow property, we can fill the remaining space:
html,body{height:100%;}
.bg-purple {
background: rgb(48,0,50);
}
.bg-gray {
background: rgb(74,74,74);
}
.bg-blue {
background: rgb(50,101,196);
}
.bg-red {
background: rgb(196,50,53);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-6 bg-red">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-purple flex-grow-1">
<div class="text-white">
<div>1</div>
</div>
</div>
<div class="row justify-content-center bg-blue flex-grow-1">
<div class="text-white">4</div>
</div>
</div>
</div>
<div class="col-6 bg-gray">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-info" style="height: 30px;">
<div class="text-white">
<div>Column with fixed height 2</div>
</div>
</div>
<div class="row justify-content-center bg-success flex-grow-1">
<div class="text-white">Fille the remaining space 5</div>
</div>
</div>
</div>
</div>
</div>
An example at jsfiddle can be seen here
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
<div class="col-sm-4" style="background-color:orange;">33.33%</div>
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
</div>
</div>
I use bootstrap4 and I want to have a big card inside it, i want to put in each row 5 others cards like this screen.
This is my code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card w-100 mb-2">
<div class="card-body">
<h5 class="card-title">Available products</h5>
<div class="row" style="display: flex; flex-direction: row;">
<div class="card mr-2 w-25 mb-2">
<div class="card-header">34 products</div>
<div class="mycard-footer">List of products</div>
</div>
<div class="card mr-2 w-25 mb-2">
<div class="card-header">34 products</div>
<div class="mycard-footer">List of products</div>
</div>
<div class="card mr-2 w-25 mb-2">
<div class="card-header">34 products</div>
<div class="mycard-footer">List of products</div>
</div>
</div>
Button
</div>
</div>
but i can't do it, any idea ?
The width utilities of the cards that are inside are relative to the parent. Here is the bootstrap Doc for sizing utilities https://getbootstrap.com/docs/4.0/utilities/sizing/
There is no possible way to fit 5 cards in 1 row. Unless you add your personal styling in CSS and not use the sizing utilities.
I have the following (kind of) code :
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="min-height: 100vh;">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row">
<div id="logo-frame" class="col d-flex justify-content-center align-items-center">
<img src="https://via.placeholder.com/1000x300" class="img-fluid overflow-auto">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
</div>
The image is of loaded dynamically and can be of any size and aspect ratio.
I want the div #logo-frame to :
take up all vertical space available (the container has min-height: 100vh but I'm not sure how to have the div eat it all up with flexbox) and pad the image with whitespace if required
have the image inside centered horizontally and vertically (I think I got it covered with justify-content-center align-items-center)
show a scrollbar if the height becomes too big to show the image (e.g with https://via.placeholder.com/1000x2000) but only on the image, not on the full page (I think the overflow-auto is enough, but not sure...)
How can I achieve this behavior easily with flexbox ?
Thanks
UPDATE
The following code is working.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="height : 100vh">
<div class="row h-100">
<div class="col-8 h-100">
<div class="card h-100">
<div class="card-body d-flex flex-column h-100">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row h-100 overflow-auto">
<div id="logo-frame" class="col d-flex justify-content-center align-items-center">
<img src="https://via.placeholder.com/1000x300" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
</div>
</div>
Can someone help me understand :
if it is possible to not have to cascade down the h-100 ?
why if I put min-height:100vh instead of height:100vh, it does not work ?
why if I don't put d-flex flex-column on the card-body element, it does not work
if there's a better way to make this work ?
Have you considered using the "max-height" css attribute in the parent container in conjunction with an auto scroll on overflow?
Update per your request
<!-- Add Slimscroll library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js" rel="stylesheet" />
Refactored Markup
<div class="container-fluid" style="min-height: 100vh;">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row">
<!-- as indicated in style attribute: Add a class w/these attribs/values -->
<div id="logo-frame" style="max-height: 1000px; overflow: hidden;" class="col d-flex justify-content-center align-items-center">
<!-- you might need to remove the css selector: overflow-auto from the class attrib (Test it) -->
<img src="https://via.placeholder.com/1000x1200" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
Instantiate Slimscroll on load
$(document).ready(function () {
$('#logo-frame').slimScroll({
// According to slimscroll documentation - leave height empty
height: '',
width: '100%',
alwaysVisible: false
});
})
What I try to achieve is to have a 2 divs that take over 6 columns bith with some space between them of 1px.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6 bg-danger text-light text-center"> Hello </div>
</div>
</div>
But for some reason when Ι try to achieveit, the other item goes underneath (wraps) instead being side to side. Do you know how I can make having 6-column with some space between items and still remain side to side?
The gutter (spacing between columns) is created with padding, not margins. When you adjust the margins it throws off the grid. You can use inner DIV's...
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-6 text-light text-center">
<div class="bg-dark mr-1">Hello</div>
</div>
<div class="col-6 text-light text-center">
<div class="bg-danger">Hello</div>
</div>
</div>
</div>
or, force the row no to wrap with flex-nowrap...
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6 bg-danger text-light text-center"> Hello </div>
</div>
</div>
or, simply use the padding utils to adjust the column spacing.
https://codeply.com/go/p4NpmmRxmb
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
</div>