Looking to create a view ads page but struggling with Bootstrap? Need help incorporating a scrollbar in the filters for easier browsing of content? The goal is to keep the filter fixed while users scroll through ads in the main section.
<head>
<link
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232475c415c41">[email protected]</a>/dist/css/bootstrap.min.css"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div
class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
id="sidebar"
>
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="view">View</label>
<select class="form-control" id="view" name="view">
<option value="gallery">Gallery</option>
<option value="list">List</option>
</select>
</div>
<div class="mb-3">
<label for="sort">Sort</label>
<select class="form-control" id="sort" name="sort" value="">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
</select>
</div>
<div class="mb-3">
<input
type="checkbox"
class="form-check-input"
id="has_images"
name="has_images"
/>
<label class="form-check-label" for="has_images">Has Images</label>
</div>
<div class="d-flex justify-content-between">
<button type="submit" class="btn btn-outline-primary">Reset</button>
<button type="submit" class="btn btn-primary">Apply</button>
</div>
</form>
</div>
<main class="col-md-9 col-lg-10 px-md-4">
<div class="d-flex justify-content-end pt-3 pb-2 mb-3 border-bottom">
<button
class="btn btn-secondary d-md-none"
type="button"
data-toggle="collapse"
data-target="#sidebar"
>
Toggle Filters
</button>
</div>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269746974">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Refer to the image below: https://i.sstatic.net/cwadKc2g.png
Attempts were made to use "position=fixed" on the sidebar, but encountered issues with overlap between the main ads and the sidebar.