CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
StackOverflowNewbie
StackOverflowNewbie

Reputation: 40633

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

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>

Upvotes: 0

Views: 339

Answers (1)

j08691
j08691

Reputation: 207861

You can just set a rule for the input like:

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

bootply example

Upvotes: 2

Related Questions