Arrange multiple checkboxes in a grid with CSS and div - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:input checkbox

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. input checkbox

Description

Arrange multiple checkboxes in a grid with CSS and div

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.row {<!--from   w  w  w .  j  av  a2 s. c  om-->
   border:2px solid Chartreuse;
   overflow:hidden;
   padding:6px;
}

.col {
   border:2px solid yellow;
   float:left;
   padding:6px;
   margin-right:6px;
}
</style> 
 </head> 
 <body> 
  <div class="row"> 
   <div class="col"> 
    <input type="checkbox"> 
    <label>Box 1</label> 
   </div> 
   <div class="col"> 
    <input type="checkbox"> 
    <label>Box 2</label> 
   </div> 
   <div class="col"> 
    <input type="checkbox"> 
    <label>Box 3</label> 
   </div> 
   <div class="col"> 
    <input type="checkbox"> 
    <label>Box 4</label> 
   </div> 
  </div> 
  <div class="row"> 
   <div class="col"> 
    <input type="checkbox"> 
    <label>Box 5</label> 
   </div> 
   <div class="col"> 
    <input type="checkbox"> 
    <label>Box 6</label> 
   </div> 
   <div class="col"> 
    <input type="checkbox"> 
    <label>Box 7</label> 
   </div> 
   <div class="col"> 
    <input type="checkbox"> 
    <label>Box 8</label> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials