Vertical button group within a Bootstrap 5 input group

How can I create an input-group for increasing or decreasing numbers?

Below is the code I have:

    <div class="input-group input-group-sm">
      <input type="text" class="form-control" placeholder="0.9">
      <div class="btn-group-vertical">
        <button class="btn btn-primary btn-sm" type="button">+</button>
        <button class="btn btn-primary btn-sm" type="button">-</button>
      </div>
    </div>

Here is the current result:

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

The expected result should look like this:

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

htmlcssbootstrap-5

Answer №1

To remove the top and bottom padding, add py-0 and to decrease the line height of the button, add lh-1. Below is how your code should look:

<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="0.9">
  <div class="btn-group-vertical">
    <button class="btn btn-primary btn-sm py-0 lh-1" type="button">+</button>
    <button class="btn btn-primary btn-sm py-0 lh-1" type="button">-</button>
  </div>
</div>

Answer №2

To update the code, simply add "p-0" to the buttons like this:

<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="0.9">
  <div class="btn-group-vertical">
    <button class="btn btn-primary btn-sm p-0" type="button">+</button>
    <button class="btn btn-primary btn-sm p-0" type="button">-</button>
  </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

tips for linking my webpage with the database

While working on a registration page, I encountered an issue where the entered information was not being stored in the database. Instead, an error message appeared: Notice: Undefined variable: sql in C:\xampp\htdocs\Bawazir\Untitled-1. ...

phphtmlcssmysql

Tips for capturing the dx dy SVG attribute using CSS

Seeking advice on the most effective way to access the dx dy SVG attribute in CSS. If this is not feasible, what would be the best approach in JavaScript? ...

csssvg

Insert a CSS Class into an HTML div element with JQuery

I'm faced with a bit of a challenge. Here's the scenario: <div class="portItem"></div> <div class="portItem"></div> <div class="portItem"></div> <div class="p ...

javascriptjquerycssclassinsertafter

What is the best way to activate a function to control animation transitions?

My goal is to manually control transitions in my HTML using JavaScript code, such as a tween library like TweenMax. Instead of relying on CSS for transitions with classes like .ng-enter, I want to target a JavaScript function: function onEnter() { /* tra ...

javascripthtmlangularjsanimationtween

How to align Font Awesome icons inside `<span>` vertically with each other

Trying to vertically align multiple font awesome icons: ############################# icon icon icon icon icon icon ############################# <div class="announcement-card-body modal-body card border-0"> <span class="info fa fa-info- ...

htmlcssfont-awesome

Identify a CSS style or attribute that is being dynamically assigned using JavaScript

While using the Jquery Cycle plugin for my slideshow, I'm looking to trigger an event when a specific slide is active. The Cycle plugin handles this by adjusting the opacity of images within a div in this manner: <div style="position: absolute; to ...

javascriptcssdynamic

What is the best way to arrange 4 divs with 2 on each line?

Consider the divs provided below: <body> <div id="f1">{{ f1|safe }}</div> <div id="f2">{{ f2|safe }}</div> <div id="f3">{{ f3|safe }}</div> <div id="f4"> ...

html

Ways to retrieve and contrast the border style of an image utilizing javascript

I'm currently attempting to identify images on my webpage that have the style border: 1px #c6c6c6 solid; let images = document.getElementsByTagName('img'); for (let i = 0; i < images.length; i++) { if (images[i].style.border === "1px ...

javascriptcss

Adjusting Text Size Depending on Width

I recently used an online converter to transform a PDF into HTML. Check out the result here: http://www.example.com/pdf-to-html-converted-file The conversion did a decent job, but I'm wondering if it's feasible to have the content scale to 100% ...

javascripthtmlcssfont-size

Guide to customizing the appearance of a component's host element on-the-fly

For instance: https://stackblitz.com/edit/angular-mkcfsd In my project, I have an icon component called app-icon which dynamically takes a path and inserts it into an SVG viewbox. I extract the height and width of the path, then set the SVG to match those ...

cssangularangular7

Tips for applying a linear gradient mask to div elements?

I'm attempting to create a fading effect on the edges of a div by using two overlay divs positioned absolutely on either side. My goal is to have the background of the page visible once the fade is complete, effectively masking the content of one div ...

htmlcssmasking

Playing back an Audio object using JavaScript

I'm facing an issue with replaying an audio sound every time the game starts in my Cocos2d javascript code. The sound plays correctly the first time, but subsequent attempts to play it result in no sound being heard. Below is my code snippet: var my ...

javascripthtmlcocos2d-iphone

Setting the appropriate width for the main div element using CSS

Imagine wanting to craft an HTML page featuring a primary div housing all of the content. In this scenario, the div should enclose other divs and remain centrally fixed on the page, similar to the image provided. How should one determine the appropriate w ...

csshtml

Exploring the Possibilities of Wordpress Search with Multiple Dropdown Options

Is it possible to search across multiple categories? For example, I have 4 dropdown menus: 1. City 2. Area 3. Month 4. Products/Services When a user visits my site, they will see a static page with 4 dropdown lists and a "search" button. After the user ...

phpjavascriptjqueryhtmlwordpress

Using JavaScript to swap between multiple images can be a powerful tool, but sometimes the wrong image

I'm having an issue with duplicating an image swap function. The problem is that the mouseout event is triggering image 3 on each of the three swaps, when I actually want it to trigger only on the last one. Can anyone provide some guidance on how to m ...

javascripthtmlimageswap

FireFox appears to be experiencing issues with accessing the contentDocument of a frame using jQuery

While this line of code functions correctly on Chrome and IE, it encounters an issue on FireFox. The error message displayed in the FireFox console is: ReferenceError: $ is not defined var lang = $($('#navFrame')[0].contentDocument).find('# ...

jqueryhtmlfirefoxdomframe

Explore creating a dial number using React

Hey there, I'm currently working on developing a component. Just to clarify, I am not using react-native for this project. Instead, I would like to utilize React to scroll a number similar to how an image scrolls. https://i.sstatic.net/c1Tu8.png Th ...

javascripthtmlreactjsnumberspicker

calculation of progress bar advancement

I want to make the progress bar in my game responsive to changes in the winning score. Currently, it moves from 0% to 100%, which is equivalent to 100 points - the default winning score. But I need the progress bar to adjust accordingly based on the user-i ...

javascripthtmlcssprogress

Is there a way to make Chrome ask to save a password within an HTML form?

I'm having trouble getting a basic email/password HTML form to prompt Chrome to save the password. Despite following examples, it's not working for me. Here is my code: <form name="loginForm" action=""> E-Mail:<br><input ...

html

Display a div using Jquery depending on the visibility and checked value of another div

Trying to toggle the visibility of a div based on another div's input has proven to be quite challenging in this scenario. Here is the HTML setup: <div id="main-question"> <div class="form-group"> <div class="form-radios"> ...

jquerycss