CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
EthanLWillis
EthanLWillis

Reputation: 950

Width of text input fields in bootstrap3

Does bootstrap3 have native functionality for increasing the width of a text input field?

I know in bootstrap2 I'd just append a class like input-lg to modify the width of the input, however in bootstrap3 this just seems to increase the height.

Upvotes: 3

Views: 26801

Answers (2)

Plippie
Plippie

Reputation: 2886

I found the BS3 construction very cumbersome bloated constructon. Best is to make you own css class for inputs, here is mine: jsFilde

<div class="form-group">
    <label class="col-sm-3 control-label">Inline inputs</label>
    <div class="col-sm-9">
        <div class="form-inline">
            <input type="text" value="Item 1" required class="form-control w-2"/> <input type="text" value="Item 2" class="form-control w-2"/>
        </div>
    </div>
</div>

<div class="form-group">
    <label class="col-sm-3 control-label">Stacked Inputs</label>
        <div class="col-sm-9">            
            <input type="text" value="Item 1" required class="form-control w-2"/><input type="text" value="Item 2" class="form-control w-2"/>
        </div>
</div>

CSS code:

input[type="text"].w-2,
input[type="date"].w-2,
input[type="datetime"].w-2,
input[type="email"].w-2,
input[type="number"].w-2,
select.w-2{
width: 16.66666667%;
}
input[type="text"].w-3,
input[type="date"].w-3,
input[type="datetime"].w-3,
input[type="email"].w-3,
input[type="number"].w-3,
select.w-3{
width: 25%;
}
input[type="text"].w-4,
input[type="date"].w-4,
input[type="datetime"].w-4,
input[type="email"].w-4,
input[type="number"].w-4,
select.w-4{
width: 33.33333333%;
}
input[type="text"].w-5,
input[type="date"].w-5,
input[type="datetime"].w-5,
input[type="email"].w-5,
input[type="number"].w-5,
select.w-5{
width: 41.66666667%;
}

Upvotes: -2

Timothy Shields
Timothy Shields

Reputation: 79441

Take a look at the "Column sizing" subsection here.

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Example from Bootstrap 3 website:

Column sizing example

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

Upvotes: 6

Related Questions