Bootstrap text box not stretching full width

Question

Why is the text box in my form not stretching further on full size screen? It seems rather 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>

Answer 1

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

From the Bootstrap documentation:

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

It appears you need to use a pixel (px) value when setting the input width. When I try setting it with a percentage value it doesn't work correctly, at least on my end.

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

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

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