Alignment of buttons in a row using Bootstrap 4

I'm facing an issue with aligning two buttons in a bootstrap 4 flex row vertically. I want them to align at the bottom with the inputs on the same row.

https://i.sstatic.net/66OOn.jpg

You can view the fiddle here.

Here's the code snippet:

<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
    <div class="row form-group">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">O/C</label>
            <input id="OC" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
                Signature
            </button>
        </div>
    </div>
    <br>
    <div class="row form-group">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">Witness</label>
            <input id="Witness" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="WitnessName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
                Witness Signature
            </button>
        </div>
    </div>
</div>

I've attempted using mt-auto on the <button> element following this Stack Overflow answer but it didn't seem to have any effect.

d-flex and flex-column classes are already included in card-body.

I'm looking for a solution that utilizes bootstrap helper utilities. Additionally, the buttons are touching the inputs on small screens.

https://i.sstatic.net/lkPmF.jpg

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

Perhaps incorporating the code align-items-end into each form-group group could be beneficial:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
    <div class="row form-group  align-items-end">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">O/C</label>
            <input id="OC" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2 ">
            <button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
                Signature
            </button>
        </div>
    </div>
    <br>
    <div class="row form-group align-items-end">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OCQID">Witness</label>
            <input id="Witness" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="WitnessName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
                Witness Signature
            </button>
        </div>
    </div>
</div>

See the outcome:

Answer №2

One great way to align items is by applying the .align-items-baseline class after utilizing .flex row.

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

What is the best way to implement JavaScript for loading and removing content based on button clicks on a webpage?

I'm in need of a vanilla JavaScript solution (I know JQuery options exist, but I want to stick to vanilla JS for now)? Currently, I am using a simple page as a testing ground for my ongoing project. The page consists of two buttons that load HTML pag ...

javascripthtmldom

The menu on Android gets cut off by the status bar

Seems like an easy fix, our menu is getting cut off by the status bar on certain Android devices as shown in this screenshot. Any suggestions on how to resolve this issue? Could it be related to z-index properties? https://i.sstatic.net/Jh5SZ.png ...

androidhtmlcssstatusbar

Using AngularJS to handle click events and blur events

I am attempting to dynamically change the class based on user interaction in my code. The class should switch between "large" and "active" depending on whether the input field is filled or not. Please see the modified script below. <div class="snippe ...

javascripthtmlcssangularjs

A guide on interpreting Ascii code within a character using PHP

String received in the following format solr/?key=color&facet=Blue%26keyword%3Dwoo Desired string format is as follows solr/?key=color&facet=Blue&keyword=woo ...

phphtmlasciidecodeurldecode

Despite my usage of className, I still encounter the error message "Error: Invalid DOM property `class`."

I am having trouble debugging this issue as I am unsure of the exact location of the error. Here is the link to the repository: https://github.com/kstaver/React-Portfolio Error #2. There are three more promise rejection errors present, which I will addres ...

javascripthtmlcssnode.jsreactjs

Perform a function on Angular 5

In my database, there is a table named settings. I have 2 backend endpoints: one for getting settings and another for updating settings. Now I am working on creating an Angular window to edit this table. I've set up an Angular Service to retrieve va ...

htmlangulartypescriptfrontend

How can one generate an HTML element using a DOM "element"?

When extracting an element from an HTML page, one can utilize a DOM method like .getElementById(). This method provides a JavaScript object containing a comprehensive list of the element's properties. An example of this can be seen on a MDN documentat ...

javascripthtmldom

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

cssruby-on-railsnavbarbootstrap-4

Submitting a form in a jQuery Mobile native application to redirect to a different page

I am embarking on my inaugural attempt at developing a native mobile application using jQuery Mobile, which will subsequently be wrapped in PhoneGap. Although I am new to the world of mobile application development, I am currently facing a minor roadblock. ...

phpmysqlcsshtmljquery-mobile

Scrolling automatically within a child element that has a maximum height limit

I am currently developing a console/terminal feature for my website. https://i.stack.imgur.com/AEFNF.jpg My objective is to allow users to input commands and receive output, which might consist of multiple lines of information. When new output is displa ...

javascripthtmlcssvelocity.js

Craft an engaging and dynamic Image map with SVG technology to elevate responsiveness and interactivity

I'm currently working on a website and I need to create two clickable sections on the home page. Each section will lead to a different specialization of the company. To achieve this, I decided to use a square image split into two right-angled triangle ...

javascripthtmlcsssvgresponsive

Arranging Bootstrap dropdown and buttons on a single line

Check out my code snippet here: http://jsfiddle.net/52VtD/7462/ I'm facing an issue where I want to align my dropdown and buttons on the same line, but the dropdown being a div, it stays on the line below. How can I ensure they are on the same line? ...

htmlcsstwitter-bootstrap-3

Adjust the background shade of the HTML <area> tag

I have an image containing over 100 geometrical shapes, each with unique sizes and dimensions. I utilized image mapping to assign IDs to each <area> tag such as <area id="1">. I stored information in a MySQL database about each shape, ...

phpmysqlhtmlcss

Troubleshooting: CSS background opacity issue unresolved

I am having trouble getting a parent div to fill the screen with a transparent background. The code I'm using only results in a solid color background for the parent div. Here is the code snippet I have been working with: .outer { position: rela ...

htmlcss

Having trouble with the dropdown multiselect feature in AngularJS?

I'm striving to develop a straightforward multi-select dropdown utilizing angular JS, bootstrap, and JS. This dropdown should display days (mon, tue...sun), with options for select all and unselect all. My goal is to create a controller that will de- ...

javascripthtmlangularjstwitter-bootstrapweb

Using "bottom: 0" does not function properly in Firefox when using fixed positioning

I'm working on a basic webpage that includes a textarea element which I want to expand to fill the entire screen, leaving a small gap at the top. Everything looks great in Chrome, but in Firefox, the textarea doesn't stretch all the way to the bo ...

cssfirefox

"Interactive feature allowing database updates on a web page without the need for a page

I have a like button that contains an ID pulled from a database. My goal is to click the like button, update the database, and then switch it to unlike without having to reload the page. Below is the code for clarity: **index.php: ** <script type=&quo ...

phphtmlajax

Determine the height of an element in JavaScript or jQuery by using the CSS property height: 0;

I'm facing a challenge in determining the actual height of an element, which currently has a CSS height property set to: height: 0; When I check the console, it shows a height of 0, but I'm looking to find the real height of the element. I als ...

javascriptjquerycssheight

The onDrop event in javascript seems to be failing to execute

My attempts to get the javascript onDrop event to execute when an object is dropped into a drop zone have been unsuccessful. I've tried rewriting it in various ways without any success or error messages. In my search for potential reasons why the ondr ...

javascriptjqueryangularjshtml

Loading CSS files conditionally in Angular2's index.html

Currently, my index.html page features a dark theme: <base href="/"> <html> <head> <title>XXX</title> </head> <body> <link rel="stylesheet" type="text/css" href="assets/dark_room.css"> <my-app ...

javascripthtmlcssangular