<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="body"> <div class="container-fluid"> <h1> Market Research <small>analytics</small> </h1> <div class="row"> <div class="col-md-12"> <div class="page-header"> <input type="text" class="form-control" ng-model="search" placeholder="Search for specific research data"> <div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="filterDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Filter by </button> <div class="dropdown-menu" aria-labelledby="filterDropdown"> <a class="dropdown-item" href="#" ng-click="filterBy('date')">Date</a> <a class="dropdown-item" href="#" ng-click="filterBy('subscriptions')">Subscriptions</a> <a class="dropdown-item" href="#" ng-click="filterBy('products')">Products</a> <a class="dropdown-item" href="#" ng-click="filterBy('auctions')">Auctions</a> </div> </div> <div ng-bind="products-analytics"> <h2 id="text">Products</h2> <ul class="list-group"> <li class="list-group-item"> <div class="row"> <div class="col-md-2"> <span>Product A</span> </div> <div class="col-md-2"> <span class="badge badge-primary">Technology</span> </div> <div class="col-md-2"> <span class="badge badge-success">199.99€</span> </div> <div class="col-md-2"> <span class="badge badge-secondary">Used</span> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-md-2"> <span>Product B</span> </div> <div class="col-md-2"> <span class="badge badge-primary">Fashion</span> </div> <div class="col-md-2"> <span class="badge badge-success">49.99€</span> </div> <div class="col-md-2"> <span class="badge badge-secondary">Used</span> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-md-2"> <span>Product C</span> </div> <div class="col-md-2"> <span class="badge badge-primary">Home</span> </div> <div class="col-md-2"> <span class="badge badge-success">79.99€</span> </div> <div class="col-md-2"> <span class="badge badge-secondary">New</span> </div> </div> </li> </ul> </div> <div ng-bind="auctions-analytics"> <h2 id="text">Auctions</h2> <ul class="list-group"> <li class="list-group-item"> <div class="row"> <div class="col-md-2"> <span class="badge-name">Auction X</span> </div> <div class="col-md-2"> <span class="badge badge-primary badge-name">Collectibles</span> </div> <div class="col-md-2"> <span class="badge badge-success badge-name">Product X</span> </div> <div class="col-md-2"> <span class="badge badge-secondary badge-name">2023-06-15</span> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-md-2"> <span class="badge-name">Auction Y</span> </div> <div class="col-md-2"> <span class="badge badge-primary badge-name">Sports</span> </div> <div class="col-md-2"> <span class="badge badge-success badge-name">Product Y</span> </div> <div class="col-md-2"> <span class="badge badge-secondary badge-name">2023-07-01</span> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-md-2"> <span class="badge-name">Auction Z</span> </div> <div class="col-md-2"> <span class="badge badge-primary badge-name">Art</span> </div> <div class="col-md-2"> <span class="badge badge-success badge-name">Product Z</span> </div> <div class="col-md-2"> <span class="badge badge-secondary badge-name">2023-08-10</span> </div> </div> </li> </ul> </div> </div> <script src="https://code.jquery.com /jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </div> </div> </div> </div> </body> </html>

.container-fluid { width: 60%; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.5); } .form-control{ font-size:20px; padding: 10px; margin-bottom: 10px; width: 500px; } .btn { padding: 10px; font-size: 20px; } .badge { font-size: 20px; padding:10px; } .list-group { font-size:20px; width: 100%; padding:10px; }