Form Inputs And Sizing In Bootstrap

Article

What is a form input?

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Form controls

It supports the following form controls,

Input
Textarea
Checkbox
Radio
Select

Bootstrap Input

The bootstrap supports all html5 inputs types for example text,password,datetime,date,month,time,week,number,email,url,search and color

It is not fully styled if their type is not properly declared

Sample program for form input

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

It is the output for the bootstrap input

Textarea

In this text area basically used to the comment box, address box etc..

Sample program for textarea

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This is the output for the textarea

Checkboxes

This checkbox is basically used to select the many number of options from a list of the preset options

There are many checkboxes we can use to access the single list

Sample program for checkbox

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 3</label>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This the output for the bootstrap checkbox

Checkboxes are used in inline

In this inline class it is used so the checkboxes appear in a single line

.checkbox-inline class is used to set an inline checkbox

Sample program for inline checkboxes (example 1)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="checkbox-inline">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" value="">Option 3</label>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Sample program for inline checkboxes (example 2)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This the output for the bootstrap inline checkbox

Radio Buttons

Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

The radio button is basically used to chose the identification for humans (male or female)

Sample program for the radio button

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="radio">
<label><input type="radio" name="optradio">Male</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Female</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Other</label>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This is the output for the radio button

Radio button using the inline

Inline class is used so the radio button apears in a single line

.radio-inline class is used to set an inline checkbox

Sample program for inline radio button

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<label class="radio-inline"><input type="radio" name="optradio">Male</label>
<label class="radio-inline"><input type="radio" name="optradio">Female</label>
<label class="radio-inline"><input type="radio" name="optradio">Other</label>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This is the output for the inline radio button

Select List

Select lists are used if you want to allow the user to pick from multiple options.

Sample program for the select list

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This is the output for the bootstrap select list

Static Control

If you want plain text next to a form label within a horizontal form use .form-cotrol-static

That is included in to the <p> tag

Sample program for the static control

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This is the output for the static control

Input Groups

This .input-group is used to enhance an input by adding an icons, text or button in front or behind it as a “help text”,

.input-group-addon class attaches an icon or help text to the input field
.input-group-btn class is used button next an input it is combined to gather in to the search bar

Sample program for the input groups

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="input-group">
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This the output for the bootstrap input groups

Input Sizing

Input sizing in form

There are two types of input sizing; one is large another one is small,

.input-lg-* class is used for the large size
.input-sm-* class is used for the small size

Quickly size labels and form controls within horizontal forms to add .form-group class to the <div class=”form-group”> tag element

Sample program for input sizing

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<form>
<div class="form-group">
<label for="inputsm">Small input</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">Large input</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

This is the output for the input sizing

Conclusion

I hope now you can understand how to use and create the Bootstrap Form inputs and sizing. In the future we can learn about the Bootstrap techniques step by step. Stay tuned.

Up Next

Ebook Download

View all

Frontend Developer Interview

Read by 3 people

Download Now!

Learn

View all