CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
a_guest
a_guest

Reputation: 36249

Bootstrap - align button to the bottom of card

I was peeking at one of the Bootstrap examples that use the card-deck and card classes (Pricing example). I wondered how one can fix the button alignment if one of the lists has fewer items than the others.

Alignment issue

I would like all buttons to be vertically aligned (at the bottom of each card) but I couldn't figure out a way of doing this. I tried setting the .align-bottom class as well as wrapping the button in <div class="align-text-bottom">. I also tried several suggestions from this question about adding space however still no success (also the spacing should be variable such that it fills up the remaining space from the list).

Wrapping in <div class="card-footer bg-white"> didn't yield the desired result either as it doesn't align the button at the bottom of the card and it creates some kind of border around it.

Does anyone have an idea?

Edit: Here is a jsfiddle that resembles the problem.

Upvotes: 140

Views: 212280

Answers (11)

Wiktoria Chojnacka
Wiktoria Chojnacka

Reputation: 21

If you want the button to occupy the maximum length of the card and be at the very bottom as in the example, just put it in a div with class : class="d-grid gap-2 mt-auto" and in the center image description file add display: flex and flex-direction: column; in class .card-body.

HTML:

      <div class="d-grid gap-2 mt-auto">
      <a href="#" class="align-self-end btn btn-lg btn-outline-dark">Sign up for free</a>
      </div>

CSS:

.card-body {
display: flex;
flex-direction: column;}

Here you can find my code and screenshot with example:

https://www.codeply.com/go/Fiorqv1Iz6 - code

https://i.sstatic.net/fqtpI.png - screenshot

Upvotes: 2

Faisal Amin
Faisal Amin

Reputation: 1

If you want to add buttons to the bottom of all cards in Bootstrap, you can use the card-footer class. The card-footer class is used to create a footer section for the card, and it is designed to be positioned at the bottom of the card.

Example:

<div class="card">
  <div class="card-header">
    Card Header
  </div>
  <div class="card-body">
    Card Body
  </div>
  <div class="card-footer">
    <button class="btn btn-secondary">Button</button>
  </div>
</div>
enter code here

Upvotes: 0

syed
syed

Reputation: 1

This issue is mainly caused when the text of the card is uneven, so the best answer I have found after searching for two hours is to just add this line in the card which has less text than the others:

<p class="invisible" > invisible</p>

I know it is not a good way to tackle a problem but it is the simplest one I have found.

Upvotes: -3

M.S.B محمد سجاد باهنر
M.S.B محمد سجاد باهنر

Reputation: 11

sample is ( d-flex flex-column )

<div class="col-md-6 col-lg-6 col-sm-6 col-xl-4" style="float:right">

            <div class="bg-white d-flex flex-column" style="width:100%;height:530px;border:1px solid #808080;border-radius:10px;padding:15px;float:right;margin:10px;">
                <div class="card-body">
                    <h5 class="card-title" style="padding:0px 0px 20px 0px;text-align:center;border-bottom:1px dashed #000000">@item.SiteName</h5>
                    <button type="button" class="btn btn-primary" style="margin:10px;width:94%">آدرس سایت : @item.SiteUrl</button>
                    <button type="button" class="btn btn-secondary" style="margin:10px;width:94%">رتبه الکسا : @item.SiteAlexa</button>
                    <button type="button" class="btn btn-success" style="margin:10px;width:94%">اتوریتی : @item.MozAutoraty</button>
                    <button type="button" class="btn btn-danger" style="margin:10px;width:94%">لینک : @item.LinkToYou</button>
                    <button type="button" class="btn btn-warning" style="margin:10px;width:94%">اسپم اسکور : @item.SpamScore</button>
                    <button type="button" class="btn btn-info" style="margin:10px;width:94%">قیمت : @item.Price</button>
                </div>
                <a href="/Home/About/@item.SiteId" class="btn btn-primary btn-lg btn-block">توضیحات رسانه</a>
            </div>
        </div>

Upvotes: 1

Peter Palmer
Peter Palmer

Reputation: 854

Add a Footer to the Card

You can set a footer for every card, like this:

<div class="card-footer">
   <button type="button" class="btn btn-primary btn-sm btn-block" onclick="location.href = '';">BUY NOW </button>
</div>

Upvotes: 13

Mifdha Milan
Mifdha Milan

Reputation: 397

surround the button in the card with a div tag containing the class with mt-auto

<div class="d-flex flex-row justify-content-center mt-auto">
<a href="#" target="_blank" target="_blank" type="button" class="btn btn-primary mr-3">GitHub</a>     
</div>

Upvotes: 6

RustyNox
RustyNox

Reputation: 469

Use the footer, it already has everything setup for you.

<div class="card-deck">
<div class="card">
   <div class="card-body">
      <h4 class="card-title">Title goes here</h4>
      <p class="card-text">Ut leo enim, fermentum fermentum tempor sit amet, vehicula in felis. Pellentesque a arcu augue. Nam eu malesuada lorem. Curabitur et molestie lacus.</p>
   </div>
   <div class="card-footer text-muted mx-auto">
      <button type="button" class="btn btn-sm btn-outline-secondary">Click me!</button>
   </div>
</div>

Then you can optionally style the card-footer element.

.card-footer {
  background: transparent;
  border-top: 0px;
}

demo: https://jsfiddle.net/rustynox/203zwyq6/

Upvotes: 10

sol
sol

Reputation: 22949

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.

Upvotes: 282

Carol Skelly
Carol Skelly

Reputation: 362390

A similar question has been answered here.

Just add the align-self-end class to item to align at the bottom.

https://www.codeply.com/go/Fiorqv1Iz6

     <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>
            </ul>
            <button type="button" class="align-self-end btn btn-lg btn-block btn-primary" style="margin-top: auto;">Get started</button>
     </div>

By default, the card is display:flex, but the card-body is not. Because of this you need to add d-flex flex-column to the card-body. This will make the flexbox alignment classes work.

Another option is to use mt-auto (auto top margin) on the button which will push it to the bottom of the Card.

Upvotes: 31

DreamTeK
DreamTeK

Reputation: 34197

Flex is your friend

Something like this will work the magic:

.flex-wrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
}

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #eee;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}


.flex-item {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}


.fill{
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.btn{
  background:#069;
  padding:10px;
  color:#fff;
}
<div class="flex-wrap">

  <div class="flex-container">
    <div class="flex-item">FREE</div>
    <div class="flex-item fill">
      <h2>$0</h2>
      <p>Some text ... ashd iaush diuhasd uhasd aiusdh iaush d haisduhaiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">SIGN UP</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">PRO</div>
    <div class="flex-item fill">
      <h2>$10</h2>
      <p>Some text ... ashd iaush uhasd aiusdh iaush d haisduhdiuhasd aiusdh iuhasd aiusdh iaush d haisduhaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">GET STARTED</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">ENTERPRISE</div>
    <div class="flex-item fill">
      <h2>$20</h2>
      <p>Some text ... ashd iaush diuhasd aiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">CONTACT</a>
    </div>
  </div>
  
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115047

Set the .card-body div to display:flex and flex-direction:column.

Then give the button margin-top:auto.

I imagine there are Bootstrap help classes for this.

.card-body {
  display: flex;
  flex-direction: column;
}

button.btn {
  margin-top: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <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">
        <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>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">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">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

Upvotes: 9

Related Questions