What is the best way to vertically center an item at the end of a card in Bootstrap 4?

In the process of creating a long bootstrap card containing two rows of information including a title and description, I encountered an alignment issue with the button. The button is intended to be aligned to the right of the card while remaining centered. Here is the current HTML code segment for the button:

<div class="card card-body">
  <h4>I'm a Card</h4>
  <p>The button should be central, at the end of this card.</p>
  <input type="button"
        class="btn btn-outline-primary align-self-end"
        value=".align-self-end">
</div>

If you view the Codepen link provided (here), you'll notice that the button increases the height of the card by being placed at the bottom. How can I resolve this so that the button remains at the center end of the card without affecting its overall height? Thank you.

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Make sure the card has a flex-direction: row, create a content container, and update the button to have align-self-center instead of align-self-end.

.mycard {
  flex-direction: row!important;
  justify-content: space-between;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card card-body mycard">
        <div>
          <h4>I'm a Card</h4>
          <p>
            The button should be in the center at the end of this card.
          </p>
        </div>
        <input type="button" class="btn btn-outline-primary align-self-center" value="Button">
      </div>
    </div>
  </div>

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

React Native's fetch function appears to be non-responsive

I am experiencing an issue where the fetch function does not seem to fire in my React Native component: import { Button } from 'react-native'; export function Test() { function submit() { console.log('submit'); fetch('h ...

javascriptreactjsreact-nativefetch

Interactive quiz program based on object-oriented principles

As I work on developing a quiz app using JavaScript, everything seems to be going well. However, I've encountered an issue with validation where my code is validating the answers twice - once with the correct answer from the previous question and agai ...

javascriptjqueryobject

Angular ng-repeat not recognizing nested ng-if conditions

Hey there, I'm trying to make sure that only the option corresponding to the code used by the client to log in is displayed. The HTML should show the option that matches the client's login code. View: <div class=""> <select id="custo ...

javascriptangularjs

Error in GraphQL query: specified argument is mandatory, yet not supplied

I recently started learning about graphql and encountered an issue with my query. Here is the code I am using: { product { id } } "message": "Field "product" argument "id" of type "String!" is requir ...

javascripttypescriptgraphqlbackend

Loading a webpack bundled ngModule dynamically to handle a route efficiently

In an effort to make working on our large frontend projects more manageable, we are looking to split them into multiple independently deployed projects. I am attempting to integrate a bundled ngModule to handle a route from within another app. It is crucia ...

javascriptangulartypescriptwebpackangular-router

Obtain the value of a range using JQuery

I made an attempt to retrieve the value of JQuery's range slider when it changes. Here is how I tried: On the HTML/PHP page: <div class="total"> <label for="">Total</label> <p><span class="monthrc"></span ...

javascriptjqueryhtmljquery-ui

What is the best way to attach an onClick event to a PHP-generated link?

Currently, I'm attempting to implement an onclick event on a link within a PHP file. $body2 .= '<td class="sampling-list-td download-link">' . '<a ' . 'class="sampling-list-download" ' . 'href="#" ' . ...

javascriptphpgoogle-analytics

Is there a way to retrieve just the parent's value?

<div class="island biz-owner-reply clearfix"> <div class="biz-owner-reply-header arrange arrange--6"> <div class="arrange_unit biz-owner-reply-photo"> <div class="photo-box pb-30s"> <a hre ...

pythonhtmlseleniumselenium-webdriverxpath

Wicked PDF - Pausing to Allow AJAX Request Completion

My challenge lies in creating a PDF using WickedPDF, where all my static HTML/CSS content loads perfectly. However, I am facing an issue with certain elements on the page which are populated through AJAX requests—they do not appear in the generated PDF. ...

javascriptruby-on-railsajaxpdf-generationwicked-pdf

How about: "Is there a way to show items in a list without using

I have removed the bullet points from an unordered list, but I am having trouble displaying Log with every message. The code I have doesn't seem to be working as expected. I want users to be able to differentiate between messages easily, without seein ...

javascripthtmlcssangularjs

How can I customize the border color and text color of the <TextField/> component in Material-UI without relying on makeStyles?

Can Material-UI be customized using traditional CSS instead of the makeStyles feature? I'm intrigued to learn more about the styling options in Material-UI. I'm aiming to replicate the red style at the bottom using basic CSS techniques. https:/ ...

cssreactjsstylesmaterial-ui

The delete functionality seems to be malfunctioning within Postman

const express = require("express") const app = express() app.use(express.json()) const usersList = [{id :1,name:"naser",age:26},{id :2,name:"mosa",age:46}]; app.post('/users',(req,res)=>{ const newUser = re ...

javascriptnode.jsexpress

The data fail to load correctly with Ajax

I'm having trouble displaying the data from each link in my div. I suspect it may be related to an external .js file that controls the slide up jquery function. Every time a link is clicked, the box slides up but doesn't show any new data. Additi ...

jqueryajaxhtmlload

Concealing specific outcome by implementing jQuery and AJAX with a database

I have an HTML list that appears as follows: <ul> <li>something</li> <li>something1</li> <li>something2</li> <ul> <div class="randomwrapper"> <img src="<?php echo $databaseresult[$i];?& ...

javascriptphpjquerymysqlajax

How can you create a unique record by appending a number in Javascript?

Currently, when a file already exists, I add a timestamp prefix to the filename to ensure it is unique. However, instead of using timestamps, I would like to use an ordinal suffix or simply append a number to the filename. I am considering adding an incr ...

javascriptnode.jstypescript

Adjusting the initial date on the Datepicker

I am currently working on developing a calendar using bootstrap datepicker that should enable users to select a day starting 24 hours from the current date. I came across a similar query posted on Stack Overflow in the past, but the suggested solution isn& ...

jquerytwitter-bootstrapdatepicker

I would appreciate your assistance with the hide button

Is there a way to hide a button after clicking on it? I would greatly appreciate your help! ...

javascripthtml

Modify the color of chips when the checkbox is toggled in Materialize CSS

I have been scouring the internet for a solution to my issue. Currently, I am working with materialize css chips and I am trying to achieve a specific functionality. I want the color of the last chip to turn green and the rest to turn red when a checkbox ...

javascriptjquerycssmaterialize

The Flux Router in React Native

I am diving into the world of React Native and currently working on creating a practice app. The issue I'm facing is with the routing functionality in my project. At the moment, I have three main components: the app itself, the router component, and o ...

javascriptreactjsurl-routingnativeflux

Generating interactive elements in VUE is key

I am unsure about how to dynamically create components without using the <component :is=''> tag. I would like to insert a component into the DOM through JavaScript. Similar to how you would add a new modal in jQuery with $("body").append(" ...

javascriptvue.jsdynamiccomponents