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>
Options
data-bottom-bar object
Example 
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 |
2024 © Themewagon

v3.20.0

Bottom Bar
Settings

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.

Purchase
customize