Arranging two buttons in the footer of a Bootstrap card

I'm currently working with a Bootstrap Card element that includes two buttons in the footer section. My goal is to position one button at the absolute center of the footer, while having a smaller button aligned to the left side of the footer. Additionally, both buttons need to be vertically centered within the footer.

Below is a snippet of my code:

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div> 
    <div class="card-footer">      
      <div class="btn-wrapper text-center">
        <a class="btn btn-secondary text-dark btn-sm">Remove</a> 
        <a class="btn btn-warning" style="">Next</a>
      </div>
    </div>
  </div>

The current setup centers both buttons. However, I specifically want the "Next" button to be centralized and the "Remove" button to be positioned to the left. How can I achieve this layout?

You can view the example on jsbin here: https://jsbin.com/vesobayuci/1/edit?html,js,output

cssbootstrap-4

Answer №1

Take a look at the demonstration here: 

.btn-wrapper .btn-secondary {
  line-height: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Card Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Card Header and Footer</h2>
    <div class="card">
      <div class="card-header">Header</div>
      <div class="card-body">Content</div>
      <div class="card-footer">
        <div class="btn-wrapper text-center d-flex justify-content-between">
          <a class="btn btn-secondary  btn-sm text-white d-flex align-items-center">Remove</a>
          <a class="btn btn-warning" style="">Next</a>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Answer №2

Make sure to take a look at the latest JSBIN

.delete-btn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.btn-container {
  position: relative;
}

Answer №3

Positioning them in a specific way is achievable

.card-footer .btn-wrapper{
  position: relative;
  min-height: 40px;
}

.card-footer .btn-wrapper .btn{
  position: absolute;
  top: 50%;
}

.card-footer .btn-wrapper .btn-warning{
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-footer .btn-wrapper .btn-secondary{
  left: 0;
  transform: translate(0, -50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <h2>Card Header and Footer</h2>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div> 
    <div class="card-footer">      
      <div class="btn-wrapper text-center">
        <a class="btn btn-secondary pull-left text-dark btn-sm">Remove</a> 
        <a class="btn btn-warning" style="">Next</a>
      </div>
    </div>
  </div>
</div>

Answer №4

If you want to achieve this effect, simply utilize the transform property along with Bootstrap 4 classes

.btn-warning {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Card Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <h2>Card Header and Footer</h2>
    <div class="card">
      <div class="card-header">Header</div>
      <div class="card-body">Content</div>
      <div class="card-footer">
        <div class="btn-wrapper position-relative">
          <a class="btn btn-secondary text-dark btn-sm">Remove</a>
          <a class="btn btn-warning position-absolute">Next</a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

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

Implementing and styling jQuery hamburger navigation menu

I'm struggling with implementing functionality to my hamburger menu. I've spent a day working on the design, but now I need it to actually work as intended. I have tried combining different code snippets I found, but as I am new to jQuery, I&apos ...

javascriptjqueryhtmlcsshamburger-menu

HTML/CSS flowchart illustration

Is there a user-friendly method to create a flow or swimline diagram without relying on scripting or tables? Specifically, I'm looking for a way to display different hosts sending packets (with hosts along the X axis, time along the Y axis, and arrows ...

htmlcssdiagram

How to position child divs at the center of a parent div

I am looking to set the maximum width of the "circlecontainer" to 300px, but I also want my 4 child divs (each with a max width of 300px) to remain centered in the browser when it exceeds a width of 1200px. Currently, they are aligned to the left side. Be ...

htmlcss

Show a background picture while hovering on the main image

Is there a way to make the background image appear when hovering over the original image and disappear when no longer hovering? Below is a snippet of my HTML and CSS. Is there a straightforward CSS command to hide the original image or show the background ...

htmlcss

Creating a Pinterest-style grid layout for dynamic images in a React application using CSS Grid

I am attempting to use CSS grid to create a gallery for images, similar to Pinterest. I want pictures of different heights to be placed next to each other and fill the empty space. However, all the examples I have seen involve adding different classes to e ...

cssreactjscss-griddynamic-programming

Designing a webpage using Bootstrap 4.1.2 framework

My goal is to achieve a layout similar to https://i.sstatic.net/xEsHO.png. I am utilizing bootstrap-grid.min.css from bootstrap-4.1.2 What could I be doing incorrectly? Check out My code <div class="wrapper d-flex flex-column" style="min-height: ...

headerbootstrap-4footerprogram-entry-point

Changing the direction of the submenu to the left instead of the right

My Bootstrap 4 menu has a submenu that appears to the right of the main menu. However, since the menu is positioned on the far right of the screen, it gets cut off on the right side. I'm looking for a way to make the submenu appear on the left side o ...

htmlcsstwitter-bootstrap-4

Issue of Modal not hiding persists despite attempted solutions using JS, jQuery, and CSS

I am attempting to display a modal exclusively on mobile devices. Despite my confidence in the correctness of my JavaScript, it is not functioning as expected. Would anyone be willing to review and provide assistance? <div class="col-5 col-sm-2 ml-au ...

jqueryhtmlcssbootstrap-modalbootstrap-4

Why are the CSS files not being compiled in Rails' application.scss?

After spending the last 3 hours working hard to include my CSS files in the vendor/stylesheet/ directory in application.scss, I'm still not having any luck. The path to the CSS files is: vendor/assets/stylesheets/ Here is my code in Application.scs ...

cssruby-on-railsrubysass

Can a CSS class be designed to have a value that changes dynamically?

Let's say we have some div elements that look like this: <div class="mystyle-10">Padding 10px</div> <div class="mystyle-20">Padding 20px</div> <div class="mystyle-30">Padding 30px</div> Would it be possible to c ...

css

Attempting to conceal an HTML 'label' element by employing CSS 'hide' properties

Why is it so difficult to hide a checkbox that says "Remember Me" on my membership site login form? The HTML code snippet causing the issue: <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</la ...

css

How can I trigger the second animation for an object that is constantly moving within a specific range in the first animation?

I am looking to create a simulation of rising and falling sea levels. Currently, when I click the button, the level rises from its starting point to the top, but I am unsure how to achieve this effect in my code. Below is the code I have written so far, an ...

javascriptcssanimation

What tag would allow me to seamlessly customize the text language choice on a website using CSS to my liking?

Here are two HTML snippets for allowing the user to choose a language: One uses <select> and <option>s, The other uses a <div> with alternating <input>/<label>s. I plan to select one of these methods (or find a better one) a ...

htmlcssinputmultiple-choice

change visibility:hidden to visible in a css class using JavaScript

I've put together a list of Game of Thrones characters who might meet their demise (no spoilers included). However, I'm struggling with removing a CSS class as part of my task. Simply deleting the CSS is not the solution I am looking for. I' ...

javascripthtmlcss

A div element with a set width that contains an inline child element

I recently created a basic HTML document with two elements: a div with a fixed width, and an image placed after it. According to my understanding, images are inline elements, so I expected the image to appear next to the div on the right side since there ...

htmlcss

Reverse Text without Using CSS Transformation

I have a unique clock design where the hands are actually words (for example: < p >WORD< /p >), but when they pass 180deg, they naturally turn upside down. Normally, flipping them using transform properties like rotate would be simple, but sinc ...

javascripthtmlcss

Guide to aligning text in a row using Bootstrap 4

One issue that is persisting is the fact that <p> and <h1> are displaying on the same line and despite my efforts, I am unable to center them properly. HTML <div class="container"> <div class="row" id="appSummary"> <h1> ...

twitter-bootstrapbootstrap-4

The flexbox container refuses to expand, causing the content to spill over the edges of

I am facing an issue with my flexbox container in React and Bootstrap. Despite following the correct grid system of container, row, and column, my container is stuck at a fixed height causing the content to run off the page when there are too many elements ...

htmlcss

How can I implement user-specific changes using Flask?

I am a beginner with Flask and I am working on a project where users can sign up, and if the admin clicks a button next to their name, the user's homepage will change. Below is the Flask code snippet: from flask import Flask, redirect, url_for, render ...

javascriptpythonhtmlcssflask

What is the process for aligning a Component to the right within the Navbar in an AppLayout

In my project, the MainView class is an extension of an AppLayout. I am attempting to populate the Navbar with a logo on the left and the user ID on the right. Despite my efforts, both components keep aligning to the left side. Desired Navbar layout: ...

javahtmlcssvaadinvaadin14