CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Augusto Domingos
Augusto Domingos

Reputation: 19

Bootstrap 3.3.7 - form-inline - input and button same line

The input and the button works correctly on the same line, but the input size is small and has room for it to be larger.

enter image description here

I would like it to be 100% full size, following the line below the input and button, you see? My HTML is:

<form class="form-inline"> 
    <div class="form-group"> 
        <input type="email" class="form-control emailNewsletter" placeholder="Your Email goes here">
    </div> 
    <div class="form-group"> 
        <button type="submit" class="btn btn-default">Sign Up!</button> 
    </div> 
</form>

Upvotes: 3

Views: 4198

Answers (1)

Roy
Roy

Reputation: 8089

Setting .signup-form to display: flex; and flex: 1 0 auto; puts the button next to the input field and let it take the full width. Only thing you need to do is setting the input field to 100% width.

.form-inline {
  display: flex;
}

.signup-form {
  display: flex;
  flex: 1 0 auto;
}

.emailNewsletter {
  width: 100%;
}
<form class="form-inline">
  <div class="form-group signup-form"> <input type="email" class="form-control emailNewsletter" placeholder="Your Email goes here"> </div>
  <div class="form-group"> <button type="submit" class="btn btn-default">Sign Up!</button> </div>
</form>

Upvotes: 1

Related Questions