Post
Ask Question

Extending Form Controls With Bootstrap

Bootstrap input groups component is used to create interactive form controls limited to only textual input. Input group component is very flexible and powerful component. Bootstrap will extend <input> element by prepending and appending text or icons or buttons to its either sides. Extending the form control will make the form look more attractive.

Creating Prepended and Appended Inputs

Bootstrap provides prepending and appending of text inputs by following the steps:
  1. Place the text or icon in a <span> tag with class .input-group-addon.
  2. Place <span> element before or after the <input> .
  3. Place <span> and <input> elements within a <div> element.
  4. Apply .input-group class on it.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
  9.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstraptheme.min.css" integrity="sha384-  
  10. rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  
  11.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
  12.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-  
  13. Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  
  14.     <style type="text/css">  
  15.         .bs-example {  
  16.             margin: 20px;  
  17.         }  
  18.     </style>  
  19. </head>  
  20.   
  21. <body>  
  22.     <div class="bs-example">  
  23.         <form>  
  24.             <div class="row">  
  25.                 <div class="col-xs-4">  
  26.                     <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="text" class="form-control" placeholder="Username"> </div>  
  27.                 </div>  
  28.                 <div class="col-xs-4">  
  29.                     <div class="input-group"> <input type="text" class="form-control" placeholder="Amount"> <span class="input-group-addon">.00</span> </div>  
  30.                 </div>  
  31.                 <div class="col-xs-4">  
  32.                     <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="US Dollar"> <span class="input-group-addon">.00</span> </div>  
  33.                 </div>  
  34.             </div>  
  35.         </form>  
  36.         <hr>  
  37.         <form>  
  38.             <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="text" class="form-control" placeholder="Username"> </div> <br>  
  39.             <div class="input-group"> <input type="text" class="form-control" placeholder="Amount"> <span class="input-group-addon">.00</span> </div> <br>  
  40.             <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="US Dollar"> <span class="input-group-addon">.00</span> </div>  
  41.         </form>  
  42.     </div>  
  43. </body>  
  44.   
  45. </html>  
Creating Buttons with Bootstrap

Bootstrap buttons play vital part in the development of a website and application. Buttons perform functions of submitting and resetting HTML form, which performs interactive actions such as displaying or hiding elements on a Web page by a button click. Bootstrap buttons with CSS help in creating and customizing buttons quickly and easily.

Bootstrap Button Styles

Bootstrap button classes are used to style buttons and indicate different states that can be applied to any element. These classes are applied to the elements - <a>, <input>, and <button>.

Changing Buttons’ Sizes

Bootstrap provides further scaling of a button up or down. Bootstrap buttons’ sizes can be increased or decreased by adding .btn-lg, .btn-sm, or .btn-xs classes.