English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 Support the following form controls:
input
textarea
checkbox
radio
select
Bootstrap supports all HTML input types5 Input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Note: If the type attribute of input is not declared correctly, the input box style will not be displayed.
The following example uses two input elements, one is text, and the other is password:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <div class="container"> <h2>Form control: input</h2> <p>The following example uses two input elements, one is text, and the other is password:</p>/p> <form> <div class="form-group"> <label for="usr">Username:</label>/label> <input type="text" class="form-control" id="usr"> </div> <div class="form-group"> <label for="pwd">Password:</label>/label> <input type="password" class="form-control" id="pwd"> </div> </form> </div> </body> </html>Test It Out ‹/›
The following example demonstrates the style of textarea.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <div class="container"> <h2>Form control: textarea</h2> <p>The following example demonstrates the style of textarea.</p>/p> <form> <div class="form-group"> <label for="comment">Comment:</label>/label> <textarea class="form-control" rows="5" id="comment"></textarea> </div> </form> </div> </body> </html>Test It Out ‹/›
Checkboxes are used to allow users to select one or more options from a series of predefined options.
The following example includes three options. The last one is disabled:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <div class="container"> <h2>Form control: checkbox</h2> <p>The following example includes three options. The last one is disabled: </p> <form> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 1 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 2 </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="checkbox" class="form-check-input value="" disabled>Option 3 </label> </div> </form> </div> </body> </html>Test It Out ‹/›
use .form-check-inline class allows options to be displayed on the same line:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <div class="container"> <h2>Form control: checkbox</h2> <p>The following example includes three options. The last one is disabled, using .form-check-inline class allows options to be displayed on the same line: </p> <form> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 1 </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 2 </label> </div> <div class="form-check form-check-inline disabled"> <label class="form-check-label"> <input type="checkbox" class="form-check-input value="" disabled>Option 3 </label> </div> </form> </div> </body> </html>Test It Out ‹/›
Radio buttons are used to allow users to select one option from a series of pre-set options, only one can be selected.
The following example includes three options. The last one is disabled:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <div class="container"> <h2>Form Controls: radio</h2> <p>The following example includes three options. The last one is disabled: </p> <form> <div class="radio"> <label><input type="radio" name="optradio">Option 1</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Option 2</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" disabled>Option 3</label> </div> </form> </div> </body> </html>Test It Out ‹/›
Use .radio-inline class allows options to be displayed on the same line:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <div class="container"> <h2>Form Controls: radio</h2> <p>The following example includes three options. The last one is disabled, using .radio-inline class allows options to be displayed on the same line: </p> <form> <label class="radio-inline"><input type="radio" name="optradio">Option 1</label> <label class="radio-inline"><input type="radio" name="optradio">Option 2</label> <label class="radio-inline"><input type="radio" name="optradio" disabled>Option 3</label> </form> </div> </body> </html>Test It Out ‹/›
When you want users to select one option from multiple options, but only one option can be selected by default, then use the selection box.
The following examples include two dropdown menus:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <div class="container"> <h2>Form Controls: select</h2> <p>The following form includes two dropdown menus (select lists):</p> <form> <div class="form-group"> <label for="sel1">Single Choice Dropdown Menu:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <br> <label for="sel2">Multiple Choice Dropdown Menu (Hold down the shift key to select multiple options):</label> <select multiple class="form-control" id="sel2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form> </div> </body> </html>Test It Out ‹/›