What is the best way to align the input within the space between the buttons using Bootstrap 5?

I have been trying to center the input between the two buttons but nothing seems to work:( Here is a snapshot of the current layout, I am looking to make it smaller and position it in a single line.

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

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1838e8e959295938091a1d4cfd1cfd3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<div class="card-footer">
  <div class="container d-flex">
    <div class="div mx-auto">
      <a href="#" class="btn btn-danger">-</a>
      <input type="text" class="form-control" placeholder="0">
      <a href="#" class="btn btn-success">+</a>
    </div>
  </div>
</div>
htmlcssbootstrap-5

Answer №1

One way to enable flex layout in your div container is to add the d-flex class

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a4bfa1bfa3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="card-footer">
  <div class="container d-flex">
    <div class="d-flex mx-auto">
      <a href="#" class="btn btn-danger">-</a>
      <input type="text" class="form-control" placeholder="0" />
      <a href="#" class="btn btn-success">+</a>
    </div>
  </div>
</div>

Answer №2

To implement this feature, simply incorporate the input-group class within your div container.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfacabfa4baa4b8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<div class="card-footer">
  <div class="container d-flex">
    <div class="input-group">
      <a href="#" class="btn btn-danger">-</a>
      <input type="text" class="form-control" placeholder="0">
      <a href="#" class="btn btn-success">+</a>
    </div>
  </div>
</div>

Answer №3

For your CSS stylesheet:

.

.div.mx-auto{
    font-size:0;
}
.div.mx-auto a,
.div.mx-auto input{
    display:inline-block;
    vertical-align:middle;
    font-size: 1rem;
}

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

jquery conflict between parent div hover function and child's hover function

I am experiencing an issue with a hover function on a parent element and child event. It seems that the child hover function is not working when hovering over the parent. Specifically, I have set up a hover function on both the "univ" div and the "heading ...

javascriptjqueryhtml

Utilizing Kendo MVVM to Bind to an Self-Executing Anonymous Module Function

Currently, I am experimenting with the Kendo UI MVVM framework and attempting to bind it to a self-executing anonymous modular function. The situation is a bit complex, as the functionality is only somewhat working. Although the module is being updated whe ...

htmlkendo-mvvmjavascript

Adjusting box width based on device type: desktop and mobile

I'm currently working on a form that includes several mat-form-fields. I have set the width of these items to 750px, but this does not work well for mobile devices. I am trying to figure out how to make the form or mat-form-field automatically adjust ...

cssangularflexboxangular-material

Is it possible to send a PHP variable to a popup using a button and JavaScript?

I am facing an issue with a dynamically created table in PHP that displays requests. Each row in the table has a button to open a popup. I need to pass the ID of each request to the popup to retrieve all the data associated with it. Can someone guide me o ...

javascriptphphtmlpopup

Tips for creating a full screen div layout with fixed top and bottom navigation bars

Can someone help me achieve the following layout style? +-----------------------------------------------------------+ | Top Sticky Nav | +--------------------------------------------------------+--+ | ...

htmlcssbootstrap-4

Formatting text to automatically continue onto the next line without requiring scrolling through long blocks of

I have a unique Angular project with a terminal interface that functions properly, maintaining a vertical scroll and automatically scrolling when new commands are entered. However, I am struggling to get the text within the horizontal divs to wrap to the ...

javascripthtmlcssangular

Exploring the impact of JavaScript tags on website performance in accordance with W3

While researching website optimization strategies today, I came across an article discussing the benefits of moving JavaScript scripts to the bottom of the HTML page. I am curious if this approach aligns with W3C's recommendations since traditionally ...

javascripthtmloptimizationtagsw3c

What is the best way to navigate between elements using AJAX?

My experience in Ajax is minimal. I've managed to create two <li> elements with <a> elements inside, each linking to different HTML files. My goal is for clicking on a link to automatically load the corresponding HTML file without refreshi ...

htmljquerycssajax

Troubleshooting CSS Hover Not Displaying Properly in Angular 14

In the footer class of my HTML, there is a code snippet with chevrons: <div class="link-list"> <div *ngFor="let link of insideLinksLeft | originalOrderKeyValue" class="link"> <a [href]="link.val ...

javascripthtmlcss

Insert fresh user information into the div

Learning JavaScript is a challenge I'm tackling. I have a question that may seem trivial, but any assistance would be greatly appreciated. I currently have this code: Javascript <script type="text/javascript"> function fn(){ var Name = ...

javascripthtml

Using footable js will eliminate all form elements within the table

After incorporating the Footable jQuery library to create a responsive table, I encountered an issue with input tags and select boxes being removed by the Footable JavaScript. It turns all these tags into empty <td> elements. <table id="accordi ...

javascriptjqueryhtmlresponsivefootable

Styling with CSS in Angular 2+ can be quite challenging

Hey there, I'm new to Angular 4 and running into some troubles with styling my application. I tried adding a background image to the body, which worked fine, and then added a component to display content, also looking good. Now, when I added a second ...

cssangulartypescriptangular2-routing

Swapping out a sequence of characters in a web address with a different set

Swapping out imgur for filmot, Enter URL - https://i.stack.imgur.com/Uguvn.jpg Click the submit button After clicking submit, a new tab should open with the link .filmot.com/abcde.jpg. <html> <head> <title>input</title> <sc ...

javascripthtml

Retrieving specific values for each key in JSON using PHP

Looking for a solution with PHP to extract specific information from JSON files based on set criteria. Here is an example of part of the JSON data: "Main": [{ "count": 7, "coordinates": [89,77], "description": "Office", },{ "count": 8, ...

phphtmljson

"Revamp your site with Vue and API for dynamic background

I'm faced with an issue where I am attempting to modify the background of a joke fetched from an API, but for some reason, the background is not changing and I can't seem to identify why. The main problem lies in my inability to change the proper ...

javascripthtmlvue.js

JavaScript encoding the text

Looking for a straightforward JavaScript function to encrypt text data from a textarea using a key (the key being the user's password stored as a hashed session variable, outputted by PHP into a field). The objective is to have the content of the tex ...

javascripthtmlsecurityencryption

Reposition HTML content using regular expressions

My objective is to locate a block of HTML that contains comments and relocate it after the header section. The comment itself remains constant, but the content within the block varies across different pages and needs to be replaced using Dreamweaver' ...

htmlregexcommentsdreamweaverregular-language

AngularJS ui-router in HTML5 mode is a powerful combination that allows

Hey, I'm looking to implement HTML5 mode in my project. Here's how my file structure looks: mypage.de/mysub I can only make changes within the "mysub" directory. So far, I've added the following into my index.html: <base href="/mysub/ ...

angularjshtml.htaccessangular-ui-router

What is the best way to align a GIF and two rows of text within a container div?

Check out my JSFiddle below: In this fiddle, there is an image sized 32 by 32 on the left side and two lines of text on the right. I need help aligning the center of the gif and the text with the middle of the enclosing frame. I've tried adjusting t ...

htmlcss

Node.js and Express.js fails to transmit files to clients

Attempting to send a gif to the client for future use in CSS, but encountering a 404 error in the console log. The gif is located within the public directory. Server: var app = require('express')(); var http = require('http').Server(a ...

javascriptcssnode.jsexpress