Geek Answers Handbook

Bootstrap text field does not stretch across width

Why doesn't the text box in my form stretch further on a full-size screen? It seems short!

<!-- row: 4 --> <div class="row base-padding fill-dark"> <div class="col-md-8 no-padding"> <h2 class="white base-padding-bottom">SIGN UP FOR OUR NEWSLETTER</h3> <p class="light-grey">Receive exclusive promotions, <strong>free passes</strong> for <strong>family and friends</strong> and links to our weekly ad!</p> <br> </div> <div class="col-md-4 no-padding"> <h2 class="white base-padding-bottom">EMAIL ADDRESS</h3> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> </div> </div>
+7
twitter bootstrap
source share
1 answer

When you use the inline form included in Bootstrap, you need to set the width for input manually.

From the Bootstrap documentation :

The default inputs, selections, and text fields in Bootstrap are 100%. To use the inline form, you will need to set the width of the form controls used inside.

It seems you need to use the pixel value (px) when setting the input width. When I try to set it with a percentage value, it does not work correctly, at least at my end.

If you add something like this to your stylesheet, you should be able to size the text box as you need it. Just change 256 to the time you need.

 .form-inline .form-control { width: 256px; }

If I understand Bootstrap's documentation correctly, it does not use the .form-inline style on smaller screens (<768px wide), so you should be fine. Hope this helps.

+9
source share

More articles:


All Articles