Adjust the position of the content to the bottom for a form-group in Bootstrap v4

Currently, I am facing an issue where my label is overflowing and wrapping around the input field, causing it not to align at the bottom of the div. Is there a straightforward CSS solution for this problem?

I have experimented with position relative/absolute, display inline block + vertical align bottom, etc.

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

Any guidance or assistance on this matter would be greatly appreciated!

<div class="form-row m-0">
<div class="col-md-6 p-0">
    <div class="col bg-success form-group p-2 m-0 h-100"><label for="theHours"><b>Hours</b></label><input class="form-control" type="text" id="theHours" aria-describedby="hoursHelp"></div>
</div>
<div class="col-md-6 p-0">
    <div class="col bg-success form-group p-2 m-0 h-100"><label for="theOrder"><b>Work Order / Notification / Emergency</b></label><input class="form-control" type="text" id="theOrder" aria-describedby="orderHelp"></div>
</div>

javascripttwitter-bootstrapformsbootstrap-4

Answer №1

To achieve the desired layout, avoid using the inner col class. Instead, modify the display property of col-md-6 columns to flex and set their direction to column. Then, align them as needed.

  1. d-flex - changes the display of the column to flex
  2. flex-column - alters the direction of the column to a column
  3. justify-content-end - aligns the content of the columns at the end. Alternatively, you can use justify-content-between.

The reason for using col-6 instead of col-md-6 is that col-md-6 applies only to screen sizes greater than or equal to ≥768px.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="form-row m-0">
  <div class="col-6 bg-success form-group p-2 m-0 d-flex flex-column justify-content-end">
    <label for="theHours"><b>Hours</b></label>
    <input class="form-control" type="text" id="theHours" aria-describedby="hoursHelp">
  </div>
  <div class="col-6 p-0 bg-success form-group p-2 m-0 d-flex flex-column justify-content-end">
    <label for="theOrder"><b>Work Order / Notification / Emergency</b></label>
    <input class="form-control" type="text" id="theOrder" aria-describedby="orderHelp">
  </div>
</div>

Check out this CodePen link for more details.

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

``There seems to be a problem regarding the alignment of elements in

Having some trouble with centering the grid on my simple website. As a beginner in Bootstrap, I'm seeking guidance. Will be grateful for any help you can offer! Please bear with me as I learn. <html> <head> <meta charset="utf8"/& ...

htmltwitter-bootstrapcss

Having difficulty submitting a form with ajax, while accomplishing the same task effortlessly without ajax

I have been experimenting with submitting a form using ajax to the same .php file. When I submit the form without ajax directly (form action), the database gets updated. However, when I try the same process with ajax, there is no change in the database. H ...

javascriptphphtmlcssajax

Embrace positive practices when working with nodejs

What is the best way to enhance the readability of my code by replacing the extensive use of if and else if statements when detecting different file extensions? Currently, I have over 30 else ifs in my actual code which makes it look cluttered. // Retrie ...

javascriptnode.jsasynchronouschatbot

Immersive pop-up interface displaying a variety of embedded videos simultaneously

I am a beginner in JavaScript and I came across a CodePen that does exactly what I need, but it currently only works for one embedded video. What I aim to achieve is similar functionality, but with 6 videos. (function ($) { 'use strict'; ...

javascripthtmlcsspopupcodepen

There was an issue with the v-on handler: "An error occurred because it was unable to read properties of an undefined value (specifically 'input')."

Can anyone help me? When I click the icon inside the avatar, I want to select a file. But I'm getting an error: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'input'). Could anyone help me? <v-row v-for=" ...

javascriptvue.jsvuetify.js

Discover how to retrieve the calculated percentage within CSS with the assistance of jQuery specifically designed for Webkit

I'm currently working on a simple sliding animation. However, the div that slides in is utilizing percentages for its width and right positioning. The issue arises specifically in Webkit browsers. When using jQuery to retrieve the value, it returns t ...

javascriptjquerycss

What could be causing the Bootstrap navbar to not toggle when the button is clicked?

Attempting to create a website featuring a collapsible navbar, but encountering some issues. The button is properly identified with the correct ID assigned. Jquery and bootstrap have been included in the necessary order at the bottom of the body. However, ...

htmlcssbootstrap-4

What could be the reason for the child element not occupying the full height of its parent container?

* { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 50px; } .navbar { display: flex; align-items: center; justify-content: center; color: darkgreen; font-family: 'Vollkorn', serif; font-size: 1.2rem; font-w ...

javascripthtmlcss

JQUERY function fails to execute following the invocation of an array

There is an array named NAME being created. Weirdly, the code seems to be functioning fine for alert('test1') but encounters an issue when reaching alert('test2') $(document).on('submit','form',function() { ...

javascriptjquery

Is it possible to save the project by generating incremental JSON diffs?

In the process of developing a web-based paint program, I have implemented a system where the user's artwork state is saved as a json object. Each time an addition is made to the client's undo stack (which consists of json objects describing the ...

javascriptdjangojson

Alternatives to using $.getJSON()

When utilizing jQuery within the React/Redux environment, what alternative library is typically used for handling straightforward REST calls instead of $.getJSON or $.postJSON? Is there a widely-used option that functions similarly to node's http mod ...

javascriptajaxrestreactjsredux

What is the best way to stop a series of Ajax promises from continuing?

Managing multiple ajax requests that are dependent on each other can be tricky, especially when you need to stop the chain if one of the requests returns false. Check out this sample code snippet below: // Implementing a promise chain return this.getBan ...

javascriptajaxember.jspromise

Encountering error ORA-12514 when utilizing the node oracle-db npm package

At the moment, I am immersed in a project that relies on utilizing oracle for its backend. Following the instructions provided in this link, I successfully installed node-oracledb on my Mac using npm. The contents of my file are as follows: var oracledb = ...

javascriptnode.jsoracleoracle11gnpm

Rearrange the elements in an array containing objects

I am working with an array of objects: const array = [ { id: "5a2524432b68c725c06ac987", customOrder: 1, name: "One", }, { id: "5a2524432b68sgs25c06ac987", customOrder: 2, name: "Two", }, { id: "5a252wfew32b68c725c06a ...

javascriptecmascript-6

Automatically refreshing the canvas whenever the value of an HTML element is modified in Javascript

Below is the javascript code that is relevant <script> $.fn.ready(function() { var source = $('#source').val(); Meme('url1', 'canvas','',''); $('#top-line, #bottom-li ...

javascriptjqueryhtmlcsscanvas

A collection of asynchronous requests stemming from a sole request

I am facing a unique ajax scenario that is proving to be quite challenging for me. Here is the specific sequence of events that I need to coordinate: An initial request returns an array of ID numbers. A separate request needs to be sent for each ID in ...

javascriptjqueryarraysajaxjquery-deferred

The resizing of images is limited to when the browser is refreshed for responsive

Hey there, I'm currently facing an issue with a responsive image gallery using jQuery cycle. If you want to check out my fiddle, here's the link - https://jsfiddle.net/qxyodctm/5/ <html>See jsfiddle</html> The problem occurs when t ...

jquerycsstwitter-bootstrapjquery-cycleresponsive-images

Create and export a global function in your webpack configuration file (webpack.config.js) that can be accessed and utilized

Looking to dive into webpack for the first time. I am interested in exporting a global function, akin to how variables are exported using webpack.EnvironmentPlugin, in order to utilize it in typescript. Experimented with the code snippet below just to und ...

javascripttypescriptwebpack

Utilizing multiple instances of date picker components in React.js

Is there a way to update the date on react-datepicker when using multiple instances of the datepicker component? I have encountered an issue with this. Here is the code for the Date picker Component: <DatePicker selected={this.state.from} onChange ...

javascriptreactjsdatepickerreact-datepicker

The functionality of Jquery radio:checked is not behaving as desired

Currently, I am in the process of learning jquery. I have created a basic html file with some jquery validations, however, they are not functioning as expected. The main problem is: If I input my name first and then check the checkbox, everything works co ...

javascriptjquery