Bootstrap 5
Bootstrap 5 guide for Trezo.
Overview
Bootstrap 5 is a popular front-end framework used to create responsive and mobile-first websites. It offers an extensive set of components, utilities, and customizable features that make it easier for developers to build modern web interfaces quickly and consistently. Here’s a breakdown of some of its key features and what makes it customizable:
- Responsive Grid System: Bootstrap 5 uses a flexible grid system based on CSS Flexbox, allowing you to create layouts that adjust seamlessly across various screen sizes. You can define custom column widths and breakpoints to tailor the grid to your specific needs.
- Customizable Components: Bootstrap includes a wide range of UI components—buttons, cards, alerts, modals, and more—that can be easily customized with utility classes. The built-in classes let you modify colors, borders, shadows, and spacing without needing additional CSS.
- Sass Variables: Bootstrap 5 is built using Sass, which provides a set of variables that make it easy to customize themes globally. You can modify colors, fonts, spacing, and component-specific settings by changing variable values in a custom Sass file, giving you control over the overall style.
- JavaScript Plugins: Bootstrap 5 comes with vanilla JavaScript plugins for interactive components like modals, tooltips, carousels, and dropdowns, so you don’t need to rely on jQuery. You can configure and customize these plugins through data attributes or JavaScript methods.
- Custom Utility API: Bootstrap 5 introduces a Utility API that allows you to define your utility classes. This lets you create reusable utility styles that can be applied across different components, offering more control over styling.
- Improved Forms: Forms in Bootstrap 5 have been redesigned with better accessibility and customization options. You can now use custom form controls with various themes, sizes, and validation states to match your design needs.
- Icons and Themes: Bootstrap 5 integrates with Bootstrap Icons, a library of customizable SVG icons. This, along with custom themes, makes it easy to create a unique and cohesive design for your project.
Whether you want to build a simple site or a complex web application, Bootstrap 5’s powerful customization options can help you create a professional, consistent design.
Files and Folders
The structure of the files and folders is as follows:
- src/assets/css — Contains the CSS files.
- src/assets/fonts — Contains the font files.
- src/assets/images — Contains the image files.
- src/assets/js — Contains the JavaScript files.
- src/assets/scss — Contains the SCSS files.
Upload the template files to the server using an FTP client like FileZilla.
Editing and Uploading Files
Here’s a revised version of your text:
Individual pages can be customized by opening them in a code editor like VS Code. After completing all customizations, upload the updated project files to your hosting server to make the website live on your domain. You can use an FTP client, such as FileZilla, to transfer the files.
HEAD CSS Structure
The following CSS files are loaded inside the head section:
<!-- Links Of CSS File -->
<link rel="stylesheet" href="assets/css/sidebar-menu.css" />
<link rel="stylesheet" href="assets/css/simplebar.css" />
<link rel="stylesheet" href="assets/css/apexcharts.css" />
<link rel="stylesheet" href="assets/css/prism.css" />
<link rel="stylesheet" href="assets/css/rangeslider.css" />
<link rel="stylesheet" href="assets/css/sweetalert.min.css" />
<link rel="stylesheet" href="assets/css/quill.snow.css" />
<link rel="stylesheet" href="assets/css/google-icon.css" />
<link rel="stylesheet" href="assets/css/remixicon.css" />
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/fullcalendar.main.css" />
<link rel="stylesheet" href="assets/css/style.css" />
Javascript Structure
The following JS files are loaded before the closing HEAD or BODY section:
<!-- Link Of JS File -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/sidebar-menu.js"></script>
<script src="assets/js/dragdrop.js"></script>
<script src="assets/js/rangeslider.min.js"></script>
<script src="assets/js/sweetalert.js"></script>
<script src="assets/js/quill.min.js"></script>
<script src="assets/js/data-table.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/clipboard.min.js"></script>
<script src="assets/js/feather.min.js"></script>
<script src="assets/js/simplebar.min.js"></script>
<script src="assets/js/apexcharts.min.js"></script>
<script src="assets/js/custom/apexcharts.js"></script>
<script src="assets/js/custom/custom.js"></script>
Do You Want Real Demo Images?
Due to Envato’s policy, demo images cannot be included in the download bundle. To request demo images, please submit a ticket through the provided link via our Dedicated Support System.
HTML Structure
Trezo is a responsive template built on the Bootstrap 5. For more information, please refer to the Bootstrap 5 documentation.
The template structure is consistent across all pages, with each section organized under a specific section ID. Below is the general structure:
<div class="col-lg-4 col-sm-6">
<div class="stats-box card bg-white border-0 rounded-10 mb-4">
<div class="card-body p-4">
<div
class="d-flex justify-content-between align-items-center mb-3 pb-1"
>
<div class="flex-grow-1 me-3">
<h3 class="body-font fw-bold fs-3 mb-2">$25,890</h3>
<span>Total Sales</span>
</div>
<div class="flex-shrink-0">
<div class="icon transition">
<i class="flaticon-donut-chart"></i>
</div>
</div>
</div>
<div class="d-flex align-items-center">
<div class="svg-success me-2">
<i data-feather="trending-up"></i>
</div>
<p class="fw-semibold">
<span class="text-success">1.3%</span> Up from past week
</p>
</div>
</div>
</div>
</div>
Responsive Breakpoints
The Trezo template is a responsive, feature-rich template built on the versatile Bootstrap Framework, ensuring it adapts seamlessly to any screen size. This foundation in Bootstrap brings powerful layout options and a wide array of pre-designed components, making customization straightforward and helping developers build professional, responsive designs quickly. For more details on the underlying framework and customization options, you can refer to the Bootstrap CSS documentation.
/* Max width 767px */
@media only screen and (max-width: 767px) {
}
/* Min width 768px to Max width 992px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
/* Min width 992px to Max width 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
}
/* Min width 1200px to Max width 1399px */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
}
/* Min width 1400px to Max width 1799px */
@media only screen and (min-width: 1400px) and (max-width: 1799px) {
}
@media only screen and (max-width: 1199px) {
}
Fonts Used
By default, the Trezo template uses the Inter and Epilogue fonts, loaded from Google Web Font Services. These fonts offer a modern, clean look suitable for various design styles. If needed, you can easily switch to different fonts to match the unique branding or aesthetic requirements of your website. Explore a wide variety of fonts available through Google Fonts for options that best suit your project.
In the Trezo template, the font settings are defined in the _variables.scss file, located at assets/scss/_variables.scss. This file contains the font import code and style variables, allowing you to update the font family globally across the template by simply editing this file. By changing the font settings here, you can easily replace Inter and Epilogue with any other fonts from Google Fonts or other sources, ensuring a cohesive and custom look for your project.
@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap");
$body-font-family: "Inter", sans-serif;
$logo-font-family: "Epilogue", sans-serif;
Note: After making changes to the _variables.scss file, you’ll need to compile the SCSS files to generate the updated CSS for the template. Once compiled, the new font settings will take effect across the site. Make sure your development environment is set up to run SCSS, or use a preprocessor like Sass to compile the updated styles.
Option to Change the Main Color
assets/scss/_variables.scss
// Color
$body-color: #64748b;
$primary: #605dff;
$secondary: #3a4252;
$info: #2db6f5;
$success: #37d80a;
$warning: #ffbc2b;
$danger: #fd5812;
$light: #d5d9e2;
$dark: #000000;
$border-color: #eceef2;
$body-bg: #f6f7f9;
$primary-div: #ad63f6;
$danger-div: #ffcea9;
$gray-light: #445164;
$rating-color: #fe7a36;
$card-bg-c: #3584fc;
$card-text-c: #ffe8d4;
$gary-light: #f4f6fc;
$gray-div: #f7f8f7;
$transition: all ease 0.5s;
$box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
$body-font-family: "Inter", sans-serif;
$logo-font-family: "Epilogue", sans-serif;
// For Dark Mode Color
$dark-body-bg: #0a0e19;
$dark-body-color: #8695aa;
$dark-card-bg: #0c1427;
$dark-input-bg: #15203c;
$dark-border: #172036;
For RTL Only
If you wish to use RTL, please apply the code below.
<html lang="zxx" dir="rtl"></html>
How to Run SCSS File
-
Please open the file Visual Studio Code Editor.
-
Open the Terminal in VS Code
- In VS Code, go to the menu and select Terminal > New Terminal, or press
Ctrl + ~to open the integrated terminal
- In VS Code, go to the menu and select Terminal > New Terminal, or press
-
Install Sass Compiler (if not already installed)
- If you haven’t installed Sass globally, you can do so by running the following command:
- This command installs Sass globally on your system, allowing you to use the sass command in any project.
npm install
npm install -g sass
- Compile SCSS to CSS
- In the terminal, navigate to the folder where your SCSS file is located.
- Run the following command to compile the SCSS file to CSS:
# Watch your custom Sass for changes and compile it to CSS
npm run sass
Speed Optimization
Please optimize all images to reduce their file size (in KB or MB) and ensure they match the size of the placeholder image located at ‘path: src/assets/images/…’
Please minify all CSS files located at the path: assets/css/.
Please minify all JS files located at the path: assets/js/.
How to Change an Image?
Please navigate to the image file at 'path: src/assets/images/...' and replace it with your desired image, ensuring it matches the placeholder image's size and name.
Installation Video
To help you understand the installation process better, please watch the following video tutorial. It provides a step-by-step guide on setting up the application:
Additional Notes
If you need more details, please refer to the written instructions.
Feel free to reach out to our support team