"Sidebar Design with About us page"
Bootstrap 3.3.0 Snippet by jeevan123456

Post to Facebook Tweet this

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
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;}
/*************** 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

Related: See More

Paper Bootstrap Wizard
Simple & Clean 404 Error Page Design
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form

Questions / Comments: