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 :
class="form-control"
class="form-control form-control-sm"
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 >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body style = "padding:100px;" >
< input class = "form-control form-control-lg"
type = "text"
placeholder = ".form-control-lg"
aria-label = ".form-control-lg example" >
< br >
< input class = "form-control" type = "text"
placeholder = "Default input"
aria-label = "default input example" >
< br >
< input class = "form-control form-control-sm"
type = "text"
placeholder = ".form-control-sm"
aria-label = ".form-control-sm example" >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...