“Blog Template” Documentation by “Sean Ngu” v5.5.2
Updated on: 08/July/2025
By: Sean Ngu
If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to send us a message through Wrapbootstrap. We are more than happy to help. Thank you very much!
This template can be used as an fluid layout with a max of 12 columns next to each other. The general template structure is the same throughout the template. Here is the general structure.
<!-- begin #header --> <div id="header" class="header navbar navbar-default navbar-fixed-top"> <!-- header here --> </div> <!-- end #header --> <!-- begin #page-title --> <div id="page-title" class="page-title has-bg"> <!-- page-title here --> </pre> <!-- end #page-title --> <!-- begin #content --> <div id="content" class="content"> <!-- content here --> </div> <!-- end #content --> <!-- begin #footer --> <div id="footer" class="footer"> <!-- footer here --> </div> <!-- end #footer --> <!-- begin #footer-copyright --> <div id="footer-copyright" class="footer-copyright"> <!-- footer-copyright here --> </div> <!-- end #footer-copyright -->
Page head contains metadata, javascript and css files:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Color Admin | Blog Concept Front End Theme</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta content="" name="description" /> <meta content="" name="author" /> <!-- ================== BEGIN core-css ================== --> <link href="../assets/css/blog/vendor.min.css" rel="stylesheet" /> <link href="../assets/css/blog/app.min.css" rel="stylesheet" /> <!-- ================== END core-css ================== --> <!-- OR without vendor.min.css --> <!-- ================== BEGIN core-css ================== --> <link href="../assets/plugins/animate.css/animate.min.css" rel="stylesheet" /> <link href="../assets/plugins@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="../assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" /> <link href="../assets/pluginspace-js/themes/black/pace-theme-flash.css" rel="stylesheet" /> <link href="../assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" /> <link href="../assets/css/blog/app.min.css" rel="stylesheet" /> <!-- ================== END core-css ================== --> </head> <body>
<!-- begin #header -->
<div id="header" class="header navbar navbar-default navbar-expand-lg navbar-fixed-top">
<!-- begin container -->
<div class="container">
<!-- begin navbar-brand -->
<a href="index.html" class="navbar-brand">
<span class="brand-logo"></span>
<span class="brand-text">
COLOR ADMIN
</span>
</a>
<!-- end navbar-brand -->
<!-- begin navbar-toggle -->
<button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse" data-bs-target="#header-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- end navbar-toggle -->
<!-- begin navbar-collapse -->
<div class="collapse navbar-collapse" id="header-navbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" data-bs-toggle="dropdown">HOME <b class="caret"></b></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="index_transparent_header.html">Page with Transparent Header</a>
<a class="dropdown-item" href="index_inverse_header.html">Page with Inverse Header</a>
<a class="dropdown-item" href="index.html">Default Header</a>
</div>
</li>
<li class="dropdown">
<a href="#" data-bs-toggle="dropdown">POSTS <b class="caret"></b></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="post_grid.html">Page with Grid View Blog Post</a>
<a class="dropdown-item" href="post_without_sidebar.html">Page without Sidebar</a>
</div>
</li>
<li><a href="about_me.html">ABOUT ME</a></li>
<li><a href="contact_us.html">CONTACT US</a></li>
<li><a href="https://wrapbootstrap.com/theme/color-admin-admin-template-front-end-WB0N89JMK">PURCHASE</a></li>
</ul>
</div>
<!-- end navbar-collapse -->
</div>
<!-- end container -->
</div>
<!-- end #header -->
There have 2 options of page content. HTML code of Content container as shown below:
<!-- begin #page-title -->
<div id="page-title" class="page-title has-bg">
<div class="bg-cover"><img src="../assets/img/cover/cover-1.jpg" alt="" /></div>
<div class="container">
<!-- page-title here -->
</div>
</div>
<!-- end #page-title -->
<!-- begin content -->
<div class="content">
<!-- begin container -->
<div class="container">
<!-- your content here -->
</div>
<!-- end container -->
</div>
<!-- end content -->
<!-- begin #footer -->
<div id="footer" class="footer">
<!-- begin container -->
<div class="container">
<!-- begin row -->
<div class="row">
<!-- begin col-3 -->
<div class="col-md-3 col-sm-3">
<!-- begin section-container -->
<div class="section-container">
<h4 class="footer-title">Categories</h4>
<ul class="categories">
<li><a href="#">Sports</a></li>
<li><a href="#">Outdoor Sports</a></li>
<li><a href="#">Indoor Sports</a></li>
<li><a href="#">Video Shooting</a></li>
<li><a href="#">Drone</a></li>
<li><a href="#">Uncategorized</a></li>
</ul>
</div>
<!-- end section-container -->
</div>
<!-- end col-3 -->
<!-- begin col-3 -->
<div class="col-md-3 col-sm-3">
<!-- begin section-container -->
<div class="section-container">
<h4 class="footer-title">Archives</h4>
<ul class="archives">
<li><a href="#">June 2025</a> <span class="total">(102)</span></li>
<li><a href="#">May 2025</a> <span class="total">(46)</span></li>
<li><a href="#">April 2025</a> <span class="total">(84)</span></li>
<li><a href="#">March 2025</a> <span class="total">(67)</span></li>
<li><a href="#">February 2025</a> <span class="total">(99)</span></li>
<li><a href="#">January 2025</a> <span class="total">(113)</span></li>
<li><a href="#">December 2025</a> <span class="total">(25)</span></li>
</ul>
</div>
<!-- end section-container -->
</div>
<!-- end col-3 -->
<!-- begin col-3 -->
<div class="col-md-3 col-sm-3">
<!-- begin section-container -->
<div class="section-container">
<h4 class="footer-title">Recent Posts</h4>
<ul class="recent-post">
<li>
<h4>
<a href="#">Nam ut urna hendrerit</a>
<span class="time">February 22, 2025</span>
</h4>
</li>
<li>
<h4>
<a href="#">Class aptent taciti sociosqu</a>
<span class="time">July 15, 2025</span>
</h4>
</li>
<li>
<h4>
<a href="#">Donec rhoncus arcu</a>
<span class="time">March 21, 2025</span>
</h4>
</li>
</ul>
</div>
<!-- end section-container -->
</div>
<!-- end col-3 -->
<!-- begin col-3 -->
<div class="col-md-3 col-sm-3">
<div class="section-container">
<h4 class="footer-title">About Color Admin</h4>
<address>
<strong>Twitter, Inc.</strong><br />
795 Folsom Ave, Suite 600<br />
San Francisco, CA 94107<br />
P: (123) 456-7890<br />
<br />
<strong>Full Name</strong><br />
<a href="#">first.last@example.com</a>
</address>
</div>
<!-- end section-container -->
</div>
<!-- end col-3 -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end #footer -->
<!-- begin #footer-copyright -->
<div id="footer-copyright" class="footer-copyright">
<!-- begin container -->
<div class="container">
<span class="copyright">© 2025 SeanTheme All Right Reserved</span>
<ul class="social-media-list">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-rss"></i></a></li>
</ul>
</div>
<!-- end container -->
</div>
<!-- end #footer-copyright -->
Panel Theme used to customize the overall layout options.
<!-- begin theme-panel -->
<div class="theme-panel">
<a href="javascript:;" data-click="theme-panel-expand" class="theme-collapse-btn"><i class="fa fa-cog"></i></a>
<div class="theme-panel-content">
<div class="theme-list clearfix">
<div class="theme-list-item">
<a href="javascript:;" class="bg-purple"
data-theme-class="theme-purple"
data-click="theme-selector"
data-toggle="tooltip"
data-trigger="hover"
data-container="body"
data-title="Purple"> </a>
</div>
...
</div>
</div>
</div>
<!-- end theme-panel -->
Javascript files loaded in the end of page. This will reduce page load time.
<!-- ================== BEGIN core-js ================== --> <script src="../assets/js/blog/vendor.min.js"></script> <script src="../assets/js/blog/app.min.js"></script> <!-- ================== END core-js ================== --> <!-- OR without vendor.min.js --> <!-- ================== BEGIN core-js ================== --> <script src="../assets/plugins/pace-js/pace.min.js"></script> <script src="../assets/plugins/jquery/dist/jquery.min.js"></script> <script src="../assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> <script src="../assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../assets/plugins/js-cookie/dist/js.cookie.min.js"></script> <script src="../assets/js/blog/app.min.js"></script> <!-- ================== END core-js ================== --> </body> </html>
Add the theme to the <body> tag in order to change the theme color.
<body class="theme-red">...</body> <body class="theme-pink">...</body> <body class="theme-orange">...</body> <body class="theme-yellow">...</body> <body class="theme-lime">...</body> <body class="theme-green">...</body> <body class="theme-teal">...</body> <body class="theme-cyan">...</body> <body class="theme-blue">...</body> <body class="theme-purple">...</body> <body class="theme-indigo">...</body> <body class="theme-gray-500">...</body>
Add the data-bs-theme="dark" attribute to <html> in order to enable the dark mode.
<html data-bs-theme="dark">
Add the dir="rtl" attribute to <html> in order to enable Right-To-Left (RTL) layout direction.
<html dir="rtl">
This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.
Below is the command that required to run / compile the scss with gulpjs. If you are new to the gulpjs, you may refer to their official website for installation guide.
<!-- run the following command --> cd /your-path-url/frontend/blog/src/ npm install gulp <!-- available command --> gulp plugins // generate list of plugins
Verify that you are running at least node 22.x.x or later and npm 11.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
We are using gulp to compile & combine few plugins js & css into one single vendor file for js & css. This may help to improve the speed for page load if compare to multiple files loading in one page.
If you wish to edit the included plugins files, you may refer to the /admin/src/gulpfile.js.
Below is the list of plugins that compile into vendor.min.css.
return gulp.src([
'node_modules/animate.css/animate.min.css',
'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
'node_modules/jquery-ui-dist/jquery-ui.min.css',
'node_modules/pace-js/themes/black/pace-theme-flash.css',
'node_modules/bootstrap-icons/font/bootstrap-icons.css'
])
.pipe(sass())
.pipe(concat('vendor.min.css'))
.pipe(minifyCSS())
.pipe(gulp.dest(distPath + '/assets/css/blog/'))
.pipe(livereload());
Below is the list of plugins that compile into vendor.min.js.
return gulp.src([
'node_modules/pace-js/pace.min.js',
'node_modules/jquery/dist/jquery.min.js',
'node_modules/jquery-ui-dist/jquery-ui.min.js',
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
'node_modules/js-cookie/src/js.cookie.js'
])
.pipe(sourcemaps.init())
.pipe(concat('vendor.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(distPath + '/assets/js/blog/'))
.pipe(livereload());
Below is the list of all plugins and external resources used to power this template.
| Name | CSS Files |
|---|---|
| Bootstrap |
Required CSS File <link rel="stylesheet" href="../assets/plugins/bootstrap/dist/css/bootstrap.min.css" /> Required JS File <script src="../assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> Official Link: |
|
jQuery
|
Required JS File <script src="../assets/plugins/jquery/dist/jquery.min.js"></script> Official Link: |
|
jQuery UI
|
Required CSS File <link rel="stylesheet" href="../assets/plugins/jquery-ui-dist/jquery-ui.min.css" /> Required JS File <script src="../assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> Official Link: |
| Bootstrap Icons |
Required CSS File <link rel="stylesheet" href="../assets/plugins/bootstrap-icons/font/bootstrap-icons.css" /> Official Link: |
| Font Awesome |
Required CSS File <link rel="stylesheet" href="../assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" /> Official Link: |
| Animate.css |
Required CSS File <link rel="stylesheet" href="../assets/plugins/animate/animate.min.css" /> Official Link: |
| scrollMonitor |
Required JS File <script src="../assets/plugins/scrollmonitor/scrollMonitor.js"></script> Official Link: |
| Pace |
Required CSS File <link rel="stylesheet" href="../assets/plugins/pace-js/themes/black/pace-theme-flash.css" /> Required JS File <script src="../assets/plugins/pace-js/pace.min.js"></script> Official Link: |
| JS Cookie |
Required JS File <script src="../assets/plugins/js-cookie/dist/js.cookie.min.js"></script> Official Link: |
| Paroller |
Required JS File <script="../assets/plugins/paroller.js/dist/jquery.paroller.min.js"></script> Official Link: |
I've used the following images, icons or other files as listed.
jQuery Plugins