Bootstrap - Align Button to the Bottom of Card

Bootstrap - align button to the bottom of card

You can use the following Bootstrap 4 modifier classes:

  1. Add d-flex to .card-body
  2. Add flex-column to .card-body
  3. 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



Leave a reply



Submit