Ways to position a button at the bottom of a Bootstrap card

In the card layout, I am struggling to position the red button at the bottom of the column despite using margin auto. Can anyone provide a solution for this issue? Thank you in advance!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfacabfa4b8a4b9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a616661677465387c767a7a6655243b24253b27">[email protected]</a>/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">

<div class="col-2">
  <div class="row">
    <div class="col">
      <button class="btn btn-secondary col-12">
        <i class="bi bi-arrow-up-circle-fill"></i>
      </button>
    </div>
    <div class="col">
      <button class="btn btn-secondary col-12">
        <i class="bi bi-arrow-down-circle-fill"></i>
      </button>
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-12">
      <button class="btn btn-success col-12 p-5">
        Button 1
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button class="btn btn-danger col-12 p-3">Button 2</button>
    </div>
  </div>
</div>

javascriptvue.jsbootstrap-5margin

Answer №1

In the absence of a defined height for the main container, the mt-auto class will default to the minimum height calculated for the entire component. To address this, it is recommended to utilize utility classes like d-flex in the following manner:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6aab6ab">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d7671767063722f6b616d6c7142332c33322c30">[email protected]</a>/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">

<div class="d-flex align-items-center flex-column vh-100">
  <div class="row">
    <div class="col">
      <button class="btn btn-secondary col-12">
        <i class="bi bi-arrow-up-circle-fill"></i>
      </button>
    </div>
    <div class="col">
      <button class="btn btn-secondary col-12">
        <i class="bi bi-arrow-down-circle-fill"></i>
      </button>
    </div>

    <div class="col-12">
      <button class="btn btn-success col-12 p-5">
        Button 1
      </button>
    </div>

  </div>
  <div class="mt-auto">
    <button class="btn btn-danger col-12 p-3">Button 2</button>
  </div>
</div>

JS Fiddle: https://jsfiddle.net/yg3s5pk4/

Sample Output:

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

Learn more about Bootstrap flex utility classes in the documentation.

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

Managing different authentication methods for a single user on Firebase: Tips and Strategies

Currently, I am in the process of developing an authentication system utilizing Firebase. My aim is to incorporate email/password, Google, and Facebook as sign-up and sign-in methods. Initially, everything runs smoothly when a user signs up using each met ...

javascriptreactjsfirebasefirebase-authentication

Passport appears to be experiencing amnesia when it comes to remembering the user

After extensive research online, I have yet to find a solution to my issue. Therefore, I am reaching out here for assistance. I am currently working on implementing sessions with Passport. The registration and login functionalities are functioning properl ...

javascriptnode.jsexpresspassport.jspassport-local

Tips for updating the class of a button upon clicking it

I have a dilemma with my two buttons - one is green and the other has no background. I want them to change appearance when clicked, from green to one with a dashed border-bottom style. Below is the HTML code for these buttons: <div class="btns"> ...

javascriptjquerycssbutton

Setting the initial state for your ngrx store application is a crucial step in ensuring the

I'm completely new to ngrx and I'm currently exploring how to handle state management with it. In my application, each staff member (agent) is associated with a group of customers. I'm struggling to define the initial state for each agent ob ...

javascriptangulartypescriptngrxngrx-store

Exploring the possibilities of developing WebComponents within Angular using TypeScript

My Angular application was originally created using the default method with ng new project-name". However, for performance reasons, I had to incorporate single standard WebComponents. The JavaScript code associated with these components is stored in a ...

javascriptangulartypescriptweb-component

Center aligning text within an accordion button using Bootstrap 5 framework

I'm struggling to center align the text inside the accordion button while keeping the arrow on the right side Here is an example of what I'm trying to achieve: https://i.sstatic.net/2brrY.png In the Bootstrap 5 documentation, there's an e ...

htmlcssbootstrap-5

Guide on crafting a scrollable and touch-responsive grid using CSS and JavaScript

I am seeking guidance on creating a grid with a variable number of columns and rows. It should be contained within a separate div and should not interfere with other objects or alter the parent's size. The grid needs to be square and I am currently u ...

javascriptcsslaraveltailwind-csslaravel-livewire

Having trouble decoding JWE using the NPM Jose library

Although I can successfully decrypt a JWE using an older version of jose, I'm facing difficulties in utilizing the latest version API. The headers of my token are as follows: { "alg": "A128KW", "enc": "A128CBC-H ...

javascriptnode.jsencryptionjwejose

Unexpected failure when using FormData in Ajax callback for large files

I have a file upload control where I can upload various types of files. After getting the file, I store it in a FormData object and make an ajax call to my controller. Everything works well with images and small .mp3 files. However, when I try to upload .m ...

javascriptajaxasp.net-mvcmultipartform-dataform-data

Display words on screen and then alter hue using HTML and CSS

Is there a way to dynamically change the color of text inside <a> tags from black to red after a specific time interval and keep it permanently red? do { document.getElementById("code").innerHTML +="<a>Hello World</a><br>"; awa ...

javascripthtmlcsstextcolors

Building an instance using an object and an array with Vue.js 2.0

I am working with an array and an object created in Vue.js, and my goal is to combine them into a single 'selection' array following this format: selection[ {food: Chicken, quantity: 3}, {food: Rice, quantity: 2}, {food: Pasta, quantity: 1} ]; ...

javascriptarraysobjectvue.jsvuejs2

Update the knockout values prior to submitting them to the server

Imagine having a ViewModel structured like this with prices ranging from 1 to 100... var Item = { price1: ko.observable(), price2: ko.observable(), price3: ko.observable(), ... ... price100: ko.observable(), name: ko.observable ...

javascriptjqueryknockout.js

Script in Javascript halting Internet Explorer's operation

I'm encountering a problem with Internet Explorer freezing due to the following code. This code is part of a project that focuses on handling student grades: var array1 = StudentGradeAreadHugeList(); var nextArrayItem = function() { var grade = ...

javascript

A guide on transferring variables to sessions instead of passing them through the URL in PHP

<a class='okok' id='$file' href='" . $_SERVER['PHP_SELF'] . "?file=" . $file . "'>$file</a> The given code snippet represents a hyperlink that passes the filename to the 'file' variable, which ...

javascriptphpjqueryajaxsession

Create a duplicate of array A in JavaScript with the keys transferred to array B, then make modifications to the elements in

Currently, I am delving into JavaScript in regards to array assignment and cloning. A puzzling issue arises when attempting to clone the elements of array A into array B using the spread operator "...". Surprisingly, when modifying the elements in array B, ...

javascriptarraysobject

retrieve the most recent file following a $group operation

I am currently utilizing the official MongoDB driver specifically designed for Node.js. This is how my message data is organized. Each post consists of a timestamp, a user ID, and a topic ID. [ { "_id" : ObjectId("5b0abb48b20c1b4b92365145"), "t ...

javascriptnode.jsmongodb

Unleash the full potential of React and material-ui with the Raised Button feature - find out how to effortlessly keep all

This snippet showcases the code for my custom Buttons component: import React from 'react'; import RaisedButton from 'material-ui/RaisedButton'; const style = { button: { margin: 2, padding: 0, minWidth: 1, }, }; cons ...

javascriptreactjsmaterial-ui

Basic game of tic tac toe using JavaScript and jQuery

Teaching myself the ropes of JavaScript/jQuery, I decided to dive into building a simple tic tac toe game. Following this example as a guide, I embarked on creating my own version. While most parts seem to be working smoothly, there's one problem that ...

javascriptjquery

Issue: The object is unable to be executed as a function, resulting in the failure to return an array

Currently, I am extracting table values from the UI row by row. This involves clicking on each row and retrieving the corresponding data. exports.getTableData = function(callback){     var uiArray =[];     var count;         aLib.loadCheck(c ...

javascriptarraysnode.jswebdriver-io

Flask static serving causes Vue app to not render

Currently, I am in the process of developing a basic web application utilizing Flask for the backend and Vue for the client side. Here is an overview of my folder structure: . ├── client/ │ ├── dist/ │ │ ├── css/ │ │ ...

pythonvue.jsflaskvuejs3