How to change the size of Form controls in Bootstrap ?

Last Updated : 25 Nov, 2021

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=
"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>
   </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:

How to set one column control over height in Bootstrap ?

vrushaket

Improve

Article Tags :

How to change the size of Form controls in Bootstrap ?

Syntax :

Approach:

Example:

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?