UBold - Responsive Bootstrap 5 Admin Dashboard

Scrollable Layout

To enable full scrolling and view all content, please add data-layout-position="scrollable" to the <html> tag.

Scrollable Layout: Both the topbar and sidebar scroll independently, ideal for long menus or fixed header content.

Horizontal Layout

To enable the Boxed Layout, add data-layout="topnav" to the <html> tag. This switches the layout to top navigation mode, offering more horizontal space and better usability by placing the sidebar at the top.

In the same file, add @@include('src/partials/horizontal-nav.html') instead of including it from the general partials folder. Place this include inside partials/menu.html.

Horizontal Layout: Features top Navigation with menu items aligned horizontally.

Compact Layout

To use the compact layout, follow this structure: wrap your page title in <div class="container-fluid"> and place your main content inside <div class="container-xl">. This ensures proper spacing and alignment.

Compact Layout: Page content width is constrained within a container for a cleaner, narrower layout.

Boxed Layout

To enable the boxed layout, add data-layout-width="boxed" to the <html> tag. For optimal spacing and usability, we also recommend adding data-sidenav-size="sm-hover" to make the sidebar compact while keeping more room for content.

Boxed Layout: The body width is fixed at 1340px, centering the content with surrounding margins.

Preloader Layout

To enable the preloader, please add the following code inside the <body> tag:


<!-- Preloader -->
<div id="preloader">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

Preloader Layout: Displays a loading animation before the main content appears, enhancing the user experience during initial page load or content fetching.