What must I add/remove to make this button the same size as the input field?-CodePudding

I am creating a basic landing page and I am adding a small newsletter signup component. When adding the bootstrap input group template, the button comes out much larger than the input field.

This is the code so far:

<!-- Newsletter -->
<section >
  <div >
    <div >
      <h3 >Sign up for our Newsletter</h3>

      <div >
        <input type="text"  placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div >
          <button  type="button">Button</button>
        </div>
      </div>

    </div>
  </div>
</section>

This is the specific input group code:

<div >
        <input type="text"  placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div >
          <button  type="button">Button</button>
        </div>
      </div>

CodePudding user response：

You can try to adjust the input field by adding a height on it. Like below

input.form-control {height: 38px}

<!-- Newsletter -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<section >
  <div >
    <div >
      <h3 >Sign up for our Newsletter</h3>

      <div >
        <input type="text"  placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div >
          <button  type="button">Button</button>
        </div>
      </div>

    </div>
  </div>
</section>

CodePudding user response：

You didn't do anything wrong. You either have to drop btn-lg class on the button or add input-group-lg alongside with input-group class. Both solutions are valid

here is an example of both solutions:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Large form input</h2>
<section >
  <div >
    <div >
      <h3 >Sign up for our Newsletter</h3>

      <div >
        <input type="text"  placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div >
          <button  type="button">Button</button>
        </div>
      </div>
    </div>
  </div>
</section>

<h2 >Small form input</h2>
<section >
  <div >
    <div >
      <h3 >Sign up for our Newsletter</h3>

      <div >
        <input type="text"  placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div >
          <button  type="button">Button</button>
        </div>
      </div>
    </div>
  </div>
</section>