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>
Related
This question already has answers here:
How to align div to bottom inside div with Bootstrap?
(4 answers)
Bootstrap element to bottom with flexbox
(1 answer)
How can I align a flex-row to bottom in a card?
(1 answer)
Closed 18 days ago.
I want to view multiple articles on a page. I used Bootstrap 5 cards to make it look great. Everything worked out fine as I wanted, but the only thing which bothers me is that the read more link is not at the bottom of the card. I tried adding a d-flex, and used align-bottom, but nothing put the text at the bottom
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card p-2">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100">
</div>
<div class="col-7">
<div class="card-body h-100 p-0 m-0">
<span class="card-text mb-1 small">463</span>
<h6 class="card-title custom-text-truncate">How a responsive website can boost user satisfaction</h6>
<div class="d-flex align-items-end">
Read more ->
</div>
</div>
</div>
</div>
</div>
Group the tile and text to one div to let the flex container have only 2 child items and set the flex container flex-column and justify-content-between (it means one item at the top of the container and the other at the very bottom).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
</div>
<div class="col-7">
<div class="d-flex flex-column justify-content-between card-body h-100 p-0 m-0">
<div>
<!-- Grouping title and text by this div -->
<div class="card-text mb-1 small">463</div>
<div>
<h6 class="card-title custom-text-truncate">
How a responsive website can boost user satisfaction
</h6>
</div>
</div>
<div>
Read more ->
</div>
</div>
</div>
</div>
</div>
You can achieve this by setting the .card-body to use a flex layout and change its direction to column and then finally add a margin-top: auto for the read more link. When utilizing Bootstrap's utility classes, the result would be as follow:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card p-2">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
</div>
<div class="col-7">
<!-- Add class names of `d-flex` and `flex-column` -->
<div class="card-body h-100 p-0 m-0 d-flex flex-column">
<span class="card-text mb-1 small">463</span>
<h6 class="card-title custom-text-truncate">
How a responsive website can boost user satisfaction
</h6>
<!-- Add `mt-auto` -->
<div class="d-flex align-items-end mt-auto">
Read more ->
</div>
</div>
</div>
</div>
</div>
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>
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-xs-7 d-flex align-items-center justify-content-center p-0">
<h1>x.</h1>
<div class="col-lg-5">
<ol><p>x.</p></ol>
</div>
</div>
<div class="col-lg-7 col-xs-5 p-0">
<img src="https://i.pinimg.com/originals/96/18/6b/96186b308addc3c4700a26adb3aac278.gif" class="img-fluid " alt="Responsive image">
</div>
</div>
</div>
This picture shows my current view. I'd like both columns to reach the end of the viewport instead of cutting out like it is here.
You can use bootstrap utility classes to achieve this. i.e vh-100 and h-100
Set the container to 100vh and row to 100%.
Note: You'll have to adjust the image to fit the entire viewport.
<div class="container-fluid vh-100">
<div class="row h-100">
<div class="col-lg-5 col-xs-7 d-flex align-items-center justify-content-center p-0">
<h1>x.</h1>
<div class="col-lg-5">
<ol><p>x.</p></ol>
</div>
</div>
<div class="col-lg-7 col-xs-5 p-0">
<img src="https://i.pinimg.com/originals/96/18/6b/96186b308addc3c4700a26adb3aac278.gif" class="img-fluid " alt="Responsive image">
</div>
</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'm trying to make a web that has exactly the screen's height (no scrolling), using Bootstrap 4 and flex containers. So far, the structure was holding up, until I decided to try inserting tall images.
The image scales to fit the width and it exceeds the height of the screen (I dont want this).
I want everything to fit in the screen without scrolling: this means, the image has to fill all the available height, without starving other rows of height (e.g. the footer). I've tried specifying height:100% on all parent containers and on the image as well (using bootstrap's h-100 class), but I've encountered two problems:
the image changes the aspect ratio
the added height of rows inside a column exceeds the total parent height, so the total height ends up being larger than the screen, and some elements go off the screen.
I haven't come up with a way of telling child elements of a column (rows in this case), to have a total height of 100% without manually specifying each row's height. I think that would solve the issue.
The whole structure is basically as follows (I've removed unnecessary elements):
<body id="page-top" class="bg-light">
<div id="page-content-wrapper" class="min-vh-100 p-0 d-flex flex-column overflow-hidden h-100">
<div class="container-fluid d-flex flex-row overflow-auto flex-fill justify-content-center pt-3 pb-3 h-100">
<div class="container flex-column d-flex col-7 mr-3 ml-3 h-100">
<!-- play area -->
<div class="row flex-fill h-100">
<div class="section-div flex-grow-1 flex-column d-flex h-100" id="play-area">
<div class="row flex-grow-1">
<div class="jumbotron jumbotron-fluid d-flex w-100">
<div class="container-fluid d-flex flex-column">
<h1 class="display-4 pb-2">title</h1>
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/9/93/Burj_Khalifa.jpg" style="object-fit:contain">
<hr class="mb-3" />
<p>
some more text
</p>
</div>
</div>
</div>
<div class="row" style="height:100px">
<div class="row mt-auto justify-content-md-center">
<div class="col-md-auto text-center">
<p>some text at bottom</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And a JSfiddle: https://jsfiddle.net/prx4k76t/