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:

 <!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="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
</head>
<body>

<div class="container">
  <h2>Input type: checkbox</h2>
  <form role="form">
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 1</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 2</label>
  
    </div>
  </form>
</div>
 <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

<!-- Mirrored from www.trainingtrains.com/bootstrap-inputs by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 21 Jun 2016 08:25:31 GMT -->
</html>

Test it Now

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

See this 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="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  
</head>
<body>

<div class="container">
  <h2>Inline checkbox</h2>
  <p>The following checkboxes appear in the same line :</p>
  <form role="form">
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 2
    </label>
  </form>
</div>
<script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Test it Now

Bootstrap Radio Buttons

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

See this 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="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  
</head>
<body>
<div class="container">
  <h2>Input type: Radio buttons</h2>
  
  <form role="form">
    <div class="radio">
      <label><input type="radio" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
  </form>
</div>
<script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Test it Now

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

See this 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="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  
</head>
<body>

<div class="container">
  <h2>Inline radio buttons</h2>
  <p>The following radio boxes appear in the same line:</p>
  <form role="form">
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
  </form>
</div>
<script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Test it Now

Next TopicBootstrap Modals

← prev next →

Bootstrap Tutorial

Bootstrap Examples

Bootstrap Advance

Interview Questions

Bootstrap Inputs

Bootstrap Input Types

Bootstrap Checkbox

Bootstrap Radio Buttons