Bottom Bar
Falcon's Bottom Bar feature is used to show any component in the bottom of the viewport. You can also trigger the bottom bar by targeting a component when it is scrolled outside the viewport.
Structure
Basic
.bottom-bar class is responsible for showing the bar in the bottom of the viewport. You can control the breakpoint of visibility by simply using display utilities classes.
<div class="card bottom-bar d-lg-none">
<div class="card-body">
<!-- Your content here-->
</div>
</div>Triggered
Bottom Bar's can be triggered based on the target element's visibility on viewport. All you need to pass some options through the data-bottom-bar attribute.
<div class="card bottom-bar d-lg-none" data-bottom-bar='{"target":"target-element-id","breakPoint":"lg","offsetTop":60}'>
<div class="card-body">
<!-- Your content here -->
</div>
</div>
