Open In App

Bootstrap 4 | Inputs

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

List of form control in bootstrap 4.

  1. Input
  2. Textarea
  3. Checkboxes
  4. Inline Checkboxes
  5. Radio Buttons
  6. Select list
  7. Form Control Sizing
  8. Form Control with Plain Text
  9. Form Control File and Range

1. Input type: The input types that Bootstrap 4 supports are text, password, number. datetime, datetime-local, date, month, time, week, email, url, search, tel, and color that means it support all the HTML 5 input types.

Below is the implementation of all the input types.

Text, Password, and number code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <div class="container">
            <h2 style="color:green;">GeeksforGeeks</h2>
              
<p>The form below contains type text and one
                of type password:</p>
  
            <form>
                <div class="form-group">
                    <label for="usr">Name:</label>
                    <input type="text" class="form-control" 
                        id="usr" name="username">
                </div>
                <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" 
                        id="pwd" name="password">
                </div>
                <div class="form-group" style="width:100px;">
                    <label for="number">Number:</label>
                    <input type="number" class="form-control" 
                        id="number">
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit</button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

Time, Date, Date and time, Week and month code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .st_row {
            width: 200px;
            float: left;
        }
        .nd_row {
            width: 200px;
            float: right;
        }
    </style>
</head>
<body>
    <center>
        <div class="container">
            <h2 style="color:green;">GeeksforGeeks</h2>
              
<p>The form below contains Current time,Current date,
                Current date and time Current week and Current month:</p>
  
            <form>
                <div class="form-group">
                    <div class="st_row">
                        <label for="time">Current time:</label>
                        <input type="time" class="form-control" id="time">
                        <label for="dt">Current date:</label>
                        <input type="date" class="form-control" id="dt">
                    </div>
                    <div class="nd_row">
                        <label for="datetime-local">Current date and time:
                        </label>
                        <input type="datetime-local" class="form-control" 
                            id="datetime-local">
                        <label for="week">Current week:</label>
                        <input type="week" class="form-control" id="week">
                    </div>
                    <div class="rd_row">
                        <label for="month">Current month :</label>
                        <input type="month" class="form-control" id="month">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

url, Search, tel, and color code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .st_row {
            width: 250px;
            float: left;
            margin-bottom: 10px;
        }
        .nd_row {
            width: 250px;
            float: right;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <center>
        <div class="container">
            <h2 style="color:green;">GeeksforGeeks</h2>
              
<p>The form below contains url ,Search ,tel and color:</p>
  
            <form>
                <div class="form-group">
                    <div class="st_row">
                        <label for="url">url:</label>
                        <input type="url" class="form-control" 
                            id="url">
                        <label for="search">Search:</label>
                        <input type="search" class="form-control" 
                            id="search">
                    </div>
                    <div class="nd_row">
                        <label for="tel">tel:</label>
                        <input type="tel" class="form-control" 
                            id="tel">
                        <label for="color">color:</label>
                        <input type="color" class="form-control" 
                            id="color">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

2.Textarea: Textarea basically used for feedback or for commenting section

Code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <div class="container">
            <h1 style="color:green">GeeksforGeeks</h1>
              
<p>
                The form below contains a textarea for 
                comments or feedbacks:
            </p>
  
            <form action="/action_page.php">
                <div class="form-group">
                    <label for="comment">Comment | Feedback:</label>
                    <textarea class="form-control" rows="6" 
                        id="comment" name="text">
              </textarea>
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

3. Checkboxes: It is used for selecting any specific items from the provided list. Here we will use class=”form-check” to maintain the proper margin, to label elements “.form-check-label” and to style the check-boxes we will use “.form-check-input”

Code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <div class="container">
            <h1 style="color:green">GeeksforGeeks</h1>
              
<p>
                The form below contains three checkboxes.
                The first option is checked by default,
                and the second option is disabled:
            </p>
  
            <form action="/action_page.php">
                <div class="form-check">
                    <label class="form-check-label" for="check1">
                        <input type="checkbox" class="form-check-input" 
                            id="check1" name="option1" value="something"
                            checked>
                        Option 1
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label" for="check2">
                        <input type="checkbox" class="form-check-input" 
                            id="check2" disabled>Option 2
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" 
                            name="option2" value="something">
                            Option 3
                    </label>
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

4. Inline Checkboxes: To use inline checkboxes just replace “form-check-label” with “form-check-inline” and contains all the option in a single <div>

Code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <div class="container">
            <h1 style="color:green">GeeksforGeeks</h1>
              
<p>The form below contains three inline checkboxes.
                The first option is checked by default,
                and the last option is disabled:</p>
  
            <form action="/action_page.php">
                <div class="form-check">
                    <label class="form-check-inline" for="check1">
                        <input type="checkbox" class="form-check-input" 
                            id="check1" name="option1" value="something"
                            checked>Option 1
                    </label>
                    <label class="form-check-inline" for="check2">
                        <input type="checkbox" class="form-check-input" 
                            id="check2" name="option2"
                            value="something">Option 2
                    </label>
                    <label class="form-check-inline">
                        <input type="checkbox" class="form-check-input" 
                            disabled>Option 3
                    </label>
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

5. Radio Buttons: Radio button is used for selecting only option from multiple options by user. It is similar to Checkboxes just remove the “checkbox” from input type and place “radio” and also we can use that inline radio button. 

Code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <div class="container">
            <h1 style="color:green">GeeksforGeeks</h1>
              
<p>The form below contains three radio buttons.
                The first option is checked by default, and the
                last option is disabled:</p>
  
            <form action="/action_page.php">
                <div class="form-check">
                    <label class="form-check-label" for="radio1">
                        <input type="radio" class="form-check-input" 
                            id="radio1" name="optradio" value="option1"
                            checked>Option 1
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label" for="radio2">
                        <input type="radio" class="form-check-input" 
                            id="radio2" name="optradio" value="option2">
                            Option 2
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" 
                            class="form-check-input" disabled>
                        Option 3
                    </label>
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

6. Select list: There is two type of select list here selecting single element from a list and selecting two or more element from the list to select multiple elements just hold the shift key and select your items one by one. 

Code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <div class="container">
            <h1 style="color:green">GeeksforGeeks</h1>
              
<p>
                The form below contains two dropdown 
                menus (select lists):
            </p>
  
            <form action="/action_page.php">
                <div class="form-group">
                    <label for="geeks1">
                        Select list (select one):
                    </label>
                    <select class="form-control" 
                        id="sel1" name="sellist1">
                        <option>Python</option>
                        <option>C++</option>
                        <option>C#</option>
                        <option>Java</option>
                    </select>
                    <br>
                    <label for="geeks2">Multiple select list
                        (to select more than one old shift):</label>
                    <select multiple class="form-control" 
                        id="sel2" name="sellist2">
                        <option>Python</option>
                        <option>C++</option>
                        <option>C#</option>
                        <option>Java</option>
                        <option>MongoDB</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

7. Form Control Sizing: We will use .form-control-sm or .form-control-lg: to change the size of the form control.

Code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <div class="container">
            <h1 style="color:green">GeeksforGeeks</h1>
              
<p>
                Change the size of the form control
                with .form-control-sm or .form-control-lg:
            </p>
  
            <form action="/action_page.php">
                <div class="form-group">
                    <input type="text" 
                        class="form-control form-control-sm" 
                        placeholder="Small form control"
                        name="text1">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" 
                        placeholder="Default form control" 
                        name="text2">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control form-control-lg" 
                        placeholder="Large form control"
                        name="text3">
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

8. Form Control with Plain Text: If you want to modify the input field as plain text then you can use “.form-control-plaintext” in place of “form-control form-control” which is in the input tag class.

Code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <div class="container">
            <h1 style="color:green">GeeksforGeeks</h1>
              
<p>Change the size of the form control with
                form-control-plaintext: </p>
  
            <form action="/action_page.php">
                <div class="form-group">
                    <input type="text" class="form-control-plaintext" 
                        placeholder="form-control-plaintext" name="text1"
                        style="border:2px solid black;">
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

9. Form Control File and Range: You can add the .form-control-range class to input type”range” or .form-control-file to input type”file” to style a range control else a file field with full-width.

Code:

HTML




<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <center>
        <div class="container">
            <h1 style="color:green">GeeksforGeeks</h1>
              
<p>.form-control-range class to input type"range"
                or .form-control-file to input type"file" 
                to style a range control or a file field 
                with full-width:</p>
  
            <form action="/action_page.php">
                <div class="form-group">
                    <input type="range" 
                        class="form-control-range" name="range">
                </div>
                <div class="form-group">
                    <input type="file" 
                        class="form-control-file border" name="file">
                </div>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </form>
        </div>
    </center>
</body>
</html>


Output:

 



Last Updated : 04 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads