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
Related
I have simple section with card with image and title. How can I fix image size inside the card, so it stays the same no matter what is the actual size of the original image?
<section class="page-section bg-primary">
<div class="container mx-auto mt-4">
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-5 mt-5">Card section</h2>
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="~/images/img.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
</div>
</div>
Just put the Width of the image 100% so it will take 100% of its father (card) width or you can also use the max-width exp:
<img style="max-width: 100%;"
Inside the tag
<img src="~/images/img.jpeg" class="card-img-top" alt="..." style="width:100%;">
or with css in a class:
css:
.myimage{
width:100%;
}
<img src="~/images/img.jpeg" class="card-img-top myimage" alt="...">
You can size between 1% - 100% to the parent div/tag.
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;">
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 am trying to create 3 simple image cards with captions in Bootstrap 4, but no matter how I attempt to do it, the image within the card takes up the entire card, covering the caption below it.
The cards should look just like the example as I am using the same code, just putting it in a row. The card text is there, but it is directly beneath the image. How can I get the card to be longer so that the images stay at the top and reveal the text below?
Here's Bootstrap's example card:
And here's what mine look like:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>
</div>
</div>
Looks good to me.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
<div class="card-body">
<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>
</div>
</div>
</div>
</div>
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