Guide on positioning two Bootstrap input groups next to each other on a single line

Try to achieve the following outcome: "between X% and Y%", with both input groups aligned on the same line.

This approach is successful when using standard form fields, however it encounters issues with input-group:

between
<div class="input-group d-inline-block" style="width: 5em;">
  <input type="text" class="form-control" >
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>
and
<div class="input-group d-inline-block" style="width: 5em;">
  <input type="text" class="form-control" >
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>

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

htmlcssbootstrap-4

Answer №1

When styling the input-group, make sure to include the classes 

d-inline-flex align-items-center w-auto
:

body { padding: 1em; }

input.form-control { width: 3em; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group d-inline-flex align-items-center w-auto">
  between&nbsp;<input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>
<div class="input-group d-inline-flex align-items-center w-auto">
  and&nbsp;<input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>

Answer №2

If you're looking for a solution, consider implementing the following code snippet:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <label for="between" class="mr-2">between</label>
      <input type="text" class="form-control" id="between" placeholder="">
      <div class="input-group-prepend">
        <div class="input-group-text">%</div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <label for="and" class="mr-2 ml-2">and</label>
      <input type="text" class="form-control" id="and" placeholder="">
      <div class="input-group-prepend">
        <div class="input-group-text">%</div>
      </div>
    </div>
  </div>
</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

Having trouble showcasing two unordered lists side by side on a single line

In my Magento Go store, I am showcasing products using CSS only. Currently, the loop is set to display 5 products in a row and then close the <ul> tag. However, if there are more products, a new <ul> element is created. My fixed width only allo ...

htmlcss

What causes the issue of JavaScript code not loading when injected into a Bootstrap 4 Modal?

I've created a JavaScript function that triggers the opening of a Bootstrap Modal Dialog: function displayModal(message, headerMessage, sticky, noFooter){ var modal = $('<div />', { class: 'modal fade hide ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-4

Tips for ensuring consistent dimensions on a bootstrap card

Currently, I am working on a project to gain a better understanding of API calls within Angular. While the functionality is running smoothly, my struggle lies in designing the HTML layout. To enhance the aesthetics, I have incorporated Bootstrap 5 into the ...

htmlcssbootstrap-5

Concealing overflow in an SVG element with absolute positioning

Looking to hide the parts of the circle that extend beyond the shadowed container. Utilizing bootstrap-4 for this project. body { overflow: hidden; } .container { margin-top: 5%; width: 1200px; height: 625px; border-radius: 4px; background- ...

csssvgbootstrap-4

What are some strategies to stop text from causing the container height of the <li> element to expand?

Link to my code on Plunker In my attempt to create a fluid layout, the sidebar of my site consists of a list of links. I am trying to make each <li> element a perfect square, but when I add text inside, it disrupts the dimensions and turns the squar ...

css

Is there a way to display a delivery estimate underneath the product title on a WooCommerce website?

How can I display Estimated delivery days below the product title to inform my customers about their order's arrival date, similar to the example on the page included in the link? I would like it to show varying days depending on the shipping class. ...

phpcsswordpresswoocommerceproduct

Exploring ways to manipulate checkboxes using jQuery for enhanced form validation

I am working on a custom validation for four fields, with one required to be filled in. However, I am facing an issue where the validation process is interfering with the functionality of my checkboxes. Once the jQuery click function runs, the checkboxes a ...

javascriptjqueryhtml

Is there a way to change TextBox multiline to uppercase in Opera browser?

Does anyone know how to convert TextBox multiline to Uppercase in Opera? I tried using "text-transform:uppercase" but it only seems to work with IE ...

htmlcssopera

Utilizing CSS attr() for setting the width dimension

I'm having some trouble setting the width of an element using attr() in CSS. Chrome keeps giving me an "invalid property value" error and I can't figure out what's causing it. What I'm attempting to do is use the attribute "prog" as th ...

css

The rounded corners feature of PIE.htc does not seem to be functioning properly on Internet Explorer

Check out my code below: http://jsfiddle.net/parag1111/s5RLb/ Make sure to place PIE.htc in the CSS folder. I've already included the necessary JS and behavior for PIE.htc. Please provide any additional suggestions to ensure compatibility with IE8 a ...

internet-explorer-8csscss3pie

Form popup that closes without refreshing the page upon submission

My goal is to make this form close when the button is pressed without refreshing the page, as Ajax code will be added later. The form functions as a pop-up, so it needs to close once the button is clicked. Currently, I can click the button without a refres ...

jqueryhtmlajaxforms

Struggling to align text alongside a left-floating image within a dialog box

I have a question as a beginner. I'm struggling to place text on the right side of an float: left <img> element within an md-dialog: <md-dialog aria-label="download" flex="60" ng-controller="viewerController"> <md-toolbar> ...

javascripthtmlcssangularjsangular-material

What is the solution to prevent the inadvertent activation of onmouseEnter when onmouseLeave

I recently created a CSS/Jquery script that enlarges a DIV and replaces a font awesome icon with some text when hovered over, then changes it back to the icon when the mouse leaves. However, I noticed in the console that when I remove the mouse from the DI ...

jquerycss

What is the best way to make an HTML table with a static header and a scrollable body?

Is there a way to keep the table header fixed while allowing the table body to scroll in an HTML table? Any advice on how to achieve this would be greatly appreciated. Thanks in advance! ...

javascriptasp.netjqueryhtml

What is the reason for the return of undefined with getElementsByClassName() in puppeteer?

Currently, I am utilizing puppeteer to fetch certain elements from a webpage, specifically class items (divs). Although I understand that getElementsByClassName returns a list that needs to be looped through, the function always returns undefined for me, e ...

javascripthtmlnode.jstypescriptpuppeteer

Activate the trigger event when the popover is activated remotely

I am facing a unique situation on my website where I have multiple popovers (pop1), (pop2), (pop3) that are triggered in sequence when the "Next" button is clicked. These popovers appear one after the other without direct access to them individually. If y ...

jqueryhtmlcsstwitter-bootstrappopover

Personalize the file button for uploading images

I have a button to upload image files and I want to customize it to allow for uploading more than one image file. What is the logic to achieve this? <input type="file" />, which renders a choose button with text that says `no files chosen` in the sa ...

javascriptjquerycsshtml

Is it possible to use AJAX to change the class name of a Font Awesome icon?

I am considering updating the icon after deleting a row. Should I initially include the font awesome icon once in the blade, then remove the class name and add it back with ajax? blade: <div id="status-{{ $country->id }}"> <div id ...

javascripthtmlajaxlaravel

Trying to display logo using 'content' property in CSS

I've been trying to display a logo on the header of my website, but I'm having trouble getting it to show up. I attempted to set the logo using HTML syntax as well as the following CSS code: .div { content: url (...jpg); } However, both metho ...

htmlcss

Utilizing CSS to Select Specific Sections

I'm curious about how to target a section element with a specific id like #dress in CSS3. Here is my code snippet: <section id="dress"> <p>Lorem Ipsum..................................of Lorem Ipsum.<> </section> Here's ...

css