Achieving Vertical Alignment of Input Fields with Varying Label Lengths in Bootstrap 4.3.1

Take a look at this code snippet:

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Bootstrap Example</title>
  </head>

  <body>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <div class="container">
      <div class="row">
        <div class="col">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-default">First Field</span>
            </div>
            <input type="text" class="form-control" aria-label="First Field" aria-describedby="inputGroup-sizing-default">
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-default">Second Field</span>
            </div>
            <input type="text" class="form-control" aria-label="Second Field" aria-describedby="inputGroup-sizing-default">
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

Here is the link for reference.

Question:

Is there a way to align the input fields vertically in order to improve readability? The image below provides more details.

https://i.sstatic.net/7oHDn.png

Your assistance would be highly appreciated.

htmlcssbootstrap-4alignmentvertical-alignment

Answer №1

You should consider utilizing the min-width property.

.input-group-text{
   min-width:120px;
}
<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Bootstrap Example</title>
  </head>

  <body>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <div class="container">
      <div class="row">
        <div class="col">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-default">First Field</span>
            </div>
            <input type="text" class="form-control" aria-label="First Field" aria-describedby="inputGroup-sizing-default">
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-default">Second Field</span>
            </div>
            <input type="text" class="form-control" aria-label="Second Field" aria-describedby="inputGroup-sizing-default">
          </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

Anime.js: Grid layout causing issues with displaying simple text animations

I'm attempting to create a text animation within a grid layout using the anime.js library, but unfortunately, the animation isn't displaying. The project consists of just one HTML file. The JavaScript code: <script> import anime from &ap ...

javascripthtmlcssanime.js

Is there a tool available that can provide links to all websites within a specific domain?

Can all the links from a given URL be extracted to understand the structure of a website? For instance: www.samplewebsite.com www.samplewebsite.com/page1.aspx www.samplewebsite.com/page2.aspx www.samplewebsite.com/page3.aspx www.samplewebsite.com/page1.a ...

c#javascriptasp.nethtml

Is it possible for a complete CSS ".class" to possess the specificity of '!important'? [closed]

It's quite challenging to determine the exact inquiry being made here. This question lacks clarity, precision, completeness, specificity, and is overly general or rhetorical, making it impossible to answer in its current state. To obtain assistance in ...

jquerycssclasscss-specificity

Calculating the number of characters in each textarea by iterating through them with a

I am currently working on a project where I need to implement a character count feature for each field in my form. Below is a snippet of code from my C# file: List<Document> record= _repository.Document.GetChecklist(entity.checklist, Convert.ToInt32( ...

jquerycssasp.net

Stop flex items from displaying horizontally

I'm having an issue with flexbox where I want each item in a block to be on its own row. Specifically, I want the orange square to be positioned above the text, but it's currently displaying beside it due to using flex. Does anyone have a solutio ...

htmlcssflexbox

Creating a unique and personalized dual-row navigation bar using Bootstrap

Currently, I am striving to achieve a "conflict free" two-row fixed-top navbar in Bootstrap 3. I am unsure if it necessitates two separate "navbars" according to the official Bootstrap definition. While I possess decent coding skills, my knowledge of the B ...

jqueryhtmlcsstwitter-bootstrap

What causes certain divs to protrude when the parent div has overflow:hidden property enabled?

Issue: I am facing difficulty aligning all elements within one div without any overflow issues. Even with the parent div set to overflow:hidden, some child divs are protruding out of the container. How can I resolve this problem? Example: http://jsfiddle. ...

cssresponsive-design

How can I place text on top of an image with a filter using Bootstrap?

I am facing a challenge of overlaying text on an image with a tinted background color and opacity. While working with Bootstrap 4, I suspect that some classes might be conflicting with each other. This is my current setup: Index.cshtml: <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Exploring the world of jQuery sliders and dynamically updating div container content

Alright, here's what I have come up with so far: First, take a look at this website to see the idea I am trying to explain: What I am aiming for is this concept: A visitor goes to the provided website and wants to know what type of sandwich they can ...

javascriptjqueryhtml

What is the best way to figure out the resolution of a computer screen using javascript?

It came to my attention that the <canvas> element can be adjusted to have varying scales. For example, if I specify the CSS width and height as 100px but use JavaScript to set them to 200px, the element will shrink so that everything drawn on it appe ...

javascripthtmlcsscanvas

creating PHP buttons to update inventory

As a newcomer to AJAX and PHP, I am facing some challenges with an inventory management system built using phpmyadmin and wamp. The registration/login system is functioning well. However, upon user login, a table displaying all inventory items is generated ...

phphtmlmysqlajax

Saving and restoring the cursor/caret position in CKEditor 4: A how-to guide

While browsing similar questions on this topic, I realized that none of them really addressed my specific issue (or maybe I just need a better understanding of the concept). Initially, I embarked on the journey to acquire and manipulate the caret position ...

htmldomckeditorrangeckeditor4.x

AngularJs FileList Drag and Drop Feature

Being brand new to front-end development, I decided it would be a fun challenge to implement drag and drop functionality on an existing upload page. However, as I began integrating ng-flow (a directive that helps with drag and drop), I encountered difficul ...

javascripthtmlangularjsng-flow

Designing a div with a proportional size amidst elements of fixed dimensions

I need help figuring out how to create a dynamically sized div based on the browser's height. I'm not sure where to start or how to approach this problem. The layout I have in mind includes a 50px high header, followed by the dynamic div and the ...

csshtml

Toggle the radio button selection

$("input[type='radio']").each(function() { if ($(this).is(":checked")) { $(this).css('background', 'blue'); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> &l ...

javascriptjqueryhtml

The auto-fill feature provided by Google on my form

On my website, I have a form that redirects textbox input to www.google.com/search?q=.... Is there a way to incorporate the autocomplete / autofill features provided by Google when searching on google.com? I've noticed that Firefox uses Google's ...

htmlformsautocompletegoogle-api

Tips for aligning a div underneath another div in a centered position

I am attempting to align .rij_lessenrooster below .rij_weekdagen so that it is centered under each day. The teacher advised me to create a column and then try it, but it did not resolve the alignment issue. The .rij_weekdagen consistently appears off to th ...

htmlcssflexbox

Switching from a top to bottom position can be quite the challenge for many

If there's a more efficient method for accomplishing what I'm about to inquire about, please inform me. So far, this is the best solution I could devise. I am looking to have a series of divs that enclose a sliding div within them. The sliding d ...

css

Guide to positioning a toolbar within an element when hovering over it in HTML with the help of JQuery

function attachMenuBar() { $('body').on('mouseover mouseout', '*:not(.printToolBar)', function (e) { if (this === e.target) { (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.t ...

javascriptjqueryhtmlcss

Techniques for breaking down large CSS files into modules and combining multiple smaller CSS files

My website's CSS file is currently massive, containing site-wide selectors in a file named Mondo.css. While this setup has been effective for ensuring users only need to download the file once, I've recently developed a widget that requires its o ...

cssbrowserlessaggregation