How to Control Input Widths in Bootstrap 3 Forms Without Affecting Layout?

Input Widths in Bootstrap 3

In Bootstrap 3, managing input widths can be a challenge. While the documentation suggests using the .col-lg-x class, this solution has limitations.

Original Issue:

The original question stemmed from the inability to set input widths using .col-lg-x without affecting the container layout. This class could only be applied to the container itself, resulting in undesirable layout issues.

Solution:

A practical solution lies in wrapping each input group within its own row. By doing so, the .col-lg-x class can be applied to the individual groups, controlling their width while maintaining the overall form structure.

Code Example:

<code class="html"><div class="container">
    <h1>My Form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <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>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div></code>

Note:

To achieve consistent sizing across different screen sizes, the .col-xs-5 class can be included for smaller screens. Removing it will not affect the overall functionality.

Conclusion:

By wrapping input groups in individual rows and using the .col-lg-x class, developers can effectively manage input widths in Bootstrap 3 without resorting to grid systems or custom CSS classes.

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