Tips on arranging two buttons vertically so that they each occupy 50% of the total height

I am looking to create + and - buttons in Bootstrap where the + is stacked on top of the - with both buttons occupying 50% of the height of the full div each.

Here's an example of what I would like to achieve:

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

To implement this, I have created an input field with the input-group-append class as follows:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="input-group-append">
  <span class="btn btn-outline-primary">
        +
    </span>
  <span class="btn btn-outline-danger">
        -
    </span>
</div>

However, the current layout looks like this:

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

As you can see, each button takes up the entire block, resulting in too much space being used. If I could stack them vertically, it would allow for more room for other inputs.

Is there a way to achieve this desired layout?

htmlcssbootstrap-4

Answer №1

Here are some options for customizing:

.input-group-append(or feel free to adjust the name but attach it to the parent div) {
   display: flex;
   flex-direction: column;
}

Another idea is to experiment with replacing span elements with div tags.

Answer №2

Utilize the Flex attribute 

.input-group-append {
  display: flex;
  flex-direction: column;
}
<div class="input-group-append">
  <span class="btn btn-outline-primary">
              +
            </span>
  <span class="btn btn-outline-danger">
              -
            </span>
</div>

Answer №3

Make sure to include the btn-group-vertical class within the parent div element

<div class="input-group-append btn-group-vertical">
            <span class="btn btn-primary btn-lg btn-block">
              +
            </span>
            <span class="btn btn-danger btn-lg btn-block">
              -
            </span>
</div>

Answer №4

.button-group{
    align-items: center;
    justify-content: space-between;
}

Apply this style to your button group elements.

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 with flickering in rotating card animation in Bootstrap using CSS?

Recently, I worked on a bootstrap website where I implemented a unique feature – a card that flips to show its backside upon hover. You can check out the live website here: Live Site Here's the code snippet for the section with the flipping card: ...

htmlcssanimationbootstrap-4

Limit on the number of rows/entries selected for each query and the maximum

Is it possible to set a limit on data selection in a drop-down list through coding? For example, having 3 selections in one drop-down list, with each selection limited to 20 people choosing from the data. <tr><td><label><font face=&a ...

phphtmlmysql

Is there a faster alternative to using jQuery's indexOf method?

Looking to create a search box for a large set of options (around 2000 options) The indexOf method is very slow...any alternative solutions? Jquery Code : $('#textfortitlesearch').on('keyup', function() { var query = this.value ...

jqueryhtmlindexof

Importing images in React for CSS does not function properly

I've encountered an issue while trying to import an image for CSS. I successfully imported the image and used it in the img tag as src={furnitureBG} for testing purposes. Following the documentation, I imported the image and set the path as the value ...

cssreactjsstyled-components

Enhance User Experience with a Responsive Website Dropdown Menu

Currently, I am focused on enhancing the responsiveness of my website and I realized that having a well-designed menu for mobile view is essential. To address this need, I added a button that only appears when the screen size is 480px or lower, which seems ...

javascriptjqueryhtmlcssjquery-mobile

Flex sidebar collapse menu

I am currently in the process of developing an admin panel for my website. I have a sidebar menu that I would like to hide behind a hamburger icon and only expand when clicked on. After researching potential solutions, I haven't found much that fits m ...

htmlcssflexbox

Tips for maintaining the same identifier, content, or text despite changes in the DOM

I am curious about a situation where the ID of a div is changed from 1 to 34, but when clicked on, the attribute still returns 1 instead of 34. I apologize for any language errors, thank you. $(document).on('click','.edit_btn:eq(0)& ...

javascriptphpjqueryhtmllaravel

When a table undergoes a dynamic reload, the formatting for the columns fails to display properly

After fetching image metadata from an API call, a table is dynamically generated on page load. Subsequently, when new images are uploaded, the function responsible for building the table is called again to include this new data. However, despite the CSS st ...

jqueryhtmlcssajaxhtml-table

``Is there a way to redirect users when they click outside the modal-content in Bootstrap

I have a modal on my website that currently redirects to the homepage when the close button is clicked. However, I also want it to redirect to the homepage when clicking outside of the bootstrap modal, specifically targeting the ".modal-content" class. I ...

javascriptjquerytwitter-bootstrapbootstrap-4

What is the best way to receive a user's input date in Dynamics 365 using HTML/JavaScript?

My HTML webform is set up to capture user input like address, card number, city, and state in text format. However, within Microsoft Dynamics 365, I have a custom entity with fields for this information. When a user completes the webform and submits it, a ...

javascripthtmldynamics-crm

What is the best way to display data from a dynamically generated table in a popup window?

My table is dynamically populated with the following JavaScript code: $(document).ready(function (e) { var t = { Qty: [61.0, 0.0, 8.0], Name: ["2009 A", "2009 B", "2009 C "] } $.each(t.Qty, function (i, ele) { $("#content") ...

javascriptjqueryhtmljson

Can this actually work? Overflow-y set to visible and overflow-x set to scroll/auto

We are facing a challenge within our team that we are struggling to resolve. Our Grid control has been customized by us. When the icon next to the column name is clicked, a pop-up div (referred to as divFilter) appears, allowing for filtering options to be ...

htmlcsspositionoverflowpositioning

I'm having issues getting my fancybox to display properly

HTML: <!--gallery--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> !window.jQuery && document.write('<script src="jquery-1.4.3. ...

htmlcssfancybox

Embed one module within another module and utilize the controller from the embedded module

I am attempting to create a module and inject it into the main module. Then, I want to inject the controller into the injected module but am facing issues. In my index.html file: <html ng-app="MenuApp"> <head> </head> <body> <d ...

javascriptangularjshtmlmodule

Tips for successfully passing a Prop using the Emotion CSS function

Passing props through styled() in Emotion is something I'm familiar with. For example: const Container = styled("div")<{ position: string }>` display: flex; flex-direction: ${({ position }) => (position === "top" ? "column" : "row ...

cssstyled-componentsemotion

Eliminate the excessive space surrounding the alert div by utilizing Bootstrap 4's spacing utilities

I am struggling with aligning the text in my Bootstrap 4 alert message with the top of the (i) icon. I have tried adjusting margins and padding without success. Can anyone provide guidance on how to achieve this alignment, as well as centering the card ver ...

alertbootstrap-4

Using Vue.js to dynamically assign CSS classes based on variables

Is it possible to achieve this with a dynamic class like the following? <div :class="'outofstock.item_' + item.id ? 'bg-green-500' : 'bg-red-500' "> I have been struggling to find the correct syntax for this. T ...

cssvue.jsvariables

Maintaining the current tabIndex while navigating between NextJS pages involves setting the tabIndex state in each

What is the best way to store and retrieve the current tabIndex when moving from one page to another? (One idea is to create a function that saves the current index in the sessionStorage and then retrieves it when the page loads) For example: https://i. ...

htmlreactjsnext.jstabindex

Disregard the instructions upon loading the page

I've implemented a directive to automatically focus on the newest input field added to my page. It works well, but there is one issue - when the page loads, the last input is selected by default. I want to exclude this behavior during page load and in ...

javascripthtmlangularjs

Phonegap - Retaining text data in a checklist app beyond app shutdown

This is my first time developing an app with Phonegap. I am looking to create a checklist feature where users can input items into an input field. However, I am struggling with figuring out how to save these items so that they remain in the checklist even ...

javascriptjqueryhtmlcsscordova