input width in form-inline bootstrap 3

Question

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)?

Solution 1

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.

Solution 2

Try

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

For the css to manipu

Comments

[Konstantin Rusanov]

i need mobile responsive, not hard size in px

[Milind Anantwar]

@КонстантинРусанов: input classes provided by bootstrap are not responsive. You need to wrap them in div like this stackoverflow.com/a/21036484/1719752

[jyrkim]

@Milind Anantwar, I think in Bootstrap v.3.1.1 (bootstrap.css file) only input-lg and input-sm are available. So I guess you referring to an older version of Bootstrap(?), maybe. I'm quite new to Bootstrap and currently learning how to use v.3.1.1 :-)

[cvrebert]

In Bootstrap v3, input-lg and input-sm affect height, not width.

[jyrkim]

@КонстантинРусанов I realized today that I didn't reply to your question yesterday; instead I provided you with some settings that help you with your layout when viewing your page in different devices that also have an effect on the size of the fields. Today, I realized that you might wanna customize your settings

[Milind Anantwar]

@jyrkim: would be great if you can update the newer syntax if you are familiar with it :)

[jyrkim]

@MilindAnantwar Good comment :-) I just spotted that there's a pretty good answer on this issue already available at: w3schools.com/bootstrap/bootstrap_forms_sizing.asp After having a look I discovered that 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. I'm going to add that link on to my answer. Cheers :-)