So I'm trying to make a card which is responsive to most screen sizes but I'm running into an issue. There is some blank space on the right side of the card on a mobile screen size which is not what I want. Is there a way to make this centred on small screens? I'm using Bootstrap 4. Example of my code is like this:
<div class="container">
<div class="mt-5">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-3 col-xl-3 mr-lg-5 mt-4">
<div class="card text-center" style="width: 18rem;">
<div class="embed-responsive embed-responsive-16by9">
<img alt="Card image cap" class="card-img-top embed-responsive-item" src="https://source.unsplash.com/random/800x600" />
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-3 col-xl-3 mr-lg-5 mt-4">
<div class="card text-center" style="width: 18rem;">
<div class="embed-responsive embed-responsive-16by9">
<img alt="Card image cap" class="card-img-top embed-responsive-item" src="https://source.unsplash.com/random/800x600" />
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
Here is the picture of the blank space on right side
Just add .mx-auto to your div.cards
<div class="card text-center mx-auto" style="width: 18rem;">
Related
Currently my prototype Website looks like this, with justify-content-around:
What I would like is, that when there is an uneven amount of cards, that the last card is in line with the others. Is there a way to do it? I know, that it works with justify-space-between, but what about around?
Here's my source code:
<div class="container-fluid">
<div class="container-fluid row justify-content-around cards ml-0">
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
what I added in an extra css file is the following:
.cards::after{
content: '';
flex: auto;
}
So that at least the last item is on the left side and not in the middle!
Thanks in advance!
Change your col-md-5 to col-md-4 . Below I've done for one of your small snippet
<div class="card col-12 col-md-4 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
How to achieve 2 horizontal(row) cards next to each other? This is my code i have so far, when i copy n paste it the cards collide n become a mess.
i need the cards to be side by side like this
<div class="card-body p-0 d-flex justify-content-around flex-wrap">
<div class="col-md-3 ">
<div class="card card-style1">
<div class="card-header s-2">
<h3 class="card-title">Data </h3>
</div>
<div class="card-body d-flex justify-content-center" style="overflow-y: auto; list-style-type:none;">
<table class="data-info-table">
<tr data-toggle="tooltip" data-placement="left" title="Data Name">
<td><i class="fas fa-user "></i></td>
<td><textarea class="form-control asd" id="client" rows="1" type="text" style="resize: none; overflow-y: auto;"></textarea>
</td>
</tr>
</tr>
</div>
</div>
</div>
</div>
Copied directly from Bootstrap Card. I just added a new parent div with class="row" and col-6 for both cards.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row col-12">
<div class="card col-6">
<img class="card-img-top" src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card col-6">
<img class="card-img-top" src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
I have a card-deck where I would like to keep the same adaptive width. The issue is that when "rows of cards" that can handle 3 cards, using 5 cards will left the two remaining cards taking the whole width of the container.
What it should look like (iPad example)
What it look like (iPad example)
Here is the same issue on a widescreen : https://i.imgur.com/zJtXhTl.png
The code (5 cards example)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="w-100 d-none d-lg-block d-xl-none"><!-- wrap every 4 on lg--></div>
<div class="w-100 d-none d-xl-block"><!-- wrap every 4 on xl--></div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
I saw this https://github.com/twbs/bootstrap/issues/19650 and tried using
.card {
width: initial;
}
but no luck.
As explained in the docs, card-deck's aren't yet responsive so it's going to be hard to get the desired layout without a lot of extra CSS. This is because of the way the flexbox children (cards) grow in width.
Use full height cards in the grid instead...
<div class="row">
<div class="col-md-4 col-sm-6 pb-4">
<div class="card h-100">
....
</div>
</div>
<div class="col-md-4 col-sm-6 pb-4">
<div class="card h-100">
....
</div>
</div>
<div class="col-md-4 col-sm-6 pb-4">
<div class="card h-100">
....
</div>
</div>
.... (more columns with cards)
</div>
https://www.codeply.com/go/hs12dUxHnQ
In my simple design I use cards to show some products. However some product titles wrap 2 lines while others wrap only 1 line.
I would like to have the body text vertically aligned (and the price buttons too)..
<div class="container">
<div class="row">
<div class="col-12">
<div class="card-group">
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/4/7/9/9200000037279741.jpg" height="200px" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
€ 279,-
</div>
</div>
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/2/4/2/4/9200000076564242.jpg" height="200px" width="25%" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">MSI Gaming GS Rugzak</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
€ 151,-
</div>
</div>
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/3/2/4/9/9200000088829423.jpg" height="200px" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">DJI Mavic Air Onyx Zwart - Drone</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
€ 753,91
</div>
</div>
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/7/0/9/9200000063589071.jpg" height="200px" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">BenQ TH683 - Full HD Beamer</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
€ 589,-
</div>
</div>
</div>
</div>
</div>
</div>
working code snippet can be found here: https://www.codeply.com/go/zzm764UnFU
edit added code also inline
As #Paulie_D mentioned there's really no simple way to align the items within the cards since those items have different parent cards.
The best you can do is push the buttons and descriptions to the bottom (using mt-auto) so that the buttons align to the bottom...
<div class="card text-center">
<img class="card-img-top mx-auto d-block" style="max-width: 100%;">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5>
<p class="mt-auto">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
€ 279,-
</div>
</div>
https://www.codeply.com/go/vQPUwL7GLY
I am using Bootstrap 4 Beta to set up a series of cards that must look like following layout:
As the second image at the bottom depicts, I am having issues to make the cards in the middle column responsive to the height of the parent container. As you can see, the bootstrap card body of the 2 little cards at the top disappear and the image in the card at the bottom stretch by itself. I don't know what I am doing wrong. I would appreciate any help:
My code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-md-4 flex-column flex-wrap">
<div class="d-inline-flex h-50 ">
<div class="card w-50">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card w-50">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="d-flex flex-column h-50">
<div class="card align-self-stretch">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top img-fluid " src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
Style:
.col-md-4{
max-height: 357px;
}
See jsfiddle in Here