Tips for ensuring consistent dimensions on a bootstrap card

Currently, I am working on a project to gain a better understanding of API calls within Angular. While the functionality is running smoothly, my struggle lies in designing the HTML layout. To enhance the aesthetics, I have incorporated Bootstrap 5 into the project. However, due to my limited experience with this library, navigating through its classes poses a challenge. The layout comprises a single card where text retrieved from an API call is displayed, accompanied by a button to fetch another joke - quite straightforward. I have managed to set a maximum height for the card successfully. Nevertheless, the issue arises when dealing with the content inside it. As the length of the printed string varies, the placement of the button shifts accordingly beneath it, which I believe does not optimize the user interface/experience.

Below is a snippet of the code:

HTML

<div class="container justify-content-center align-items-center mt-5">
  <div class="row">
    <div class="card justify-content-center align-items-center">
      <h1 class="m-3">{{ actualJoke }}</h1>
      <button class="btn btn-outline-primary btn-lg m-5 px-5" (click)="getJoke()">Next joke ⏩</button>
    </div>
  </div>
</div>

CSS

.card {
    height: 40vh;
}

I aim to anchor the button in a fixed position regardless of the container's size above it; however, I am uncertain if achieving this is feasible.

Answer №1

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">Title of the Card</h5>
                    <p class="card-text">Here is some sample text to showcase how the card content can be displayed on a website.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">Card Title Example</h5>
                    <p class="card-text">Another example text to demonstrate the flexibility of card content.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">Sample Card Title</h5>
                    <p class="card-text">More expertly crafted content for the card's body.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Feel free to test out this code snippet!

Answer №2

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card h-100">
                <div class="align-items-start card-body d-flex flex-column">
                    <h5 class="card-title">Amazing Card</h5>
                    <p class="card-text">Experience the Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, pariatur!</p>
                    <button class="btn btn-outline-primary btn-lg m-5 px-5 mt-auto" (click)="getJoke()">Next Joke ⏩</button>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <div class="align-items-start card-body d-flex flex-column">
                    <h5 class="card-title">Awesome Card</h5>
                    <p class="card-text">Discover Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi a in suscipit, aliquam magnam iure, hic earum autem quasi cum deserunt quidem eos quaerat voluptatum.</p>
                    <button class="btn btn-outline-primary btn-lg m-5 px-5 mt-auto" (click)="getJoke()">Next Joke ⏩</button>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <div class="align-items-start card-body d-flex flex-column">
                    <h5 class="card-title">Fantastic Card</h5>
                    <p class="card-text">Enjoy Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, laudantium!</p>
                    <button class="btn btn-outline-primary btn-lg m-5 px-5 mt-auto" (click)="getJoke()">Next Joke ⏩</button>
                </div>
            </div>
        </div>
    </div>
</div>

For uniform button dimensions across all cards, you can utilize this code snippet.

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

Element does not cross both explicit and implicit columns

When working in a grid container with only 1 column and 1 row, if there is an implicit column in the first row, how can an element in the second row (as shown by the green column in the example) span across both the explicit and implicit columns? I appreci ...

Guide on retrieving data from two separate tables within a single database using PHP

I am currently working on a shopping website where I have a table called "products" that stores all the product data. Additionally, there is a separate table named "cart" which contains the products added to the cart, including product ID and user ID. On t ...

Disabling the ng-click event in a confirmation popup button: a step-by-step guide

Is there a way to prevent ng-click event from triggering in a confirmation popup button? 1[Screen-Shot] ...

Tips for keeping Masonry up to date with the updated() lifecycle hook in Vue.js 3

Can someone help me with triggering the Masonry layout update in the Vue.js (Version 3) lifecycle hook "updated()"? My issue arises when a card changes its size within my Bootstrap 5-based card grid view. I understand that I can use layout() (see documenta ...

jQuery fails to retain multiple classes when appending elements

Strange things are happening when I use jQuery. I create a string like this: myBlock = """<div class="alert alert-success">...</div>""" But when I try to append it using jQuery, $("#msg_container").append(myBlock) The resulting div in the ...

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

As a first-time GatsbyJS website builder, I am working on creating reusable components for my site. One of these components is the footer, and I have already structured it. Now, I have a dilemma - I want to change the color of a specific <div> within ...

Issue with Ionic app on iPhone X not correctly detecting safe areas

Struggling to place a loading element between the top toolbar and bottom tabs on various iPhone models and iOS versions. The challenge arises with iOS 10. Using "margin-top" causes errors, while "padding-top" doesn't work on iPhone X. Is there a CSS s ...

Two elements occupy the rest of the vertical space

In the center, there is a div with content inside. I want the top and bottom divs to occupy the remaining space. Similar to this example <div class="container"> <div class="top"> </div> <div class="middle"> C ...

Is there a way to display x squared as a superscript inside a button element?

In my reactjs project, I am developing a basic calculator. One of the buttons is supposed to calculate x squared, and I tried using the <sup> HTML element for this purpose but it did not work as expected. <Button name = "x<sup>2</sup> ...

Error in jQuery: Null property causing TypeError when reading 'text'

Issue: I have a modal form that is loaded via an ajax call. Inside the modal, there is a span element containing an email address. I am trying to capture the value of this span element using JavaScript. Currently, I have a button click event that triggers ...

SVG failing to display properly

I need to place a close button in the top right corner of my page. Here is the code for the SVG: .icon { width: 24px; height: 24px; /* any changes to the fill attribute have no effect */ fill: currentColor; } <svg class="icon"> &l ...

simplest method to brighten the image in this specific instance

I have a simple question. We are looking to enhance some static images by adding a lightening effect with an overlay. For example, when hovering over an image like on this website: (just for the lightening effect). What is the best approach to achieve thi ...

Using Bootstrap to create a floating image amidst surrounding elements

<div id="wrapper"> <div class="row"> <div class="col-sm-6 col-xs-12 image">Image</div> <div class="col-sm-6 col-xs-12 title">Title</div> <div class="col-sm-6 col-xs-12 description"> Desc ...

Is there a way to use JQuery/AJAX to extract the selected values from all drop-down menus within a designated container?

With the help of JavaScript, I am dynamically creating dropdown lists under dvContainer. My goal is to retrieve the selected values of all select elements within that container. Below is the HTML code generated through JavaScript: <div id="dvContai ...

Tips for properly styling the input type range element

Is there a way to fix the issue with my input type="range" styling using linear-gradient when the variable is set to 75%? It seems to be behaving incorrectly. body{ background: green; } .wrapper { width: 20vmin; } input { widt ...

Delete a specific character sequence from a PHP form before storing it in a MySQL database

My Objective: I aim to utilize a straightforward PHP form to transfer data to a MySQL database. However, in cases where the input includes a specific string, I intend to eliminate it before storing it in the MySQL database. For instance: if the input ...

Tips for customizing elements using Wordpress

Is there a way to easily make my four divs containing icon images and descriptive text editable in WordPress? I have some experience setting up basics and using widgets in my footer and sidebar, but I'm not sure if that's the best approach for th ...

Having trouble getting my AngularJS directive with a number in the name to function properly

Check out my code snippet: app.directive('3dPlansSlider', function(){ return { controller: 'projectCtrl', restrict: 'E', templateUrl: 'views/3dPlansSlider.html', link: function(scope, element, attr ...

Center two distinct elements using Bootstrap's center-block class

Check out my code snippet below: <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="center-block" style="w ...

How to align an unordered list vertically in the center using Bootstrap?

Trying to figure out why the ul within this parent div is not centered vertically. Here is a screenshot of the issue: https://i.sstatic.net/ZOc9M.png <div className=" d-flex align-items-center bg-primary "> <ul ...