Creating stylish pricing cards with Bootstrap

I am struggling to create 3 pricing cards in a row with equal width and height, along with positioning the sign-up button at the bottom of each card regardless of the amount of text.
I have attempted various methods but have not been successful. Can someone provide some assistance?

Below is my code: (using bootstrap 4.6)

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  text-align: center;
}

.container-fluid {
  padding: 7% 15%;
}

.pricing-card {
  padding: 5% 2%;
}

.pricing-plan {
  font-weight: 600;
}
<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d2c8d0c8d6">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<section id="pricing">
  <div class="container-fluid">
    <div class="row">
      <div class="pricing-card col-lg-4 col-md-6">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="pricing-plan">Chihuahua</h3>
          </div>
          <div class="card-body">
            <h2 class="sub-heading">Free</h2>
            <p>5 Matches Per Day</p>
            <p>10 Messages Per Day</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="sign-up-button btn-lg btn-block btn-outline-dark">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="pricing-card col-lg-4 col-md-6">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="pricing-plan">Labrador</h3>
          </div>
          <div class="card-body">
            <h2 class="sub-heading">$49 / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="sign-up-button btn-lg btn-block btn-dark">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="pricing-card col-lg-4 col-md-12">
        <div class="card h-150">
          <div class="card-header">
            <h3 class="pricing-plan">Mastiff</h3>
          </div>
          <div class="card-body">
            <h2 class="sub-heading">$99 / mo</h2>
            <p>Priority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="sign-up-button btn-lg btn-block btn-dark">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

htmlcssbootstrap-4bootstrap-cards

Answer №1

Ensure the 'card-body' has both 'd-flex flex-column' classes added.

Don't forget to include the 'mt-auto' class on the 'sign-up-button' element.

<div class="card-body d-flex flex-column">
    <h2 class="sub-heading">$99 / mo</h2>
    <p>Pirority Listing</p>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button" class="sign-up-button btn-lg btn-block btn-dark mt-auto">Sign Up</button>
</div>

Answer №2

To implement the changes for Bootstrap 4.6, follow these steps:

1. Add the classes 'd-flex flex-column' to the div with the class 'card-body'

2. Include the class 'mt-auto' to the button.

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  text-align: center;
}

.container-fluid {
  padding: 7% 15%;
}

.pricing-card {
  padding: 5% 2%;
}

.pricing-plan {
  font-weight: 600;
}
<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb9b4b4afa8afa9baab9beff5edf5eb">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<section id="pricing">
  <div class="container-fluid">
    <div class="row">
      <div class="pricing-card col-lg-4 col-md-6">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="pricing-plan">Chihuahua</h3>
          </div>
          <div class="card-body d-flex flex-column">
            <h2 class="sub-heading">Free</h2>
            <p>5 Matches Per Day</p>
            <p>10 Messages Per Day</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="mt-auto sign-up-button btn-lg btn-block btn-outline-dark">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="pricing-card col-lg-4 col-md-6">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="pricing-plan">Labrador</h3>
          </div>
          <div class="card-body d-flex flex-column">
            <h2 class="sub-heading">$49 / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="mt-auto sign-up-button btn-lg btn-block btn-dark">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="pricing-card col-lg-4 col-md-12">
        <div class="card h-150">
          <div class="card-header">
            <h3 class="pricing-plan">Mastiff</h3>
          </div>
          <div class="card-body d-flex flex-column">
            <h2 class="sub-heading">$99 / mo</h2>
            <p>Priority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="mt-auto sign-up-button btn-lg btn-block btn-dark">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing HTML tables with AJAX in Django

After going through all the posts here, I found that some are outdated and others don't quite match my issue. Apologies for bringing it up again. I have a basic HTML table with data in it. My goal is to update this data without refreshing the entire ...

htmldjangoajaxajax-updatedjango-3.0

What is the best way to extract content between <span> and the following <p> tag?

I am currently working on scraping information from a webpage using Selenium. I am looking to extract the id value (text) from the <span id='text'> tag, as well as extract the <p> element within the same div. This is what my attempt ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

An error occured upon loading FullCalendar: Uncaught TypeError - Unable to read property 'push' as it is undefined

First of all, thank you for your assistance. I've been trying to load FullCalendar (https://fullcalendar.io/) on my development environments but it doesn't seem to be working. When I check the console in Chrome, it shows me the following error m ...

javascriptjqueryhtmlfullcalendar

The appearance of Google Font CSS may vary when retrieved using WGET

Uncovering an issue while attempting to dynamically fetch a Google Fonts css file to extract the font URL. The scenario looks like this: (Viewed in Chrome) Contrast that with: WGET -qO- http://fonts.googleapis.com/css?family=Droid+Sans Upon inspecti ...

csswgetgoogle-webfonts

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

htmlcss

Can child elements be centered using their pseudo-elements using CSS alone?

Consider the code snippet below: <div class="example-container"> <p class="example">a</p> <p class="example">bbb</p> <p class="example">cc</p> </div> and the cor ...

htmlcss

Retrieve the index value within a given range

How do I retrieve the index number using PHP? foreach ($array as $index => $value) { // Use $index to access the index number } Is there a way to obtain the index number in Go language? {{ range .posts }} {{ index . }} {{ .Id }} {{ .Name}} ...

htmlloopstemplatesgogo-templates

Solving the default font problem in Laravel

I've been working on a project using Laravel and Bootstrap 4. Recently, I decided to switch from the default Laravel font, Nunito, to Lato. So, I made the necessary changes in my app.css file: @import url(https://fonts.googleapis.com/css?family=Nun ...

phpcsslaravelbootstrap-4fonts

I encountered an error stating "loadmodel is not defined" while I was using PHP and a JavaScript file with the type=module

Recently, I ventured into the world of THREE.js and WebGL, trying to load car models. My goal was to trigger a custom function through an onclick event listener that would extract an address from a data- attribute and pass it on to another custom function ...

javascripthtmlecmascript-6three.jswebgl

Tips for creating a new line in PHP when the value includes a comma

I am struggling to format information that includes commas into new lines. The current output I have is shown in the current display. I would like to display it with each comma creating a new line automatically. Below is my current code: <tr> <td ...

phphtml

The database is failing to retrieve user information

I am struggling to display the username from a database on my UserHome.php page. Unfortunately, I am not seeing anything displayed. Below is the code snippet that I have implemented in an attempt to show the name. server.php : $host = "localhost" ...

phphtmlmysqlforms

Clearing all data in a form upon opening

Within a single portlet, I have organized two forms under separate tabs. What I am aiming for is that whenever I switch to tab 2, all fields within its associated form should automatically be cleared without the need for a button click. Even after attempti ...

javascripthtmljqueryformsjquery-events

Adjusting content within a div using a loop with a pause interval

I am working on a project where I need to manipulate the content of a div. Here is the initial code snippet: <div class="mytext">first</div> My goal is to dynamically change this text from 'first' to 'second' after 5 s ...

jqueryhtmlcss

Tips on creating a React Vite Typescript website that utilizes the entire height and ensures a minimum width

I'm currently working on building a portfolio webpage with React, Vite, and Typescript, but I'm facing an issue where the content is not taking up the full height of the page. I have multiple pages with different lengths of content that I want to ...

htmlcssreactjs

Connecting to an element within a separate node (XSLT)

I have an XML document that includes a list of companies. My goal is to use XSLT to create links that point to the <link> child of the next company node. To provide a clearer picture, here is a snippet of sample XML data I am working with: <portf ...

htmlxmlxslt

Refresh the DIV content using an external file

I have an external file containing text that is updated regularly. <div id='1'>TEST 1</div> <div id='2'>TEST 2</div> <div id='3'>TEST 3</div> This file is named IO.HTML. My script retrieves ...

javascripthtmljqueryajax

What's the best way to prevent extra spacing when typing in a materialUI TextField?

Instructions for the user: Please input your first name without any spaces between characters. I attempted to implement the following code, however, it did not achieve the desired outcome. <TextField required id="name" label="First Name" ...

javascripthtmlreactjsmaterial-ui

Disabling autocomplete for an HTML element is proving to be ineffective

I am encountering a challenge with the autocomplete attribute on my HTML <input> element. I assumed that setting it to off would disable auto fill. I have conducted extensive research and even consulted AI, but I have not been able to resolve the is ...

html

I'm working on creating a login page with Bootstrap. Does anyone know the best way to center it on the screen

For a school project, I am working on creating a sign-in page. Although I have come across this code, it does not appear at the center of the page as intended. Instead, the left side displays to the left while the right side shows up to the right. My goal ...

csstwitter-bootstrapcenter

Creating borders around Material UI grid items can be achieved by applying a border style to the

import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; const useStyles = makeStyles((theme) => ({ ...

cssreactjsmaterial-ui