Twitter Bootstrap: how to set width of form fields in .form-inline?

Question

How do I make the text input field wider when it's in a .form-inline? I can't seem to reliably use .row and .col-md-*, etc. I just need my text input to be wider. Here's my snippet: http://www.bootply.com/ddGvJH99Ud

<div class="container-fluid">
    <div class="row well">
        <div class="col-xs-12 col-sm-12 col-md-11 col-md-offset-1">
            <form class="form-inline">

                <div class="form-group">
                    <label for="search-domain">Search</label>
                    <select class="form-control" name="search-domain" id="search-domain">
                        <option value="books">
                            Books
                        </option>
                    </select>
                </div>

                <!-- START: Book Search Fields -->
                <div class="form-group search-books">
                    <label for="search-books-keywords">for</label>
                    <input type="text" class="form-control" placeholder="e.g.: title, author, ISBN, or keywords..." name="search-books-keywords" id="search-books-keywords">
                </div>
                <!-- END: Book Search Fields -->

                <button class="btn btn-success" type="button">Go</button>

            </form>
        </div>
    </div>
</div>

j08691 · Accepted Answer · 2015-02-27 00:17:44Z

2

You can just set a rule for the input like:

#search-books-keywords {
  width:500px;
}

bootply example

answered Feb 27, 2015 at 0:17

j08691

208k33 gold badges269 silver badges281 bronze badges

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

3 Comments

j08691 Over a year ago

When you select Bootstrap's inline form controls, the width is changed from 100% to auto, so the only way to modify it is with your own CSS. In this case, setting a width.

StackOverflowNewbie Over a year ago

I'm reluctant because I would prefer to let TB handle sizing as much as possible to ensure responsiveness. Any other approaches?

j08691 Over a year ago

You could set it as a percentage instead of a fixed value.

Collectives™ on Stack Overflow

Twitter Bootstrap: how to set width of form fields in .form-inline?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related