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.
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>
I have the following piece of code and I am use bootstrap 5:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>
<div class="list-group-item d-flex flex-row">
<div class="flex-column">
<h4>A Test Recipe</h4>
<p>This is simply a test</p>
</div>
<div class="flex-row align-self-center justify-content-end">
<img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
alt="A Test Recipe"
style="max-height: 50px !important">
</div>
</div>
I'm trying to get the image to the end of list-group-item div. I tried using justify-content-end but this has no effect. I also tried align-self-end this also doesn't bring the image to the right side.
And as for the div with the flex-column class I'm trying to vertically center its content. But it's not working either, it should be centered like the image is. I got the image vertically centered by making use of the align-self-center class. However when I apply this class to the div that has flex-column class it doesn't work.
What am I doing wrong?
؟
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
<div class="card m-3 border-0" style="max-width: 250px;">
<div class="row g-0">
<div class="col-5">
<img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
class="img-fluid rounded-5"
alt="A Test Recipe">
</div>
<div class="col-7">
<div class="card-body">
<h5 class="card-title">A Test Recipe </h5>
<p class="card-text">This is simply a test.</p>
</div>
</div>
</div>
</div>
</div>
try this.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>
<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
<div class="card m-3 border-0" style="max-width: 350px;">
<div class="row g-0">
<div class="col-5">
<img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
class="img-fluid rounded-3"
alt="A Test Recipe">
</div>
<div class="col-7">
<div class="card-body">
<h5 class="card-title">A Test Recipe </h5>
<p class="card-text">This is simply a test.</p>
</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>
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>
I have a row consisting of 8 cards.
I want to have all these in single line.
There is a margin of column size 2 on left side and I have set each card of size 1 (so 8 + 2 = 10)
But then, my row is all messed up.
Currently my code for border is
<div class="row">
<div class="col-sm-2">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
<div class="col-lg-1 text-center">
<div class="card border-secondary mb-3" style="width: 10rem;">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
</img>
<div class="card-block">
<div class="card-body"><p class="card-title text-center "><small>{{rec["name"]}}</small></p></div>
</div>
</div>
</div>
</div>
I want the card to have this width (so not card to be small)..It can overflow on the right side of the screen..
How do i do this?
The problem has to do with your inline style of width:10rem. It's going to supersede the width of col-lg-1 when it is greater than that column width. Removing this inline style results in expected behavior.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
<div class="col-4 text-center">
<div class="card border-secondary mb-3" style="">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
<div class="card-block">
<div class="card-body">
<p class="card-title text-center">
<small>{{rec["name"]}}</small>
</p>
</div>
</div>
</div>
</div>
<div class="col-4 text-center">
<div class="card border-secondary mb-3" style="">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
<div class="card-block">
<div class="card-body">
<p class="card-title text-center">
<small>{{rec["name"]}}</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
For the purposes of this example I've changed your column breakpoints to something that works better when you choose 'Run Code Snippet'. I suspect you were applying an inline width because col-lg-1 is too small; that being the case I recommend you consider a larger column breakpoint in lieu of inline styles overriding grid behavior.