Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap Panel Custom Design
How to make Custom Design Bootstrap Panel
/**
@author : Shubham Maurya,
Email id : maurya.shubham5@gmail.com
**/
Hi all , Welcome to shubhammaurya.com , Today we are going to discuss ,
How to make Custom Design Bootstrap Panel
In this,we are going to use Bootstrap as front-end framework.
LETS START
Bootstrap Panel Custom Design
So, To start first make a file in notepad and save it as index.html and paste the below code.
<!DOCTYPE html>
<html>
<head>
<head>
<title>Bootstrap Panel Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style type="text/css">
.informationpanelList {
right: 15px;
margin-top: 5px;
font-size: 18px;
position: absolute;
z-index: 999;
padding: 0px 12px;
cursor: pointer;
}
.list-group {
margin-bottom: 0px;
}
.list-group-item {
border-right: 0px;
border-left: 0px;
text-align: left;
}
.list-group-item.active:after {
border-bottom: 13px solid transparent;
border-left: 10px solid #337ab7;
border-top: 13px solid transparent;
content: "";
left: 100%;
margin-top: -13px;
position: absolute;
top: 50%;
}
.panel-body {
padding: 0;
}
.panel-default {
border: 0px;
border-color: #ddd;
}
</style>
</head>
</head>
<body>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 col-md-3 sidenav">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<span class="informationpanelList">
<i class="fa fa-info-circle infoIcon" id="55_icon" aria-hidden="true"
onclick=""></i>
</span>
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<div class="text-left">
<h4><span>Dummy Heading</span></h4>
<small>Enter your dummy paragarh here</small>
</div>
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item active">Dummy Content Here 1</a>
<a href="#" class="list-group-item">Dummy Content Here 2</a>
<a href="#" class="list-group-item">Dummy Content Here 3</a>
<a href="#" class="list-group-item">Dummy Content Here 4</a>
<a href="#" class="list-group-item">Dummy Content Here 5</a>
<a href="#" class="list-group-item">Dummy Content Here 6</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.