HTML Tutorial

Bootstrap Input

Bootstrap Tutorial » Bootstrap Input

Bootstrap supports this type form controls:

input
textarea
checkbox
radio
select

Text-type form fields can be modified to display text or a button in front, behind, or on both sides.
To do this, the field is grouped within an element with the class .input-group and the element that goes before or after is marked with the class .input-group-addon.

Bootstrap Input - example

The next example contains two input elements as: type text and other one type password.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Bootstrap Input - example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<div class="container">

  <h2>Form control: input</h2>

  <p>The form below contains two input elements as: type text and the other one type password.</p>

  <form>

  <div class="form-group">

  <label for="usr">Name_Surname:</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>

  </form>

  </div>
</body>

  </html>

Bootsprap Sizing - example

Field groups can be easily resized by resizing the main form field.
In this way, when applying the CSS class corresponding to the .input-group element, the rest of the group elements are automatically resized.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Bootsprap Sizing - example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<div class="container">

  <div class="input-group input-group-lg">

  <span class="input-group-addon">@</span>

  <input type="text" class="form-control" placeholder="User_name">

  </div>

  <br />

  <div class="input-group">

  <span class="input-group-addon">@</span>

  <input type="text" class="form-control" placeholder="User_name">

  </div>

  <br />

  <div class="input-group input-group-sm">

  <span class="input-group-addon">@</span>

  <input type="text" class="form-control" placeholder="User_name">

  </div>

  </div>
</body>

  </html>

Bootstrap attaching checkboxes and radiobuttons - example

In addition to text, form fields can also be attached (in front, behind or on both sides) other radiobutton or checkbox type form fields.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<div class="container">

  <h2>Bootstrap attaching checkboxes and radiobuttons</h2>
<div class="input-group mb-3">

  <div class="input-group-prepend">

  <div class="input-group-text">

  <input type="checkbox" aria-label="Checkbox for following text input">

  </div>

  </div>

  <input type="text" class="form-control" aria-label="Text input with checkbox">

  </div>
<div class="input-group">

  <div class="input-group-prepend">

  <div class="input-group-text">

  <input type="radio" aria-label="Radio button for following text input">

  </div>

  </div>

  <input type="text" class="form-control" aria-label="Text input with radio button">

  </div>

  </div>
</body>

  </html>

Bootstrap Input group, text, width, number, type date, type, file, small, type number, date, mask
Bootstrap Input - bootstrap

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.