Tips for aligning input vertically across rows with bootstrap 5

I'm currently working on a form layout where each row contains a different number of columns, with labels and inputs in each column. However, I'm facing an issue where the start of the input is not aligned vertically for each row.

I tried using the align-self-center order-2 classes from Bootstrap but it didn't work as expected.

Source Code

<div class="row mt-3">
  <div class="col-md-12">
    ... (source code continued)

The Result https://i.sstatic.net/A3Avk.png

Looking at the code above, how can I ensure that the start of each input in every row is vertically aligned and visually appealing? Are there any specific Bootstrap classes that can help achieve this?

htmlcssbootstrap-5

Answer №1

Include an additional div with the wrapper class as the parent div. Also, apply flex alignment classes for both vertical and horizontal alignment. Set the 'height: 100vh;' property in the wrapper class like the following code snippet.

.wrapper {height: 100vh;}

<div class="row mt-3">
  <div class="col-md-12">
    <div class="row mb-3">
      <div class="col-md-2 col-xs-2">
        <label for="Nationality" class="required control-label col-form-label">Nationality</label>
      </div>
      <div class="col-md-10 col-xs-10 align-self-center order-2">
        <input type="text" class="form-control" name="Nationality" id="Nationality" >
      </div>
    </div>
  </div>
</div>

<div class="row justify-content-center mt-3 align-items-center">
  <div class="col-md-6">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="maritalStatus" class="required control-label col-form-label">maritalStatus</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="maritalStatus" name="maritalStatus">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="education" class="required control-label col-form-label">Education</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="education" name="education">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
</div>

<div class="row justify-content-center mt-3 align-items-center">
  <div class="col-md-4">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="GHI" class="required control-label col-form-label">GHI</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="GHI" name="GHI">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="DEF" class="required control-label col-form-label">DEF</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="DEF" name="DEF">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
  
  <div class="col-md-4">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="ABC" class="required control-label col-form-label">ABC</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="ABC" name="ABC">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
</div>

Answer №2

To achieve the desired layout, consolidate all columns into a single row and incorporate column breaks as outlined in Column breaks. It is important to maintain consistent column widths for all label columns (e.g., col-md-2) based on the recommendations provided in Setting one column width

<link href...;

Text align right for Labels: For a more visually appealing look, consider aligning the labels to the right. Here's an example of how you can achieve this:

<link href...;

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

display a loading spinner for number input fields in HTML5

In my HTML5 project, I am currently utilizing a numeric control (input type="number"). The default behavior displays the spinner (up and down arrows) only on hover. Is there a way to make the spinner permanently visible using CSS or another method? ...

csshtml

In the past, I've crafted buttons and other elements using Photoshop, and subsequently saved them for web use. However, I'm now contemplating whether it's more advantageous to employ CSS in

In the past, I have utilized Photoshop to create visually appealing buttons and footer bars for my websites. However, I'm now pondering if it's more beneficial to utilize CSS for button creation. I've noticed that manually coding them can re ...

css

In Javascript, navigate to a specific section by scrolling down

Currently, I am in the process of enhancing my portfolio website. My goal is to incorporate a CSS class once the user scrolls to a specific section on the page. (I plan to achieve this using a JavaScript event). One approach I am considering is initially ...

javascripthtmlcssdom

Achieving the ideal HTML layout for small screens that differs from larger screens is a common challenge faced by web developers

After implementing the markup code, I achieved the desired layout on large screens. However, when reducing the screen size to a phone level, I require a layout similar to image-3, and on larger screens like laptops, it should resemble image-1. Image-1 and ...

htmlcssbootstrap-4

What causes the variation in results when I input CSS directly into the head section versus linking it from a separate .css file?

As a beginner, I am facing an issue with my CSS. When I directly insert the CSS into the head of my .html file, everything looks perfect. However, when I link my .css file into the head, the very first word ("Holy") does not display properly. I have double ...

htmlcss

What's causing my text to slowly appear while my HTML canvas remains static and unchanged?

Can someone take a look at my code: http://jsfiddle.net/7y9Gp/2/ I've been struggling with trying to fade in and out text or images, but for some reason, my canvas object refuses to cooperate. I've tried swapping the position of the canvas with ...

htmlcsshtml5-canvasfadein

Extend the width of a div element to fit the size of its absolutely positioned

I am facing an issue with a Div that contains multiple absolutely positioned divs. The clickable area of the main div expands to cover the children, but the drawn area does not. I need the drawn area to encompass all the container divs. You can view a JSF ...

css

What is the best way to eliminate empty spaces from the container?

click here check out this image too Just getting the hang of Bootstrap. The first picture looks good, with the image as the background. But on the second picture, there are margins and a background color showing up. How can I get rid of those margins? Her ...

htmlcssbootstrap-5

Refresh numerous HTML <div>'s using data from a JSON object

Looking to automatically update the homepage of my website with the ten most recent "posts" from the server. Here's an example HTML format: <div id="post1"> <p id="link"> </p> </div> <div id="post2"> <p id="li ...

javascriptjqueryhtml

Insert JavaScript into this HTML document

I am looking to integrate the "TimeCircles JavaScript library into my project, but I am facing some challenges in doing it correctly. I plan to include the necessary files at the following location: /js/count-down/timecircles.css and /js/count-down/timecir ...

javascriptjqueryhtml

How can I perform a MySQL UPDATE using 2 parameters received from an AJAX request ($_POST)?

I am currently working on an AJAX call that updates a row in the database based on the ID (pid=38) and changes the value of a column to NULL depending on the button clicked (taskimg0). I have managed to make it work by hardcoding the value $_POST['dtf ...

phpjqueryhtmlmysqlajax

Bootstrap 5: Elevate Your Navigation with a Multi-Level Menu Navbar

I am encountering an issue with a multi-level menu implemented using Bootstrap 5. Although I have created the menu with multiple levels, when I run it, the menu does not display horizontally as expected. Instead, it appears directly below the previous menu ...

bootstrap-4menunavbarbootstrap-5multi-level

"Oops! Looks like there's a reference error - the function you're trying

Javascript: function insertSmiley(a) { var $img = $(a).children('img'); $("#message").insertAtCursor(($("#message").data("wbb").options.bbmode) ? $("#message").data("wbb").toBB($(a)): $(a).html()); return false; } HTML: <a href= ...

javascriptjqueryhtml

Nested foreach loops interacting with one another

I am attempting to execute multiple nested foreach loops and stop at 12 iterations, however the current code I have is not functioning as expected. While it displays the desired output, there seems to be an issue where only the first image in each director ...

phphtml

What is the process for displaying a hidden div using a button?

I'm running into a problem with my project. Here is the code I've been using to hide my div element : @keyframes hideAnimation { to { visibility: hidden; } } To trigger the animation and hide the div after 6 seconds, I have implemented ...

javascripthtmljquerycss

How can the style of a div's :after pseudo-element be modified when hovering over its :before pseudo-element?

Here is some CSS code: .myDiv:before{ content:''; width:15px; height:15px; display:block; } .myDiv:after{ ... ... display:none; } And here is the corresponding HTML code: <div class='myDiv'></div> ...

htmlcsshover

Navigating through child elements within a div using JavaScript

I recently coded a div using this snippet... let sidebarBox = document.createElement("div"); sidebarBox.id = "sidebarBox"; ...and then I created a second div like so... let sidebarAd = document.createElement("div"); sidebarAd.className = "sidebarAd"; B ...

javascripthtml

Change the color of the div's background

My grid created using bootstrap 3 divs consists of a button, followed by a radio button, and then another button. I want to highlight these elements with a consistent background color that stretches across like a single row. Check out my attempt on this f ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is it possible to locate an element using regex in Python while using Selenium?

Is it possible to interact with a dynamically generated dropdown list using Selenium if I only know the phrase present in its id or class name? Can Selenium locate an element using regex and click on it accordingly? ...

javascriptpythonhtmlregexselenium

Is there a different way to invoke PHP within JavaScript?

Is it possible to include PHP code in JavaScript? I have come across information stating that this practice is not recommended: document.getElementById('id1').innerHTML="<?php include my.php?>"; If including PHP directly in JavaScript is ...

javascriptphphtmlweb