Introduction

Circl is a creative admin theme, based on the latest Bootstrap 5 Framework.

It was created to be the most functional, clean and well designed template for any types of backend applications. We have carefully designed all common elements.

If you have any questions that are beyond the scope of this help file, please feel free to mail us via our user page contact form here. Thank you so much!

Folder Structure
theme/
├─ assets/
│    ├─ css/
│    ├─ images/
│    ├─ js/
│    │    └─ pages/
│    └─ plugins/
└─ templates/
     └─ admin1/
HTML Structure

Header

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Responsive Admin Dashboard Template">
<meta name="keywords" content="admin,dashboard">
<meta name="author" content="stacks">
<!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
                              
<!-- Title -->
<title>Circl - Responsive Admin Dashboard Template</title>
                      
<!-- Styles -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700,800&display=swap" rel="stylesheet">
<link href="../../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../../assets/plugins/font-awesome/css/all.min.css" rel="stylesheet">
<link href="../../assets/plugins/perfectscroll/perfect-scrollbar.css" rel="stylesheet">
                      
                            
<!-- Theme Styles -->
<link href="../../assets/css/main.min.css" rel="stylesheet">
<link href="../../assets/css/custom.css" rel="stylesheet">
                      
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

Body

<body>
<div class='loader'>
<div class='spinner-grow text-primary' role='status'>
<span class='sr-only'>Loading...</span>
</div>
</div>
                        
<div class="page-container">
<div class="page-header">
<nav class="navbar navbar-expand-lg d-flex justify-content-between">
<div class="" id="navbarNav">
<ul class="navbar-nav" id="leftNav">
<li class="nav-item">
<a class="nav-link" id="sidebar-toggle" href="#"><i class="material-icons">arrow_back</i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
</div>
<div class="logo">
<a class="navbar-brand" href="index.html"></a>
</div>
<div class="" id="headerNav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link search-dropdown" href="#" id="searchDropDown" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="material-icons">search</i></a>
<div class="dropdown-menu dropdown-menu-end dropdown-lg search-drop-menu" aria-labelledby="navbarDropdownMenuLink">
<form>
<input class="form-control" type="text" placeholder="Type something.." aria-label="Search">
</form>
<h6 class="dropdown-header">Recent Searches</h6>
<a class="dropdown-item" href="#">charts</a>
<a class="dropdown-item" href="#">new orders</a>
<a class="dropdown-item" href="#">file manager</a>
<a class="dropdown-item" href="#">new users</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link notifications-dropdown" href="#" id="notificationsDropDown" role="button" data-bs-toggle="dropdown" aria-expanded="false">3</a>
<div class="dropdown-menu dropdown-menu-end notif-drop-menu" aria-labelledby="navbarDropdownMenuLink">
<h6 class="dropdown-header">Notifications</h6>
<a href="#">
<div class="header-notif">
<div class="notif-image">
<span class="notification-badge bg-info text-white">
<i class="fas fa-bullhorn"></i>
</span>
</div>
<div class="notif-text">
<p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
<small>19:00</small>
</div>
</div>
</a>
<a href="#">
<div class="header-notif">
<div class="notif-image">
<span class="notification-badge bg-primary text-white">
<i class="fas fa-bolt"></i>
</span>
</div>
<div class="notif-text">
<p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
<small>18:00</small>
</div>
</div>
</a>
<a href="#">
<div class="header-notif">
<div class="notif-image">
<span class="notification-badge bg-success text-white">
<i class="fas fa-at"></i>
</span>
</div>
<div class="notif-text">
<p>faucibus dolor in commodo lectus mattis</p>
<small>yesterday</small>
</div>
</div>
</a>
<a href="#">
<div class="header-notif">
<iv class="notif-image">
<span class="notification-badge">
<img src="../../assets/images/avatars/profile-image.png">
</span>
</div>
<div class="notif-text">
<p>faucibus dolor in commodo lectus mattis</p>
<small>yesterday</small>
</div>
</div>
</a>
<a href="#">
<div class="header-notif">
<div class="notif-image">
<span class="notification-badge">
<img src="../../assets/images/avatars/profile-image-3.jpg">
</span>
</div>
<div class="notif-text">
<p>faucibus dolor in commodo lectus mattis</p>
<small>yesterday</small>
</div>
</div>
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link profile-dropdown" href="#" id="profileDropDown" role="button" data-bs-toggle="dropdown" aria-expanded="false"><img src="../../assets/images/avatars/profile-image-1.png"></a>
<div class="dropdown-menu dropdown-menu-end profile-drop-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#"><i data-feather="user"></i>Profile</a>
<a class="dropdown-item" href="#"><i data-feather="inbox"></i>Messages</a>
<a class="dropdown-item" href="#"><i data-feather="edit"></i>Activities<span class="badge rounded-pill bg-success">12</span></a>
<a class="dropdown-item" href="#"><i data-feather="check-circle"></i>Tasks</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i data-feather="settings"></i>Settings</a>
<a class="dropdown-item" href="#"><i data-feather="unlock"></i>Lock</a>
<a class="dropdown-item" href="#"><i data-feather="log-out"></i>Logout</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="page-sidebar">
<ul class="list-unstyled accordion-menu">
<li class="sidebar-title">
Main
</li>
<li>
<a href="index.html"><i data-feather="home"></i>Dashboard</a>
</li>
<li class="sidebar-title">
Apps
</li>
<li>
<a href="email.html"><i data-feather="inbox"></i>Email</a>
</li>
<li>
<a href="calendar.html"><i data-feather="calendar"></i>Calendar</a>
</li>
<li>
<a href="social.html"><i data-feather="user"></i>Social</a>
</li><li>
<a href="file-manager.html"><i data-feather="message-circle"></i>File Manager</a>
</li>
<li class="sidebar-title">
Elements
</li>
<li>
<a href="index.html"><i data-feather="code"></i>Components<i class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class="">
<li><a href="alerts.html"><i class="far fa-circle"></i>Alerts</a></li>
<li><a href="typography.html"><i class="far fa-circle"></i>Typography</a></li>
<li><a href="icons.html"><i class="far fa-circle"></i>Icons</a></li>
<li><a href="badge.html"><i class="far fa-circle"></i>Badge</a></li>
<li><a href="buttons.html"><i class="far fa-circle"></i>Buttons</a></li>
<li><a href="dropdowns.html"><i class="far fa-circle"></i>Dropdowns</a></li>
<li><a href="list-group.html"><i class="far fa-circle"></i>List Group</a></li>
<li><a href="toasts.html"><i class="far fa-circle"></i>Toasts</a></li>
<li><a href="modal.html"><i class="far fa-circle"></i>Modal</a></li>
<li><a href="pagination.html"><i class="far fa-circle"></i>Pagination</a></li>
<li><a href="popovers.html"><i class="far fa-circle"></i>Popovers</a></li>
<li><a href="progress.html"><i class="far fa-circle"></i>Progress</a></li>
<li><a href="spinners.html"><i class="far fa-circle"></i>Spinners</a></li>
<li><a href="accordion.html"><i class="far fa-circle"></i>Accordion</a></li>
</ul>
</li>
<li>
<a href="index.html"><i data-feather="gift"></i>Plugins<i class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class="">
<li><a href="block-ui.html"><i class="far fa-circle"></i>Block UI</a></li>
<li><a href="session-timeout.html"><i class="far fa-circle"></i>Session Timeout</a></li>
<li><a href="tree-view.html"><i class="far fa-circle"></i>Tree View</a></li>
</ul>
</li>
<li>
<a href="index.html"><i data-feather="edit"></i>Form<i class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class="">
<li><a href="form-elements.html"><i class="far fa-circle"></i>Form Elements</a></li>
<li><a href="form-layout.html"><i class="far fa-circle"></i>Form Layout</a></li>
<li><a href="form-validation.html"><i class="far fa-circle"></i>Form Validation</a></li>
</ul>
</li>
<li>
<a href="cards.html"><i data-feather="layers"></i>Cards</a>
</li>
<li>
<a href="index.html"><i data-feather="list"></i>Tables<i class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class="">
<li><a href="tables.html"><i class="far fa-circle"></i>Basic Tables</a></li>
<li><a href="data-tables.html"><i class="far fa-circle"></i>Data Tables</a></li>
</ul>
</li>
<li>
<a href="charts.html"><i data-feather="pie-chart"></i>Charts</a>
</li>
<li class="sidebar-title">
Other
</li>
<li class="active-page">
<a href="index.html" class="active"><i data-feather="star"></i>Pages<i class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class="">
<li><a href="invoice.html"><i class="far fa-circle"></i>Invoice</a></li>
<li><a href="404.html"><i class="far fa-circle"></i>404 Page</a></li>
<li><a href="500.html"><i class="far fa-circle"></i>500 Page</a></li>
<li><a href="blank-page.html" class="active"><i class="far fa-circle"></i>Blank Page</a></li>
<li><a href="login.html"><i class="far fa-circle"></i>Login</a></li>
<li><a href="register.html"><i class="far fa-circle"></i>Register</a></li>
<li><a href="lockscreen.html"><i class="far fa-circle"></i>Lockscreen</a></li>
<li><a href="price.html"><i class="far fa-circle"></i>Price</a></li>
</ul>
</li>
<li>
<a href="#"><i data-feather="check-circle"></i>Documentation</a>
</li>
</ul>
</div>
<div class="page-content">
<div class="main-wrapper">
</div>
                                            
</div>
                                      
</div>
                                
<!-- Javascripts -->
<script src="../../assets/plugins/jquery/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="../../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="../../assets/plugins/perfectscroll/perfect-scrollbar.min.js"></script>
<script src="../../assets/js/main.min.js"></script>
</body>
Code

All theme CSS files are located in theme/assets/css folder. For your CSS customization you can use theme/assets/css/custom.css. Keep your custom CSS separate. It makes updating the theme easier in future.

All Javascript files are located in theme/assets/js/ folder. Also Page-level Javascript files are located in theme/assets/js/pages/ folder and each page has its own Javascript file. For your Javascripts you can use theme/assets/js/custom.js. Keep your custom Javascript separate. It makes updating the theme easier in future.

Fonts

Circl use Poppins font as primary font for texts. It must be loaded in HTML Head before other CSS files. 

<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700,800&display=swap" rel="stylesheet">

We also use FontAwesome and Feather Icons.

CSS Utilities

All available helper classes in Circl:

Prefix Second Prefix (side) third Prefix Suffix (value)
Margin m t,r,b,l n (only for negative values) xxs, xs, sm, md, lg, xxl
Padding p v,h (top & bottom, left & right) xxs, xs, sm, md, lg, xxl

.no-s Removes margins & paddings

.no-m Removes margins

.no-p Removes paddings

.no-p-h Removes paddings from left & right

.no-p-v Removes Paddings from top & bottom

.no-b Removes borders

.b Adds border from all sides

.b-t, .b-r, .b-b, .b-l Adds border from top, right, bottom, left

.b-default, .b-primary, .b-success, .b-info, .b-warning, .b-danger Adds border by contextual colors

.b-2, .b-3, .b-4 Border size

.b-n-t, .b-n-r, .b-n-b, .b-n-l Removes border from top, right, bottom, left

.no-r Removes border radius

.r Adds border radius

.r-t-l, .r-t-r, .r-b-l, .r-b-r Adds border radius From top-left, top-right, bottom-left, bottom-right sides.

.no-r-t-l, .no-r-t-r, .no-r-b-l, .no-r-b-r Removes border radius From top-left, top-right, bottom-left, bottom-right sides.

New Page

It's very easy to make a new page with Circl.

You can use all components that are shown in the live preview. Note, all content should be placed in .main-wrapper to fit the page correctly.

If you use component that needs some JS codes which are included in component demo page at the end of the HTML body tag, you can just include the same JS file. If you use component that needs an extra plugin to work, you have to include files of this plugins as they are included in the preview page.

Support

Once again, thank you so much for purchasing this theme. As mentioned at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.