Loading...

Images & Figures

1:1 Aspect Ratio

Ensure 1:1 aspect ratio for images by applying .image-wrapper and .image-1x1 classes. This maintains a square shape for consistent image display.

1x1 Image
4:3 Aspect Ratio

Use 4:3 aspect ratio for images with the .image-wrapper .image-4x3 class. Apply this class to maintain a 4:3 ratio for your images and elements.

4x3 Image
3:2 Aspect Ratio

Use the 3:2 aspect ratio by applying the .image-wrapper .image-3x2 class to your elements. This ensures your images and content maintain a 3:2 ratio.

3x2 Image
16:9 Aspect Ratio

Maintain a 16:9 aspect ratio by using the .image-wrapper .image-16x9 class. Apply this class to ensure your images and elements keep a 16:9 ratio.

16x9 Image
Figures

Use Bootstrap's <figure> component to display images with captions. Wrap the image in a <figure> tag and use <figcaption> for the caption below the image.

...
A caption for the above image.
Image Center Align

Center an image with .mx-auto and .d-block on the <img> tag.

...
Image Right Align

Right-align an image with the .float-end class on the <img> tag.

...
Image Left Align

Left-align an image with the .float-start class on the <img> tag.

...
Image With Radius

Add a border radius to an image with the .rounded-* class. Use this class on the <img> tag for a rounded effect.

...
Rounded Image

Create a rounded image with the .rounded-pill class. Apply this class to the <img> tag for a pill-shaped rounded effect.

...
Image Thumbnail

Style an image as a thumbnail with the .img-thumbnail class. Apply this class to the <img> tag for a bordered, rounded image.

...
Rounded Thumbnail

Use rounded thumbnails with .img-thumbnail and .rounded-pill on the <img> tag.

...

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.