Thank you for purchasing Metovo - NFT Marketplace HTML Template on ThemeForest.
If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.
Follow the steps below to setup your site template:
HTML/css - Stylesheet filesHTML/images - Image filesHTML/js - Javacript filesHTML/sass - Sass filesHTML/vendor – All external libs. We keep all of them in this folder to make updates easily.Simone follows a simple and easy to customize coding structure. Here is the sample for your reference:
The template is based on Bootstrap 5 Framework
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Your Stylesheets, Scripts & Title
============================================= -->
</head>
<body>
<!-- Document Wrapper
=============================== -->
<div id="main-wrapper">
<!-- Header
============================ -->
<header id="header">
</header>
<!-- Header End -->
<!-- Content
================================ -->
<div id="content" role="main">
</div>
<!-- Content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="section">
</footer>
<!-- Footer end -->
</div>
<!-- Document Wrapper end -->
<!-- JavaScript -->
</body>
</html>If you need more information, please visit bootstrap site: https://getbootstrap.com/docs/5.1/layout/grid/
This template use fonts: Rubik from the Google Fonts Library. You can change the fonts from page head in HTML files (as following code).
<!-- Web Fonts
============================================= -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap' >
font-family CSS Property in the css/stylesheet.css File with your Newly Added Fonts.Font Awesome icon sets are used in this template.
<i class="fas fa-mobile-alt"></i>
<i class="fas fa-tv"></i>
<i class="fas fa-credit-card"></i>
<i class="fas fa-phone"></i>
......NotePlease go to their official documentation pages for a full list of icons: Font Awesome
We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well.
You can find sass file here - HTML/sass
Open the sass/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .scss Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your stylesheet.scss File.
You can change your Website's Color Scheme in an instant. We have build 10 Color css file for change template primary color.
color-blue.css - Blue Colorcolor-brown.css - Brown Colorcolor-cyan.css - Cyan Colorcolor-pink.css - Pink Colorcolor-orange.css - Orange Colorcolor-indigo.css - Indigo Colorcolor-purple.css - Purple Colorcolor-red.css - Red Colorcolor-teal.css - Teal Colorcolor-yellow.css - Yellow ColorSimply add Color CSS file link it in the Document <head>.
Make sure you add the css/color-blue.css stylesheet in your head after the css/stylesheet.css file linking from above mentioned 10 color css file.
For Example:
<head>
<!-- Stylesheet
============================================= -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/owl.carousel/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<!-- Here goes your Colors Css -->
<link rel="stylesheet" type="text/css" href="css/color-blue.css" />
</head>We have include a Custom CSS File in the css Folder so that you can better handle your Customizations for New Styles or
Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the css/custom.css File and link it in the Document <head> after the css/stylesheet.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.
<!-- Stylesheet
============================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/owl.carousel/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<!-- Here goes your custom.css
============================================= -->
<link rel="stylesheet" type="text/css" href="css/custom.css" />
The template has two different layout modes, Wide and Boxed.
If you want to use the Boxed version, Add the .boxed class in main-wrapper div:
<!-- Document Wrapper
============================================= -->
<div id="main-wrapper" class="boxed">
.....
</div><!-- Document Wrapper end -->We have included all the Tools to make your Website completely RTL ready. Simply follow the steps below:
Add the dir="rtl" to the <html> element.
Add an appropriate lang attribute, like lang="ar", on the <html> element.
Example:
<html dir="rtl" lang="ar">From there, you’ll need to replace an RTL version of Bootstrap CSS instead of default bootstrap css.
Example:
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.rtl.min.css" />Add the .rtl Class to the <body> Tag.
Example:
<body class="rtl">Variety of different style for Header while creating your Pages. The list of various header types & its descriptions are provided below for your reference:
Header as Light. See below image and code for more inforamtion.
Use the following header code sturcture for display a Header as Light.
<!-- Header
============================================= -->
<header id="header" class="sticky-lg-top">
<nav class="primary-menu navbar navbar-expand-lg">
<div class="container position-relative">
</div>
</nav>
</header>
<!-- Header end -->Header as Dark background & Light text. See below image and code for more inforamtion.
Add the .navbar-dark and .bg-dark Class to the <nav> Tag.
<!-- Header
============================================= -->
<header id="header" class="sticky-lg-top">
<nav class="primary-menu navbar navbar-expand-lg navbar-dark bg-dark border-0">
<div class="container position-relative">
</div>
</nav>
</header>
<!-- Header end -->Header as Primary background & Light text. See below image and code for more inforamtion.
Add the .navbar-dark and .bg-primary Class to the <nav> Tag.
<!-- Header
============================================= -->
<header id="header" class="sticky-lg-top">
<nav class="primary-menu navbar navbar-expand-lg navbar-dark bg-primary border-0">
<div class="container position-relative">
</div>
</nav>
</header>
<!-- Header end -->Header as No background color & Light text. See below image and code for more inforamtion.
Add the .navbar-dark and .bg-transparent Class to the <nav> Tag.
<!-- Header
============================================= -->
<header id="header" class="sticky-lg-top">
<nav class="primary-menu navbar navbar-expand-lg navbar-dark bg-transparent">
<div class="container position-relative">
</div>
</nav>
</header>
<!-- Header end -->The Logo Container can be found in the Header Container - <header>
<!-- Logo
============================= -->
<div class="logo me-1 me-sm-2 me-lg-3">
<a class="d-flex" href="index.html" title="Metovo - HTML Template">
<img class="d-none d-sm-block" src="images/logo.png" alt="Metovo" /> <!-- for Desktop -->
<img class="d-block d-sm-none" src="images/logo-sm.png" alt="Metovo" /> <!-- for Mobile -->
</a>
</div>
<!-- Logo end -->You can choose between 3 Types style color of dropdown menu while creating your Pages. The list of various dropdown menu types & its descriptions are provided below for your reference:
Dropdown Menu with white background Color & Dark text.
<!-- Header
============================================= -->
<header id="header" class="sticky-lg-top">
<nav class="primary-menu navbar navbar-expand-lg">
<div class="container position-relative">
</div>
</nav>
</header>
<!-- Header end -->Dropdown Menu with Dark background color & Light text.
Add the .navbar-dropdown-dark Class to the <nav> Tag.
<!-- Header
============================================= -->
<header id="header" class="sticky-lg-top">
<nav class="primary-menu navbar navbar-expand-lg navbar-dropdown-dark">
<div class="container position-relative">
</div>
</nav>
</header>
<!-- Header end -->Dropdown Menu with Primary background color & Light text.
Add the .navbar-dropdown-primary Class to the <nav> Tag.
<!-- Header
============================================= -->
<header id="header" class="sticky-lg-top">
<nav class="primary-menu navbar navbar-expand-lg navbar-dropdown-primary">
<div class="container position-relative">
</div>
</nav>
</header>
<!-- Header end -->You can add Secondary Menu any Page using the Code below. See below image and code for more information:
<!-- Secondary menu
============================================= -->
<div class="bg-white">
<div class="container d-flex justify-content-center">
<ul class="nav nav-tabs nav-lg border-bottom-0">
<li class="nav-item"> <a class="nav-link active" href="settings-profile.html">Profile</a></li>
<li class="nav-item"> <a class="nav-link" href="settings-security.html">Security</a></li>
<li class="nav-item"> <a class="nav-link" href="settings-notifications.html">Notifications</a></li>
</ul>
</div>
</div>
<!-- Secondary menu end -->
<!-- Secondary menu
============================================= -->
<div class="bg-primary">
<div class="container d-flex justify-content-center">
<ul class="nav nav-pills alternate nav-lg border-bottom-0">
<li class="nav-item"> <a class="nav-link active" href="settings-profile.html"><i class="fas fa-user me-2"></i>Profile</a></li>
<li class="nav-item"> <a class="nav-link" href="settings-security.html"><i class="fas fa-shield-alt me-2"></i>Security</a></li>
<li class="nav-item"> <a class="nav-link" href="settings-notifications.html"><i class="fas fa-bell me-2"></i>Notifications</a></li>
</ul>
</div>
</div>
<!-- Secondary menu end -->You can choose between 7 Types of page header while creating your Pages. The list of various page header types & its descriptions are provided below for your reference:
It includes page title with alligned left and breadcrumb in right part. See below image and code for more inforamtion.
<!-- Page Header
============================================= -->
<section class="page-header page-header-dark bg-dark-3">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8">
<h1>Page Header Left Alignment</h1>
</div>
<div class="col-md-4">
<ul class="breadcrumb justify-content-start justify-content-md-end mb-0">
<li><a href="index.html">Home</a></li>
<li class="active">Features</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Page Header end -->It includes page title and breadcrumb alligned center. See below image and code for more inforamtion.
<!-- Page Header
============================================= -->
<section class="page-header page-header-dark bg-dark-3 py-5">
<div class="container">
<div class="row text-center">
<div class="col-12">
<ul class="breadcrumb mb-0">
<li><a href="index.html">Home</a></li>
<li class="active">Features</li>
</ul>
</div>
<div class="col-12">
<h1>Page Header Center Alignment</h1>
</div>
</div>
</div>
</section>
<!-- Page Header end -->Page Header with Light background color & Dark text. See below image and code for more inforamtion.
<!-- Page Header
============================================= -->
<section class="page-header page-header-light bg-light-4 py-5 mb-0">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8 order-1 order-md-0">
<h1>Page Header Light</h1>
<p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-md-4 order-0 order-md-1">
<ul class="breadcrumb justify-content-start justify-content-md-end mb-0">
<li><a href="index.html">Home</a></li>
<li class="active">Features</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Page Header end -->Page Header with Dark background color & light text. See below image and code for more inforamtion.
<!-- Page Header
============================================= -->
<section class="page-header page-header-dark bg-dark-1 py-5 mb-0">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8 order-1 order-md-0">
<h1>Page Header Dark</h1>
<p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-md-4 order-0 order-md-1">
<ul class="breadcrumb justify-content-start justify-content-md-end mb-0">
<li><a href="index.html">Home</a></li>
<li class="active">Features</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Page Header end -->Page Header with Primary background color & light text. See below image and code for more inforamtion.
<!-- Page Header
============================================= -->
<section class="page-header page-header-dark bg-primary py-5 mb-0">
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<ul class="breadcrumb justify-content-start mb-0">
<li><a href="index.html">Home</a></li>
<li class="active">Features</li>
</ul>
</div>
<div class="col-12">
<h1>Page Header Primary</h1>
</div>
<div></div></div>
</div>
</section><!-- Page Header end -->It includes page title, sub title and breadcrumb alligned center with background image. See below image and code for more inforamtion.
<!-- Page Header
============================================= -->
<section class="page-header page-header-dark py-0 mb-0">
<div class="hero-wrap py-2 py-md-3 py-lg-5">
<div class="hero-mask opacity-6 bg-dark"></div>
<div class="hero-bg" style="background-image:url('./images/bg/image-3.jpg');"></div>
<div class="hero-content py-3 py-lg-5 my-3 my-md-5">
<div class="container">
<div class="row align-items-center text-center">
<div class="col-12">
<ul class="breadcrumb mb-0">
<li><a href="index.html">Home</a></li>
<li class="active">Features</li>
</ul>
</div>
<div class="col-12">
<h1 class="text-9">Page Header</h1>
<p class="lead mb-0">with Custom Background</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Page Header end -->Custom Background page header with Transparent Header. See below image and code for Custom Background page header inforamtion. and See here for Transparent Header
<!-- Page Header
============================================= -->
<section class="page-header page-header-dark py-0 mb-0">
<div class="hero-wrap py-5">
<div class="hero-mask opacity-7 bg-dark"></div>
<div class="hero-bg" style="background-image:url('./images/bg/image-3.jpg');"></div>
<div class="hero-content py-2 py-lg-4 my-2 my-md-4">
<div class="container mt-5">
<div class="row align-items-center">
<div class="col-12">
<ul class="breadcrumb justify-content-start mb-0">
<li><a href="index.html">Home</a></li>
<li class="active">Features</li>
</ul>
</div>
<div class="col-12">
<h1>Page Header Custom Background</h1>
<p class="lead mb-0">with Transparent Header</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Page Header end -->The list of various footer types & its descriptions are provided below for your reference:
Footer with white background Color & Dark text.
<!-- Footer
============================================= -->
<footer id="footer">
<div class="container">
..........
</div>
</footer>
<!-- Footer end -->Footer with dark background color & Light text.
Add the .bg-dark and .footer-text-light Class to the <footer> Tag to display a Dark footer.
<!-- Footer
============================================= -->
<footer id="footer" class="bg-dark footer-text-light border-0">
<div class="container">
.....
</div>
<div class="footer-copyright pt-4 mt-4">
<div class="container">
....
</div>
</div>
</footer>
<!-- Footer end -->Footer with Primary background color & Light text.
Add the .bg-primary and .footer-text-light Class to the <footer> Tag to display a Dark footer.
<!-- Footer
============================================= -->
<footer id="footer" class="bg-primary footer-text-light border-0">
<div class="container">
.....
</div>
</div>
</footer>
<!-- Footer end -->Setting up components is very easy. Here is the Some of shortcodes describe. also, This Template is based on Bootstrap 5, so you can easily use Bootstrap's components: Bootstrap Documentation
You can add Image as Background in Hero Background.
<div class="hero-wrap">
<div class="hero-mask opacity-8 bg-dark"></div>
<div class="hero-bg" style="background-image:url('./images/intro-bg.jpg');"></div>
<div class="hero-content">
<div class="container">
...
</div>
</div>
</div>.bg-dark, .bg-primary, .bg-light etc... ) 
Play YouTube or Vimeo Videos in Bootstrap Modal
<!-- Button/link Trigger modal -->
<a class="btn btn-outline-light video-btn m-2" href="#" data-src="https://www.youtube.com/embed/7e90gBu4pas" data-bs-toggle="modal" data-bs-target="#videoModal"><span class="text-2 me-3"><i class="fas fa-play"></i></span>See How it Works</a>
<!-- Video Modal
============================================= -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content bg-transparent border-0">
<button type="button" class="btn-close btn-close-white ms-auto me-n3" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body p-0">
<div class="ratio ratio-16x9">
<iframe id="video" src="" allow="autoplay;" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- Video Modal end -->You can add an Owl Carousel on any Section using the Code below:
<div class="owl-carousel owl-theme" data-autoplay="true" data-nav="true" data-loop="true" data-margin="30" data-slideby="2" data-stagepadding="5" data-items-xs="2" data-items-sm="3" data-items-md="4" data-items-lg="6">
<div class="item">....Image/Content.....</div>
<div class="item">....Image/Content.....</div>
<div class="item">....Image/Content.....</div>
<div class="item">....Image/Content.....</div>
<div class="item">....Image/Content.....</div>
<div class="item">....Image/Content.....</div>
<div class="item">....Image/Content.....</div>
<div class="item">....Image/Content.....</div>
</div>You can add Slider for Slideshow images using the Code below:
<!-- Slideshow
============================================= -->
<div class="owl-carousel owl-theme single-slideshow" data-autoplay="true" data-loop="true" data-autoheight="true" data-nav="true" data-items="1">
<div class="item">....Image.....</div>
<div class="item">....Image.....</div>
</div>
<!-- Slideshow end -->data-items - No. of Items to display in the Carousel. Eg. 1data-items-lg - No. of Items to display in the Carousel on Desktops/Laptops. Eg. 5data-items-md - No. of Items to display in the Carousel on Netbooks. Eg. 5data-items-sm - No. of Items to display in the Carousel on iPads/Tablets. Eg. 4data-items-xs - No. of Items to display in the Carousel on Mobile. Eg. 3data-loop - Enable/Disable Loop. Eg. true/falsedata-autoplay - Enable/Disable autoplay. Eg. true/falsedata-autoplaytimeout - Autoplay timer in milliseconds. Eg. 5000data-autoplayhoverpause - Enable/Disable autoplayHoverPause Eg. true/falsedata-speed - Speed of the Carousel Animation in millisconds. Eg. 700data-nav - Enable/Disable Navigation Arrows. Eg. true/falsedata-dots - Enable/Disable Pagination Dots. Eg. true/falsedata-margin - Margin between Carousel Items in pixels. Eg. 15data-stagepadding Padding on the Edges of the Carousel Container in pixels. - Eg. 20data-slideby - No. of Items to Slide at once. Eg. 2data-lazyload - Enable/Disable Lazyload. Eg. true/falsedata-autoheight - Enable/Disable autoHeight. Eg. true/falsedata-autowidth - Enable/Disable autoWidth. Eg. true/falsedata-animateOut - Enable/Disable animateOut. Eg. fadeOut/fadeIndata-animateIn - Enable/Disable animateIn. Eg. fadeOut/fadeIndata-video - Enable/Disable Video Carousel Items. Eg. true/false/js/theme.js)/*---------------------------------
Carousel (Owl Carousel)
----------------------------------- */
$(".owl-carousel").each(function (index) {
var a = $(this);
$(this).owlCarousel({
autoplay: a.data('autoplay'),
center: a.data('center'),
autoplayTimeout: a.data('autoplaytimeout'),
autoplayHoverPause: a.data('autoplayhoverpause'),
loop: a.data('loop'),
speed: a.data('speed'),
nav: a.data('nav'),
dots: a.data('dots'),
autoHeight: a.data('autoheight'),
autoWidth: a.data('autowidth'),
margin: a.data('margin'),
stagePadding: a.data('stagepadding'),
slideBy: a.data('slideby'),
lazyLoad: a.data('lazyload'),
navText:['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
animateOut: a.data('animateout'),
animateIn: a.data('animatein'),
video: a.data('video'),
items: a.data('items'),
responsive:{
0:{items: a.data('items-xs'),},
576:{items: a.data('items-sm'),},
768:{items: a.data('items-md'),},
992:{items: a.data('items-lg'),}
}
});
});You can find more Owl Carousel related Settings for Custom JS Initialization here - Owl Carousel Documentation.
You can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.
See below image and code for more inforamtion.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Creative One Page Html Template. </button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Mutat tacimates id sit. Ridens mediocritatem ius an, eu nec magna imperdiet.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Personal Portfolio Html Template </button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">Mutat tacimates id sit. Ridens mediocritatem ius an, eu nec magna imperdiet. Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Ad vegan excepteur butcher vice lomo.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Bootstrap 5 One Page Html Template </button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div>
</div>
</div>
</div>
| Type Class | Features | Code Example |
|---|---|---|
.accordion-flush |
Alternate Flush Style for the accordions. | |
.arrow-end |
For set arrow in right side in accordions | |
For demo, You can please check this in elements.html page.
Default Bootstrap Nav component combined with this template for unique tabs.
See below image and code for more inforamtion.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"> <a class="nav-link active" id="one-tab" data-bs-toggle="tab" href="#one" role="tab" aria-controls="one" aria-selected="true">Tab Title 1</a> </li>
<li class="nav-item"> <a class="nav-link" id="two-tab" data-bs-toggle="tab" href="#two" role="tab" aria-controls="two" aria-selected="false">Tab Title 2</a> </li>
<li class="nav-item"> <a class="nav-link" id="three-tab" data-bs-toggle="tab" href="#three" role="tab" aria-controls="three" aria-selected="false">Tab Title 3</a> </li>
</ul>
<div class="tab-content my-3" id="myTabContent">
<div class="tab-pane fade show active" id="one" role="tabpanel" aria-labelledby="one-tab">
<p>Instant Online mobile recharge Iisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Mutat tacimates id sit. Ridens mediocritatem ius an, eu nec magna imperdiet. Mediocrem qualisque in has. Enim utroque perfecto id mei, ad eam tritani labores facilisis, ullum sensibus no cum. Eius eleifend in quo. At mei alia iriure propriae.</p>
</div>
<div class="tab-pane fade" id="two" role="tabpanel" aria-labelledby="two-tab">
<p>Partiendo voluptatibus ex cum, sed erat fuisset ne, cum ex meis volumus mentitum. Alienum pertinacia maiestatis ne eum, verear persequeris et vim. Mea cu dicit voluptua efficiantur, nullam labitur veritus sit cu. Eum denique omittantur te, in justo epicurei his, eu mei aeque populo.</p>
<p>Ius hinc decore erroribus eu, in case prima exerci pri. Id eum prima adipisci. Ius cu minim theophrastus, legendos pertinacia an nam.</p>
</div>
<div class="tab-pane fade" id="three" role="tabpanel" aria-labelledby="three-tab">
<p>Cu pro facer sententiae, ne brute graece scripta duo. No placerat quaerendum nec, pri alia ceteros adipiscing ut. Quo in nobis nostrum intellegebat. Ius hinc decore erroribus eu, in case prima exerci pri. Id eum prima adipisci. Ius cu minim theophrastus, legendos pertinacia an nam.</p>
</div>
</div>
| Type Class | Features | Code Example |
|---|---|---|
Basic Navs |
Basic Navs Style for the Tabs | |
.nav-separator |
Basic Navs Style with Separator for the Tabs | |
.nav-tabs |
Tabs Navs Style for the Tabs. For example - above Preview Example. | |
.nav-pills |
Pills Navs Style for the Tabs | |
.nav-lg |
Large Navs Style for the Tabs | |
For demo, You can please check this in elements.html page.
You can add a Vertical Tabs using the Code below:
<div class="row">
<div class="col-md-3">
<ul class="nav nav-tabs flex-column" id="myTabVertical" role="tablist">
<li class="nav-item"> <a class="nav-link active" id="first-tab" data-bs-toggle="tab" href="#firstTab" role="tab" aria-controls="firstTab" aria-selected="true">Vertical Tab Title 1</a> </li>
<li class="nav-item"> <a class="nav-link" id="second-tab" data-bs-toggle="tab" href="#secondTab" role="tab" aria-controls="secondTab" aria-selected="false">Vertical Tab Title 2</a> </li>
<li class="nav-item"> <a class="nav-link" id="third-tab" data-bs-toggle="tab" href="#thirdTab" role="tab" aria-controls="thirdTab" aria-selected="false">Vertical Tab Title 3</a> </li>
<li class="nav-item"> <a class="nav-link" id="fourth-tab" data-bs-toggle="tab" href="#fourthTab" role="tab" aria-controls="fourthTab" aria-selected="false">Vertical Table Title 4</a> </li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content my-3" id="myTabContentVertical">
<div class="tab-pane fade show active" id="firstTab" role="tabpanel" aria-labelledby="first-tab">
<p>This is Tab Content 1</p>
</div>
<div class="tab-pane fade" id="secondTab" role="tabpanel" aria-labelledby="second-tab">
<p>This is Tab Content 2</p>
</div>
<div class="tab-pane fade" id="thirdTab" role="tabpanel" aria-labelledby="third-tab">
<p>This is Tab Content 3</p>
</div>
<div class="tab-pane fade" id="fourthTab" role="tabpanel" aria-labelledby="fourth-tab">
<p>This is Tab Content 4</p>
</div>
</div>
</div>
</div>
For demo, You can please check this in elements.html page.
Team members view with name, image and social links. See below code for more information.
<div class="row g-4">
<div class="col-sm-6 col-md-3 text-center">
<div class="team rounded d-inline-block"> <img class="img-fluid rounded" alt="" src="images/team/leader.jpg">
<h3>Neil Patel</h3>
<p class="text-muted">CEO & Founder</p>
<ul class="social-icons social-icons-sm d-inline-flex">
<li class="social-icons-facebook"><a data-bs-toggle="tooltip" href="#" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li class="social-icons-twitter"><a data-bs-toggle="tooltip" href="" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li>
<li class="social-icons-google"><a data-bs-toggle="tooltip" href="" target="_blank" title="Google"><i class="fab fa-google"></i></a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3 text-center">
<div class="team rounded d-inline-block"> <img class="img-fluid rounded" alt="" src="images/team/leader-2.jpg">
<h3>James Maxwell</h3>
<p class="text-muted">Co-Founder</p>
<ul class="social-icons social-icons-sm d-inline-flex">
<li class="social-icons-facebook"><a data-bs-toggle="tooltip" href="" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li class="social-icons-twitter"><a data-bs-toggle="tooltip" href="" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li>
<li class="social-icons-google"><a data-bs-toggle="tooltip" href="" target="_blank" title="Google"><i class="fab fa-google"></i></a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3 text-center">
<div class="team rounded d-inline-block"> <img class="img-fluid rounded" alt="" src="images/team/leader-3.jpg">
<h3>Ruby Clinton</h3>
<p class="text-muted">Chief Marketing Officer</p>
<ul class="social-icons social-icons-sm d-inline-flex">
<li class="social-icons-facebook"><a data-bs-toggle="tooltip" href="" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li class="social-icons-twitter"><a data-bs-toggle="tooltip" href="" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li>
<li class="social-icons-google"><a data-bs-toggle="tooltip" href="" target="_blank" title="Google"><i class="fab fa-google"></i></a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3 text-center">
<div class="team rounded d-inline-block"> <img class="img-fluid rounded" alt="" src="images/team/leader-4.jpg">
<h3>Miky Sheth</h3>
<p class="text-muted">General Manager</p>
<ul class="social-icons social-icons-sm d-inline-flex">
<li class="social-icons-facebook"><a data-bs-toggle="tooltip" href="" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li class="social-icons-twitter"><a data-bs-toggle="tooltip" href="" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li>
<li class="social-icons-google"><a data-bs-toggle="tooltip" href="" target="_blank" title="Google"><i class="fab fa-google"></i></a></li>
</ul>
</div>
</div>
</div>
For demo, You can please check in about-us.html page.
We have created some really useful helper classes for you. Here are a few of them. also, You can refer other default bootstrap helper classes here: Bootstrap Documentation
.text-0 - Changes the Font size to 11px..text-1 - Changes the Font size to 12px..text-2 - Changes the Font size to 14px..text-3 - Changes the Font size to 16px..text-4 - Changes the Font size to 18px..text-5 - Changes the Font size to 21px..text-6 - Changes the Font size to 24px..text-7 - Changes the Font size to 28px..text-8 - Changes the Font size to 32px..text-9 - Changes the Font size to 36px..text-10 - Changes the Font size to 40px..text-11 - Changes the Font size to 44px..text-12 - Changes the Font size to 48px..text-13 - Changes the Font size to 52px..text-14 - Changes the Font size to 56px..text-15 - Changes the Font size to 60px..text-16 - Changes the Font size to 64px..text-17 - Changes the Font size to 72px..text-18 - Changes the Font size to 80px..text-19 - Changes the Font size to 84px..text-20 - Changes the Font size to 92px..text-21 - Changes the Font size to 104px..text-22 - Changes the Font size to 112px..text-23 - Changes the Font size to 124px..text-24 - Changes the Font size to 132px..text-25 - Changes the Font size to 144px..fw-100 - For font weight of 100..fw-200 - For font weight of 200..fw-300 - For font weight of 300..fw-400 - For font weight of 400..fw-500 - For font weight of 500..fw-600 - For font weight of 600..fw-700 - For font weight of 700..fw-800 - For font weight of 800..fw-900 - For font weight of 900..bg-transparent - For background color of transparent.bg-light - For background color of light gray.bg-light-1 - For background color of more light gray.bg-light-2 - For background color of more light gray.bg-light-3 - For background color of more light gray.bg-light-4 - For background color of more light gray.bg-light-5 - For background color of more light gray.bg-dark - For background color of dark.bg-dark-1 - For background color of dark gray.bg-dark-2 - For background color of more dark gray.bg-dark-3 - For background color of more dark gray.bg-dark-4 - For background color of more dark gray.bg-dark-5 - For background color of more dark gray.shadow-none - For No shadow to elements with box-shadow utilities..shadow-sm - For Small shadow to elements with box-shadow utilities..shadow - For Regular shadow to elements with box-shadow utilities..shadow-md - For medium light shadows to elements with box-shadow utilities..shadow-lg - For Larger shadows to elements with box-shadow utilities..opacity-1 - For 10% opacity..opacity-2 - For 20% opacity..opacity-3 - For 30% opacity..opacity-4 - For 40% opacity..opacity-5 - For 50% opacity..opacity-6 - For 60% opacity..opacity-7 - For 70% opacity..opacity-8 - For 80% opacity..opacity-9 - For 90% opacity..rounded-top-0 - No Border Radius for top..rounded-bottom-0 - No Border Radius for bottom..rounded-start-0 - No Border Radius for left..rounded-end-0 - No Border Radius for right.If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page
We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).
For Future Updates Follow Us @themeforest / @facebook / @twitter / @Dribbble
The best way is to use a compare tool for update template, like this one: http://kdiff3.sourceforge.net/ – and use it to compare the folders (your current website and the new version). Updating HTML templates requires manual work.
Initial Release
Please Checkout Our Below Other Premium Templates
Social Icon
Social links with different styles. See below code for more information.
Alternate Styles:
.social-icons-light.social-icons-muted.social-icons-colored.social-icons-sm.social-icons-lgelements.htmlpage.