Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Default Buttons#

Use the button classes on an <a>, <button> or <input> element.

html
                                                
                                                    <!-- Default Buttons -->
                                                    <button type="button" class="btn btn-primary">Primary</button>
                                                    <button type="button" class="btn btn-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-success">Success</button>
                                                    <button type="button" class="btn btn-info">Info</button> 
                                                    <button type="button" class="btn btn-warning">Warning</button>
                                                    <button type="button" class="btn btn-danger">Danger</button>
                                                    <button type="button" class="btn btn-dark">Dark</button>
                                                    <button type="button" class="btn btn-purple">Purple</button>
                                                    <button type="button" class="btn btn-pink">Pink</button>
                                                    <button type="button" class="btn btn-orange">Orange</button>
                                                    <button type="button" class="btn btn-light">Light</button>
                                                    <button type="button" class="btn btn-link">Link</button>
                                                
                                            
Rounded Buttons #

Add .rounded-pill to default button to get rounded corners.

html
                                                
                                                    <!-- Rounded Buttons -->
                                                    <button type="button" class="btn btn-primary rounded-pill">Primary</button>
                                                    <button type="button" class="btn btn-secondary rounded-pill">Secondary</button>
                                                    <button type="button" class="btn btn-success rounded-pill">Success</button>
                                                    <button type="button" class="btn btn-info rounded-pill">Info</button>
                                                    <button type="button" class="btn btn-warning rounded-pill">Warning</button>
                                                    <button type="button" class="btn btn-danger rounded-pill">Danger</button>
                                                    <button type="button" class="btn btn-dark rounded-pill">Dark</button>
                                                    <button type="button" class="btn btn-purple rounded-pill">Purple</button>
                                                    <button type="button" class="btn btn-pink rounded-pill">Pink</button>
                                                    <button type="button" class="btn btn-orange rounded-pill">Orange</button>
                                                    <button type="button" class="btn btn-light rounded-pill">Light</button>
                                                    <button type="button" class="btn btn-link rounded-pill">Link</button>
                                                
                                            
Outline Buttons #

Use a classes .btn-outline-** to quickly create a bordered buttons.

html
                                                
                                                    <!-- Outline Buttons -->
                                                    <button type="button" class="btn btn-outline-primary">Primary</button>
                                                    <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-outline-success">Success</button>
                                                    <button type="button" class="btn btn-outline-info">Info</button>
                                                    <button type="button" class="btn btn-outline-warning">Warning</button>
                                                    <button type="button" class="btn btn-outline-purple">Purple</button>
                                                    <button type="button" class="btn btn-outline-pink">Pink</button>
                                                    <button type="button" class="btn btn-outline-orange">Orange</button>                                                        
                                                
                                            
Outline Rounded Buttons #

Use a classes .btn-outline-** to quickly create a bordered buttons.

html
                                                
                                                    <!-- Outline Buttons -->
                                                    <button type="button" class="btn btn-outline-primary rounded-pill">Primary</button>
                                                    <button type="button" class="btn btn-outline-secondary rounded-pill">Secondary</button>
                                                    <button type="button" class="btn btn-outline-success rounded-pill">Success</button>
                                                    <button type="button" class="btn btn-outline-info rounded-pill">Info</button>
                                                    <button type="button" class="btn btn-outline-warning rounded-pill">Warning</button>                                                           
                                                
                                            
Soft Buttons #

Use a classes .btn-soft-** to quickly create buttons with soft background.

html
                                                
                                                    <!-- Soft Buttons -->
                                                    <button type="button" class="btn btn-soft-primary">Primary</button>
                                                    <button type="button" class="btn btn-soft-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-soft-success">Success</button>
                                                    <button type="button" class="btn btn-soft-info">Info</button>
                                                    <button type="button" class="btn btn-soft-warning">Warning</button>
                                                
                                            
Soft Rounded Buttons #

Use a classes .rounded-pill** with .btn-soft-** to quickly create a Outline Soft buttons.

html
                                                
                                                    <button type="button" class="btn btn-soft-primary rounded-pill">Primary</button>
                                                    <button type="button" class="btn btn-soft-secondary rounded-pill">Secondary</button>
                                                    <button type="button" class="btn btn-soft-success rounded-pill">Success</button>
                                                    <button type="button" class="btn btn-soft-info rounded-pill">Info</button>
                                                    <button type="button" class="btn btn-soft-warning rounded-pill">Warning</button>                                                         
                                                
                                            
Button Width #

Create buttons with minimum width by adding add .width-xs, .width-sm, .width-md, .width-lg or .width-xl.

html
                                                
                                                    <button type="button" class="btn btn-primary width-xl">Extra Large</button>
                                                    <button type="button" class="btn btn-secondary width-lg">Large</button>
                                                    <button type="button" class="btn btn-success width-md">Middle</button>
                                                    <button type="button" class="btn btn-info width-sm">Small</button>
                                                    <button type="button" class="btn btn-warning width-xs">Xs</button>                                                          
                                                
                                            
Button Sizes #

Add .btn-lg, .btn-sm for additional sizes.

html
                                                
                                                    <!-- Button Sizes -->
                                                    <button type="button" class="btn btn-primary btn-lg">Large</button>
                                                    <button type="button" class="btn btn-secondary">Normal</button>
                                                    <button type="button" class="btn btn-success btn-sm">Small</button>
                                                
                                            
Disabled Button #

Add disabled attribute to buttons.

html
                                                
                                                    <!-- Button Disabled -->
                                                    <button type="button" class="btn btn-primary" disabled>Primary</button>
                                                    <button type="button" class="btn btn-secondary" disabled>Secondary</button>
                                                    <button type="button" class="btn btn-success" disabled>Success</button>
                                                    <button type="button" class="btn btn-info" disabled>info</button>
                                                    <button type="button" class="btn btn-warning" disabled>Warning</button>
                                                
                                            
Icon Button #

Icon only Button.

html
                                                
                                                    <!-- Icon Button -->
                                                    <button type="button" class="btn btn-primary">
                                                        <i class="bx bx-heart"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-secondary">
                                                        <i class="bx bx-user-voice"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-success">
                                                        <i class="bx bx-check-double"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-info">
                                                        <i class="bx bx-cloud me-1"></i>Cloude Hosting
                                                    </button>
                                                    <button type="button" class="btn btn-warning">
                                                        <i class="bx bx-info-circle me-1"></i>Warning
                                                    </button>
                                                
                                            
Button Group #

Wrap a series of buttons with .btn in .btn-group.

html
                                                
                                                    <!-- btn-group horizontal -->
                                                    <div class="btn-group mb-1 me-1">
                                                        <button type="button" class="btn btn-light">Left</button>
                                                        <button type="button" class="btn btn-light">Middle</button>
                                                        <button type="button" class="btn btn-light">Right</button>
                                                    </div>
                                                    <div class="btn-group mb-1 me-1">
                                                        <button type="button" class="btn btn-light">1</button>
                                                        <button type="button" class="btn btn-light">2</button>
                                                        <button type="button" class="btn btn-secondary">3</button>
                                                        <button type="button" class="btn btn-light">4</button>
                                                    </div>
                                                    <div class="btn-group mb-1 me-1">
                                                        <button type="button" class="btn btn-light">5</button>
                                                        <button type="button" class="btn btn-secondary">6</button>
                                                        <button type="button" class="btn btn-light">7</button>
                                                        <button id="dropdown" type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                                            Dropdown
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown">
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                                                        </ul>
                                                    </div>

                                                    <!-- btn-group vertical -->
                                                    <div class="btn-group-vertical me-4">
                                                        <button type="button" class="btn btn-light">Top</button>
                                                        <button type="button" class="btn btn-light">Middle</button>
                                                        <button type="button" class="btn btn-light">Bottom</button>
                                                    </div>
                                                    <div class="btn-group-vertical">
                                                        <button type="button" class="btn btn-light">Button 1</button>
                                                        <button type="button" class="btn btn-light">Button 2</button>
                                                        <button id="verticalDropdown" type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                                            Button 3
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="verticalDropdown">
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                                                        </ul>
                                                    </div>
                                                
                                            
Block Button #

Create block level buttons by adding class .d-grid to parent div.

html
                                                
                                                    <!-- Block Button -->
                                                    <div class="d-grid gap-2">
                                                        <button type="button" class="btn btn-primary btn-lg">Block Button</button>
                                                        <button type="button" class="btn btn-secondary">Block Button</button>
                                                        <button type="button" class="btn btn-light btn-sm">Block Button</button>
                                                    </div>
                                                
                                            
© Larkon. Crafted by Techzaa