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>

Download the project from Github : Download

Comment Below, If any problem occurs.


Get More Bootstrap Code Here : Go Here

By jackmaurya121

Hi , My Name is Shubham Maurya and i am currently working as a Project Manager.

Leave a Reply