CODEWITHSUNDEEP
htmlcssformatbootstrap-5
Raymond Edde
Raymond Edde

Reputation: 41

How to make the button match the height of the other form elements in Bootstrap 5?

I am trying to make the button match the same height as the other elements (either make it smaller to match them or make the other elements bigger and match the button). Here is the code I used:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 am really stuck and help would be greatly appreciated. I am also including a picture of what it currently looks like on my website.

Example

Upvotes: 0

Views: 378

Answers (1)

BSdoukos
BSdoukos

Reputation: 533

As you're building an inline form, you can add the following CSS rule:

form > * {
  height: 100%;
}

That way, all child elements will have the same height. In the snippet below, you can see the result. I've added the black background to your form for better view.

form {
  background-color: black;
}

form > * {
  height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 1

Related Questions