Place checkbox or radio button within input group's addon instead of text. - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Form Control

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Form Control

Description

Place checkbox or radio button within input group's addon instead of text.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Bootstrap 3 Prepended and Appended Inputs</title>
    <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/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head><!--from  w  w  w. j  a v  a  2s .  c o  m-->
 <body>
  <div>
   <form>
    <div class="row">
     <div class="col-xs-6">
      <div class="input-group">
       <span class="input-group-addon"> <input type="checkbox"> </span>
       <input type="text" class="form-control">
      </div>
     </div>
     <div class="col-xs-6">
      <div class="input-group">
       <span class="input-group-addon"> <input type="radio"> </span>
       <input type="text" class="form-control">
      </div>
     </div>
    </div>
   </form>
   <hr>
   <form>
    <div class="input-group">
     <span class="input-group-addon"> <input type="checkbox"> </span>
     <input type="text" class="form-control">
    </div>
    <br>
    <div class="input-group">
     <span class="input-group-addon"> <input type="radio"> </span>
     <input type="text" class="form-control">
    </div>
   </form>
  </div>
 </body>
</html>

Related Tutorials