How can I resolve the vertical adjustment issue of Bootstrap 5 input group on mobile devices?

My current issue involves using Bootstrap 5.2.3 to create an input group that displays a set of spans with the ".input-group-text" class alongside inputs with the ".form-control" class. While this setup works well on a computer screen, it does not adjust correctly vertically on a mobile phone.

Below is my current code (attempting to avoid using row/col-sm):

<div class="container">
    <hr>
    <h5>1st step: Type the valuations criteria:</h5>
    <div class="input-group input-group-lg input-group-sm mb-3">
        <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="bottom"
            title="The search will include properties sold within the radius">Radius:</span>
        <input type="number" class="form-control" id="radiusMetersId" value=300 min="100"
            max="10000" step="100" data-bs-toggle="tooltip" data-bs-placement="bottom" title="(meters)">

        <span class="input-group-text">Sale type:</span>
        <select class="form-control" id="saleTypeId">
            <option value="apartment">Apartment</option>
            <option value="house">House</option>
            <option value="all">All</option>
        </select>

        <span class="input-group-text">Sqm:</span>
        <input class="form-control" type="number" value="50" min="5" max="100000" step="5" id="sqmId">

        <span class="input-group-text">Rooms:</span>
        <input class="form-control" type="number" value="3" min="0" max="10" step="1" id="roomsId">
    </div>
</div>

I have included the following headers:

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

As well as these scripts:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Please refer to the images below (the last image shows the desired layout on mobile):

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

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

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

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <hr>
    <h5>1st step: Type the valuations criteria:</h5>
    <div class="input-group input-group-lg input-group-sm mb-3">
      <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="bottom" title="The search will include properties sold within the radius">Radius:</span>
      <input type="number" class="form-control" id="radiusMetersId" value=300 min="100" max="10000" step="100" data-bs-toggle="tooltip" data-bs-placement="bottom" title="(meters)">

      <span class="input-group-text">Sale type:</span>
      <select class="form-control" id="saleTypeId">
        <option value="apartment">Apartment</option>
        <option value="house">House</option>
        <option value="all">All</option>
      </select>

      <span class="input-group-text">Sqm:</span>
      <input class="form-control" type="number" value="50" min="5" max="100000" step="5" id="sqmId">

      <span class="input-group-text">Rooms:</span>
      <input class="form-control" type="number" value="3" min="0" max="10" step="1" id="roomsId">
    </div>
  </div>
<script src = "https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" ></script>
</body>

javascriptjquerycssbootstrap-5

Answer №1

By utilizing media queries, we can make it happen

@media (max-width: 767px) {
  .input-group-sm .input-group-text,
  .input-group-sm .form-control {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0.25rem!important;
  }
  .input-group-sm .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}


@media (max-width: 767px) {
  .input-group-sm .input-group-text,
  .input-group-sm .form-control {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0.25rem!important;
  }
  .input-group-sm .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070051e021e03">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394c574b574a">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <hr>
  <h5>Step one: Input the valuation criteria:</h5>
  <div class="input-group input-group-lg input-group-sm mb-3">
    <span class="input-group-text custom-label" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Include properties sold within the radius in your search">Radius:</span>
    <input type="number" class="form-control" id="radiusMetersId" value="300" min="100" max="10000" step="100" data-bs-toggle="tooltip" data-bs-placement="bottom" title="(meters)">

    <span class="input-group-text custom-label">Sale type:</span>
    <select class="form-control" id="saleTypeId">
      <option value="apartment">Apartment</option>
      <option value="house">House</option>
      <option value="all">All</option>
    </select>

    <span class="input-group-text custom-label">Sqm:</span>
    <input class="form-control" type="number" value="50" min="5" max="100000" step="5" id="sqmId">

    <span class="input-group-text custom-label">Rooms:</span>
    <input class="form-control" type="number" value="3" min="0" max="10" step="1" id="roomsId">
  </div>
</div>

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

Using Material-UI version 1, pass the outer index to the MenuItem component when clicked

Within my component, there is a Table that displays rows generated from a custom array of objects. In the last TableCell, I aim to include an icon button that, upon being clicked, opens a Menu containing various MenuItem actions (such as edit and delete). ...

javascriptreactjsmaterial-ui

Utilizing JS Underscore for combining and organizing arrays with common keys

I am facing a scenario where I have two arrays: "array_one": [ { "id": 1, "name": One }, { "id": 2, "name": Two } ] "array_two": [ { "id": 1, "name": Uno }, { "id": 3, "name": Three ...

javascriptarraysjsonunderscore.js

The variable "vue" is not properly defined within the instance, yet it is being called

I'm currently working on a Vue app and encountering an issue. The onScroll function is working correctly, but when I click the button component to trigger the sayHello function, I receive an error message. The error states: "Property or method &apo ...

javascriptvue.js

Step-by-step guide on generating a fluid list with Express and HTML

Looking to create a dynamic list by fetching data from a JSON file. I want the list items to redirect me to specific content based on their IDs when clicked. However, my current approach is not working as expected, and the list needs to be truly dynamic. ...

javascripthtmlnode.jsexpress

Successful jQuery JSON request to ASP .NET site in Internet Explorer, but facing issues in Firefox and Chrome

Currently, I am retrieving JSON data from my ASP .NET website by utilizing the following jQuery code: $.ajax({ type: 'POST', url: '/blah/default.aspx/GetTestData', contentType: 'application/json; charset=utf-8', dataT ...

jqueryasp.netjson

Dealing with name conflicts in Typescript when using multiple interface inheritance

Is it possible to securely implement two interfaces in Typescript that both have a member of the same name? Can this be achieved? For example: interface IFace1 { name: string; } interface IFace2 { name: string; } class SomeClass implements IFace ...

c#javascripttypescriptecmascript-5

What is the best way to adjust the position of the previous and next buttons on a Bootstrap 5 carousel?

I am having trouble figuring out how to properly position the previous and next buttons in a bootstrap5 carousel. The original code I used as a template was for a carousel that displayed 4 images at once, but I changed it to display 3 images at once. I a ...

htmlcssbuttoncarouselbootstrap-5

Problems with aligning elements to both the left and right sides of the same line

Currently, I have two divs that I would like to float on the left and right sides. However, they seem to be sticking together and I can't seem to separate them.. HTML: <nav> <div id="nav_content"> <div id="home_ico ...

htmlcss

Retrieving results from PostgreSQL database using pagination technique

When I'm pagination querying my data from a PostgreSQL database, each request involves fetching the data in this manner: let lastNArticles: Article[] = await Article.findAll({ limit: +req.body.count * +req.body.page, or ...

javascripttypescriptpostgresqlexpresssequelize-typescript

Designing a sleek border for form input fields

Seeking assistance in finding a solution as my extensive online search has been unsuccessful. Currently, I have this code to style my form labels: label { display:inline-block; height: 15px; width: 350px; float: left; padding: 5px; ...

css

Elements can only be added to the array at the 0th index

In the process of developing a function, I encountered an issue where all elements added to the array were only stored in Array[0] of the rowData. The data is retrieved from a database. private createRowData() { var rowData:any[] = []; thi ...

javascriptangulartypescript

Add extra space to the dimensions of the div by incorporating padding

Showing my issue with an accompanying image: I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially. Is there a way to i ...

htmlcsswidthpadding

Unable to save Ajax data in session array

Currently, I am developing a cart system using jquery, ajax, and php. The issue I am facing is that the text within the HTML elements is not being added to the session array. Below is the ajax code I am using: $(document).ready(function(){ $("#car ...

javascriptphpjqueryajax

Is Dealing with Multiple AJAX Requests a Pain?

Currently, I am utilizing AJAX to retrieve a list of active streams from TwitchTV along with their viewers, updating every second. Sometimes the stream list can become quite long, so my plan is to divide the AJAX requests into 2 or 3 parts: 1) Obtain Numb ...

javascriptajaxstreaming

What is the best way to cluster related data points and display them together?

In order to efficiently manage the data I receive, it is necessary to group it based on specific criteria and display these groups in the user interface. "ServiceRequest": [ {"Status": "Re-Open", },{ "Status": "Open", ...

javascriptangularjs

Parameters in functions are received by value

When working with JavaScript, one common point of confusion is the way variables are treated based on their data type. Variables of primitives are passed by value, while variables of objects are passed by reference. However, in function arguments, both pri ...

javascript

When utilizing an object as state in React, the `setState` function will only set

Currently, I am working on developing a React form that utilizes a custom Input component which I have created multiple times. The objective is to gather all the names and values from the form in the parent component: {inputName: value, inputName2: valu ...

javascriptreactjstypescriptreact-hooks

Detecting collisions in JavaScript

Currently, I am in the process of reviving an old game reminiscent of Tron using HTML5 canvas and JavaScript. The unique twist in this version is that the snakes have the ability to move in curves rather than right angles (known as Achtung Die Kurve). The ...

javascripthtmlcollision-detectionhtml5-canvas

I'm curious about the outcomes of the JavaScript test. Could someone provide an explanation

Recently, I was in the process of writing a blog post discussing the importance of checking for the existence of jQuery elements before attaching event handlers. To illustrate this, I quickly created a jsfiddle example here. What puzzles me is that the re ...

javascriptjquerytestingoptimization

Utilizing a variable twice within the Express module, while only using it once in another module

Below is a basic example of how to use a Node.js module: let os = require('os'); console.log("This is the user info - " , os.userInfo()); In this case, we can see that by using dot notation, we were able to access the existing functio ...

javascriptnode.jsexpressmodule