CODEWITHSUNDEEP
textinputtwitter-bootstrap-3
user2754528
user2754528

Reputation: 527

how to customise input field width in bootstrap 3

After having removed critical features such as input-xlarge and input-large, what is the substitution for it in bootstrap 3?

Of course I could use col-lg-12 etc but that is giving an error in tab pane.

I could also use style = "width:30px;" but then It would loose its responsiveness unlike input-xlarge.Any suggestions etc?

Upvotes: 49

Views: 217544

Answers (5)

Alexander Rechsteiner
Alexander Rechsteiner

Reputation: 5764

In Bootstrap 3, .form-control (the class you give your inputs) has a width of 100%, which allows you to wrap them into col-lg-X divs for arrangement. Example from the docs:

<div class="row">
  <div class="col-lg-2">
    <input type="text" class="form-control" placeholder=".col-lg-2">
  </div>
  <div class="col-lg-3">
    <input type="text" class="form-control" placeholder=".col-lg-3">
  </div>
  <div class="col-lg-4">
    <input type="text" class="form-control" placeholder=".col-lg-4">
  </div>
</div>

See under Column sizing.

It's a bit different than in Bootstrap 2.3.2, but you get used to it quickly.

Upvotes: 67

naveesh
naveesh

Reputation: 11

<div class="form-group">
                    <div class="input-group col-md-5">
                    <div class="input-group-addon">
                    <span class="glyphicon glyphicon-envelope"></span> 
            </div>
                        <input class="form-control" type="text" name="text" placeholder="Enter Your Email Id" width="50px">

                    </div>
                    <input type="button" name="SIGNUP" value="SIGNUP">
            </div>

Upvotes: 0

Andrew Koper
Andrew Koper

Reputation: 7259

  <form role="form">
    <div class="form-group">
      <div class="col-xs-2">
        <label for="ex1">col-xs-2</label>
        <input class="form-control" id="ex1" type="text">
      </div>
      <div class="col-xs-3">
        <label for="ex2">col-xs-3</label>
        <input class="form-control" id="ex2" type="text">
      </div>
      <div class="col-xs-4">
        <label for="ex3">col-xs-4</label>
        <input class="form-control" id="ex3" type="text">
      </div>
    </div>
  </form>

Upvotes: 2

Edi G.
Edi G.

Reputation: 2420

i solved with a max-width in my main css-file. 

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

It's a simple solution with little "code"

Upvotes: 0

Anshad Vattapoyil
Anshad Vattapoyil

Reputation: 23483

You can use these classes

input-lg

input

and

input-sm

for input fields and replace input with btn for buttons.

Check this documentation http://getbootstrap.com/getting-started/#migration

This will change only height of the element, to reduce the width you have to use grid system classes like col-xs-* col-md-* col-lg-*.

Example col-md-3. See doc here http://getbootstrap.com/css/#grid

Upvotes: 6

Related Questions