Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Bootstrap Panel Custom Design
How to make Custom Design Bootstrap Panel
@author : Shubham Maurya,
Email id :
Hi all , Welcome to , 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.
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>
<title>Bootstrap Panel Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></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;
} {
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;
<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"
<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 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment