HTML: Remove space between two inputs using bootstrap

Question

I saw this pretty from from website.

I decided to make it using bootstrap 4, and I failed because of the space between two html input elements. It is neither padding nor margin, I have no idea what is it. I tried to remove the space several times but failed.

The space between two inputs giving me suffer.

This is HTML

<form action="" method="post">
     <div class="form__wrapper">
          <input type="email" name="email" class="newsletter" placeholder="Email address"/>
           <input type="submit" class="newsletter__button"/>
      </div>
  </form>

This is CSS

 .form__wrapper {
    display: inline-block;
    position: relative;
}

form {
    display: block;
}

form input[type='email'], form input[type='text'] {
    cursor: text;
   -webkit-font-smoothing: antialiased;
    width: 100%;
    padding: 9px;
    border: 1px solid #E1E0E1;
    outline: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.form__wrapper input[type='email'] {
    width: 60%;
}

Answer 1

This gap origins from the space between two inline elements in the source code. that is parsed as a blank space.

However, you don't have to deal with this issue - for this case exactly, Bootstrap provides Input Groups . Just use the input-group class as a wrapper for the two form elements and the input-group-added as a wrapper for the button.

You can style the form elements by using a higher specificity in your selectors. The Icon can also be achieved by FontAwesome (see Nisarg Shahs good answer for that). Here is an example:

 body { padding: 2em; } .input-group>.form-control, .input-group .btn { border-radius: 0; border-color: #e3e3e3; text-transform: uppercase; font-size: .8em; line-height: 1.95em; letter-spacing: 2px; } .input-group>.form-control { border-right: 0; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div class="input-group"> <input type="email" class="form-control" placeholder="Email Address" aria-label="Email Address" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">&gt;</button> </div> </div> 

Answer 2

It is called an add-on in Bootstrap 4. Here's an example:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="input-group mb-3"> <input type="email" name="email" placeholder="Email address" class="form-control" aria-label="Dollar amount (with dot and two decimal places)"> <div class="input-group-append"> <button class="btn btn-outline-secondary">Submit</button> </div> </div> 

You can combine that with FontAwesome, to get the desired result:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="input-group mb-3"> <input type="email" name="email" placeholder="Email address" class="form-control" aria-label="Dollar amount (with dot and two decimal places)"> <div class="input-group-append"> <button class="btn btn-outline-secondary"> <span class="fa fa-angle-right"></span> </button> </div> </div> 

Answer 3

Bootstrap has this built in:

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group"> <input class="form-control newsletter" placeholder="Email" type="text"> <div class="input-group-append"> <input class="form-control"t type="submit" class="newsletter__button"/> </div> </div> 

Answer 4

Write both of your input tags in the same line. Here I've included the fiddle . You can see the difference. :)

<input type="email" name="email" class="newsletter" placeholder="Email address"/><input type="submit" class="newsletter__button"/>