Introduction to all Input Groups in Bootstrap
By Saurabh SinghIn this tutorial, we will learn about input groups in Bootstrap which are extended form controls. Using input groups in Bootstrap, we can easily prepend and append text to the text-based inputs.
By adding prepended and appended content to an input field, we can easily add common elements to the user’s input. For example, you can add the dollar symbol or anything else.
Basic Input Groups in Bootstrap
To prepend or append elements to a .form-control−
- Wrap it in a <div> with class .input-group
- Next step, within that same <div>, put your extra content inside a <span> with class .input-group-addon.
- Now place this <span> either before or after the <input> element.
Input Group Sizing in Bootstrap
We can easily change the size of the input groups, by adding sizing classes like .input-group-lg, input-group-sm, input-group-xs to the .input-group. The content within these classes will be automatically resized.
Checkboxes and Radio Add-ons in Bootstrap
You can prepend or append radio buttons and checkboxes instead of text. As given in the code.
Here I am providing the code or you can say simple demonstrated examples:
<!DOCTYPE html>
<html>
<head>
<title> Codespeedy </title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="row">
<div class="col-xs-3">
<div class = "input-group">
<span class = "input-group-addon">$</span>
<input type = "text" class =" form-control" placeholder="Codespeedy">
</div><br>
<div class = "input-group">
<input type = "text" class =" form-control" placeholder="Codespeedy">
<span class = "input-group-addon">.00</span>
</div><br>
<div class = "input-group">
<span class = "input-group-addon">$</span>
<input type = "text" class =" form-control" placeholder="Codespeedy">
<span class = "input-group-addon">.00</span>
</div><br>
<div class = "input-group">
<span class = "input-group-addon">
<input type = "checkbox"></span>
<input type = "text" class =" form-control" placeholder="Codespeedy">
</div><br>
<div class = "input-group">
<span class = "input-group-addon">
<input type = "radio"></span><input type = "text" class =" form-control" placeholder="Codespeedy">
</div><br>
</div>
</div>
</div>
</body>
</html>Learn these too,
Leave a Reply