/Bootstrap Panel Custom Design
Bootstrap Panel Custom Design

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>

Download the project from Github : Download

Comment Below, If any problem occurs.

STAY CONNECTED FOR MORE

Get More Bootstrap Code Here : Go Here

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