How to Control Input Width in Bootstrap 3 Without Grids?

Input Width Management in Bootstrap 3

Controlling input width in Bootstrap 3 can be challenging, especially while avoiding grid usage or additional CSS.

Original Question:

How to set the width of inputs in Bootstrap 3 without using the grid system or undocumented options?

Limitations of `.col-lg-x class:

Using .col-lg-x to set input width isn't feasible because it can only be applied to the container div, leading to layout and float issues.

Solution:

To set input width effectively, wrap each input group in its own row, as seen below:

<div class="container">
  <form role="form">
    <div class="row">
      <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control" />
      </div>
    </div>

    <div class="row">
      <div class="form-group col-lg-1">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal" />
      </div>
    </div>
  </form>
</div>

Additional Considerations:

• This solution allows for custom input widths regardless of screen size.
• It preserves the Bootstrap layout while ensuring input widths follow your desired specifications.
• By default, input widths will take effect in screens wider than 95px. To customize the breakpoint, consult the Bootstrap grid system documentation.

The above is the detailed content of How to Control Input Width in Bootstrap 3 Without Grids?. For more information, please follow other related articles on the PHP Chinese website!