Bootstrap Snippet Divs in Grid using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Divs in Grid"
Bootstrap 3.2.0 Snippet by rEboOt

Related: See More

Questions / Comments:

"Divs in Grid" Bootstrap 3.2.0 Snippet by rEboOt

Related: See More

Questions / Comments:

"Divs in Grid"
Bootstrap 3.2.0 Snippet by rEboOt