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:
<!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>
|