Skip to content
Related Articles

Related Articles

How to change the size of Form controls in Bootstrap ?

Improve Article
Save Article
Like Article
  • 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:
  • For small size:
class="form-control form-control-sm"
  • For large size:
class="form-control form-control-lg"


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

<link rel=”stylesheet” href=””> 
<script src=””></script> 
<script src=””></script> 
<script src=””></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”> 



<!DOCTYPE html>
      <title>Bootstrap Form Control Size Example</title>
      <!--Include Latest Bootstrap, jQuery and CSS CDN -->
      <link rel="stylesheet"
      <script src=
      <script src=
      <script src=
   <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"
            aria-label=".form-control-lg example">
      <!-- Add class .form-control to display
          default size form control-->
     <input class="form-control" type="text"
            placeholder="Default input"
            aria-label="default input example">
      <!-- Add class .form-control-sm after
          .form-control to display small form control-->
     <input class="form-control form-control-sm"
            aria-label=".form-control-sm example">


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!