Leverage the power of Bootstrap 5 to showcase multiple form input-groups side by

Is there a way to showcase multiple form input groups side by side using Bootstrap 5?

I attempted the following, but the input group components ended up stacking on top of each other:

<div class="container">
Your username is
<div class="input-group form-control-inline">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control " placeholder="Username">
</div>
and your email <is></is>
<div class="input-group form-control-inline">
  <input type="text" class="form-control form-control-inline" placeholder="">
  <span class="input-group-text">@example.com</span>
</div>

</div>

.form-control-inline {
   display: inline-block;
    width: auto;
    vertical-align: middle;
    margin-top: -8px;
}

.form-control-inline.form-control, .form-control-inline.input-group-text {
   display: inline-block;
}

Fiddle: https://jsfiddle.net/46se871g/

cssbootstrap-5

Answer №1

Utilizing the power of flex, I was able to meet your requirements by granting more control from the parent element to its child elements in your HTML structure. For a deeper understanding of how flex works, you can explore further details.

In addition, I have organized the text within the .input-group class to ensure that each div encapsulates all its content seamlessly.

Here is the sample HTML:

<div class="container">
    <div class="input-group">
    Your username is
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
    <div class="input-group">
     and your email <is></is>
      <input type="text" class="form-control form-control-inline" 
      placeholder="">
      <span class="input-group-text">@example.com</span>
     </div>
  </div>

And here is the corresponding CSS:

.input-group {
   display: flex;
   align-items: center
}

.container {
    display: flex;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
}

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

What is the correct way to utilize Bootstrap grid offsets?

Recently, I have been working on a webpage that features a unique layout using Bootstrap grid rows. Each row consists of a paragraph of text and an image. The layout is designed to have the text occupy specific columns on large screens, with the image shif ...

htmlcssbootstrap-5

What is the best way to position a DIV class on top of another DIV class in a specific location?

I have successfully implemented a simplistic bar chart using CSS and HTML. The chart comprises two DIV classes: one for the background bar and another for the front bar. The heights of these bars are dynamically set based on percentage values passed from P ...

htmlcss

Can JavaScript and CSS be used to dynamically style textarea content as it is being typed by the user?

I am wondering if it is possible to apply styling to content in a textarea as a user inputs text. For instance: <textarea>abcdefghijklmnopqrstuvwxyz</textarea> Is there a way to highlight all the vowels in the textarea string above using jav ...

javascriptjqueryhtmlcssforms

Using Google Maps within a Bootstrap modal window that is only partially loaded

The maps display perfectly fine in a regular div, but when placed inside a Bootstrap modal, only half or part of the map is visible. However, when I open the console, the issue resolves itself and the entire map is shown. Photo without console opened Pho ...

htmlcssgoogle-mapstwitter-bootstrap

Clickable Parent URL in Bootstrap 5 Dropdown

I'm currently working on creating a Bootstrap 5 Navabar with a dropdown that appears on hover and allows the parent item to be clickable on screens larger than 992px. Successfully implementing the show on hover feature with the following JavaScript: ...

javascriptjquerytwitter-bootstrapbootstrap-5

Using jQuery to apply the "a" class with the addClass method

The html structure below is giving me trouble: <div class="sub"> <a href="#" id="people">People</a> </div> The CSS for the "a" element is as follows: color:#999999; font-size:31px; I am attempting to use jQuery to change ...

jquerycssaddclass

Material-UI: The Mystery of Missing CSS Properties

Struggling to apply a CSS class to an element from Material-UI: bw:hover { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } Tried using makeStyles: import { makeStyles } from '@material-ui/core/styles' ...

javascriptcssreactjsmaterial-ui

CSS/Jade/HTML: struggling to get boxes to align properly on the same line

I'm currently working with a Jade template that looks like this: extends layout block content h2 Characters and Portraits div(id="portraitsBox") - var portraits = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Sid ...

cssnode.jstemplatespugcascade

Flex items maintaining their size when the window decreases

My goal is to arrange two plotly plots side by side within a CSS flexbox, with the ability to resize them as the window size changes. The issue I'm facing is that while the plots expand correctly when the window is enlarged, they fail to shrink when t ...

javascriptcssflexboxplotly

"Customize the dimensions and scroll behavior of a division

I've been struggling to make a single-page site full-width, and I can't seem to get it right. My goal is to create sections that are: Full width Background image full width The height of the div should be at least the same as the image, adjust ...

htmlcss

relocate the figcaption below the image on mobile devices

Currently, I am in the process of updating an old website to make it responsive, and I have encountered several challenges along the way. My goal is to have the fig captions displayed on the right side in the desktop version, but underneath the figure in ...

javascripthtmlcssbootstrap-4figcaption

How can a div be utilized to create a footer with two columns?

Is there a way to design a two-column footer using only divs and no tables? The dimensions of the footer are set at 980px and it needs to include... Copyright 2010 xyz.com (to be placed on the left side) About us | privacy | terms (to be placed on the r ...

cssxhtmlhtml

Troubleshoot: Difficulty with accessing nested tag name using getElementsByTagName

I'm currently working with a div that contains a table and its data pulled from a database. <div id="content"> <table> <tbody> <tr> <th class="header" colspan="2">Food items include:</th> </tr> ...

javascriptjqueryhtmlcsssorting

Restrictions on the number of characters based on the size of fonts in an html list sc

Recently, I attempted to implement a ticker message on my website using li scroller. However, it appears that there is a limitation on the number of characters that can be displayed in the ticker message when different font sizes are used. With a smaller ...

javascriptjqueryhtmlcsswordpress

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

I have found a way to center a section using the following code: <div class="clock-section"> <h5 id="clock-title">We will be arriving soon</h5> <hr class="hr" id="cdhr"> </div> Here is ...

htmlcsstransformblur

Multiplication cannot be performed on operands of type 'NoneType'

Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...

javascripthtmlcssdjangobootstrap-4

handling a radius variable across various stylesheets in SASS

Recently, I started using SASS and I am very impressed with this tool. However, before diving in further, I have one question that I can't seem to find the answer to. What is the best approach for managing a variable value across multiple style sheet ...

csssass

Mobile device causing issues with Bootstrap navbar toggler functionality

I am having an issue with my Bootstrap 5 navbar. It is not functioning properly on mobile devices. When I click the toggle button, nothing happens. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="contai ...

htmlcssbootstrap-5

I am interested in adding a personalized icon to the progress bar in Material-UI

I am currently using the MUI linerProgressBar design. I would like to incorporate a custom UI Icon that moves along with the progress. Are there any examples of this available? I have searched for one in MUI but haven't found anything. If you know of ...

cssreactjstypescriptnext.jsmaterial-ui

I am experiencing an issue with the display inline feature not functioning properly in Firefox

I am working with Html code: <div class="login"> <form class="form-horizontal signin"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Ema ...

htmlcssfirefox