Ensure all input-group-addons have equal width with Bootstrap 4

Can the width of all prepend add-ons be made the same?

For example, in this image, I would like Email, License Key 1, & License Key 2 to have equal lengths. Is this achievable?

If I were to forgo add-ons and only use regular labels and a form grid, it would be possible. However, the prepend addons appear much more aesthetically pleasing than regular labels.

https://i.sstatic.net/5G140.png

Relevant HTML:

<main class="container-fluid">
  <form action="/license.process" name="process" id="process" method="post">
      <div class="input-group mb-2">
          <div class="input-group-prepend">
              <label class="input-group-text" id="licenseEmaillabel">
                  Email
              </label>
          </div>
          <input type="text" name="licenseEmail" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f28293887b8c97">[email protected]</a>" class="form-control" aria-describedby="licenseEmaillabel">
      </div>
      <div class="input-group mb-2">
          <div class="input-group-prepend">
              <label class="input-group-text" id="licenseKey1label">
                  License Key 1
              </label>
          </div>
          <input type="text" name="licenseKey1" value="51302c0214d2c2e2c2" class="form-control" aria-describedby="licenseKey1label">
      </div>
      <div class="input-group mb-2">
          <div class="input-group-prepend">
              <label class="input-group-text" id="licenseKey2label">
                  License Key 2
              </label>
          </div>
          <input type="text" name="licenseKey2" value="1e50214376557bd2ce2a03" class="form-control" aria-describedby="licenseKey2label">
      </div>
      <h3 class="error" style="visibility:hidden;">
          &nbsp;
      </h3>
      <input type="submit" name="cancel" value="Cancel" class="btn btn-outline-secondary">
      <input type="submit" name="save" value="Save" class="btn btn-outline-secondary">
      <button onclick="j2html.tags.UnescapedText@d352d4f" type="button" class="btn btn-outline-secondary">
          Get License
      </button>
  </form>
</main>
csstwitter-bootstrapbootstrap-4

Answer №1

Addressing this issue is a bit complex, as each label is enclosed in its own div and not part of a sibling chain. As far as I know, Bootstrap does not provide support for this specific type of sizing, only offering relative sizing through classes (which mainly affects font size). This limits the possibilities when it comes to using flex or child properties. While "hard-coding" may not be the most accurate term, the concept remains the same.

Using min-width in this scenario may not be effective as min-width does not equal width=xx. If, for example, you set min-width to 50px but have a text string longer than that, you encounter the same issue as mentioned earlier. If you want different widths for each label, then utilizing JavaScript may be the only alternative.

Here is a CSS workaround I suggest:

.input-group-prepend {
  width : 35%; /*adjust as needed*/
}

.input-group-prepend label {
  width: 100%;
  overflow: hidden;
}

Another option is to utilize Bootstrap's specific inline styling classes. However, this can lead to code clutter as you would need to manually add these classes to each element. Here is an example:

<div class="input-group-prepend w-50"> /* grows to 50% of parent*/
  <label class="input-group-text w-100" id="licenseEmaillabel"> /* grows to 100% of parent */

Answer №2

Utilizing only the bootstrap classes:

<div class="input-group">
    <div class="input-group-prepend col-3">
        <span class="input-group-text col-12">Name:</span>
    </div>
    <input type="text" class="form-control" placeholder="Name">
</div>
<div class="input-group">
    <div class="input-group-prepend col-3">
        <span class="input-group-text col-12">Address 1:</span>
    </div>
    <input type="text" class="form-control" placeholder="Street Address">
</div>

Visual representation can be seen here: https://i.sstatic.net/Mvv84.png

Answer №3

To achieve the desired outcome using jQuery, consider the following approach:

let largestWidth = Math.max.apply(Math, $('.input-group-text').map(function(){ return $(this).width(); }).get());
$('.input-group-text').width(largestWidth);

Explanation: The code above calculates the maximum width among all elements with the class .input-group-text using Math.max.apply. It then sets this maximum width to all .input-group-text elements.

References: jQuery: Get Max Width of Child Divs

Answer №4

Include the w-50 class within the input-group-prepend element and also include the w-100 class within the input-group-text element

Here is an example

<div class="input-group">
   <div class="input-group-prepend w-50">
     <span class="input-group-text w-100">label</span>
   </div>
   <input type="text" class="form-control " />
</div>

Answer №5

<div class="form-row">
   <div class="col-md input-group mb-3">
      <div class="input-group-prepend col-5 col-sm-4 col-md-3 col-lg-3 col-xl-2 px-0">
         <span class="input-group-text w-100">Custom Label Text</span>
      </div>
      <input class="form-control" type="text">
   </div>
</div>

Make sure to adjust the column grids for .input-group-prepend to fit your layout!

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

Utilizing props to define the background-color of the '&:hover' state

I'm adapting Material UI's Chip component to accept custom values for the colors prop, rather than being limited to "primary" and "secondary". Additionally, I want the chip to exhibit a hover effect when clicked, transitioning to a different colo ...

cssreactjsmaterial-uijsx

How to make your divs stand out using Bootstrap

Can anyone assist me in aligning my divs based on the example below? https://i.sstatic.net/OAyCj.jpg Here is what I have achieved so far: https://i.sstatic.net/KkOWg.jpg I am struggling to apply spacing between the two divs, and they are not of equal h ...

htmlcsstwitter-bootstrapgrid

Embedding a CSS file into a PHP class

I've encountered a little issue that I can't seem to solve on my own. I've put together a "webengine" using multiple classes. The primary class responsible for obtaining a theme's internals is called "Logic". This Logic class contain ...

phphtmlcss

Unselect a tab in Bootstrap 3 with AngularJS

My project involves working with angular js and bootstrap 3, where I have a view with multiple links to display a div with tabs. The issue arises when I change the tab by clicking on it, then hide the view, and upon showing it again, the previously selecte ...

angularjstwitter-bootstraptwitter-bootstrap-3tabs

horizontal alignment of row content to the right in HTML

Trying to align a text and a small image horizontally to the right: <div class="row float-right"> <div class="title" >Stream Chat</div> <img src="~assets/chat.svg" /> </div> ...

htmlcssimagegridrow

Arrangement containing 4 separate div elements - 2 divs are fixed in size, 1 div adjusts dynamically (without scroll), and the remaining div fills the

I am trying to implement a specific layout using HTML and CSS on a webpage. So far, I have successfully created the black, red, and blue areas, but I am facing challenges with the scrollable green content. It currently has a static height, but I need it to ...

htmlcss

What is the best way to seamlessly transition from responsive design to mobile design?

While developing a single-page app, I encountered an issue with the layout when the screen width reaches a specific point. On narrow screens, I prefer to utilize the full width, but for wider screens, I want to limit the width for better readability. The l ...

htmlcsssafari

What is the best way to rearrange the order of navbar items when working with two nav bars and a single toggle in bootstrap 4?

I am looking to implement a design with two navigation bars that share a single toggle. The first navbar should include the logo, email icon, and a search box, while the second navbar is reserved for additional links. On smaller screens, when the toggle ...

htmlcssbootstrap-4

The margin-bottom attribute for the final element within a div does not cause the div to be "stretched."

Having a div with a background image containing an element with margin-bottom applied can cause a gap between that div and another one below it, also with a background image. This leads to the issue illustrated in this screenshot: Screenshot http://img40.i ...

htmlcssmargin

Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

In my quest to create a function that populates placeholders in my HTML with images from an array, I am encountering a problem. Instead of assigning each image index to its corresponding placeholder index, the entire array of images is being placed in ever ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for dynamically adjusting the size of a div container according to the user's

I have been working on a unique landing page design featuring a menu made up of custom hexagons. I aim to make these hexagons dynamically adjust to fill the entire screen based on the user's resolution, eliminating the need for scrolling. For a previ ...

javascriptjqueryhtmlcss

Align a span vertically within a div

I need help aligning the content "ABC Company" vertically within a div using Bootstrap 4's alignment helper classes. Despite my efforts, I have not been successful. Here is the code I am using: <div class="container" style="width: 740px;"> < ...

htmlcsstwitter-bootstrapbootstrap-4

"Tricky HTML table layout challenge: Margins, paddings, and borders causing

Working with HTML <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <img src="..."> </td> </tr> </tbody> </table> Applying CSS rules * { border: none; ...

javascriptjqueryhtmlcss

Having issues with image hover and click functionality

My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with ...

javascripthtmlcsswordpress

Selenium RC: Utilizing the CSS :contains pseudo-class for Element Selection

I have a task to verify that the data in a table row matches my expectations for two different tables. Let's look at an example using HTML: <table> <tr> <th>Table 1</th> </tr> <tr> <t ...

cssseleniumphpunitselenium-rc

Is there a way to hide the navbar items in Bootstrap 5 until the screen width reaches a specific size?

As I work on creating a navigation bar with Bootstrap 5, I am seeking a way to hide the navbar items until the screen width reaches a specific size. ...

htmlcsstwitter-bootstrapbootstrap-5

Create a unique custom design for your Mapbox GL control

When developing the website, we utilized Angular 8, Typescript, and SCSS. We are using mgl-map to display a map, and I wanted to create a custom control for it with unique styles. I added the custom control to the map using: const centerOnCoordinatesC ...

cssangulartypescriptsassmapbox-gl

Enhance your figures with a unique Javascript magnifying tool that works seamlessly across all browsers

After searching the web for magnifying glasses, I found that most only work for one picture. So, I took matters into my own hands and created a magnifying glass that can magnify all pictures within a specific div. It functions perfectly on Chrome browser b ...

javascriptjquerycss

CSS Image Placement

If I have an image with a width of 2000px, where the snazzy design aspect is located about 600px in and spans about 900px. My goal is to use this image as the background for a website, ensuring that the snazzy design remains centered even when stretching t ...

css

Navigating from Page 1 to Page 2 and then returning to Page 1 using the browser's back button causes Page 1 to malfunction in NextJS version 13

I am currently using next version 13.4.5 and implementing routing with typescript through /app. On my first page, I have a <Link> (next/link) element that takes me to Page 2. However, when I use the browser back button to return to page 1, the layou ...

htmlcssreactjsnext.jsserver-side-rendering