Bootstrap - align button to the bottom of card
You can use the following Bootstrap 4 modifier classes:
- Add
d-flex
to.card-body
- Add
flex-column
to.card-body
- Add
mt-auto
to.btn
nested in.card-body
fiddle
Refer to this page for a full list of flexbox modifying classes for Bootstrap 4.
How to align the button at the bottom with Bootstrap 4?
Apply the classes d-flex flex-column
to the card-body (they turn the card body into a flex column) and the class mt-auto
(margin-top:auto) to the button. mt-auto
pushes the button to the bottom.
Here's a working code snippet (click the "run code snippet" button below and expand to full page):
<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="card-deck mb-3 text-center"> <div class="card mb-4 box-shadow"> <div class="card-header"> <h4 class="my-0 font-weight-normal">Free</h4> </div> <div class="card-body d-flex flex-column"> <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1> <ul class="list-unstyled mt-3 mb-4"> <li>10 users included</li> <li>2 GB of storage</li> <li>Email support</li> <li>Help center access</li> <li>Help center access</li> <li>Help center access</li> <li>Help center access</li> </ul> <button type="button" class="btn btn-lg btn-block btn-outline-primary mt-auto">Sign up for free</button> </div> </div> <div class="card mb-4 box-shadow"> <div class="card-header"> <h4 class="my-0 font-weight-normal">Pro</h4> </div> <div class="card-body d-flex flex-column"> <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1> <ul class="list-unstyled mt-3 mb-4"> <li>20 users included</li> <li>10 GB of storage</li> <li>Priority email support</li> <li>Help center access</li> </ul> <button type="button" class="btn btn-lg btn-block btn-primary mt-auto">Get started</button> </div> </div></div>
Can I position a button at the bottom of a card without position: absolute;? (vue-bootstrap)
You can do this pretty easily by utilizing flexbox.
Bootstrap provides some utility classes. This includes display utilities like d-flex
which applies display: flex
to an element.
We'll apply this card to out card body via the body-class
prop on <b-card>
.
Then to get the button position, we can use a auto margin. Luckily for us Bootstrap provides spacing utilities for this. So here we can apply mt-auto
(margin-top: auto
) to push the button to the bottom. If we want to center the button horizontally we apply the mx-auto
(margin-left: auto; margin-right: auto
) class as well.
There are other ways to position elements with flex, if you want to see some alternatives you can check out the flex utility page on the bootstrap docs.
Example:
new Vue({
el: "#app"
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app" class="p-4">
<b-card-group>
<b-card v-for="i in 2" class="m-3" header="Courses" overlay img-src="https://picsum.photos/325/200/?image=26" img-alt="Card Image" header-class="text-center" body-class="d-flex">
<b-button class="stretched-link mt-auto mx-auto" variant="primary">
View Courses
</b-button>
</b-card>
</b-card-group>
</div>
Bootstrap 5 - Card Element Alignment on the Bottom
Since you already have the element nested in a bootstrap row
you can add the class justify-content-end
which is synonymous with justify-content: flex-end;
I also declared a width on your a tag
at w-25
.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card col-8">
<div class="row g-0">
<div class="col-md-4">
<img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
</div>
<div class="col-md-8">
<div class="card-body position-relative">
<h2 class="card-title" style="font-weight: bold;">John Doe</h5>
<h6 class="card-subtitle pb-3">Developer</h5>
<p class="card-text pb-3">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>
<div class="row justify-content-end">
<a href="#" class="col-2 btn btn-primary w-25">Portfolio</a>
</div>
</div>
</div>
</div>
</div>
bootstrap 4 - equal height columns - align button bottom
check below code. I used flex column class to align items vertically & then add mt-auto class in button area which fill blank space and stick button to bottom.
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid p-5">
<div class="row">
<div class="col-sm-4 text-center">
<div class="border h-100 d-flex flex-column">
<img src="https://via.placeholder.com/150">
<h2>Normal Text col-1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p class="my-3 btn-bottom mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="border h-100 d-flex flex-column">
<img src="https://via.placeholder.com/150">
<h2> Less Text col-2</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p class="my-3 btn-bottom mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="border h-100 d-flex flex-column">
<img src="https://via.placeholder.com/150">
<h2>More text col-3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p class="my-3 btn-bottom mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
</div>
</div>
</div>
</div>
<<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
Bootstrap 4 cards - align content at the bottom
Use the flexbox utils and/or auto margins. For example, you can make the .card-body
display:flex
(d-flex flex-column
) and the margin-top:auto
(mt-auto
) to push the button down...
https://codeply.com/go/mfrRHlgydc
<div class="card-group">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div class="mt-auto">
<input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
</div>
</div>
<div class="card-footer">
...
</div>
</div>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div>
Line 3
</div>
<div class="mt-auto">
<input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
</div>
</div>
<div class="card-footer">
..
</div>
</div>
</div>
Related questions:
Bootstrap - align button to the bottom of card
Aligning items within a Bootstrap 4 .card using Flexbox
Getting button to align center in Bootstrap card footer
Here you go... You forgot to add d-flex
.
Change this...
<div class="card-footer justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>
...to this.
<div class="card-footer d-flex justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>
How to button align bottom in bootstrap 4
All you need to do is apply Height: 100%
to your card div, once your cards are equal to its parent, you problem will be fixed. instead of writing CSS, you can apply h-100 class on the card as well
Note: I have removed some col-sm, col-md classes for demo purpose, you can put them back
.prcard {height: 100%;}
<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-6 d-flex flex-column text-center ng-star-inserted"> <div class="card prcard"> <img height="200px" alt="Card image cap" class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%; object-fit: scale-down;" src="https://cdn.hasselblad.com/hasselblad-com/3efb310d-21c1-442a-85b9-4c426102d1e9_x1d-ii-xcd45p-01-web.jpg"> <div class="card-body d-flex flex-column"> <h3 class="card-titlemb-3">vendor menu 1</h3> <h4> <b>$</b>12 </h4> <p style="width: 100%;">gigivendor item des</p> <div class="row mx-0 mt-auto btn-group"> <div class="col-10 px-0 pr-1"> <button class="btn btn-primary btn-block">Add To Cart </button> </div> <div class="col-2 px-0"> <button class="mt-auto btn btn-danger btn-block">-</button> </div> </div> </div> </div> </div>
<div class="col-6 d-flex flex-column text-center ng-star-inserted"> <div class="card prcard"> <img height="200px" alt="Card image cap" class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%; object-fit: scale-down;" src="https://cdn.hasselblad.com/hasselblad-com/3efb310d-21c1-442a-85b9-4c426102d1e9_x1d-ii-xcd45p-01-web.jpg"> <div class="card-body d-flex flex-column"> <h3 class="card-titlemb-3">vendor menu 1</h3> <h4> <b>$</b>12 </h4> <p style="width: 100%;">gigivendor item dessdsssssssssssssss sdssssssssss sssssssssgigivendor item dessdsssssssssssssss sdssssssssss sssssssssgigivendor item dessdsssssssssssssss sdssssssssss sssssssss</p> <div class="row mx-0 mt-auto btn-group"> <div class="col-10 px-0 pr-1"> <button class="btn btn-primary btn-block">Add To Cart </button> </div> <div class="col-2 px-0"> <button class="mt-auto btn btn-danger btn-block">-</button> </div> </div> </div> </div> </div></div>
How to align elements in bootstrap cards to bottom of card?
you can use display flex. but you need to break your CardBody
into two divs, one with the content, and another with the button. use then justifyContent: 'space-between'
. Add also some margin-top to wrapping button div to ensure some space for safety.
below the approach I described:
<Card>
<CardBody style={{display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
<div>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</CardText>
</div>
<div style={{marginTop: '12px'}}>
<Button >Button</Button>
</div>
</CardBody>
</Card>
Place a button in the bottom of a column in Bootstrap
Place a row
BS class selector class in the flex-column
element effectively making it a flex container, then place an align-self-start
BS class selector on the last form-row
element that contains the button making align-self
set to start
.
.my-200 {
height: 400px;
background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-around">
<div class="col-2 my-200">
</div>
<div class="row col-10 flex-column">
<div class="form-row">
<div class="form-group col-12">
<label>Title</label>
<input name="comment" type="text" class="form-control" value="">
</div>
</div>
<div class="form-row mt-3">
<div class="form-group col-4">
<button class="btn btn-primary">button 1</button>
</div>
</div>
<div class="form-row mt-auto align-self-start">
<div class="form-group col-4">
<button class="btn btn-dark">place bottom</button>
</div>
</div>
</div>
</div
Related Topics
Hide Textfield Blinking Cursor
How to Use Tel: With * (Star, Asterisk) or # (Hash, Pound) on Ios
What Characters Can Be Used For Up/Down Triangle (Arrow Without Stem) For Display in Html
What Is "X-Content-Type-Options=Nosniff"
How to Stream Audio/Video Files Such as Mp3, Mp4, Avi, etc Using a Servlet
What Does It Mean in HTML 5 When an Attribute Is a Boolean Attribute
Making the Main Scrollbar Always Visible
Multiple Radio Button Groups in One Form
Apply CSS Styles to an Element Depending on Its Child Elements
Html Table With Horizontal Scrolling (First Column Fixed)
Select Dropdown With Fixed Width Cutting Off Content in Ie
Css ''Background-Color" Attribute Not Working on Checkbox Inside ≪Div≫
Radio Buttons and Label to Display in Same Line
Html: Changing Colors of Specific Words in a String of Text
How to Get the HTML Source of a Page from a HTML Link in Android