<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3">
<div class="card bg-dark text-white">
<img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Title</h5>
<h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
<div class="align-self-end">Text I want at bottom</div>
</div>
</div>
</div>
I am unable to get the text in the last div by applying this class align-self-end to the bottom of the image. I understand that flex has been applied to the .card-img-overlay div with the direction of column then why am I unable to get the div to the bottom of the image?
The card-img-overlay div isn't display:flex.
You can do this by adding the d-flex flex-column classes to it, and use mt-auto to push the text to the bottom.
https://www.codeply.com/go/SRdCTDDoRr
<div class="card bg-dark text-white">
<img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title">Title</h5>
<h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
<div class="mt-auto">Text I want at bottom</div>
</div>
</div>
Related
I have an issue with Bootstrap 5. I'm trying to round my .card-img-top with the class rounded, but the class doesn't work at all. Anyone know why?
Here is my code:
<div class="container w-100">
<div class="row">
<div class="col-md-3 mx-auto my-5">
<div class="card bg-secondary text-line">
<div class="card-body rounded">
<img src="./images/image-equilibrium.jpg" alt="Image Equilibrum" class="card-img-top rounded p-2">
</div>
</div>
</div>
</div>
</div>
Is there are any solution to make different size images be the same height on a card? Problem is that content is coming from cms, and I do not know what the image size will be and how much text will be in the card.
<div class="card">
<div class="card-body h-100">
<div class="row d-flex h-100 mx-0">
<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link will be" class="img-fluid"
alt="image">
</div>
<div class="d-flex flex-column col-12 flex-grow-1 px-0">
<div class="mb-auto">Will be content...</div>
<a href="link" class="btn card-btn btn-outline-secondary"
role="button">Button</a>
</div>
</div>
</div>
Here is how it looks now:
example here
images could be higher or lower. Can't fix them in px. I need that card will stretch, not image making shorter.
Add these in your code "
<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link will be" style="object-fit: contain;"
alt="image">
</div>
I thought what I'm trying to do would be pretty easy to do but I just can't make it work.
I tried to do pull-left on bootstrap cards and panels and it's not working the way I want it to...
Here is a picture of what I'd like to acheive
Example
Heres code that almost works
<div class="card text-center" *ngFor="let event of eventActivities">
<div class="card-header pull-left">
<img src="..." alt="">
Title </div>
<div class="card-block">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
<div class="card-footer text-muted">
FOOTER
</div>
</div>
There are a few different ways you could do this. Here's one way using the flex-row and flex-wrap utility classes to change the layout of elements inside the card...
https://www.codeply.com/go/l1KAQtjjbA
<div class="card flex-row flex-wrap">
<div class="card-header border-0">
<img src="//placehold.it/200" alt="" />
</div>
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
<div class="w-100"></div>
<div class="card-footer w-100 text-muted">
FOOTER
</div>
</div>
Here's another approach using the grid...
<div class="card">
<div class="row no-gutters">
<div class="col-auto">
<img src="//placehold.it/200" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
</div>
</div>
<div class="card-footer w-100 text-muted">
Footer stating cats are CUTE little animals
</div>
</div>
https://www.codeply.com/go/l1KAQtjjbA
I'm not sure why you have text-center as nothing it centered in the desired example image.
HTML:
<div class="card">
<div class="card-horizontal">
<div class="img-square-wrapper">
<img class="" src="http://via.placeholder.com/300x180" alt="Card image cap">
</div>
<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>
</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
CSS:
.card-horizontal {
display: flex;
flex: 1 1 auto;
}
Result:
Keep in mind that the class pull-left is now float-left in Bootstrap version 4.
I am struggling to get the link on the image itself to work. So far I could only manage to get the link on the text overlay at the bottom over the image, but not on the rest of the image. Every time I try something it breaks the layout of the card and the overlay does not work anymore. Any idea?
.bg-semitransparent { background-color: rgba(60,60,60,0.6); }
<div class="card text-white">
<img src="...image" alt="Angel #1" class="img-fluid" style="" />
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
<div class="card-text border-0 bg-semitransparent text-center">
Anchor Text
</div>
</div>
</div>
If you want, you can try like this: thats a simple trick but solve your issue
<div class="card text-white">
<img src="https://dummyimage.com/350x450/" alt="Angel #1" class="img-fluid" style="" />
<a href="...link">
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
<div class="card-text border-0 bg-semitransparent text-center">
Anchor Text
</div>
</div>
</a>
</div>
Solution 1
By changing HTML code structure
.bg-semitransparent { background-color: rgba(60,60,60,0.6); }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<a href="...link"><div class="card text-white">
<img src="https://dummyimage.com/450x450/" alt="Angel #1" class="img-fluid" style="" />
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
<div class="card-text border-0 bg-semitransparent text-center">
Anchor Text
</div>
</div>
</div>
</a>
Solution: 2
With JQuery
$(".card").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
.bg-semitransparent { background-color: rgba(60,60,60,0.6); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card text-white">
<img src="https://dummyimage.com/450x450/" alt="Angel #1" class="img-fluid" style="" />
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
<div class="card-text border-0 bg-semitransparent text-center">
Anchor Text
</div>
</div>
</div>
I'm trying to have a center text over image. I've used mx-auto to Horizontal centering my overlay text and use align-middle for a Vertical alignment. But the vertical alignment didn't work. Does somebody know why ?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card ">
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
<div class="card-img-overlay d-flex">
<div class="mx-auto">
<h4 class="card-title align-middle">Animal Farm</h4>
<h6 class="text align-middle">George Orwell</h6>
<p class="card-text align-middle">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
</div>
</div>
</div>
Just use my-auto for vertical center...
<div class="card">
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
<div class="card-img-overlay d-flex">
<div class="my-auto mx-auto text-center">
<h4 class="card-title">Animal Farm</h4>
<h6 class="text">George Orwell</h6>
<p class="card-text">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
</div>
</div>
</div>
http://codeply.com/go/ZQM4ANFcXC
align-middle will work on display: table or display: inline elements.
Also see this similar question
You don't need .mx-auto. You can just use .justify-content-center, .align-items-center and .flex-column on the parent. https://v4-alpha.getbootstrap.com/utilities/flexbox/
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="card ">
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
<div class="card-img-overlay d-flex justify-content-center align-items-center flex-column">
<h4 class="card-title align-middle">Animal Farm</h4>
<h6 class="text align-middle">George Orwell</h6>
<p class="card-text align-middle">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
</div>
</div>
Try it with this code, here:
<div class="card ">
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
<div class="card-img-overlay d-flex">
<div class="mx-auto" style="margin-top: auto;margin-bottom: auto;">
<h4 class="card-title">Animal Farm</h4>
<h6 class="text">George Orwell</h6>
<p class="card-text">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
</div>
</div>
</div>
Basically just added style="margin-top: auto;margin-bottom: auto;" to the div with mx-auto class.