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:

    
My Form
    
How to make these input fields small and retain the layout.
    

        

            

                Name
                
            
        

        

            

                Email
                
            
        
        

            Submit
        
    

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.