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

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

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