Open In App

How to change the size of Form controls in Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap allows to change the size of form controls using .form-control classes. For default size .form-control is used, for smaller size we can use .form-control class along with .form-control-sm and for larger size we can use .form-control class along with .form-control-lg.

Syntax :

  •  For default size:
class="form-control"                            
  • For small size:
class="form-control form-control-sm"
  • For large size:
class="form-control form-control-lg"

Approach:

  • Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”> 
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> 
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script> 
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script> 
 

  • Add .form-control class for default size, .form-control-sm for small sized form control and .form-control-lg for large sized form control in the class of <input>tag

<input class=”form-control form-control-lg” type=”text” placeholder=”.form-control-lg” aria-label=”.form-control-lg example”> 
<input class=”form-control” type=”text” placeholder=”Default input” aria-label=”default input example”> 
<input class=”form-control form-control-sm” type=”text” placeholder=”.form-control-sm” aria-label=”.form-control-sm example”> 
 

Example:

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Form Control Size Example</title>
      <!--Include Latest Bootstrap, jQuery and CSS CDN -->
      <link rel="stylesheet"
            href=
      <script src=
     </script>
      <script src=
     </script>
      <script src=
     </script>
   </head>
   <body style="padding:100px;">
     <!-- Add class .form-control-lg after
     .form-control to display large size form control-->
     <input class="form-control form-control-lg"
            type="text"
            placeholder=".form-control-lg"
            aria-label=".form-control-lg example">
     <br>
      <!-- Add class .form-control to display
          default size form control-->
     <input class="form-control" type="text"
            placeholder="Default input"
            aria-label="default input example">
     <br>
      <!-- Add class .form-control-sm after
          .form-control to display small form control-->
     <input class="form-control form-control-sm"
            type="text"
            placeholder=".form-control-sm"
            aria-label=".form-control-sm example">
   </body>
</html>


Output:



Last Updated : 25 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads