Bootstrap Form

The form is the basic element of any web page. Most of the websites contain forms. Bootstrap forms provide an easy way to create forms where the label, input fields, buttons are styled and aligned in predefined class. Let see how we can use bootstrap forms.

Bootstrap Forms layout

Bootstrap provides 3 types of layout

Vertical form
Horizontal form
Inline form

Bootstrap Vertical form layout

It is the default form layout where styles are added without changing the basic class in <form> element.

Example: Creating vertical layout form using Bootstrap

Let us see how we can create a vertical form using the bootstrap form. <label> in the form is used to give level heading. In this case, it is Email. <input> tag is used for taking data from users with a placeholder that tells the user to enter data. Here <button> element is added to submit the above information.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>

<div class="container">
  <h2>vertical form</h2>
  <form action="/action_page.php">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

Output:

Here is the basic vertical form design.

Vertical form design

Bootstrap Horizontal form layout

In the Horizontal form, labels are aligned next to the input field. There are some rules to create a horizontal form.

.form-horizontal is added to <form> element in the class
.control-label is added to all <label> elements in the class

Example: Creating horizontal layout using Bootstrap

Here is the example to illustrate horizontal form. Here we have added the above-stated horizontal properties to the form. Along with it we have modified columns using utility class.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>

<div class="container">
  <h2>Horizontal form</h2>
  <form class="form-horizontal" action="/action_page.php">
    <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>

</body>
</html>

Output:

Here is the resultant output of horizontal form creation.

Horizontal-form

Bootstrap Inline form layout

In inline forms, all labels are inline, left-aligned, and the labels are alongside.

.form-inline is added to the <form> element

Here is the example showing the inline layout of the form.

Example: Creating inline form layout using Bootstrap

Here we have added the inline property stated above to create an inline form layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>

<div class="container">
  <h2>Inline  form</h2>
  <form class="form-inline" action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

</div>

</body>
</html>

Output:

Here is the output showing inline form creation.

inline-form

Bootstrap Form controls

Textual form controls <input>s ,<select>s,<textarea>s are styled using .form-control classes.

Example: Creating form controls using Bootstrap

Here we have created a form that has a list of options. You can select a single item or multiple item. It is defined under <select> class. For multiple selections add .multiple attribute within <select> class.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>
<div class="container">
  <h2>  Form control</h2>
  <form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">single select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2"> multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1"> textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>
</div>
</body>
</html>

Output:

Here is the resultant output showing form controls.

Form-control

Example: Bootstrap Sizing

Specifying sizing of the form control using Bootstrap. The .form-control-lg and .form-control-sm are used to set the height of the text holder.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>

<div class="container">
  <h2>  Form control</h2>
  <form>
  <input class="form-control form-control-lg" type="text" placeholder="large">
  <br>
  <input class="form-control" type="text" placeholder="Default input">
  <br>
  <input class="form-control form-control-sm" type="text" placeholder="small">
  </form>

</div>

</body>
</html>

Output:

Here is the output showing different sizing of the text folder.

Sizing-text folder

Creating Checkbox and radio buttons

Important elements of form are checkbox and radio buttons. checkboxes are used to select multiple elements whereas radio buttons are used to select a single element.
.form-check is used for improving default checkboxes and radio buttons.
The bootstrap form supports Disabling radio buttons and checkboxes.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>

<div class="container">
  <h2>  Radio buttons </h2>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
    Default checkbox
    </label>
  </div>
  <div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
   </label>
  </div>
  
  <h2> Checkbox</h2>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
      Default radio
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
     Second default radio
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    <label class="form-check-label" for="exampleRadios3">
      Disabled radio
    </label>
  </div>
</div>

</body>
</html>

Output:

Here is the output displaying radio buttons and checkbox.

form-buttons

Conclusion

Bootstrap form designs are easy to implement. We can work with different layouts present for form design. Also, modify forms using checkboxes radio buttons, and different size text boxes. It provides all these interactive features.

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Bootstrap Form

Bootstrap Forms layout

Bootstrap Vertical form layout

Example: Creating vertical layout form using Bootstrap

Output:

Bootstrap Horizontal form layout

Example: Creating horizontal layout using Bootstrap

Output:

Bootstrap Inline form layout

Example: Creating inline form layout using Bootstrap

Output:

Bootstrap Form controls

Example: Creating form controls using Bootstrap

Output:

Example: Bootstrap Sizing

Output:

Creating Checkbox and radio buttons

Output:

Conclusion