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

Question

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.

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>

Roy · Accepted Answer · 2018-09-22 18:24:57Z

1

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>

answered Sep 22, 2018 at 18:24

Roy

8,1295 gold badges29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

0xCursor Over a year ago

@AugustoDomingos If this answer worked for you, make sure to accept it as the best answer.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related