Sidebar examples
Component #1
<!-- Content Section -->
<div class="col-lg-3 bg-gray-1000">
<div class="position-relative h-100 max-w-240">
<div class="py-6 pr-3d sidebar-area h-100">
<!-- Categories -->
<div class="border-bottom pb-3 mb-5">
<h6 class="font-secondary font-size-18 font-weight-medium border-bottom pb-2 mb-5">Popular Categories</h6>
<ul class="list-unstyled h-bg-1">
<li class="px-3 py-1 mb-1">
<a href="#" class="d-flex align-items-center text-dark mx-1">
<i class="fas fa-thumbs-up"></i>
<span class="font-size-1 ml-3">Best</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="d-flex align-items-center text-dark mx-1">
<i class="fas fa-eye"></i>
<span class="font-size-1 ml-3">Most Viewed</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="d-flex align-items-center text-dark mx-1">
<i class="fas fa-comment"></i>
<span class="font-size-1 ml-3">Most Commented</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="d-flex align-items-center text-dark mx-1">
<i class="fas fa-star"></i>
<span class="font-size-1 ml-3">Featured</span>
</a>
</li>
<li class="px-3 py-1">
<a href="#" class="d-flex align-items-center text-dark mx-1">
<i class="fas fa-history"></i>
<span class="font-size-1 ml-3">History</span>
</a>
</li>
</ul>
</div>
<!-- End Categories -->
<div class="mb-4">
<!-- Input -->
<form class="input-group input-group-merge mb-4 pb-1">
<input type="search" class="form-control font-size-1 font-secondary" placeholder="Search..." aria-label="Search an app" aria-describedby="searchApp">
<div class="input-group-append">
<span class="input-group-text" id="searchApp">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<path d="M7 0C11-0.1 13.4 2.1 14.6 4.9 15.5 7.1 14.9 9.8 13.9 11.4 13.7 11.7 13.6 12 13.3 12.2 13.4 12.5 14.2 13.1 14.4 13.4 15.4 14.3 16.3 15.2 17.2 16.1 17.5 16.4 18.2 16.9 18 17.5 17.9 17.6 17.9 17.7 17.8 17.8 17.2 18.3 16.7 17.8 16.4 17.4 15.4 16.4 14.3 15.4 13.3 14.3 13 14.1 12.8 13.8 12.5 13.6 12.4 13.5 12.3 13.3 12.2 13.3 12 13.4 11.5 13.8 11.3 14 10.7 14.4 9.9 14.6 9.2 14.8 8.9 14.9 8.6 14.9 8.3 14.9 8 15 7.4 15.1 7.1 15 6.3 14.8 5.6 14.8 4.9 14.5 2.7 13.6 1.1 12.1 0.4 9.7 0 8.7-0.2 7.1 0.2 6 0.3 5.3 0.5 4.6 0.9 4 1.8 2.4 3 1.3 4.7 0.5 5.2 0.3 5.7 0.2 6.3 0.1 6.5 0 6.8 0.1 7 0ZM7.3 1.5C7.1 1.6 6.8 1.5 6.7 1.5 6.2 1.6 5.8 1.7 5.4 1.9 3.7 2.5 2.6 3.7 1.9 5.4 1.7 5.8 1.7 6.2 1.6 6.6 1.4 7.4 1.6 8.5 1.8 9.1 2.4 11.1 3.5 12.3 5.3 13 5.9 13.3 6.6 13.5 7.5 13.5 7.7 13.5 7.9 13.5 8.1 13.5 8.6 13.4 9.1 13.3 9.6 13.1 11.2 12.5 12.4 11.4 13.1 9.8 13.6 8.5 13.6 6.6 13.1 5.3 12.2 3.1 10.4 1.5 7.3 1.5Z"></path>
</svg>
</span>
</div>
</form>
<!-- End Input -->
<ul class="list-unstyled h-bg-1 mb-0">
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Action</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Adventure</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Animation</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Biography</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Comedy</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Crime</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Drama</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Fantasy</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">History</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Horror</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Music</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Mystery</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Romance</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Sci-Fi</span>
</a>
</li>
<li class="px-3 py-1 mb-1">
<a href="#" class="text-dark">
<span class="font-size-1">Talk Show</span>
</a>
</li>
<li class="px-3 py-1 mb-0">
<a href="#" class="text-dark">
<span class="font-size-1">Thriller</span>
</a>
</li>
</ul>
</div>
<div class="mb-4">
<h6 class="font-secondary font-size-18 font-weight-medium border-bottom pb-2 mb-5">TV Genres</h6>
<ul class="list-unstyled">
<li class="mb-2">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ultra">
<label class="custom-control-label" for="ultra">4k Ultra</label>
</div>
</div>
</li>
<li class="mb-2">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dubbing">
<label class="custom-control-label" for="dubbing">Dubbing</label>
</div>
</div>
</li>
<li class="mb-2">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="original">
<label class="custom-control-label" for="original">Original</label>
</div>
</div>
</li>
<li class="mb-2">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="premieres">
<label class="custom-control-label" for="premieres">Premieres</label>
</div>
</div>
</li>
<li>
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="viking">
<label class="custom-control-label" for="viking">Vikings</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Content Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of sticky blocks
$('.js-sticky-block').each(function () {
var stickyBlock = new HSStickyBlock($(this)).init();
});
});
</script>
Component #2
<!-- Blogs Section -->
<div class="row">
<div class="col-lg-5">
<div class="w-md-352rem space-bottom-2">
<div class="bg-gray-3100 px-3 py-4 mb-4">
<div class="mx-1 mb-1">
<div class="mb-6">
<!-- Categories -->
<h6 class="font-size-22 font-weight-medium border-bottom border-gray-3700 pb-2 mb-5 text-white"> Categories</h6>
<div class="row mb-4 pb-1">
<div class="col-md">
<ul class="list-unstyled mb-0">
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ultra">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="ultra">Action</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="adventures">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="adventures">Adventures</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="animation">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="animation">Animation</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="bio">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="bio">Biography</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="comedy">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="comedy">Comedy</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="crime">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="crime">Crime</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="doc">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="doc">Documentary</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="drama">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="drama">Drama</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="family">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="family">Family</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="fantasy">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="fantasy">Fantasy</label>
</div>
</div>
</li>
</ul>
</div>
<div class="col-md">
<ul class="list-unstyled mb-0">
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="history">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="history">History</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="horror">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="horror">Horror</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="music">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="music">Music</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="mystery">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="mystery">Mystery</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="romance">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="romance">Romance</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sci">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="sci">Sci-Fi</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sports">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="sports">Sports</label>
</div>
</div>
</li>
<li class="mb-1">
<div class="d-flex align-items-center">
<!-- Checkboxes -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="thriller">
<label class="custom-control-label custom-control-label-custom text-gray-1800" for="thriller">Thriller</label>
</div>
</div>
</li>
</ul>
</div>
</div>
<ul class="list-unstyled d-flex mb-0">
<li class="h-bg-2 bg-gray-3800 py-2 px-2 mr-1">
<a href="#">
<div class="d-flex flex-column">
<i class="far fa-window-maximize text-gray-5000 d-flex justify-content-center font-size-20"></i>
<span class="font-size-10 font-weight-semi-bold text-gray-1300">4K ULTRA</span>
</div>
</a>
</li>
<li class="h-bg-2 bg-gray-3800 py-2 px-2 mr-1">
<a href="#">
<div class="d-flex flex-column">
<i class="fas fa-chess-knight text-gray-5000 d-flex justify-content-center font-size-20"></i>
<span class="font-size-10 font-weight-semi-bold text-gray-1300">BROTHER</span>
</div>
</a>
</li>
<li class="h-bg-2 bg-gray-3800 py-2 px-2 mr-1">
<a href="#">
<div class="d-flex flex-column">
<i class="fab fa-teamspeak text-gray-5000 d-flex justify-content-center font-size-20"></i>
<span class="font-size-10 font-weight-semi-bold text-gray-1300">DUBBING</span>
</div>
</a>
</li>
<li class="h-bg-2 bg-gray-3800 py-2 px-2 mr-0">
<a href="#">
<div class="d-flex flex-column">
<i class="fas fa-chess-knight text-gray-5000 d-flex justify-content-center font-size-20"></i>
<span class="font-size-10 font-weight-semi-bold text-gray-1300">HERO</span>
</div>
</a>
</li>
</ul>
<!-- End Categories -->
</div>
<div class="mb-6 pb-1">
<h6 class="font-size-22 text-white font-weight-medium border-bottom border-gray-3700 pb-2 mb-4">Movies by Year</h6>
<ul class="list-unstyled d-flex flex-wrap mb-0">
<li class="pr-1 pb-1">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2020</a>
</div>
</li>
<li class="pr-1 pb-1">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2019</a>
</div>
</li>
<li class="pr-1 pb-1">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2018</a>
</div>
</li>
<li class="pr-1 pb-1">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2017</a>
</div>
</li>
<li class="pr-1 pb-1">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2016</a>
</div>
</li>
<li class="pr-1 pb-1">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2015</a>
</div>
</li>
<li class="pr-1 pb-1">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2014</a>
</div>
</li>
<li class="pr-1 pb-1">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2013</a>
</div>
</li>
<li class="pr-1 pb-1">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2012</a>
</div>
</li>
<li class="pr-1 pb-1">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2011</a>
</div>
</li>
<li class="pr-0 pb-0">
<div class="h-bg-3 bg-gray-5100 px-2 py-2 d-inline-block">
<a href="#" class="mx-1">2010</a>
</div>
</li>
</ul>
</div>
<div class="mb-5">
<h6 class="font-size-22 text-white font-weight-medium border-bottom border-gray-3700 pb-2 mb-3">Filter by Rating</h6>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(2)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(10)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(27)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(13)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-0">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(1)</small>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Blogs Section -->
Component #3
<!-- Blogs Section -->
<div class="row">
<div class="col-lg-5">
<div class="space-bottom-2">
<div class="bg-gray-3100 px-3 pt-4 pb-6 mb-4">
<div class="mx-1">
<form class="input-group input-group-merge mb-3 pb-1">
<input type="search" class="form-control font-size-1 font-secondary bg-gray-3800 border-gray-3800 rounded-0" placeholder="Search..." aria-label="Search an app" aria-describedby="searchApp">
<div class="input-group-append">
<span class="input-group-text" id="searchApp">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<path fill="rgb(151,151,159)" d="M7 0C11-0.1 13.4 2.1 14.6 4.9 15.5 7.1 14.9 9.8 13.9 11.4 13.7 11.7 13.6 12 13.3 12.2 13.4 12.5 14.2 13.1 14.4 13.4 15.4 14.3 16.3 15.2 17.2 16.1 17.5 16.4 18.2 16.9 18 17.5 17.9 17.6 17.9 17.7 17.8 17.8 17.2 18.3 16.7 17.8 16.4 17.4 15.4 16.4 14.3 15.4 13.3 14.3 13 14.1 12.8 13.8 12.5 13.6 12.4 13.5 12.3 13.3 12.2 13.3 12 13.4 11.5 13.8 11.3 14 10.7 14.4 9.9 14.6 9.2 14.8 8.9 14.9 8.6 14.9 8.3 14.9 8 15 7.4 15.1 7.1 15 6.3 14.8 5.6 14.8 4.9 14.5 2.7 13.6 1.1 12.1 0.4 9.7 0 8.7-0.2 7.1 0.2 6 0.3 5.3 0.5 4.6 0.9 4 1.8 2.4 3 1.3 4.7 0.5 5.2 0.3 5.7 0.2 6.3 0.1 6.5 0 6.8 0.1 7 0ZM7.3 1.5C7.1 1.6 6.8 1.5 6.7 1.5 6.2 1.6 5.8 1.7 5.4 1.9 3.7 2.5 2.6 3.7 1.9 5.4 1.7 5.8 1.7 6.2 1.6 6.6 1.4 7.4 1.6 8.5 1.8 9.1 2.4 11.1 3.5 12.3 5.3 13 5.9 13.3 6.6 13.5 7.5 13.5 7.7 13.5 7.9 13.5 8.1 13.5 8.6 13.4 9.1 13.3 9.6 13.1 11.2 12.5 12.4 11.4 13.1 9.8 13.6 8.5 13.6 6.6 13.1 5.3 12.2 3.1 10.4 1.5 7.3 1.5Z"></path>
</svg>
</span>
</div>
</form>
<div class="mb-3">
<h6 class="font-size-18 text-white font-weight-medium border-bottom border-gray-3700 pb-2 mb-4">Filter TV Shows by Letter</h6>
<ul class="list-unstyled d-flex flex-wrap mb-0">
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">0-9</div>
<span class="font-size-12 text-gray-5200 text-center number">1</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">A</div>
<span class="font-size-12 text-gray-5200 text-center number">16</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">B</div>
<span class="font-size-12 text-gray-5200 text-center number">4</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">C</div>
<span class="font-size-12 text-gray-5200 text-center number">3</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">D</div>
<span class="font-size-12 text-gray-5200 text-center number">2</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">G</div>
<span class="font-size-12 text-gray-5200 text-center number">1</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">H</div>
<span class="font-size-12 text-gray-5200 text-center number">2</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">L</div>
<span class="font-size-12 text-gray-5200 text-center number">1</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">M</div>
<span class="font-size-12 text-gray-5200 text-center number">1</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">N</div>
<span class="font-size-12 text-gray-5200 text-center number">2</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">O</div>
<span class="font-size-12 text-gray-5200 text-center number">1</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">S</div>
<span class="font-size-12 text-gray-5200 text-center number">1</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">T</div>
<span class="font-size-12 text-gray-5200 text-center number">1</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">U</div>
<span class="font-size-12 text-gray-5200 text-center number">4</span>
</div>
</a>
</li>
<li class="pr-1 pb-1">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">V</div>
<span class="font-size-12 text-gray-5200 text-center number">1</span>
</div>
</a>
</li>
<li class="pr-0 pb-0">
<a class="h-bg-3 bg-gray-5100 d-flex align-items-center justify-content-center h-52rem w-55rem text-center" href="#">
<div class="text-lh-1">
<div class="font-size-21 font-weight-semi-bold letter">W</div>
<span class="font-size-12 text-gray-5200 text-center number">1</span>
</div>
</a>
</li>
</ul>
</div>
<div class="mb-7">
<h6 class="font-size-18 text-white font-weight-medium border-bottom border-gray-3700 pb-2 mb-3">Filter by</h6>
<ul class="list-unstyled d-flex mb-0">
<li class="h-bg-2 bg-gray-3800 py-2 px-2 mr-1">
<a href="#">
<div class="d-flex flex-column">
<i class="far fa-window-maximize text-gray-5000 d-flex justify-content-center font-size-20"></i>
<span class="font-size-10 font-weight-semi-bold text-gray-1300">4K ULTRA</span>
</div>
</a>
</li>
<li class="h-bg-2 bg-gray-3800 py-2 px-2 mr-1">
<a href="#">
<div class="d-flex flex-column">
<i class="fas fa-chess-knight text-gray-5000 d-flex justify-content-center font-size-20"></i>
<span class="font-size-10 font-weight-semi-bold text-gray-1300">BROTHER</span>
</div>
</a>
</li>
<li class="h-bg-2 bg-gray-3800 py-2 px-2 mr-1">
<a href="#">
<div class="d-flex flex-column">
<i class="fab fas fa-volume-up text-gray-5000 d-flex justify-content-center font-size-20"></i>
<span class="font-size-10 font-weight-semi-bold text-gray-1300">Original</span>
</div>
</a>
</li>
<li class="h-bg-2 bg-gray-3800 py-2 px-2 mr-0">
<a href="#">
<div class="d-flex flex-column">
<i class="fas fas fa-headphones-alt text-gray-5000 d-flex justify-content-center font-size-20"></i>
<span class="font-size-10 font-weight-semi-bold text-gray-1300">Premieres </span>
</div>
</a>
</li>
</ul>
</div>
<div>
<h6 class="font-size-18 text-white font-weight-medium border-bottom border-gray-3700 pb-2 mb-3">Filter by Rating</h6>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(3)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(6)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(13)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(8)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(3)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(3)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-1 pb-1">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(1)</small>
</div>
</a>
<a href="#">
<div class="form-group d-flex align-items-center justify-content-between font-size-15 text-gray-1300 text-lh-lg text-body mb-0">
<span class="d-block text-primary">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</span>
<small class="text-gray-1300 font-size-15">(1)</small>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Blogs Section -->