What is the best way to ensure that the button aligns with the height of the surrounding form elements in Bootstrap 5?

I've been attempting to adjust the button to match the same height as the other elements (either make it smaller to align with them or enlarge the other elements to match the button). Here is the code snippet I used:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdfde6e1e6e0f3e2d2a7bca3bca2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<form class="form-inline d-sm-flex pt-1 my-auto">
  <p class="align-middle text-light py-1">10 tokens. <br> something each. 10 max per txn</p>
  <div class="form-group mb-2 px-3">
    <select class="form-control form-control-lg py-2 px-5 form-control-dark text-center" style="background-color: black; color: white; border-color: rgba(255, 255, 255, 0.1);">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
  </div>
  <button class="btn btn-dark btn-lg" style="background-color: rgba(0, 0, 0, 0.7); border-width: 1.7px; border-color: white;"><span class="px-4" id="mintBtn">make it</span></button>
  <form>

I'm really struggling with this, and any assistance would be highly appreciated. I've also attached a image of how it currently appears on my site.

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

htmlcssformatbootstrap-5

Answer №1

When creating an inline form, you have the option to apply this CSS rule:

form > * {
  height: 100%;
}

This rule ensures that all child elements within the form will share the same height. Take a look at the example below to see how the form looks with a black background for better visibility:

form {
  background-color: black;
}

form > * {
  height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d4d38233c233d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<form class="form-inline d-sm-flex pt-1 my-auto">
  <p class="align-middle text-light py-1">10 tokens. <br> something each. 10 max per txn</p>
  <div class="form-group mb-2 px-3">
    <select class="form-control form-control-lg py-2 px-5 form-control-dark text-center" style="background-color: black; color: white; border-color: rgba(255, 255, 255, 0.1);">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
  </div>
  <button class="btn btn-dark btn-lg" style="background-color: rgba(0, 0, 0, 0.7); border-width: 1.7px; border-color: white;"><span class="px-4" id="mintBtn">make it</span></button>
  <form>

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 on causing a div to overflow instead of wrapping onto a new line

Are you looking to design a slider with 3 image containers all in the same row, where the third one overflows instead of wrapping to a new line? Here is an example: Desired Design: https://i.stack.imgur.com/dKyEg.png Current State: https://i.stack.imgu ...

css

Interactive checkboxes within a classic ASP webpage

I'm encountering an issue while generating checkboxes dynamically on a .asp page. Within a table cell, I am utilizing the following code (note - rsMaint is a recordset): <% if not rsMaint.EOF then rsMaint.moveFirst index = 1 %> ...

htmlasp-classicdynamic-controls

MUI version 5 - Keep styling separate from component files

Seeking to segregate styling from component File in MUI v5. In the past, I accomplished this in v4 by utilizing makeStyles as shown below: Page.style.js: import { makeStyles } from "@material-ui/core"; export const useStyles = makeStyles({ ro ...

cssreactjsmaterial-ui

Test your knowledge of Javascript with this innerHtml quiz and see

How can I display the output of a score from a three button radio button quiz without using an alert popup? I want the output to be displayed within a modal for a cleaner look. I tried using InnerHTML but now there is no output when the button is clicked. ...

javascriptjqueryhtml

Expanding the width of three floating divs in the center to match the width of the parent container div

In my design, I have a parent container with three inner divs that are floated. The left and right divs have fixed sizes, however, I need the center div to expand and fill the space available within the parent container. <div class="parent-container"&g ...

htmlcss

Is there a way to program custom key assignments for my calculator using JavaScript?

As a beginner in the world of coding and JavaScript, I decided to challenge myself by creating a calculator. It's been going smoothly up until this point: My inquiry is centered around incorporating keys into my calculator functionality. Currently, th ...

javascripthtmlcss

Trouble concealing tab using slideUp function in Jquery

Whenever I click on the 'a' tag, it displays additional HTML content (list) that is controlled by generic JS code for tabs. However, I want to hide the list when I click on the "Title" link again. What can I do to achieve this? You can view a de ...

javascriptjqueryhtmlcss

What is the best .scss file to use for updating the site?

Currently in the process of learning SASS and Bootstrap 4, I have set up some .scss partial files and imported them into my site.scss file as required. Making changes to Bootstrap involved modifying my _my-theme.scss file. But now, I'm wondering about ...

csssassbootstrap-4

Issue with input width percentage not functioning as expected

Is there a special method to specify the width of an input field in CSS without it extending beyond the container? I want my input field to be 98% of the container's width, but when I set it to that, it goes off the screen. This is the HTML code I am ...

csshtmlinputwidth

Obtain the following image with every click

I have a div with images inside. I created two arrows (previous, next) within a larger div using the src of one of the images as the background URL for each arrow. My goal is to make the next arrow change the large image to the src of the following image w ...

javascriptphpjqueryhtmlcss

Having trouble displaying a dynamically created table using jQuery

I'm a newcomer to jQuery and I need help with querying 2 web services. The goal is to query the first service, use an attribute value to query the second one, and then populate a table with data from both services. Please take a look at my code on th ...

htmljquerydatatables

The functionality of the jQuery button subscription is completely ineffective

I am attempting to display search results on the same page, but I'm encountering an issue. Here is my code: <form id="myForm"> <input id="filter_id" type="text"/> <input type="submit" id="load_results" value="Search" /> < ...

jqueryhtmlasp.net-mvc

Is there a way to position a ListItem (using React) in the lower left corner in this specific case?

import * as React from 'react'; import { styled, useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import MuiDrawer from '@mui/material/Drawer'; import MuiAppBar from '@mui/material/Ap ...

cssreactjsmaterial-ui

What is the best way to reverse a condition in CSS?

Here is my HTML/CSS code, I am relatively new to this field. Please let me know if I have overlooked anything. .dropdown-menu>li>a { padding: 3px 5px; } <li> <a id="btn-other-1" href="#"> <!–- I do not want apply css for t ...

htmlcss

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

cssvue.jsstyles

There was a problem compiling bootstrap.scss due to an error found in _root.scss

I've encountered an issue while compiling my bootstrap sass file. The error message I'm receiving is shown below. Although I can make it work by commenting out lines 4 and 8 of _root.scss, that is not the optimal solution. Can someone please expl ...

csssassbootstrap-4

JQuery ajax fails to trigger the success function

Upon using an ajax request to insert data into the database, I encountered an issue where the button message did not update after the submission was successful. Initially, I set the button text to Please wait... upon click, and intended to change it to Don ...

javascriptjqueryhtmlajaxdom

Change the background color of the entire grid page to create a unique look

Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin? .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5%; ...

htmlcsscss-grid

Display a block by using the focus() method

My objective is : To display a popin when the user clicks on a button To hide the popin when the user clicks elsewhere I previously implemented this solution successfully: Use jQuery to hide a DIV when the user clicks outside of it However, I wanted to ...

javascripthtmlcss

Caching HTML5 videos in Google Chrome

I am currently in the process of building a website and have successfully added an HTML5 video. However, I encountered an issue when attempting to change the video file in the background for users to upload a new one. Despite updating the video URL, Chro ...

javascripthtmlgoogle-chromecachingvideo