How To Convert a Website to Bootstrap 4 – Case Study

Published on: Feb 15 2018 by Anli

How To Convert a Website to Bootstrap 4

Now that Bootstrap 4 has arrived, after some alpha and beta versions, more and more developers are moving their projects from version 3 to this new version.

So, to help you (and myself) learn this task, I decided to create this tutorial / case study where we’re going to convert a website from Bootstrap 3 to Bootstrap 4.

We’ll use as an example the Maren template and update it step by step. You can download the result at the end of this tutorial.

I had fun creating this case study, from converting the template to writing the article. I hope you have some fun too and hopefully learn one or two things.

Let’s begin!


Contents:

1. The Maren Template

Maren Bootstrap 4 One Page Template

Maren is a one-page business template I’ve released in 2015 that comes with different sections like “Services”, “Portfolio”, “Testimonials”, “Blog”, “Contact”. It’s easy to customize and you can use it for a small business or agency website.

Here you can see a DEMO of the old version and a DEMO of the new version with Bootstrap 4.

As you can see, only a few things have changed and the design is almost the same. Among the main things that have changed, apart from the Bootstrap framework, are the Font Awesome icons which I’ve updated to the latest version 5.0.6 (at the moment of writing this article), and the jQuery library.

2. The Bootstrap 4 Framework

Before we get started let’s take a look at the new Bootstrap version 4 framework and see what has changed from the previous versions.

Here you can see all the changes. The main ones, that we must know to convert the template, are:

I recommend you read carefully all of the links above before continuing with the tutorial. If you have worked in many projects with Bootstrap 3, this will not take you a lot of time.

3. Getting Started

Now let’s begin with the template. Download it from here and extract it. Open the “index.html” file and add all the needed libraries as specified here.

In the “head” part we add the CSS libraries. It looks like this:

<!doctype html>
<html lang="en">

    <head>

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Maren - Bootstrap One Page Template</title>

        <!-- CSS -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,600">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
        <link rel="stylesheet" href="assets/css/animate.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="stylesheet" href="assets/css/media-queries.css">

        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">

    </head>

At the end of the “index.html” file we add the JavaScript libraries, like this:

        <!-- Javascript -->
        <script src="assets/js/jquery-3.2.1.min.js"></script>
        <script src="assets/js/jquery-migrate-3.0.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/retina-1.1.0.min.js"></script>
        <script src="assets/js/waypoints.min.js"></script>
        <script src="assets/js/scripts.js"></script>

    </body>

</html>

If you compare the code of the two versions, you can see that I’ve removed some files: form-elements.css (I’ve added its code to “style.css”), placeholder.js (we don’t support IE8 and IE9 anymore).

I’ve also removed the Bootstrap and Font Awesome folders from the template and now we load them from the CDN.

maren bootstrap 4 one page template navbar

Now we’ll convert each of the template’s components to Bootstrap 4, starting with the Navbar.

For every component we’ll read the documentation (the Navbar documentation is here) and apply the changes, making sure that the component is responsive and looks good in every screen size.

You can do this operation (checking responsiveness) either for each component as you convert it, or in the end when you’ve converted all the template.

In this tutorial we’ll do it in the end.

Now, returning to our Navbar, here is its final HTML code (in “index.html”):

<!-- Top menu -->
<nav class="navbar navbar-dark fixed-top navbar-expand-md navbar-no-bg">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#top-content">Top</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#portfolio">Work</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#testimonials">Clients</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#blog">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#footer">Contact</a>
                </li>
            </ul>
            <div class="navbar-text">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <a href="#"><i class="fab fa-dribbble"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-pinterest"></i></a>
            </div>
        </div>
    </div>
</nav>

Here is its final CSS code, in the “style.css” file (/assets/css/style.css):

/***** Top menu *****/

.navbar {
    background: #444;
    -o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s;
    backface-visibility: hidden;
}
.navbar.navbar-no-bg { background: #444; background: rgba(0, 0, 0, 0.2); }

.navbar-dark .navbar-nav { font-size: 15px; color: #fff; text-transform: uppercase; }
.navbar-dark .navbar-nav .nav-link { color: #fff; color: rgba(255, 255, 255, 0.8); }
.navbar-dark .navbar-nav .nav-link:hover { color: #fff; }
.navbar-dark .navbar-nav .nav-link:focus { color: #fff; outline: 0; }

.navbar-expand-md .navbar-nav .nav-link { padding-left: 1rem; padding-right: 1rem; }

.navbar-dark .navbar-text a { margin: 0 8px; font-size: 26px; color: #fff; color: rgba(255, 255, 255, 0.8); }
.navbar-dark .navbar-text a:hover, 
.navbar-dark .navbar-text a:focus { color: #fff; }

We also use some JavaScript code to implement the navigation making the page scroll to the clicked section, and to change the background of the Navbar when the page scrolls down.

We do this in the “scripts.js” file (/assets/js/scripts.js). This code hasn’t changed from the previous version, so if you want to see it, take a look at that file.

5. The Top Section

Maren Bootstrap 4 Template top section

The top section includes a simple logo, some text and two buttons. Here is the HTML code for this section:

<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">

            <div class="row">
                <div class="col-md-8 offset-md-2 text">
                    <div class="logo wow fadeInDown">
                        <a href="index.html"></a>
                    </div>
                    <h1 class="wow fadeInLeftBig">Maren one page template</h1>
                    <div class="description wow fadeInLeftBig">
                        <p>
                            This is a free responsive one page template made with the Bootstrap framework. 
                            Check it out now. Download it, customize and use it as you like!
                        </p>
                    </div>
                    <div class="top-big-link wow fadeInUp">
                        <a class="btn btn-primary btn-link-1" href="https://azmind.com">Download it</a> 
                        <a class="btn btn-primary btn-link-2 scroll-link" href="#services">Learn more</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

As you can see in this version we’ve changed the “col” classes to adapt to the new Bootstrap grid. They’ve become “col-md-8” and “offset-md-2”.

Again I’d suggest that you read the Bootstrap grid documentation to understand this part.

Here is the CSS code for the top section:

/***** Top content *****/

.inner-bg {
    padding: 210px 0;
}

.top-content .text {
    color: #fff;
}

.top-content .text .logo {
    padding-bottom: 20px;
}

.top-content .text .logo a {
    display: inline-block;
    width: 130px;
    height: 69px;
    background: url(../img/logo.png) center center no-repeat;
}

.top-content .text h1 {
    margin-top: 25px;
    color: #fff;
}

.top-content .description {
    margin: 30px 0 10px 0;
}

.top-content .description p { opacity: 0.8; }

.top-content .top-big-link {
    margin-top: 45px;
}

The fullscreen background hasn’t changed and is defined in the “scripts.js” file.

The Buttons

Maren Bootstrap 4 Template buttons

Other components that have changed are the buttons. I’ve added the class “btn-primary”. Read the buttons’ documentation here.

In the “style.css” file you can see the CSS code for the two buttons’ styles that we use in this template.

6. The Services Section

Maren Bootstrap 4 Template services section

This section comes with a title, some text and Font Awesome icons. Here we’ve also changed the “col” classes and updated the icons.

The final HTML code:

<!-- Services -->
<div class="services-container section-container">
    <div class="container">
        <div class="row">
            <div class="col services section-description wow fadeIn">
                <h2>Our services</h2>
                <div class="divider-1 wow fadeInUp"><span></span></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 services-box wow fadeInUp">
                <div class="row">
                    <div class="col-md-4">
                        <div class="services-box-icon">
                            <i class="fas fa-magic"></i>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <h3>Branding</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 services-box wow fadeInDown">
                <div class="row">
                    <div class="col-md-4">
                        <div class="services-box-icon">
                            <i class="fas fa-cog"></i>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <h3>Web design</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 services-box wow fadeInUp">
                <div class="row">
                    <div class="col-md-4">
                        <div class="services-box-icon">
                            <i class="fab fa-twitter"></i>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <h3>Social media</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And the CSS code which hasn’t changed from the old version:

/***** Services *****/

.services-box {
    padding-top: 30px;
    text-align: left;
}

.services-box .services-box-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
	
    background: #ff8a38; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffb24b 0%, #ff8a38 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb24b), color-stop(100%,#ff8a38)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffb24b 0%,#ff8a38 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb24b', endColorstr='#ff8a38',GradientType=0 ); /* IE6-9 */

    font-size: 40px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
    -o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s;
}

.services-box h3 {
    margin-top: 0;
    padding: 0 0 10px 0;
}

7. The Testimonials Section (Bootstrap Tabs)

Maren Bootstrap 4 Template testimonials section

Since the other sections of the template are pretty similar to the ones we explained above, we can jump to the testimonials / clients section that uses the Bootstrap Tabs component.

It has changed a bit from the old version. Here is the final HTML code:

<!-- Testimonials -->
<div class="testimonials-container section-container section-container-image-bg">
    <div class="container">
        <div class="row">
            <div class="col testimonials section-description wow fadeIn"></div>
        </div>
        <div class="row">
            <div class="col-md-10 offset-md-1 testimonial-list wow fadeInUp">

                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
                        <div class="testimonial-image">
                            <img src="assets/img/testimonials/1.jpg" alt="testimonial-1" data-at2x="assets/img/testimonials/1.jpg">
                        </div>
                        <div class="testimonial-text">
                            <p>
                                "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 
                                Lorem ipsum dolor sit amet, consectetur..."<br>
                                <a href="#">Lorem Ipsum, dolor.co.uk</a>
                            </p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
                        <div class="testimonial-image">
                            <img src="assets/img/testimonials/2.jpg" alt="testimonial-2" data-at2x="assets/img/testimonials/2.jpg">
                        </div>
                        <div class="testimonial-text">
                            <p>
                                "Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
                                ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat..."<br>
                                <a href="#">Minim Veniam, nostrud.com</a>
                            </p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
                        <div class="testimonial-image">
                            <img src="assets/img/testimonials/3.jpg" alt="testimonial-3" data-at2x="assets/img/testimonials/3.jpg">
                        </div>
                        <div class="testimonial-text">
                            <p>
                                "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 
                                Lorem ipsum dolor sit amet, consectetur..."<br>
                                <a href="#">Lorem Ipsum, dolor.co.uk</a>
                            </p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="tab4-tab">
                        <div class="testimonial-image">
                            <img src="assets/img/testimonials/4.jpg" alt="" data-at2x="assets/img/testimonials/4.jpg">
                        </div>
                        <div class="testimonial-text">
                            <p>
                                "Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
                                ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip ex ea commodo consequat..."<br>
                                <a href="#">Minim Veniam, nostrud.com</a>
                            </p>
                        </div>
                    </div>
                </div>

                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true"></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false"></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false"></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab4-tab" data-toggle="tab" href="#tab4" role="tab" aria-controls="tab4" aria-selected="false"></a>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</div>

And this is the CSS code:

/***** Testimonials *****/

.testimonials-container {
    padding-bottom: 70px;
}

.testimonial-list {
    margin-top: 30px;
    text-align: center;
}

.testimonial-list .testimonial-image img {
    max-width: 160px;
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}

.testimonial-list .testimonial-text {
    margin-top: 30px;
    opacity: 0.8;
}

.testimonial-list .testimonial-text a {
    color: #fff;
    border-bottom: 1px dotted #fff;
}
.testimonial-list .testimonial-text a:hover, 
.testimonial-list .testimonial-text a:focus { color: #fff; border: 0; }

.testimonial-list .nav-tabs {
    margin-top: 45px;
    border: 0;
    justify-content: center;
}

.testimonial-list .nav-tabs li {
    margin-left: 10px;
    margin-right: 10px;
}

.testimonial-list .nav-tabs li a {
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: 1px solid #fff;
    border-color: rgba(255, 255, 255, 0.8);
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}

.testimonial-list .nav-tabs li a:hover,
.testimonial-list .nav-tabs li a:focus {
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #fff;
    border-color: rgba(255, 255, 255, 0.8);
}

.testimonial-list .nav-tabs li a.active,
.testimonial-list .nav-tabs li a.active:focus {
    background: #ff8a38; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffb24b 0%, #ff8a38 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb24b), color-stop(100%,#ff8a38)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffb24b 0%,#ff8a38 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb24b', endColorstr='#ff8a38',GradientType=0 ); /* IE6-9 */
	
    border: 0;
}

We also use some JavaScript in the “scripts.js” file for the fullscreen background.

Maren Bootstrap 4 Template footer

The footer comes with a contact form, social media links with icons, some text and a “scroll-to-top” button. The main part of this section is the contact form, which I’ve created using Bootstrap’s forms documentation.

Here is the HTML code of the footer where you can also see the form’s code:

<!-- Footer -->
<footer class="footer-container">

    <div class="container">
        <div class="row">

            <div class="col-md-6 footer-left">
                <h3>Contact us</h3>
                <div class="contact-form">
                    <form role="form" action="assets/contact.php" method="post">
                        <div class="form-group">
                            <label class="sr-only" for="contact-email">Email</label>
                            <input type="text" name="email" placeholder="Email..." class="contact-email form-control" id="contact-email">
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="contact-subject">Subject</label>
                            <input type="text" name="subject" placeholder="Subject..." class="contact-subject form-control" id="contact-subject">
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="contact-message">Message</label>
                            <textarea name="message" placeholder="Message..." class="contact-message form-control" id="contact-message"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send message</button>
                    </form>
                </div>
            </div>

            <div class="col-md-5 offset-md-1 footer-right">
                <h3>Follow us</h3>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-dribbble"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-pinterest"></i></a>
                </div>
                <div class="footer-copyright">
                    &copy; Maren One Page Bootstrap Template <br>Download it for free on <a href="https://azmind.com">AZMIND</a>
                </div>
            </div>

        </div>
    </div>

    <div class="footer-bottom">
        <a class="scroll-link" href="#top-content"><i class="fas fa-chevron-up"></i></a>
    </div>

</footer>

And the CSS code:

/***** Footer *****/

footer {
    padding: 40px 0 0 0;
    background: #444;
    color: #aaa;
    text-align: left;
}

footer h3 {
    color: #aaa;
}

.contact-form {
    padding-top: 20px;
}

.contact-form input[type="text"], 
.contact-form textarea, 
.contact-form textarea.form-control {
    height: 50px;
    margin: 0;
    padding: 0 20px;
    vertical-align: middle;
    background: #666;
    border: 2px solid #666;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 50px;
    color: #ddd;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

.contact-form textarea, 
.contact-form textarea.form-control {
    height: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 30px;
}

.contact-form input[type="text"].input-error, 
.contact-form textarea.input-error, 
.contact-form textarea.form-control.input-error {
    border-color: #ff8a38;
}

.contact-form input[type="text"]:focus, 
.contact-form textarea:focus, 
.contact-form textarea.form-control:focus {
    outline: 0;
    background: #666;
    border: 2px solid #888;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}

.contact-form input[type="text"]::-moz-placeholder, 
.contact-form textarea::-moz-placeholder, 
.contact-form textarea.form-control::-moz-placeholder { color: #ddd; }

.contact-form input[type="text"]:-ms-input-placeholder, 
.contact-form textarea:-ms-input-placeholder, 
.contact-form textarea.form-control:-ms-input-placeholder { color: #ddd; }

.contact-form input[type="text"]::-webkit-input-placeholder, 
.contact-form textarea::-webkit-input-placeholder, 
.contact-form textarea.form-control::-webkit-input-placeholder { color: #ddd; }

.contact-form button.btn {
    height: 50px;
    margin: 0;
    padding: 0 40px;
    vertical-align: middle;

    background: #ff8a38; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffb24b 0%, #ff8a38 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb24b), color-stop(100%,#ff8a38)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffb24b 0%,#ff8a38 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb24b', endColorstr='#ff8a38',GradientType=0 ); /* IE6-9 */

    border: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 49px;
    color: #fff;
    text-transform: uppercase;
    -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
    text-shadow: none;
    box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

.contact-form button.btn:hover, 
.contact-form button.btn:active, 
.contact-form button.btn:focus, 
.contact-form button.btn:active:focus, 
.contact-form button.btn.active:focus,
.contact-form button.btn.btn-primary:not(:disabled):not(.disabled):active,
.contact-form button.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
    opacity: 0.6;
    outline: 0;
    color: #fff;
    box-shadow: none;

    background: #ff8a38; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffb24b 0%, #ff8a38 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb24b), color-stop(100%,#ff8a38)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffb24b 0%,#ff8a38 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffb24b 0%,#ff8a38 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb24b', endColorstr='#ff8a38',GradientType=0 ); /* IE6-9 */
}

.footer-social {
    padding-top: 20px;
}

.footer-social a {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-right: 6px;
    margin-bottom: 10px;
    padding-top: 7px;
    background: #666;
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
    font-size: 32px;
    color: #ddd;
    line-height: 40px;
    text-align: center;
}
.footer-social a:hover, .footer-social a:focus { background: #777; color: #eee; }

.footer-social a i { vertical-align: middle; }

.footer-copyright {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px dotted #777;
}

.footer-copyright a { color: #ddd; }
.footer-copyright a:hover, .footer-copyright a:focus { color: #eee; }

.footer-bottom {
    margin-top: 60px;
    padding-top: 15px;
    padding-bottom: 25px;
    background: #3d3d3d;
    text-align: center;
}

.footer-bottom a {
    font-size: 32px;
    color: #666;
    line-height: 40px;
}

.footer-bottom a:hover, .footer-bottom a:focus { color: #888; }

As for the form’s behaviour (validation and sending the emails), it is (almost) the same as in this tutorial I did some time ago. Take a look at it to learn more.

9. Making It Responsive (Media Queries)

Maren Bootstrap 4 Template mobile devices

Along with the Bootstrap’s default CSS media queries, we also use some of our own in the “media-queries.css” file (/assets/css/media-queries.css) to customize the template’s components as we need.

Here is how our custom code looks like:

@media (min-width: 992px) and (max-width: 1199px) {

    .services-box .services-box-icon { width: 60px; height: 60px; font-size: 32px; line-height: 60px; }

    .great-support-box-text-left { padding-right: 0; }
    .great-support-box-text-left:first-child { margin-top: 0; }

}

@media (min-width: 768px) and (max-width: 991px) {

    .navbar-expand-md .navbar-nav .nav-link { padding-left: 0.6rem; padding-right: 0.6rem; }

    .inner-bg { padding: 180px 0; }

    .section-description p { padding: 0; }

    .services-box .services-box-icon { width: 50px; height: 50px; font-size: 26px; line-height: 50px; }

    .great-support-box { margin-top: 0; }
    .great-support-box-text { margin-top: 30px; padding-left: 0; text-align: center; }
    .great-support-box-text-left { padding-right: 0; }
    .great-support-box-phone img { margin-bottom: -200px; }

    .more-services-box .more-services-box-icon { width: 50px; height: 50px; font-size: 26px; line-height: 50px; }

    .portfolio-box h3:hover i { padding-left: 10px; }

    .blog-box h3:hover i { padding-left: 10px; }

}

@media (max-width: 767px) {

    .navbar.navbar-no-bg { background: #444; }
    .navbar>.container { justify-content: center; }
    .navbar-dark .navbar-toggler { border-color: #444; }
    .navbar-dark .navbar-toggler:focus { background: #333; outline: 0; }
    .navbar-expand-md .navbar-nav .nav-link { padding-top: 0.3rem; padding-bottom: 0.3rem; }

    .inner-bg { padding: 140px 0; }
    .top-content .top-big-link { margin-top: 25px; }
    .top-content .top-big-link a.btn { margin-top: 10px; }

    .section-description p { padding: 0; }

    .services-container { padding-bottom: 60px; }
    .services-box { text-align: center; }
    .services-box h3 { margin-top: 20px; padding-top: 10px; }

    .great-support-box { margin-top: 0; }
    .great-support-box-text { margin-top: 30px; padding-left: 0; text-align: center; }
    .great-support-box-text-left { padding-right: 0; }
    .great-support-box-phone img { margin-bottom: -200px; }

    .more-services-box { text-align: center; }
    .more-services-box h3 { margin-top: 20px; padding-top: 10px; }

    .portfolio-box { text-align: center; }
    .portfolio-box-image { max-width: 540px; margin: 0 auto; }

    .blog-box { text-align: center; }
    .blog-box-image { max-width: 540px; margin: 0 auto; }
    .blog-box h3 { margin-top: 30px; }

    footer { text-align: center; }
    .footer-right { padding-top: 30px; }
    .footer-social a { margin-left: 3px; margin-right: 3px; }

}

@media (max-width: 415px) {

    h1, h2 { font-size: 32px; }

}

/* Retina-ize images/icons */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

    /* logo */
    .top-content .text .logo a {
        background-image: url(../img/logo@2x.png) !important; background-repeat: no-repeat !important; background-size: 130px 69px !important;
    }

}

10. Demo and Download

Here you can see a demo of the new version of the Maren template and download it.

VIEW DEMODOWNLOAD IT

Conclusion

That’s it! There are many many other options and utilities added in Bootstrap 4 by its creators.

To convert this template from Bootstrap 3 to version 4, in this case study I chose the components and options that I needed, I learned how they work and used them in the template.

I’ll learn the rest of them step by step as soon as I’ll need them in my day to day work.

For any question or suggestion, let me know in the comments below.

All the best,
Anli

Filed under: Bootstrap, Tutorials

Leave a Reply

To learn how we use your data when you comment, read our Privacy Policy here.