Position the button at the bottom of the card using Bootstrap

Question

Position the button at the bottom of the card using Bootstrap

While exploring a Bootstrap example utilizing the card-deck and card classes (Pricing example), I pondered over how to align buttons correctly when one list has fewer items than others.

https://i.sstatic.net/IGN7K.png

I aim to vertically align all buttons (at the bottom of each card) but have struggled to find a solution. Attempts included using the .align-bottom class, wrapping the button in

<div class="align-text-bottom">

, and considering suggestions from this question about adding space. However, none of these methods provided the desired outcome (especially with variable spacing).

Even wrapping in

<div class="card-footer bg-white">

did not achieve the intended alignment at the bottom of the card, instead creating an unwanted border around it.

If anyone has a creative solution, please share!

Edit: A similar problem is demonstrated in this jsfiddle.

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Utilize these Bootstrap 4 modifier classes for optimal customization:

Include d-flex in .card-body
Integrate flex-column within .card-body
Attach mt-auto to .btn located inside .card-body

Check out this fiddle

Consult this page for a comprehensive list of flexbox modifying classes specifically for Bootstrap 4.

Answer 2

Utilize these Bootstrap 4 modifier classes for optimal customization:

Include d-flex in .card-body
Integrate flex-column within .card-body
Attach mt-auto to .btn located inside .card-body

Check out this fiddle

Consult this page for a comprehensive list of flexbox modifying classes specifically for Bootstrap 4.

Answer 3

Answer №2

If you're wondering about aligning items within a Bootstrap 4 card using flexbox, you can find the answer here.

To align an item at the bottom, simply add the align-self-end class.

Check out this link for a live example:

     <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>

If the card is set to display:flex by default, make sure to include d-flex flex-column on the card-body. This will enable the flexbox alignment classes to function smoothly.

Alternatively, you can use mt-auto (auto top margin) on the button to automatically push it to the bottom of the Card.

Answer 4

If you're wondering about aligning items within a Bootstrap 4 card using flexbox, you can find the answer here.

To align an item at the bottom, simply add the align-self-end class.

Check out this link for a live example:

     <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>

If the card is set to display:flex by default, make sure to include d-flex flex-column on the card-body. This will enable the flexbox alignment classes to function smoothly.

Alternatively, you can use mt-auto (auto top margin) on the button to automatically push it to the bottom of the Card.

Answer 5

Answer №3

Include a Footer on Your Card Design

To enhance the look of your card, consider adding a footer section:

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

Answer 6

Include a Footer on Your Card Design

To enhance the look of your card, consider adding a footer section:

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

Answer 7

Answer №4

To style the .card-body div, set it to display:flex and flex-direction:column.

Next, add margin-top:auto to the button.

You may find Bootstrap utility classes helpful for achieving this layout.

.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>

Answer 8

To style the .card-body div, set it to display:flex and flex-direction:column.

Next, add margin-top:auto to the button.

You may find Bootstrap utility classes helpful for achieving this layout.

.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>

Answer 9

Answer №5

Utilize the footer section which comes pre-designed and ready for use.

<div class="card-deck">
<div class="card">
   <div class="card-body">
      <h4 class="card-title">Customize Title Here</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget urna ac ligula tempor condimentum.</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>

You have the option to customize the styling of the card-footer element as well.

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

Live demonstration available at: https://jsfiddle.net/rustynox/203zwyq6/

Answer 10

Utilize the footer section which comes pre-designed and ready for use.

<div class="card-deck">
<div class="card">
   <div class="card-body">
      <h4 class="card-title">Customize Title Here</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget urna ac ligula tempor condimentum.</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>

You have the option to customize the styling of the card-footer element as well.

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

Live demonstration available at: https://jsfiddle.net/rustynox/203zwyq6/

Answer 11

Answer №6

enclose the button within a card in a div element that has the mt-auto class applied to it

<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>

Answer 12

enclose the button within a card in a div element that has the mt-auto class applied to it

<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>

Answer 13

Answer №7

To ensure that the button spans the entire length of the card and is positioned at the bottom, you can place it within a div with the following class: class="d-grid gap-2 mt-auto". Additionally, in the image description file center, add display: flex and flex-direction: column; to the .card-body class.

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;}

You can access my code and see an example screenshot here:

- view code

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

Answer 14

To ensure that the button spans the entire length of the card and is positioned at the bottom, you can place it within a div with the following class: class="d-grid gap-2 mt-auto". Additionally, in the image description file center, add display: flex and flex-direction: column; to the .card-body class.

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;}

You can access my code and see an example screenshot here:

- view code

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

Answer 15

Answer №8

Embrace the Power of Flexbox

If you want to achieve great results, try out this code snippet:

.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>

Answer 16

Embrace the Power of Flexbox

If you want to achieve great results, try out this code snippet:

.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>

Answer 17

Answer №9

The example includes the following CSS classes: 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>

Answer 18

The example includes the following CSS classes: 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>

Answer 19

Answer №10

To easily include buttons at the bottom of every Bootstrap card, simply utilize the card-footer class. This class is specifically designed to create a footer area for each card, ensuring it appears at the card's bottom.

For instance:

<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

Answer 20

To easily include buttons at the bottom of every Bootstrap card, simply utilize the card-footer class. This class is specifically designed to create a footer area for each card, ensuring it appears at the card's bottom.

For instance:

<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

Answer 21

Answer №11

The issue arises primarily from the uneven text distribution on the card. After spending two hours searching for a solution, I discovered that adding the following line to the card with less text than the others resolves the problem:

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

While not the most ideal resolution, it is the simplest one I could find.

Answer 22

The issue arises primarily from the uneven text distribution on the card. After spending two hours searching for a solution, I discovered that adding the following line to the card with less text than the others resolves the problem:

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

While not the most ideal resolution, it is the simplest one I could find.

Position the button at the bottom of the card using Bootstrap

Answer №1

Answer №2

Answer №3

Include a Footer on Your Card Design

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Embrace the Power of Flexbox

Answer №9

Answer №10

Answer №11

Similar questions

How to properly size a child div inside a parent container

Using Data URIs can negatively impact the loading speed of a webpage

What is causing the newly generated input tags to disappear from the page?

Creating a logo that scales seamlessly across different web browsers while maintaining responsiveness through

Efficient creation of a user-friendly interface application designed to retrieve data from a nearby server

Title of Flickr API

Set an attribute without replacing any existing class attributes

Learn how to efficiently redirect users without losing any valuable data after they sign up using localStorage

Achieving hover effects on <a> tags in CSS without using the href attribute

Achieving sliders similar to those in the "level" window of GIMP can be done by customizing the shape of GtkScale in your C program

Adding Breathable Space Between Wrapper and Div Elements

Is it possible to execute ng-repeat on-click when ng-show evaluates to true?

Having trouble with the flexbox flex-direction: column property not functioning properly with the textarea element in Firefox?

I desire a three-column layout where the middle column will expand in width if columns 1 and 3 are vacant

Loading content dynamically into a div from an external or internal source can greatly enhance user experience on a website. By

Discovering whether an image contains a caption with the help of JavaScript

Method for eliminating double quotes from a string bound in Angular

Navigate to a list item once Angular has finished rendering the element

Angular 2 Typeface Delivery to the Server

Utilizing functions for object creation in JavaScript