Mauryashubham/index.html

## index.html
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>
	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>