CODEWITHSUNDEEP
csstwitter-bootstrap
Carol.Kar
Carol.Kar

Reputation: 5355

Center input-group in column

I am using bootstrap 5 and I have created a box with a text and an input-group, like the following:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="container border">
  <div class="row align-items-center">
    <div class="col">
      Enter your email address to receive notifications about the product.
    </div>
    <div class="col">
      <div class="input-group mb-3">
        <form>
          <input type="text" class="form-control" placeholder="Your Email Address" aria-label="Your Email Address" aria-describedby="button-addon2">
          <button class="btn btn-warning" type="button" id="button-addon2">Start Monitoring</button>
        </form>
      </div>
    </div>
  </div>
</div>

As you can see the input-group is not aligned with the text. Any suggestions why? I am already centering all columns.

I appreciate your replies!

Upvotes: 0

Views: 669

Answers (1)

Mukul Kapoor
Mukul Kapoor

Reputation: 185

Here is the corrected code :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="container border">
  <div class="row align-items-center">
    <div class="col">
      Enter your email address to receive notifications about the product.
    </div>
    <div class="col">
      <form>
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Your Email Address" aria-label="Your Email Address" aria-describedby="button-addon2">
          <button class="btn btn-warning" type="button" id="button-addon2">Start Monitoring</button>
        </div>
      </form>
    </div>
  </div>
</div>

You have a <form> tag inside input-group. It should be otherwise. Inputs and Buttons should directly reside inside input-group in bootstrap.

Upvotes: 1

Related Questions