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.


.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 -->

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 -->
data-bottom-bar object
data-bottom-bar={ "target": "target-element-id", "breakPoint": "lg", "offsetTop": 60 }
Option Type Defaults Description
target String - Provide the unique ID of the target element. Bottom bar will visible when the target element is scrolled outside the viewport.
breakPoint String 'lg' Max width of the screen size until bottom bar will work. The value can be sm,md,lg,xl,xxl (lg means 992 and you can customize this value from js file)
offsetTop Number 0 Leave some spaces from top of the viewport to trigger the bottom bar early.

Thank you for creating with Falcon |
2023 © Themewagon


Bottom Bar

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.