All for Joomla All for Webmasters

Bootstrap Inputs

Bootstrap Input Types

Input type: checkbox

Input type: radio button


Bootstrap Checkbox

Checkbox facilitates you to select any number of options from a list of present options.

See this example:

  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Input type: checkbox</h2>
  12.   <form role=“form”>
  13.     <div class=“checkbox”>
  14.       <label><input type=“checkbox” value=“”>Option 1</label>
  15.     </div>
  16.     <div class=“checkbox”>
  17.       <label><input type=“checkbox” value=“”>Option 2</label>
  18.     </div>
  19.   </form>
  20. </div>
  21.  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  22.  <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  23. </body>
  24. </html>

Use the .checkbox-inline class if you want the checkboxes to appear on the same line:

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Inline checkbox</h2>
  12.   <p>The following checkboxes appear in the same line :</p>
  13.   <form role=“form”>
  14.     <label class=“checkbox-inline”>
  15.       <input type=“checkbox” value=“”>Option 1
  16.     </label>
  17.     <label class=“checkbox-inline”>
  18.       <input type=“checkbox” value=“”>Option 2
  19.     </label>
  20.   </form>
  21. </div>
  22. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  23. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  24. </body>
  25. </html>

Bootstrap Radio Buttons

Radio buttons also facilitates you to select any number of options from a list of present options.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Input type: Radio buttons</h2>
  12.   <form role=“form”>
  13.     <div class=“radio”>
  14.       <label><input type=“radio” name=“optradio”>Option 1</label>
  15.     </div>
  16.     <div class=“radio”>
  17.       <label><input type=“radio” name=“optradio”>Option 2</label>
  18.     </div>
  19.   </form>
  20. </div>
  21. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  22. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  23. </body>
  24. </html>

Use the .radio-inline class if you want the radio buttons to appear on the same line:

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Inline radio buttons</h2>
  12.   <p>The following radio boxes appear in the same line:</p>
  13.   <form role=“form”>
  14.     <label class=“radio-inline”>
  15.       <input type=“radio” name=“optradio”>Option 1
  16.     </label>
  17.     <label class=“radio-inline”>
  18.       <input type=“radio” name=“optradio”>Option 2
  19.     </label>
  20.   </form>
  21. </div>
  22. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  23. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  24. </body>
  25. </html>
PinIt
submit to reddit

Leave a Reply

Top