Loading...

Buttons

Default Button

Create buttons in Bootstrap by adding the .btn class along with contextual classes like .btn-primary, .btn-secondary, or .btn-success to style the button.


Use the .btn class to create buttons in Bootstrap. Add the .rounded-pill class to give the button rounded edges, creating a pill-shaped button.

Light Button

Create light-themed buttons in Bootstrap by using the .btn-light class. You can also add variations like .btn-light-primary or .btn-light-secondary for different color accents.


Create light-themed, pill-shaped buttons in Bootstrap by combining the .btn-light-* class with .rounded-pill. This gives the button a light color and rounded edges for a sleek look.

Outline Buttons

Create outline buttons in Bootstrap using the .btn-outline-* class. This gives the button a border and transparent background, with color variations like .btn-outline-primary or .btn-outline-secondary.


Create outline buttons with rounded edges in Bootstrap by using the .btn-outline-* class along with .rounded-pill. This combines a transparent button with a sleek, pill-shaped design.

Text Button

Create text-only buttons in Bootstrap using the .btn-text-* class. This removes the background and border, leaving only the text styled as a button.

Buttons Size

Adjust button sizes in Bootstrap by using the size classes .btn-sm for smaller buttons and .btn-lg for larger buttons. The default size is applied when no size class is used.

Social Buttons

Create social media buttons in Bootstrap by using the .btn class along with custom color classes for each platform, such as .btn-facebook, .btn-light-facebook,.btn-twitter or .btn-light-twitter, to match the respective brand styles.


Create social media outline buttons in Bootstrap using the .btn btn-outline-youtube class. This gives the button a transparent background with a colored border, styled for the YouTube brand.

Icon Buttons

Create icon buttons in Bootstrap by combining the .btn class with an icon, such as using an icon from a library like Remix Icon. This allows you to add visual elements alongside button text.


Create icon buttons in Bootstrap by using the .icon-btn class along with an icon from an icon library. This class styles the button to incorporate an icon, making it visually appealing and functional.

Icon Button Size

Create icon buttons in Bootstrap using the .icon-btn class. Adjust the size with .icon-btn-sm for smaller buttons, allowing for a compact design while incorporating icons.

Custom Toggle Buttons

Create custom toggle buttons in Bootstrap using the .btn-loader class to show a loading state. By default, use .indicator-label for button text, which changes to .indicator-progress after clicking to indicate the loading process.

Loading Animations

Add loading animations in Bootstrap using the .btn-loader class. Incorporate .spinner-grow or .spinner-border classes to show different types of spinners, providing visual feedback during loading processes.

Full width button

Create a full-width button in Bootstrap by using the .w-100 class along with the .btn class. This makes the button stretch to fill its container, ensuring it occupies the entire width available.

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.