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.
<!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.
<!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.
<!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
This tool makes it easy to create, adjust, and experiment with custom colors for the web.

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

Find here examples of creative and unique website layouts.

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