<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div style="clear:both;"> check me to see the div <input type="checkbox" id="test1ck"> <div class="lool" >Check and Uncheck Me</label><br> <input type="checkbox" id="test2ck"> <div class="lool" >Check and uncheck me too!</div></div> </div>

.lool { display: none; } input[type=checkbox]:checked ~ div.lool { display:block; color: red; }