I have four Bootstrap 4 cards lined up, but the title for just one of the cards wraps to a second line. How can I code this so that all four card titles are flush bottom?
I tried setting the height of each card to a certain pixel height and then applied vertical-align: bottom, but that's not working.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<div class="container">
<div class="card-group">
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FIRST CARD</h5>
<hr>
<p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">SECOND CARD</h5>
<hr>
<p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
<hr>
<p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FOURTH CARD</h5>
<hr>
<p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
</div>
</div>
</div>
</div>
Here's a Codepen: https://codepen.io/Codewalker/pen/RXxaVM
How can I code this so that all four card titles are flush bottom.
Case 1: If the title of your content is not dynamic.
If you want to make the card flush to bottom. You need to set its height and use flexbox to flush it to bottom.
See the code below.
.card-title-cont{
height: 50px;
display:flex;
justify-content: flex-start;
align-items: flex-end;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-group">
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">FIRST CARD</h5>
</div>
<hr>
<p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">SECOND CARD</h5>
</div>
<hr>
<p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
</div>
<hr>
<p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">FOURTH CARD</h5>
</div>
<hr>
<p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
</div>
</div>
</div>
</div>
Case 2: If the title of your content is dynamic.
I suggest you need to style your title to text-overflow: ellipsis; since the content is dynamic.
.card-title{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-group">
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FIRST CARD</h5>
<hr>
<p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">SECOND CARD</h5>
<hr>
<p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
<hr>
<p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FOURTH CARD</h5>
<hr>
<p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
</div>
</div>
</div>
</div>
Hopes this helps.
I assume the content for your card's title is dynamic so I don't think you can really foresee how much height is enough.
I would just go for "truncating the text with an ellipsis" approach with a title:
<h5 class="card-title text-truncate" title="THIRD CARD WITH MUCH LONGER TITLE">
THIRD CARD WITH MUCH LONGER TITLE
</h5>
<hr>
demo: https://jsfiddle.net/davidliang2008/fdwshkzo/5/
Related
I would like to run this code when the window width is 500 px or more and Run the other code block when the width is 499 px or less . How can I do this
500 px or more :
<div class="card text-center d-inline-block m-2" style="width: 13rem;" >
<img src=".." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" style="font-size: 1rem;">name</h5>
<p class="card-text text-muted" style="font-size: 0.8rem;">100 $</p>
watch
</div>
</div>
499 or less :
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
You'd have to include both of them inside a div each, which would be conditionally rendered according to viewport size.
For the div with <= 499px, you'll need to enclose the whole part in:
<div class="d-md-none">
</div>
And for the div with >=500px, you'll need to enclose the whole part in:
<div class="d-none d-md-block">
</div>
JSFiddle
I want to place the two cards next to each other (horizontally) but currently they are vertically aligned. That is I want to place the Heading 1 card next to Heading 2 card even though I used some margin it shift only in the same place horizontally not vertically.
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 1</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 2</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
You can use Bootstrap’s grid to achieve this:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 d-flex justify-content-center">
<div class="card" style="width: 20rem;>
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 1</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
</div>
<div class="col-sm-6 d-flex justify-content-center">
<div class="card" style="width: 20rem;>
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 2</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
</div>
</div>
</div>
I'm trying to design something very similar to the image shown below using bootstrap
I'm having issues with aligning the .card-img-top images vertically with the space between them. I tried putting both '.card-img-top' images in the same '.col' then applying padding which didn't produce the result I wanted.
I have provided my code enter link description here
Try nesting a bootstrap row within the last column then put some padding between like so:
<div class="col-12 col-md-4">
<div class="row">
<div class="col-12">
<div class="card img-fluid">
<img class="card-img-top" src="https://www.treeservicesmagazine.com/wp-content/uploads/2017/03/safety-ppe-image.jpg" alt="Card image">
<div class="card-img-overlay">
<p class="card-text">Personal <br>Protective Equipment.</p>
SHOP NOW
</div>
</div>
</div>
<div class="col-12" style="padding-top:20px;">
<div class="card img-fluid">
<img class="card-img-top" src="https://www.treeservicesmagazine.com/wp-content/uploads/2017/03/safety-ppe-image.jpg" alt="Card image">
<div class="card-img-overlay">
<p class="card-text">Personal <br>Protective Equipment.</p>
SHOP NOW
</div>
</div>
</div>
</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'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.