I'm trying to align Bootstrap 4 cards and using d-flex along with align-self-stretch for the cards themselves. Which is great.
However, I can't figure out how to get the part with the red border to float to the bottom. Any ideas by using Bootstrap 4 utilities only?
<div class="col-sm-12 col-md-6 col-lg-4 d-flex align-self-stretch">
<div class="card shadow-sm mb-4">
<img src="https://placehold.it/500x300" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="align-self-end border border-danger">
<p class="text-uppercase mb-0">Donors: 123</p>
<p class="text-uppercase">Funded: $1,234</p>
View Details
</div>
</div>
</div>
</div>
Thanks to inputforcolor for help with the solution below, which keeps the cards the same height AND pushes the part I was looking for to the bottom.
<div class="col-sm-12 col-md-6 col-lg-4 d-flex align-self-stretch">
<div class="card shadow-sm mb-4">
<img src="https://placehold.it/500x300" class="card-img-top" alt="">
<div class="card-body d-flex flex-column">
<h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-auto border border-danger">
<p class="text-uppercase mb-0">Donors: 123</p>
<p class="text-uppercase">Funded: $1,234</p>
View Details
</div>
</div>
</div>
</div>
Related
I have a card and in it is an image then a header. Then, I want to have a paragraph and link all of the way at the bottom of the card. I defined a min-height in CSS to make room to do so. However, the following code just flows top to bottom with space at the bottom instead of content there.
<div class="col-lg-4">
<div class="card shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
<div class="text-center d-block align-items-end">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
Go somewhere
</div>
</div>
</div>
</div>
Here is what it looks like and I want the lorem ipsum and button to be right up against the bottom with the headline at the top.
Let me suggest an alternative solution; one that would not require additional CSS and instead rely on Bootstrap's existing framework. The .card-footer class is part of the Card component and can integrate very well with your desired results.
To achieve equal heights you could rely either on .card-deck or simply applying the .h100 class to the .card wrapper. Since it's unclear how you might be applying this design to multiple cards the below example relies on .h100:
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
</div>
<div class="card-footer bg-white border-top-0 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
</div>
<div class="card-footer bg-white border-top-0 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
</div>
<div class="card-footer bg-white border-top-0 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
Now by default .card-footer applies a top border as well as a slightly darker background. We can override those styles by applying .bg-white to modify the background color and .border-top-0 to remove the top border. There is no reason to declare it a block element and centering the text is as simple as applying .text-center.
No min-height CSS involved.
For more information on how the Card component can be grouped please review Bootstrap's 4.x documentation on Card layou
You have to make the card-body a flex-column and then align use a Bootstrap utility class to push the elements to the bottom.
Bootstrap Flex Utilities
So we apply .d-flex and .flex-column to the .card-body div and .mt-auto to the div holding your paragraph and button.
.card {
height: 600px;
/* artificial height */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
<div class="text-center d-block mt-auto">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
Use
use card groups so that footer section will align to the bottom.
When I add padding around an image at the top of a card when in dev tools mobile view, the image doesn't keep aspect ratio. When I go back to full size view the aspect ratio is fine.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>
My code
Image of how it looks in dev tool mobile
The thing is if I go to my code pen in dev tools mobile view it seems to be working as it should, but from my file it isn't. This is the reason I'm so confused about it.
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>
Basically, I am having trouble figuring out how to move an image to the right of a card using bootstrap, similar to the function of card-img-top or bottom.
Using the Bootstrap Documentation, this is what I've done.
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">...</h5>
<p class="card-text">....</p>
Go somewhere
<img class="float-right" src="Images/template.png" alt="sans" width=200px/>
</div>
</div>
</div>
Float-right doesn't help, as we want the image to be completely on the right side of the card.
This is what it looks like: enter image description here
And this is what it should look like enter image description here
In the picture where is should look like you have two columns of content.
text and image.
So let's try:
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="row card-body">
<div class="col-sm-6">
<h5 class="card-title">...</h5>
<p class="card-text">....</p>
Go somewhere
</div>
<img class="col-sm-6" src="Images/template.png" alt="sans"/>
</div>
</div>
</div>
Use the grid row&cols inside the card-body...
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<h5 class="card-title">Title</h5>
<p class="card-text">Some text ehre</p>
Go somewhere
</div>
<div class="col-sm-6 text-right">
<img class="" src="//placehold.it/200" alt="sans" width="200px">
</div>
</div>
</div>
</div>
</div>
</div>
Or, use flexbox (d-flex) with 2 containers...
Demo: https://www.codeply.com/go/0FzyCXffUd
Here is how I solved it with Bootstrap 5. I wanted the image on the right for large screens but on top for anything smaller.
The secret sauce seem to be row + flex-row-reverse + card-img-end, for an image on the right.
<div class="container my-5">
<div class="card row flex-row-reverse">
<img class="col-lg-4 card-img-end img-fluid p-0" src="https://picsum.photos/300/200" />
<div class="col-lg-8 card-body">
<h1 class="card-title">Blog entry</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
If you want the image on the left the sauce is row + flex-row + card-img-start.
<div class="container my-5">
<div class="card row flex-row">
<img class="col-lg-4 card-img-start img-fluid p-0" src="https://picsum.photos/300/200" />
<div class="col-lg-8 card-body">
<h1 class="card-title">Blog entry</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
I find display flex useful. You will need to fiddle with the column sizing to cater for your image size.
.card-body {
display: flex;
flex-wrap: nowrap;
}
.card-body>div {
padding: 5px;
}
<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="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div>
<h5 class="card-title">Title</h5>
<p class="card-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
Go somewhere
</div>
<div>
<img src="https://picsum.photos/100/100" alt="sans" />
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Using Bootstrap 4 alpha 6, I want to show a testimonial, comprising:
On the left: person photo
On the right: quote, name and company logo (left-aligned)
That is at tablet and desktop width.
But, when the window width shrinks, I want to stack the set, so that the image is on top of the text set, and each part becomes center-aligned.
Currently, this is my code...
<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
<div class="container">
<div class="media">
<img class="d-flex mr-4 rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
<div class="media-body">
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." link</i></p>
<h2 class="mt-0">Joe Smith</h2>
<img src="http://placehold.it/150x40" class="img-fluid" width="150">
</div>
</div>
</div>
</div>
This successfully produces the following outcome at desktop width...
However, when shrunk, the arrangement looks like this...
Instead, I would like the image to go on top, rather than be wrapped, and preferably be centered. The text below should preferably be centered.
That code is the media object.
I have also tried using two columns to accomplish this - one of width 2, the other of 10...
<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
<div class="container">
<div class="row">
<div class="col-md-2 text-center">
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="col-md-10 text-center">
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <i class="material-icons md-inverse pmd-sm">link</i></p>
<h2 class="mt-0">Joe Smith</h2>
<img src="http://placehold.it/150x40" class="img-fluid" width="150">
</div>
</div>
</div>
</div>
... This successfully produces the right-looking result at mobile width...
... However,
a) I'm not sure whether this mark-up is correct, and
b) This means the text is centered even at desktop width, which is inappropriate...
I'm getting confused about the right approach, whether/when I should use img-fluid versus a fixed-width image etc. Can I have text be aligned differently depending on the browser width/breakpoint?
The d-flex/mr-auto stuff, I am not wedded to. This was copied from Bootstrap 4 documentation code for the media object.
What's the way to go?
The "correct" approach is a subjective, but you can use the responsive utilities to change the text alignment at different breakpoints. text-md-left will keep item left align on larger screens, and then use text-center to center on smaller screens.
<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
<div class="container">
<div class="row">
<div class="col-md-2 text-md-left text-center">
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="col-md-10 text-md-left text-center">
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <i class="material-icons md-inverse pmd-sm">link</i></p>
<h2 class="mt-0">Joe Smith</h2>
<img src="http://placehold.it/150x40" class="img-fluid" width="150">
</div>
</div>
</div>
</div>
http://www.codeply.com/go/tuTd2OiZFx
I have a div where is a carousel - separately with text and images. Everything works (almost perfect) :) But I want have a background carousel with images in this set. I have sth like that:
jsfiddle
<div id="background">
<div class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
</div>
<div id="slider" class="carousel slide col-xs-9 padd-lt0" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img alt="First slide"4 src="http://placehold.it/1200x440/999999/cccccc" >
</div>
<div class="item">
<img alt="Second slide" src="http://placehold.it/1200x440/cccccc/ffffff">
</div>
<div class="item">
<img alt="Third slide" src="http://placehold.it/1200x440/dddddd/333333">
</div>
</div>
</div>
<div id="slider_captions" class="col-xs-3 ">
<div>
<div id="caption-0" class="carousel-caption">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
<div id="caption-1" class="carousel-caption">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
<div id="caption-2" class="carousel-caption">
<h2>Title 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
</div>
</div>
When I try put this example to other div (div .row) i don't see any background. I tired z-index and background-color: transparent - but nothing was happen.
How to convert the example above (background slider) so that it works only in a specific div (not the entire browser window)