Bootstrap Snippet Sidebar Design with product page using HTML CSS Bootstrap

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="page-section">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="sidebar-wrap">
                    <div class="sidebar-box">
           <ul class="list-links">
              <a href="#"><li>Agriculture</li></a>
              <a href="#"><li>Astrology</li></a>
              <a href="#"><li>Animals & Pets</li></a>
              <a href="#"><li>ARCHITECTURE</li></a>
              <a href="#"><li>ART & PHOTOGRAPHY</li></a>
              <a href="#"><li>AUCTION TEMPLATES</li></a>
              <a href="#"><li>BEAUTY</li></a>
              <a href="#"><li>BOOKS</li></a>
              <a href="#"><li>BUSINESS</li></a>
              <a href="#"><li>CAFE AND RESTAURANT</li></a>
              <a href="#"><li>CARS</li></a>
              <a href="#"><li>CHARITY</li></a>
              <a href="#"><li>CHRISTMAS TEMPLATES</li></a>
              <a href="#"><li>COMMUNICATIONS</li></a>
              <a href="#"><li>COMPUTERS</li></a>
              <a href="#"><li>DATING</li></a>
              <a href="#"><li>EDUCATION</li></a>
              <a href="#"><li>ELECTRONICS</li></a>
              <a href="#"><li>ENTERTAINMENT</li></a>
              <a href="#"><li>EXTERIOR DESIGN</li></a>
              <a href="#"><li>FAMILY</li></a>
              <a href="#"><li>FASHION</li></a>
              <a href="#"><li>FOOD & DRINK</li></a>
              <a href="#"><li>GAMES</li></a>
              <a href="#"><li>GIFTS</li></a>
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
body {background:#fff;}
hr {border:1px solid red;}
h1 {font-size:32px;font-weight:600;}
h2{font-size:30px;font-weight:600;}
h3{}
h4{}
h5{}
p {line-height:24px;}
.margin-t-15 {margin-top:15px;}
/********************** PRODUCT CSS ***********/
.product-box {opacity: 0.7;border:1px solid #e2e2e2;  min-height:150px; }
.product-box:hover {color:#fff;background:#e2e2e2;opacity: 1.0;box-shadow: 1px 4px 4px rgba(0, 0, 0, .5);transition: all .2s;}
.product-img img {width:100%;border-radius: 0px; max-height:auto;}
.product-img img:hover {opacity: 1.0;}
.product-name{padding:10px;}
.product-name a {color:#000}
.product-name a:hover {}
.product-lists ul li a {font-size:14px;color:#dd000;}
/*************** CONTENT CSS *************/
.content-wrap {padding:15px;background: #fff; min-height: 50px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);position: relative;margin-bottom: 30px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px;    border-radius: 2px;}
/******************* SIDEBAR CSS ***************/
.sidebar-wrap {padding:15px 0px 15px 0px;background: #fff; min-height: 50px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);position: relative;margin-bottom: 30px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px;    border-radius: 2px;}
.list-links li {border-top: 1px dotted #d4d4d4; padding: 4px 10px 4px;border-bottom: 1px dotted #d4d4d4;list-style:none;margin: 0px;}
.sidebar-box ul {margin:0px; padding:0px;}
.sidebar-box ul a {text-transform:lowercase;font-size:14px; letter-spacing:0px; color:#000;}
.sidebar-box li:hover {color:#fff;background:#dd0000; box-shadow: 0px 0px .5px 0px rgba(50, 50, 50, 0.95); }
.sidebar-box ul a:hover {list-style:none;text-decoration: none;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sidebar Design with product page"
Bootstrap 3.3.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"Sidebar Design with product page" Bootstrap 3.3.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"Sidebar Design with product page"
Bootstrap 3.3.0 Snippet by jeevan123456