Alignment of labels at the same height in Bootstrap 4 forms

Is there a simple way to ensure proper alignment of labels in Bootstrap 4 forms, especially when some labels in the same form-row are longer than others?

Check out this example on jsFiddle

Here are some visual examples:

Incorrect label alignment

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

Correct label alignment

https://i.sstatic.net/7kKbq.jpg

<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email</label>

Thank you for any help!

Answer №1

Insert the align-items-end class into the form-row like this-

<div class="form-row align-items-end">
Please refer to the example provided below

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d7cdd6cdd0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<form class="p-5">
  <div class="form-row align-items-end">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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

Choose all stylus/css imports except for those with a specific ending

How can a rule be correctly written in a .styl file to import all files from selected folders except those that contain the -ie suffix (e.g. bar-ie.style)? What is the best way to achieve this? The code below is not functioning as expected: import([&apos ...

Utilize jQuery to apply inline styles to dynamically created div elements

I am attempting to apply inline styles to a div using jQuery. The current state of the div, as seen in Firebug, is shown below: https://i.sstatic.net/rqhIc.jpg My goal is to retain the existing CSS while adding margin-left:0 and margin-right:0 to the cur ...

The most recent version of Bootstrap is experiencing issues with responsiveness in the navbar

I have set up Bootstrap as follows: "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", "bootstrap": "^4.0.0-beta" Now, I wanted to add a navbar, so I created the following code: <nav class="navbar navbar-toggleable-md navbar-light bg-faded" *ngIf="! ...

Placing a moveable object in a designated spot for dropping at the desired location

I've been attempting to clone and drop a draggable object at the exact position within a droppable area where the drop event takes place. While I have come across examples online that demonstrate appending draggables to droppables, they all tend to re ...

perform jquery sequentially

Currently, I am facing an issue with a form that has two separate jQuery functions applied to it. The problem is that I require the first function to execute before the second one, only if the first one is successful. Essentially, the form consists of two ...

In the Twitter Bootstrap documentation, which element is utilized for the sidebar?

I'm curious about the most efficient method for creating a sidebar like this using Bootstrap 4. https://i.sstatic.net/3eKwN.png From what I can see, it appears to be a custom component designed specifically for the documentation page, rather than ...

Applying a CSS class to a newly generated row with JavaScript

I have a JSP page where I dynamically add rows to a table using a different Javascript function than in my previous query. While I can add elements to the table columns, I'm unable to apply a style class that is defined in a CSS file. Here is my Java ...

Implementing div elements in a carousel of images

I've been working on an image slider that halts scrolling when the mouse hovers over it. However, I'd like to use div tags instead of image tags to create custom shapes within the slider using CSS. Does anyone have any advice on how to achieve th ...

How can I add 0-5 images to a column without causing any distortion in the row?

I'm having trouble adding a series of images to rows in my Bootstrap 4 project. The source assets are large by default and I'm struggling with scaling them properly without affecting other columns. Here's a visual representation of what I cu ...

The Angular Material FAB Speed Dial feature is causing a slight offset within the Toolbar

Attempting to incorporate design examples from the angular material site, I am utilizing Angular Material 1.0.0RC5. I am aiming to position the FAB Speedial within the Toolbar, similar to the example demonstrated on their site: https://material.angularjs. ...

Using NgFor to duplicate a div containing a form and link the inputs to NgModel

Working on a form using Angular to store datasets with inputs for name and description. Users can add multiple datasets by clicking the "Add" button. To achieve this, I initialized a dataset list with one element in app.component.ts. Using NgFor, it dynam ...

Get rid of the white border surrounding the object tag

Help needed in removing a thin white border around the object tag. Below is the code snippet and what has been attempted: .hr-ob { background-color: #003262; width: 50px; height: 10px; border: none; outline: none; ...

The FaceBook modal is failing to appear

Attempting to implement FaceBook Login through a modal. Upon clicking the button below, the FaceBook Login Modal should appear. <li> <a href="#sign-in-dialog" class="login sign-btn" title="Sign In">Sign In</a> </li> The HTML co ...

Alternative form for non-javascript browsers in the absence of script

I'm currently working on a landing page for an upcoming product, and I've run into a bit of a snag. <form novalidate method="POST" class="subscribe-form"> <noscript> </form> <form method="POST" action="/ ...

What is the process for adding color to HTML elements?

Is there a way to assign unique random colors to each individual p tag in ReactJS? function App() { return ( <div> <p style={{ color: "#7fbd73" }}>Hi</p> <p style={{ color: "#3a82e4" }}>Hello</p> < ...

Creating a visual that when clicked, reveals an enlarged version at a different location

Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect? Image not hovered: ht ...

CSS Alignment in React with Material UI

Is there a way to align one button to the left while centering the other two? To see an example in Codesandbox, please visit HERE <DialogActions sx={{ justifyContent: "center" }}> <Button>Left</Button> <Button on ...

Ensure that the bootstrap popover remains hidden when clicked outside of it, unless there is an element within the

Currently, I am facing an issue with a Bootstrap popover that contains a text input. My goal is to have the popover hide if the user clicks outside of it, and remain open if any elements inside the popover, like the input field, receive focus. Unfortunate ...

Using identical class names in different components was not possible as the CSS was not being contained within the styled component's scope

I am encountering a frustrating issue that seems to defy the essence of CSS in JS. The problem arises when I use styled-components and attempt to apply a classname that is already used higher up in the React component tree within a styled component. Surpri ...

The submit button click does not trigger the execution of ajax code

I'm faced with a challenge when trying to implement an ajax call in my form. My goal is to display a spinner on the screen to indicate that the form is processing and submitting information. However, it seems that the ajax call is not being triggered ...