Beets layout Beets Exclusive
Getting started
If you want to use the Beets layout otions there are some things you have to implement for it to work properly. On this page you will learn how to use the Beets layout together with Bootstrap 5.x.
Structure
<BODY> | └── PAGE CONTAINER <div> | ├── SIDEBAR <nav> | ├── Content header | └── Content side | ├── PAGE HEADER <header> | └── Content header | ├── MAIN CONTAINER <main> | └── Container | └── PAGE FOOTER <footer> └── Container
Example
Below is an example of a page that will get you going. You might want to customize though, so be sure to read the sections further down on how to do that.
<body>
<div id="page-container" class="sidebar-o sidebar-dark page-header-fixed">
<nav id="sidebar" class="sidebar-collapse">
<div class="content-header">
<!-- Logotype -->
<img src="..." style="height: 40px;">
<!-- Button to close mobile menu -->
<button class="btn btn-ghost-secondary btn-aspect rounded-circle d-lg-none" onclick="toggleSidebar('sidebar')">
<i class="fas fa-times"></i>
</button>
</div>
<div class="content-side">
<!-- Search field start -->
<div class="row mb-2 pb-3 border-bottom">
<div class="col-auto input-group">
<input type="text" class="form-control rounded-start-pill border border-end-0" placeholder="Search...">
<button class="btn text-beets border border-start-0 rounded-end-pill" id="button-addon2">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<!-- Search field end -->
<!-- Navigation start -->
<ul class="nav-main">
<li class="nav-main-item">
<a href="#" class="nav-main-link">
<i class="fas fa-heart fa-fw nav-main-link-icon"></i>
Link 1
</a>
</li>
<li class="nav-main-item">
<a href="#" class="nav-main-link">
<i class="fas fa-heart fa-fw nav-main-link-icon"></i>
Link 2
</a>
</li>
<li class="nav-main-item active open">
<a href="#" class="nav-main-link nav-main-link-submenu active" id="link3" onclick="toggleSubmenu('link3')">
<i class="fas fa-heart fa-fw nav-main-link-icon"></i>
Link 3
</a>
<ul class="nav-main-submenu">
<li class="nav-main-item">
<a href="" class="nav-main-link">Link 3.1</a>
</li>
<li class="nav-main-item">
<a href="" class="nav-main-link">Link 3.2</a>
</li>
<li class="nav-main-item">
<a href="" class="nav-main-link">Link 3.3</a>
</li>
</ul>
</li>
</ul>
<!-- Navigation end -->
</div>
</nav>
<header id="page-header">
<div class="content-header justify-content-between">
<!-- Toggle mobile menu button -->
<button class="btn btn-alt-light btn-aspect d-lg-none" onclick="toggleSidebar('sidebar')"><i class="fas fa-bars"></i></button>
<!-- Logotype start -->
<div class="d-flex d-lg-none align-items-center">
<img src="..." style="height: 40px;">
</div>
<!-- Logotype end -->
<!-- User dropdown start -->
<div class="d-flex align-items-center">
<div class="dropdown d-flex align-items-center">
<span class="d-none d-lg-inline-block me-2 mt-1">Username</span>
<button class="btn btn-alt-light btn-aspect rounded-circle dropdown-no-caret dropdown-toggle" data-bs-toggle="dropdown">
<i class="fas fa-star"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Account</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Log out</a></li>
</ul>
</div>
</div>
<!-- User dropdown end -->
</div>
</header>
<main id="main-container">
<div class="container-md px-md-5">
<!-- Your page includes goes here -->
</div>
</main>
<footer id="page-footer">
<div class="container-md py-3 px-5">
<!-- Footer content start -->
<div class="row">
<div class="col-sm-6 py-1 text-center text-sm-start">Footer Content Left</div>
<div class="col-sm-6 py-1 text-center text-sm-end">Footer Content Right</div>
</div>
<!-- Footer content end -->
</div>
</footer>
</div>
</body>