Open In App

Bootstrap 5 Form Controls Sizing

Last Updated : 15 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Form controls Sizing gives textual form controls on <input>, <select>, and <textarea> elements with custom styles, sizing, focus states, and more.

Bootstrap 5 Form Controls Sizing Classes:

  • form-control-sm: This class is used to make the size of the form control small.
  • form-control-lg: This class is used to make the size of the form control large.

Syntax:

<input type="text" class="form-control 
                                  form-control-lg"/>

 

Example 1: In this example, we will use the form control sizing classes to show the different sizes of the text input.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap 5 Form Controls Sizing</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <div class="m-4">
            <h3 class="text-success">
                GeeksforGeeks
            </h3>
            <h4>
                Bootstrap 5 From
                Controls Sizing
            </h4>
        </div>
  
        <h5>Default Sized Input</h5>
        <input type="text" class="form-control" 
            placeholder="Default Sized Input" />
  
        <h5>Large Sized Input</h5>
        <input type="text" 
            class="form-control form-control-lg" 
            placeholder="Large Sized Input" />
  
        <h5>Small Sized Input</h5>
        <input type="text" 
            class="form-control form-control-sm" 
            placeholder="Small Sized Input" />
    </div>
</body>
  
</html> 






                        










Output:


 


Example 2: In this example, we will use the form control sizing classes to show the different sizing of the select element.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>Bootstrap 5 Form Controls Sizing</title> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 


        rel="stylesheet"


        integrity= 


"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"


        crossorigin="anonymous"> 


</head> 


  


<body> 


    <div class="container"> 


        <div class="m-4"> 


            <h3 class="text-success"> 


                GeeksforGeeks 


            </h3> 


            <h4>Bootstrap 5 From Controls Sizing</h4> 


        </div> 


  


        <h5>Default Sized Select Element</h5> 


        <select class="form-control"> 


            <option value="ds">Data Structures</option> 


            <option value="algo">Algorithm</option> 


            <option value="os">Operating System</option> 


            <option value="cd">Compiler Design</option> 


        </select> 


  


        <h5>Large Sized Select Element</h5> 


        <select class="form-control form-control-lg"> 


            <option value="ds">Data Structures</option> 


            <option value="algo">Algorithm</option> 


            <option value="os">Operating System</option> 


            <option value="cd">Compiler Design</option> 


        </select> 


  


        <h5>Small Sized Select Element</h5> 


        <select class="form-control form-control-sm"> 


            <option value="ds">Data Structures</option> 


            <option value="algo">Algorithm</option> 


            <option value="os">Operating System</option> 


            <option value="cd">Compiler Design</option> 


        </select> 


    </div> 


</body> 


  


</html> 



















                        







                        










Output:


 


Reference: https://getbootstrap.com/docs/5.2/forms/form-control/#sizing


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Overview Disabled forms
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Form Controls Disabled
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Layout Horizontal form label sizing
            

        
    
        
            

                How to change the size of Form controls in Bootstrap ?
            

        
    
        
            

                Bootstrap 5 Form Controls
            

        
    
        
            

                Bootstrap 5 Form Controls Disabled
            

        
    
        
            

                Bootstrap 5 Form controls Readonly plain text
            

        
    
        
            

                Bootstrap 5 Form controls Color
            

        
    
        
            

                Bootstrap 5 Form controls Datalists
            

        
    
        
            

                Bootstrap 5 Form Controls Readonly
            

        
    
        
            

                Bootstrap 5 Form Controls File Input
            

        
    
        
            

                React Bootstrap Form Controls
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
B

        

            
        

        

                                    


                                    

                                        badalmishra28                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox