<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Dev CRED </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <ul class="list-unstyled"> <li><a href=""><i class="fa fa-linkedin"></i> LinkedIn</a></li> <li><a href=""><i class="fa fa-github"></i> Github</a></li> <li><a href=""><i class="fa fa-bitbucket"></i> Bitbucket</a></li> <li><a href=""><i class="fa fa-stack-exchange"></i> StackOverflow</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Dev RESUME </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <ul class="list-unstyled"> <li><a href=""><i class="fa fa-linkedin"></i> LinkedIn</a></li> <li><a href=""><i class="fa fa-github"></i> Github</a></li> <li><a href=""><i class="fa fa-bitbucket"></i> Bitbucket</a></li> <li><a href=""><i class="fa fa-stack-exchange"></i> StackOverflow</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Dev HISTORY </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <ul class="list-unstyled"> <li><a href=""><i class="fa fa-linkedin"></i> LinkedIn</a></li> <li><a href=""><i class="fa fa-github"></i> Github</a></li> <li><a href=""><i class="fa fa-bitbucket"></i> Bitbucket</a></li> <li><a href=""><i class="fa fa-stack-exchange"></i> StackOverflow</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> ACCOUNT SETTINGS </a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <ul class="list-unstyled"> <li><a href=""><i class="fa fa-user"></i> Profile</a></li> <li><a href=""><i class="fa fa-cogs"></i> Settigns</a></li> <li><a href=""><i class="fa fa-sign-out"></i> Logout</a></li> <li><a href=""><i class="fa fa-sign-out"></i> Delete</a></li> </ul> </div> </div> </div> </div> </div> </div> </div>

.panel-group{ border-radius: 0 !important; /*border: 1px solid #074f68;*/ box-shadow: 1px 1px 3px #074f68; font-family: "Roboto",sans-serif !important; } .panel{ border-radius: 0 !important; font-family: "Roboto",sans-serif !important; } .panel-default{ border-radius: 0!important; } .panel-heading{ border-radius: 0!important; } .panel-body{ padding-top: 2px !important; padding-bottom: 0px !important; padding-left: 15px !important; font-size: 1.2em; } .panel-body ul{ margin-top: 2px; margin-bottom: 2px; } .panel-body ul li{ padding-top: 5px !important; padding-bottom: 5px !important; padding-left: 10px !important; }