Update to Bootstrap 4

assets/css/style.css

 Author: Themefisher
 Author URI: www.Themefisher.com
 Description: Meghna Responsive HTML5/CSS3 Portfolio Template
-Version: 1.0
+Version: 1.1
 Tags: one-page, single-page, portfolio, custom-colors, post-formats, responsive, html5, css3
 */
 /*=== MEDIA QUERY ===*/
   font-family: "Quattrocento Sans", sans-serif;
 }
 
+[scroll-behavior=smooth] {
+  scroll-behavior: smooth;
+}
+
 /*=================================================================
   Basic Setup
 ==================================================================*/
   background: #57cbcc;
 }
 
-ol,
-ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 figure {
   margin: 0;
 }
   color: #fff;
 }
 
-.form-control {
-  background-color: #2f383d;
-  border-radius: 0;
-  padding: 5px 10px;
-  border: 0 none;
-  color: #ddd;
-}
-
-.form-control:focus {
-  box-shadow: 0 0 0;
-}
-
-.form-control::-webkit-input-placeholder {
-  /*  Chrome, Safari, Opera  */
-  color: #ddd;
-}
-
-.form-control:-moz-placeholder {
-  /* Firefox 18- */
-  color: #ddd;
-}
-
-.form-control::-moz-placeholder {
-  /* Firefox 19+ */
-  color: #ddd;
-}
-
-.form-control:-ms-input-placeholder {
-  /*  Internet Explorer  */
-  color: #ddd;
-}
-
 #loading-mask {
   background: #333439;
   height: 100%;
   width: 100%;
 }
 
-.border {
+.border-meghna {
   border-top: 2px solid rgba(236, 239, 241, 0.07);
   height: 1px;
   margin: 15px auto 0;
   width: 30%;
 }
 
-.border:before {
+.border-meghna:before {
   background-color: #fff;
   content: '';
   height: 6px;
   display: inline-block;
 }
 
-ol,
-ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
 
 figure {
   margin: 0;
 
 @media (max-width: 768px) {
   .section {
-    padding: 50px 0;
+    padding: 80px 0;
   }
 }
 
 .navigation {
   background-color: #1d2024;
   width: 100%;
-  z-index: 99;
   margin-bottom: 0;
-  padding: 10px;
-  position: sticky;
-  top: 0;
 }
 
 .navigation .logo {
   padding: 0;
 }
 
-.navigation .navigation-menu li.active a {
+.navigation .navigation-menu li a.active {
   color: #57cbcc;
 }
 
   color: #57cbcc;
 }
 
-.navbar-toggle {
-  border: 1px solid #fff;
+.navigation .navbar-toggler {
+  color: rgba(255,255,255,.5);
+  border-color: rgba(255,255,255,.1);
   border-radius: 0;
 }
 
-.navbar-toggle span {
-  background: #fff;
+.navigation .navbar-collapse {
+  padding: 10px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
+  border-top: 5px solid transparent;
+}
+
+@media (min-width: 768px) {
+  .navigation .navbar-collapse {
+    box-shadow: none;
+    border-top: none;
+  }
+}
+
+.navbar-toggler:focus {
+  outline-color:  #57cbcc;
 }
 
 .bg-1 {
   padding-top: 50px;
 }
 
+@media (max-width: 768px)
+{
+  .contact-us {
+    padding-top: 80px;
+  }
+}
+
 .contact-form {
   margin-bottom: 60px;
 }
 
-.contact-form .form-control {
+.form-meghna .form-control {
   background-color: transparent;
+  border-radius: 0;
+  padding: 5px 10px;
+  color: #ddd;
   border: 1px solid rgba(236, 239, 241, 0.07);
-  height: 45px;
 }
 
-.contact-form textarea.form-control {
-  padding: 10px;
-  height: 120px;
+.form-meghna .form-control:focus
+{
+  border-color: none;
+  box-shadow: none;
 }
 
-.contact-form input:hover,
-.contact-form textarea:hover,
+.form-meghna input:hover,
+.form-meghna textarea:hover,
 #contact-submit:hover {
   border-color: #57cbcc;
 }
 
+.form-meghna ::placeholder
+{
+  color: #ddd !important;
+}
+
 #contact-submit {
   border: 1px solid rgba(236, 239, 241, 0.07);
   background: #57cbcc;
 
 .con-info i,
 .con-info span {
-  float: left;
-}
-
-.con-info span {
-  margin: -5px 0 0 15px;
+  padding-right: 5px;
 }
 
 .error {
   font-size: 30px;
 }
 
+.pricing ul, .skill-bar {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
 .pricing li {
   padding: 10px 0;
 }
   margin: 0;
 }
 
-/*# sourceMappingURL=maps/style.css.map */
+.form-control-meghna .form-control {
+  background-color: transparent;
+  padding: 5px 10px;
+  color: #ddd;
+  border: 1px solid rgba(236, 239, 241, 0.07);
+}
+
+.form-control-meghna .form-control:focus
+{
+  border-color: #57cbcc;
+  box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.432);
+}
+
+/*# sourceMappingURL=maps/style.css.map */

exampleSite/config.toml

 baseURL = "http://example.org/"
 languageCode = "en-us"
-title = "Meghna | Responsive Multipurpose Parallax HTML5 Template"
+title = "Meghna"
+
 theme = "meghna-hugo"
 
 # Menu
 logo = "images/logo.png"
 gmapAPI = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU&libraries=places"
 # Meta data
-description = "Airspace Hugo theme"
+description = "Responsive Multipurpose Parallax HTML5 Template"
 author = "Themefisher"
 # Google Analitycs
 googleAnalitycsID = "Your ID"
         title = "Cups of Coffee"
         icon = "tf-ion-coffee"
         count = "2500"
-    
+
     # footer
     [params.footer]
         copyright = "Themefisher Team"
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-facebook"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-twitter"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-google-outline"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-youtube"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-linkedin"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-dribbble-outline"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-pinterest-outline"
         url = "#"

layouts/_default/baseof.html

 <!DOCTYPE html>
-<html>
+<html class="no-js" lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
     {{- partial "head.html" . -}}
-    <body>
-        {{- partial "header.html" . -}}
+    <body id="body" data-spy="scroll" data-target=".navbar" data-offset="52">
         <div id="content">
         {{- block "main" . }}{{- end }}
         </div>

layouts/_default/list.html

-{{ partial "header.html" . }}
+{{ define "main" }}
 
 {{ partial "navigation.html" . }}
 
     <div class="container">
         <div class="row">
 
-            <div class="clearfix">
-                {{ range .Data.Pages }}
-                {{"<!-- single blog post -->" | safeHTML}}
-                <article class="col-md-4 col-sm-6 col-xs-12 clearfix wow fadeInUp" data-wow-duration="500ms">
-                    <div class="post-block">
-                        <div class="media-wrapper">
-                            {{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-responsive">{{ end }}
-                        </div>
+            {{ range .Data.Pages }}
+            {{"<!-- single blog post -->" | safeHTML}}
+            <article class="col-lg-4 col-md-6 col-12 clearfix wow fadeInUp" data-wow-duration="500ms">
+                <div class="post-block">
+                    <div class="media-wrapper">
+                        {{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-fluid">{{ end }}
+                    </div>
 
-                        <div class="content">
-                            <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
-                            <p>{{ .Summary }}</p>
-                            <a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a>
-                        </div>
+                    <div class="content">
+                        <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
+                        <p>{{ .Summary }}</p>
+                        <a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a>
                     </div>
-                </article>
-                {{"<!-- /single blog post -->" | safeHTML}}
-                {{ end }}
-            </div>
+                </div>
+            </article>
+            {{"<!-- /single blog post -->" | safeHTML}}
+            {{ end }}
         </div>
     </div>
 </section>
 {{"<!-- /blog -->" | safeHTML}}
 
-{{ partial "footer.html" . }}
+{{ end }}

layouts/_default/single.html

-{{ partial "header.html" . }}
+{{ define "main" }}
 
 {{ partial "navigation.html" . }}
 
 <section class="section">
     <div class="container">
         <div class="row">
-            <div class="col-md-8 col-md-offset-2 text-center">
+            <div class="col-lg-8 offset-lg-2 text-center">
                 <h1>{{ .Title }}</h1>
                 <ul class="list-inline mb-50">
                     <li class="list-inline-item">{{ .Params.author }}</li>
                 </ul>
                 <img class="img-fluid mb-50" src="{{ .Params.image | absURL }}" alt="blog-image">
             </div>
-            <div class="col-md-8 col-md-offset-2">
+            <div class="col-lg-8 offset-lg-2">
                 <div class="post-single-content">
                     {{ .Content }}
                 </div>
     </div>
 </section>
 
-{{ partial "footer.html" . }}
+{{ end }}

layouts/index.html

-{{ partial "header.html" . }}
-	
-{{ partial "preloader.html" . }}
-	    
-{{ partial "hero-area.html" . }}
+{{ define "main" }}
 
-{{ partial "navigation.html" . }}
+    {{ partial "preloader.html" . }}
 
-{{ partial "about.html" . }}
+    {{ partial "hero-area.html" . }}
 
-{{ partial "cta.html" . }}
+    {{ partial "navigation.html" . }}
 
-{{ partial "service.html" . }}
-	
-{{ partial "skill.html" . }}
+    {{ partial "about.html" . }}
 
-{{ partial "portfolio.html" . }}
+    {{ partial "cta.html" . }}
 
-{{ partial "counter.html" . }}
+    {{ partial "service.html" . }}
 
-{{ partial "team.html" . }}
-		
-{{ partial "pricing.html" . }}
+    {{ partial "skill.html" . }}
 
-{{ partial "testimonial.html" . }}
+    {{ partial "portfolio.html" . }}
 
-{{ partial "blog.html" . }}
-		
-{{ partial "contact.html" . }}
+    {{ partial "counter.html" . }}
 
-{{ partial "footer.html" . }}
+    {{ partial "team.html" . }}
+
+    {{ partial "pricing.html" . }}
+
+    {{ partial "testimonial.html" . }}
+
+    {{ partial "blog.html" . }}
+
+    {{ partial "contact.html" . }}
+
+{{ end }}

layouts/partials/about.html

 <section class="bg-one about section" id="about">
     <div class="container">
         <div class="row">
-            {{"<!-- section title -->" | safeHTML}}
-            <div class="title text-center wow fadeIn" data-wow-duration="1500ms">
-                <h2>{{ .Site.Data.about.heading}} <span class="color">{{ .Site.Data.about.headingSpan}}</span> </h2>
-                <div class="border"></div>
+            <div class="col-lg-12">
+                {{"<!-- section title -->" | safeHTML}}
+                <div class="title text-center wow fadeIn" data-wow-duration="1500ms">
+                    <h2>{{ .Site.Data.about.heading}} <span class="color">{{ .Site.Data.about.headingSpan}}</span> </h2>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML}}
 
             {{ range .Site.Data.about.aboutItem }}
             {{"<!-- About item -->" | safeHTML}}
-            <div class="col-md-4 text-center wow fadeInUp" data-wow-duration="500ms">
+            <div class="col-lg-4 text-center wow fadeInUp" data-wow-duration="500ms">
                 <div class="block">
                     <div class="icon-box">
-                            {{with .icon}}<i class="{{ . }}"></i>{{ end }}
+                        {{with .icon}}<i class="{{ . }}"></i>{{ end }}
                     </div>
                     {{"<!-- Express About Yourself -->" | safeHTML}}
                     <div class="content text-center">
-                      {{ with .title }}<h3 class="ddd">{{ . }}</h3>{{ end }}
-                      {{ with .content}}  <p>{{ . }}</p>{{ end }}
+                        {{ with .title }}<h3 class="ddd">{{ . }}</h3>{{ end }}
+                        {{ with .content}}  <p>{{ . }}</p>{{ end }}
                     </div>
                 </div>
             </div>
 
 {{ if .Site.Data.about2.enable }}
 {{"<!-- about 2 -->" | safeHTML}}
-<section class="section about-2 padding-0 bg-dark">
+<section class="section section-bg about-2 padding-0">
     <div class="container-fluid">
         <div class="row">
-            <div class="col-md-6 padding-0 ">
-                <img class="img-responsive" src="{{ .Site.Data.about2.image | absURL}}" alt="image">
+            <div class="col-lg-6 padding-0 ">
+                <img class="img-fluid" src="{{ .Site.Data.about2.image | absURL}}" alt="image">
             </div>
-            <div class="col-md-6">
+            <div class="col-lg-6">
                 <div class="content-block">
-                   {{with .Site.Data.about2.title}} <h2>{{ . }}</h2> {{ end }}
-                   {{with .Site.Data.about2.description}} <p>{{ . }}</p> {{ end }}
-                   {{with .Site.Data.about2.description2}} <p>{{ . }}</p> {{ end }}
+                    {{with .Site.Data.about2.title}} <h2>{{ . }}</h2> {{ end }}
+                    {{with .Site.Data.about2.description}} <p>{{ . }}</p> {{ end }}
+                    {{with .Site.Data.about2.description2}} <p>{{ . }}</p> {{ end }}
                     <div class="row">
                         {{ range .Site.Data.about2.aboutItem }}
-                        <div class="col-md-6">
+                        <div class="col-lg-6">
                             <div class="media">
-                                <div class="pull-left">
-                                   {{with .icon}} <i class="{{ . }}"></i> {{ end }}
+                                <div class="align-self-start mr-3">
+                                    {{with .icon}} <i class="{{ . }}"></i> {{ end }}
                                 </div>
                                 <div class="media-body">
-                                   {{with .title}} <h4 class="media-heading">{{ . }}</h4>{{ end }}
-                                   {{ with .content}} <p>{{ . }}</p> {{ end }}
+                                    {{with .title}} <h4 class="media-heading">{{ . }}</h4>{{ end }}
+                                    {{ with .content}} <p>{{ . }}</p> {{ end }}
                                 </div>
                             </div>
                         </div>

layouts/partials/blog.html

 <section id="blog" class="section">
     <div class="container">
         <div class="row">
-
-            {{"<!-- section title -->" | safeHTML}}
-            <div class="title text-center wow fadeInDown">
-                <h2> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} <span class="color"> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} </span></h2>
-                <div class="border"></div>
+            <div class="col-lg-12">
+                {{"<!-- section title -->" | safeHTML}}
+                <div class="title text-center wow fadeInDown">
+                    <h2> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} <span class="color"> {{ with .Site.Data.blog.headingSpan }} {{ . }} {{ end }} </span></h2>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML}}
 
-            <div class="clearfix">
-                {{ range .Data.Pages }}
-                {{"<!-- single blog post -->" | safeHTML}}
-                <article class="col-md-4 col-sm-6 col-xs-12 clearfix wow fadeInUp" data-wow-duration="500ms">
-                    <div class="post-block">
-                        <div class="media-wrapper">
-                            {{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-responsive">{{ end }}
-                        </div>
+            {{ range .Data.Pages }}
+            {{"<!-- single blog post -->" | safeHTML}}
+            <article class="col-lg-4 col-md-6 col-12 clearfix wow fadeInUp" data-wow-duration="500ms">
+                <div class="post-block">
+                    <div class="media-wrapper">
+                        {{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-fluid">{{ end }}
+                    </div>
 
-                        <div class="content">
-                            <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
-                            <p>{{ .Summary }}</p>
-                            <a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a>
-                        </div>
+                    <div class="content">
+                        <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
+                        <p>{{ .Summary }}</p>
+                        <a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a>
                     </div>
-                </article>
-                {{"<!-- /single blog post -->" | safeHTML}}
-                {{ end }}
-            </div>
+                </div>
+            </article>
+            {{"<!-- /single blog post -->" | safeHTML}}
+            {{ end }}
 
-            <div class="all-post text-center">
+            <div class="all-post text-center col-lg-12">
                 <a class="btn btn-main" href="/blog">View All Post</a>
             </div>
         </div>

layouts/partials/contact.html

 {{ if .Site.Data.contact.enable }}
-{{"<!-- Srart Contact Us -->" | safeHTML}}
+{{"<!-- Start Contact Us -->" | safeHTML}}
 <section id="contact-us" class="contact-us section-bg">
     <div class="container">
         <div class="row">
-
-            {{"<!-- section title -->" | safeHTML}}
-            <div class="title text-center wow fadeIn" data-wow-duration="500ms">
-                <h2>{{ with .Site.Data.contact.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.contact.headingSpan }} {{ . }} {{ end }}</span></h2>
-                <div class="border"></div>
+            <div class="col-lg-12">
+                {{"<!-- section title -->" | safeHTML}}
+                <div class="title text-center wow fadeIn" data-wow-duration="500ms">
+                    <h2>{{ with .Site.Data.contact.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.contact.headingSpan }} {{ . }} {{ end }}</span></h2>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML}}
 
             {{"<!-- Contact Details -->" | safeHTML}}
-            <div class="contact-info col-md-6 wow fadeInUp" data-wow-duration="500ms">
+            <div class="contact-info col-lg-6 wow fadeInUp" data-wow-duration="500ms">
                 {{ with .Site.Data.contact.title }}<h3>{{ . }}</h3> {{ end }}
                 {{ with .Site.Data.contact.content }} <p> {{ . }} </p> {{ end }}
                 <div class="contact-details">
             </div>
 
             {{"<!-- Contact Form -->" | safeHTML}}
-            <div class="contact-form col-md-6 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="300ms">
-                <form id="contact-form" method="post" action="sendmail.php" role="form">
+            <div class="col-lg-6 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="300ms">
+                <form id="contact-form" class="form-meghna" method="post" action="sendmail.php" role="form">
 
                     <div class="form-group">
                         <input type="text" placeholder="Your Name" class="form-control" name="name" id="name">
                 </form>
             </div>
 
-        </div>
-    </div>
-
     {{"<!-- Google Map -->" | safeHTML}}
     <div class="google-map">
-        <div id="map-canvas" {{ with .Site.Data.contact.mapLatitude }} data-latitude="{{ . }}" {{ end }} 
+        <div id="map-canvas" {{ with .Site.Data.contact.mapLatitude }} data-latitude="{{ . }}" {{ end }}
         {{ with .Site.Data.contact.mapLongitude }} data-longitude="{{ . }}" {{ end }}></div>
     </div>
 

layouts/partials/counter.html

     <div class="container">
         <div class="row">
             {{ range .Site.Params.counter.counterItem }}
-            <div class="col-md-3 col-sm-6 col-xs-12 text-center wow fadeInDown" data-wow-duration="500ms">
+            <div class="col-lg-3 col-md-6 col-12 text-center wow fadeInDown" data-wow-duration="500ms">
                 <div class="counters-item">
                     <i class="{{ .icon }}"></i>
                     <span data-speed="3000" data-to="{{ .count }}">{{ .count }}</span>

layouts/partials/cta.html

 <section class="call-to-action section-sm bg-1 overly" style='background-image: url("{{ .Site.Params.counter.bgImage | absURL }}")'>
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                {{ with .Site.Params.cta.title}} <h2>{{ . }}</h2> {{ end }}
                {{ with .Site.Params.cta.content }} <p>{{ . }}</p> {{ end }}
                 <a href="{{ .Site.Params.cta.btnURL }}" class="btn btn-main">{{ with .Site.Params.cta.btnText }} {{ . }} {{end}}</a>

layouts/partials/footer.html

 <footer id="footer" class="bg-one">
 	<div class="container">
 		<div class="row wow fadeInUp" data-wow-duration="500ms">
-			<div class="col-lg-12">
+			<div class="col-xl-12">
 
 				{{"<!-- Footer Social Links -->" | safeHTML}}
 				<div class="social-icon">
 					<ul class="list-inline">
 						{{ range .Site.Params.footer.socialIcon }}
-						<li><a href="#"><i class="{{ .icon }}"></i></a></li>
+						<li class="list-inline-item"><a href="{{ .url }}"><i class="{{ .icon }}"></i></a></li>
 						{{ end }}
 					</ul>
 				</div>
 				{{"<!-- copyright -->" | safeHTML}}
 				<div class="copyright text-center">
 					<a href="{{ .Site.BaseURL | absURL }}">
-						<img src="{{ .Site.Params.logo | absURL }}" alt="Meghna" /> 
+						<img src="{{ .Site.Params.logo | absURL }}" alt="Meghna" />
 					</a>
 					<br>
 
 {{"<!-- /footer -->" | safeHTML}}
 
 {{"<!-- Essential Scripts -->" | safeHTML}}
-		
+
 		{{"<!-- Main jQuery -->" | safeHTML}}
 		<script type="text/javascript" src="{{ "plugins/jquery/dist/jquery.min.js" | absURL}}"></script>
 		{{"<!-- Bootstrap 3.1 -->" | safeHTML}}
 				ga('create', '{{ .Site.Params.googleAnalitycsID }}', 'auto');
 				ga('send', 'pageview');
 		</script>
-		
+
     </body>
 </html>

layouts/partials/head.html

+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="{{ if .Description }}{{ .Description }}{{else if .IsPage}}{{ .Summary | plainify}}{{ else }}{{.Site.Params.description}}{{ end }}">
+    <meta name="author" content="{{ with .Params.author }}{{ . }}{{else}}{{ with .Site.Params.author}}{{ . }}{{ end }}{{end}}">
+
+    {{ "<!-- Mobile Specific Meta -->" | safeHTML }}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {{ .Hugo.Generator }}
+
+    <title>{{ if .IsHome }}{{ .Site.Title }}{{" | "}}{{ .Site.Params.Description }}{{ else if .IsPage}}{{ .Title }}{{" | "}}{{ .CurrentSection.Title }}{{else}}{{ .Title }}{{" | "}}{{ .Site.Title }}{{ end }}</title>
+
+
+    {{"<!-- Favicon -->" |safeHTML}}
+    <link rel="shortcut icon" type="image/x-icon" href="{{ "images/favicon.ico" | absURL }}"/>
+
+    {{"<!-- CSS -->"|safeHTML}}
+    {{"<!-- Fontawesome Icon font -->"|safeHTML}}
+    <link rel="stylesheet" href="{{"plugins/themefisher-font/style.css" | absURL}}">
+    {{"<!-- bootstrap.min css -->"|safeHTML}}
+    <link rel="stylesheet" href="{{"plugins/bootstrap/dist/css/bootstrap.min.css"|absURL}}">
+    {{"<!-- Animate.css -->"|safeHTML}}
+    <link rel="stylesheet" href="{{"plugins/animate-css/animate.css"|absURL}}">
+    {{"<!-- Magnific popup css -->"|safeHTML}}
+    <link rel="stylesheet" href="{{"plugins/magnific-popup/dist/magnific-popup.css"|absURL}}">
+    {{"<!-- Slick Carousel -->"|safeHTML}}
+    <link rel="stylesheet" href="{{"plugins/slick-carousel/slick/slick.css"|absURL}}">
+    <link rel="stylesheet" href="{{"plugins/slick-carousel/slick/slick-theme.css"|absURL}}">
+    {{"<!-- Main Stylesheet -->"|safeHTML}}
+    {{ $styles := resources.Get "css/style.css" | minify}}
+    <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
+
+</head>

layouts/partials/header.html

-<!DOCTYPE html>
-<html class="no-js" lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
-    <head>
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}">
-        {{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
-		
-		{{ "<!-- Mobile Specific Meta -->" | safeHTML }}
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        {{ .Hugo.Generator }}
-		
-        <title> {{ .Title }} </title>
-		
-		{{"<!-- Favicon -->" |safeHTML}}
-		<link rel="shortcut icon" type="image/x-icon" href="{{ "images/favicon.ico" | absURL }}"/>
-		
-		{{"<!-- CSS -->"|safeHTML}}
-		{{"<!-- Fontawesome Icon font -->"|safeHTML}}
-        <link rel="stylesheet" href="{{"plugins/themefisher-font/style.css" | absURL}}">
-		{{"<!-- bootstrap.min css -->"|safeHTML}}
-        <link rel="stylesheet" href="{{"plugins/bootstrap/dist/css/bootstrap.min.css"|absURL}}">
-		{{"<!-- Animate.css -->"|safeHTML}}
-        <link rel="stylesheet" href="{{"plugins/animate-css/animate.css"|absURL}}">
-        {{"<!-- Magnific popup css -->"|safeHTML}}
-        <link rel="stylesheet" href="{{"plugins/magnific-popup/dist/magnific-popup.css"|absURL}}">
-		{{"<!-- Slick Carousel -->"|safeHTML}}
-        <link rel="stylesheet" href="{{"plugins/slick-carousel/slick/slick.css"|absURL}}">
-        <link rel="stylesheet" href="{{"plugins/slick-carousel/slick/slick-theme.css"|absURL}}">
-		{{"<!-- Main Stylesheet -->"|safeHTML}}
-        {{ $styles := resources.Get "css/style.css" | minify}}
-        <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
-
-    </head>
-    {{"<!-- body start -->" | safeHTML}}
-    <body id="body" data-spy="scroll" data-target=".navbar" data-offset="52"></body>

layouts/partials/navigation.html

 {{"<!-- Fixed Navigation -->" | safeHTML}}
-<header id="navigation" class="navbar navigation">
-    <div class="container">
-        <div class="navbar-header">
-            {{"<!-- responsive nav button -->" | safeHTML}}
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            {{"<!-- /responsive nav button -->" | safeHTML}}
+<nav id="navigation" class="navbar navbar-expand-lg navigation sticky-top">
+        <div class="container">
 
-            {{"<!-- logo -->" | safeHTML}}
-            <a class="navbar-brand logo" href="{{ .Site.BaseURL | absURL }}">
-                <img src="{{ .Site.Params.logo | absURL }}" alt="Logo" />
-            </a>
-            {{"<!-- /logo -->" | safeHTML}}
-        </div>
+                {{"<!-- logo -->" | safeHTML}}
+                <a class="navbar-brand logo" href="{{ .Site.BaseURL | absURL }}">
+                        <img src="{{ .Site.Params.logo | absURL }}" alt="Logo" />
+                        <span class="pl-2 font-weight-bold">{{ .Site.Title }}</span>
+                </a>
+                {{"<!-- /logo -->" | safeHTML}}
 
-        {{"<!-- main nav -->" | safeHTML}}
-        {{ if .IsHome }}        
-        <nav class="collapse navbar-collapse navbar-right" role="Navigation">
-            <ul id="nav" class="nav navbar-nav navigation-menu">
-                <li><a data-scroll href="#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
-                {{ range $.Site.Menus.nav }}
-                <li><a data-scroll href="#{{ .URL }}">{{ .Name }}</a></li>
-                {{ end }}
-            </ul>
-        </nav>
-        {{ else }}
-        <nav class="collapse navbar-collapse navbar-right" role="Navigation">
-            <ul id="nav" class="nav navbar-nav navigation-menu">
-                <li><a data-scroll href="{{ $.Site.BaseURL }}#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
-                {{ range $.Site.Menus.nav }}
-                <li><a data-scroll href="{{ $.Site.BaseURL }}#{{ .URL }}">{{ .Name }}</a></li>
+                {{"<!-- responsive nav button -->" | safeHTML}}
+                <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                </button>
+                {{"<!-- /responsive nav button -->" | safeHTML}}
+
+                {{"<!-- main nav -->" | safeHTML}}
+                {{ if .IsHome }}
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                        <ul class="navbar-nav ml-auto navigation-menu">
+                                <li class="nav-item"><a class="nav-link" data-scroll href="#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
+                                {{ range $.Site.Menus.nav }}
+                                <li class="nav-item"><a class="nav-link" data-scroll href="#{{ .URL }}">{{ .Name }}</a></li>
+                                {{ end }}
+                        </ul>
+                </div>
+                {{ else }}
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                        <ul class="navbar-nav ml-auto navigation-menu">
+                                <li class="nav-item"><a class="nav-link" data-scroll href="{{ $.Site.BaseURL }}#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
+                                {{ range $.Site.Menus.nav }}
+                                <li class="nav-item"><a class="nav-link" data-scroll href="{{ $.Site.BaseURL }}#{{ .URL }}">{{ .Name }}</a></li>
+                                {{ end }}
+                        </ul>
+                </div>
                 {{ end }}
-            </ul>
-        </nav>
-        {{ end }}
-        {{"<!-- /main nav -->" | safeHTML}}
+                {{"<!-- /main nav -->" | safeHTML}}
+        </div>
 
-    </div>
-</header>
-{{"<!-- End Fixed Navigation -->" | safeHTML}}
+</nav>
+{{"<!-- End Fixed Navigation -->" | safeHTML}}

layouts/partials/portfolio.html

 <section class="portfolio section" id="portfolio">
     <div class="container">
         <div class="row ">
-            <div class="col-lg-12">
+            <div class="col-xl-12">
                 {{"<!-- section title -->" | safeHTML}}
                 <div class="title text-center">
                     <h2> {{ with .Site.Data.portfolio.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.portfolio.headingSpan }} {{ . }} {{ end }}</span></h2>
-                    <div class="border"></div>
+                    <div class="border-meghna"></div>
                 </div>
                 {{"<!-- /section title -->" | safeHTML}}
             </div>
         </div>
         <div class="row">
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <div class="portfolio-filter">
                     <button type="button" data-filter="all">All</button>
                     {{ range .Site.Data.portfolio.filterList }}
         <div class="row portfolio-items-wrapper">
             {{"<!-- portfolio item -->" | safeHTML}}
             {{ range .Site.Data.portfolio.portfolioItem }}
-            <div class="mix col-md-4 {{ .types }}">
+            <div class="mix col-lg-4 {{ .types }}">
                 <div class="portfolio-block">
-                    <img class="img-responsive" src="{{ .image | absURL}}" alt="work-image">
+                    <img class="img-fluid" src="{{ .image | absURL}}" alt="work-image">
                     <div class="caption">
 
                         <a class="search-icon image-popup" data-effect="mfp-with-zoom" href="{{ .image | absURL}}"

layouts/partials/pricing.html

         <div class="row">
 
             {{"<!-- section title -->" | safeHTML}}
-            <div class="title text-center wow fadeInDown" data-wow-duration="500ms">
-                <h2>{{ with .Site.Data.pricing.heading }} {{ . }} {{ end }}<span class="color"> {{ with .Site.Data.pricing.headingSpan }} {{ . }} {{ end }}</span></h2>
-                <div class="border"></div>
+            <div class="col-lg-12">
+                <div class="title text-center wow fadeInDown" data-wow-duration="500ms">
+                    <h2>{{ with .Site.Data.pricing.heading }} {{ . }} {{ end }}<span class="color"> {{ with .Site.Data.pricing.headingSpan }} {{ . }} {{ end }}</span></h2>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML}}
 
             {{ range .Site.Data.pricing.pricingTable }}
             {{"<!-- single pricing table -->" | safeHTML}}
-            <div class="col-md-3 col-sm-6 col-xs-12 text-center wow fadeInUp" data-wow-duration="200ms">
+            <div class="col-lg-3 col-md-6 col-12 text-center wow fadeInUp" data-wow-duration="200ms">
                 <div class="price-item">
 
                     {{"<!-- plan name & value -->" | safeHTML}}

layouts/partials/service.html

 <section id="services" class="bg-one section">
     <div class="container">
         <div class="row">
-
-            {{"<!-- section title -->" | safeHTML }}
-            <div class="title text-center wow fadeIn" data-wow-duration="500ms">
-                <h2>{{ with .Site.Data.service.heading }} {{ . }} {{ end }}<span class="color">{{ with .Site.Data.service.headingSpan }} {{ . }} {{ end }}</span></h2>
-                <div class="border"></div>
+            <div class="col-lg-12">
+                {{"<!-- section title -->" | safeHTML }}
+                <div class="title text-center wow fadeIn" data-wow-duration="500ms">
+                    <h2>{{ with .Site.Data.service.heading }} {{ . }} {{ end }}<span class="color">{{ with .Site.Data.service.headingSpan }} {{ . }} {{ end }}</span></h2>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML }}
 
             {{ range .Site.Data.service.serviceItem}}
             {{"<!-- Single Service Item -->" | safeHTML }}
-            <article class="col-md-4 col-sm-6 col-xs-12 wow fadeInUp" data-wow-duration="500ms">
+            <article class="col-lg-4 col-md-6 col-12 wow fadeInUp" data-wow-duration="500ms">
                 <div class="service-block text-center">
                     <div class="service-icon text-center">
                         <i class="{{ .icon }}"></i>

layouts/partials/skill.html

     <div class="container">
         <div class="row">
             {{"<!-- section title -->" | safeHTML }}
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <div class="title text-center">
                     <h2>{{ with .Site.Data.skill.heading}} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.skill.headingSpan }} {{ . }} {{ end }}</span></h2>
-                    <div class="border"></div>
+                    <div class="border-meghna"></div>
                 </div>
             </div>
             {{"<!-- /section title -->" | safeHTML }}
         </div>
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-lg-6">
                 {{ with .Site.Data.skill.title }} <h2> {{ . }} </h2> {{ end }}
                 {{ with .Site.Data.skill.content }} <p> {{ . }} </p> {{ end }}
-                <img class="img-responsive" src="{{ .Site.Data.skill.image | absURL }}" alt="image">
+                <img class="img-fluid" src="{{ .Site.Data.skill.image | absURL }}" alt="image">
             </div>
-            <div class="col-md-6">
+            <div class="col-lg-6">
                 <ul class="skill-bar">
                     {{ range .Site.Data.skill.skillItem }}
                     <li>

layouts/partials/team.html

 <section id="our-team" class="section">
     <div class="container">
         <div class="row">
-
-            {{"<!-- section title -->" | safeHTML}}
-            <div class="title text-center wow fadeInUp" data-wow-duration="500ms">
-                <h2>{{ with .Site.Data.team.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.team.headingSpan }} {{ . }} {{ end }}</span></h2>
-                <div class="border"></div>
+            <div class="col-lg-12">
+                {{"<!-- section title -->" | safeHTML}}
+                <div class="title text-center wow fadeInUp" data-wow-duration="500ms">
+                    <h2>{{ with .Site.Data.team.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.team.headingSpan }} {{ . }} {{ end }}</span></h2>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML}}
 
             {{ range .Site.Data.team.teamMember}}
             {{"<!-- team member -->" | safeHTML}}
-            <div class="col-md-3 col-sm-6 col-xs-12  wow fadeInDown" data-wow-duration="500ms">
+            <div class="col-lg-3 col-md-6 col-12 wow fadeInDown" data-wow-duration="500ms">
                 <div class="team-member">
                     <div class="member-photo">
                         {{"<!-- member photo -->" | safeHTML}}
-                        <img class="img-responsive" src="{{ .image | absURL }}" alt="Meghna">
+                        <img class="img-fluid" src="{{ .image | absURL }}" alt="Meghna">
 
                         {{"<!-- member social profile -->" | safeHTML}}
                         <div class="mask">
                             <ul class="list-inline">
                                 {{ range .socialIcon }}
-                                <li><a href="#"><i class="{{ .icon }}"></i></a></li>
+                                <li class="list-inline-item"><a href="#"><i class="{{ .icon }}"></i></a></li>
                                 {{ end }}
                             </ul>
                         </div>

layouts/partials/testimonial.html

 <section id="testimonial" class="testimonial overly section bg-2" style='background-image: url("{{ .Site.Data.testimonial.bgImage | absURL }}")'>
     <div class="container">
         <div class="row">
-            <div class="col-lg-12">
+            <div class="col-xl-12">
                 {{"<!-- testimonial wrapper -->" | safeHTML}}
                 <div id="testimonials" class="wow fadeInUp" data-wow-duration="500ms" data-wow-delay="100ms">
                     {{ range .Site.Data.testimonial.testimonialItem }}
 
                         {{"<!-- client photo -->" | safeHTML}}
                         <div class="client-thumb">
-                            <img src="{{ .image | absURL }}" class="img-responsive" alt="Meghna">
+                            <img src="{{ .image | absURL }}" class="img-fluid" alt="Meghna">
                         </div>
 
                         {{"<!-- client info -->" | safeHTML}}
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
 </section>
 {{"<!-- /testimonial -->" | safeHTML}}
 {{ end }}