"Divs in Grid"
Bootstrap 3.2.0 Snippet by rEboOt

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link href="style4.css" rel="stylesheet" /> <title>Dummy Page</title> <script type="text/javascript" src="/expi/jquery.js"></script> <script type="text/javascript" src="/expi/JavaScript4.js"></script> </head> <body> <h1 class="h1">Header</h1> <div></div> <div></div> <div class="center"> <ul class="ul"> <li class="litem"><a href="#a">Browse Channels</a></li> <li><a href="#b">View Schedule</a></li> <li><a href="#b">Book Slots</a></li> <li><a href="#b">Talk To Assistant</a></li> <li><a href="#b">Contact Us</a></li> </ul> </div> <div class="div2"> <div class="d1" id="one"> <h3 class="h3">First Division</h3> <hr color="black" /> <p class="text-green"> This uses a special class named "text-green" which is assigned the color green. But when you hover over the text the color of the text changes. This uses a special class named "text-green" which is assigned the color green. But when you hover over the text the color of the text changes. </p> <br /> <button class="btn" ID="Button1" runat="server" ClientIDMode="Static">Click Me to Hide</button> </div> <div class="d1" id="two"> <h3 class="h3">Second Division</h3> <hr color="black" /> <p class="text-red" > This uses a special class named "text- red" which is assigned the color green. But when you hover over the text the color of the text changes. This uses a special class named "text- red" which is assigned the color green. But when you hover over the text the color of the text changes. </p> <br /> <button class="btn" ID="Button2" runat="server">Click Me to Hide</button> </div> <div class="d1" id="three"> <h3 class="h3">Thrid Division</h3> <hr color="black" /> <p class="text-blue"> This uses a special class named "text-blue" which is assigned the color green. But when you hover over the text the color of the text changes. This uses a special class named "text-blue" which is assigned the color green. But when you hover over the text the color of the text changes. </p> <br /> <button class="btn" ID="Button3" runat="server">Click Me to Hide</button> </div> <div class="d1" id="four"> <h3 class="h3">Fourth Division</h3> <hr color="black" /> <p class="text-yellow"> This uses a special class named "text-yellow" which is assigned the color green. But when you hover over the text the color of the text changes. This uses a special class named "text-yellow" which is assigned the color green. But when you hover over the text the color of the text changes. </p> <br /> <button class="btn" ID="Button4" runat="server">Click Me to Hide </button> </div> </div> </body> </html>
body { background-color:azure; } .h1{ text-align:center; color:grey; font-family:'Comic Sans MS'; font-style:oblique; } div.center{ margin:auto; width:1100px; height:50px; padding-top:1px; background-color:chocolate; border-radius:30px; display:block; } li{ display:inline; float:left; } a{ margin-right:15px; margin-left:15px; color:#000000; height:70px; width:300px; padding:25px 25px 25px 25px; background-color:#6dd0bb; text-decoration:none; font-size:20px; border-radius:50px; -moz-transition:0.5s; -webkit-transition:0.5s; } a:hover{ font-size:x-large; background-color:lightgreen; } .div2{ position:static; width:auto; margin-top:100px; } .d1{ text-align:center; margin-right:30px; margin-left:30px; float:left; background-color:#f3b595; display:inline; padding:inherit; border-radius:20px; height:300px; width:250px; } .h3{ text-align:center; color:brown; font-family:'Comic Sans MS'; font-style:italic; text-decoration-line:underline; } p{ margin-top:15px; margin-bottom:15px; display:inline; padding:inherit; } .btn{ margin-top:15px; text-align:center; font-size:large; resize:both; font-family:Calibri; font-style:italic; color:white; background-color:black; border-radius:100px; } .text-green { color: #468847; } .text-green:hover { color: #356635; } .text-red { color: #b94a48; } .text-red:hover { color: #953b39; } .text-blue { color: #236698; } .text-blue:hover { color: darkblue; } .text-yellow { color:#dae54c; } .text-yellow:hover { color:#cf9a2c; }
$(document).ready(function () { $("#Button1").click(function () { $("#one").hide('slow'); }); $("#Button2").click(function () { $("#two").hide('slow'); }); $("#Button3").click(function () { $("#three").hide('slow'); }); $("#Button4").click(function () { $("#four").hide('slow'); }); });

Related: See More


Questions / Comments: