CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3
Konstantin Rusanov
Konstantin Rusanov

Reputation: 6554

input width in form-inline bootstrap 3

I don't understand, how I can customize an input (form-control) width in Bootstrap 3? 

<header>
    <div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search"> 
                  </div>
                    <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/'+document.getElementById('search').value">
            </form>
        </div>
    </div>
</header>

Can I do it without some styles (like width in pixels)?

Upvotes: 11

Views: 27499

Answers (3)

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can quickly size labels and form controls within a Horizontal form by adding .form-group-* to the element

You can also quickly size all inputs and other elements inside an .input-groupwith the .input-group-sm or .input-group-lg classes

Upvotes: -1

jyrkim
jyrkim

Reputation: 2869

Update (W3Schools link added): I just spotted that there's a very good answer on this issue available at: w3schools.com/bootstrap/bootstrap_forms_sizing.asp. There are good examples on how to apply either .input-lg and .input-sm for input height or .col-lg-* and .col-sm- for input width.

Original answer: Have you tried to use Bootstrap Grids with your Form and col-xs-.. classes for each input field that needs to be stacked on mobile device. Something like the code below (copy pasted from Bootstrap):

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

I applied those col-xs-.. classes on to your form, and got your columns stacked on a mobile device (okay I just made my browser window smaller and it worked).

<div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                <div class="col-xs-12 col-md-2"> 
                    <div class="form-group">  
                        <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search">  
                    </div>
                </div>
                    <div class="col-xs-6 col-md-1">
                        <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/' + document.getElementById('search').value"/>
                </div>
            </form>
        </div>
    </div>

On Desktop device I gave those fields smaller values: col-md-2 and col-md-1, but you may want to fine-tune those values the way you like it.

Updated: Have you thought about making your custom colors and sizes by using LESS variables for your input elements, which Bootstrap allows you to do: "Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets."

If you check the Customize part of Bootstrap site. It allows you to customize input elements in your Form. LESS variables such as: @input-bg, @input-color, @input-height-base, @input-border and others could be useful in your case. For instance @input-height-base is by default .form-control height.

Upvotes: 4

Samuel Moshie
Samuel Moshie

Reputation: 570

Try

.form-inline .form-group input {
    width:140px;
}

For the css to manipu

Upvotes: 2

Related Questions