<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="modal fade small-popup in" id="menu-filter" role="dialog" style="display: block; padding-right: 17px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="foodlistmodal-container">
<div class="option-holder">
<div class="foodchef-tab-container">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 foodchef-tab-menu">
<div class="list-group">
<a href="#" class="list-group-item text-center">
<h4 class="fa fa-filter"></h4><br>Main Heading
</a>
<a href="#" class="list-group-item text-center active">
<h4 class="fa fa-users"></h4><br>Put The Suitable Heading Here
</a>
<a href="#" class="list-group-item text-center">
<h4 class="fa fa-cubes"></h4><br>Put The Suitable Heading Here
</a>
<a href="#" class="list-group-item text-center">
<h4 class="fa fa-cutlery"></h4><br>The Main Heading