How To Create a One Page Website with Bootstrap 4

Published on: Mar 20 2018 by Anli

Bootstrap 4 Tutorial: How To Create a One Page Website

Today we’ll continue with another Bootstrap 4 tutorial where we’re going to create a one page website.

At the end, you can download the files and you can use this single page template for a small business or services site, a portfolio, landing page, etc.

I hope you like the tutorial and learn some new things from it. Let’s begin!


Contents

1. Introduction

Bootstrap 4 One Page Website - Preview

In this tutorial we’ll create a single page website using Bootstrap 4. The page will have a navbar / top menu with a logo, a top section with description and call to action buttons, services and portfolio sections, a latest blog posts section, testimonials section and a simple footer with social icons.

Some of these sections will have fullscreen backgrounds. In the images above you can see the top part of the final result and below you can see a live preview.

LIVE PREVIEW

Just like I’ve done in my other Bootstrap 4 tutorials, I recommend that you read the articles and pages below before you start, if you haven’t already read them, especially if you’ve worked with Bootstrap 3 in the past.

They’ll help you become more familiar with this version of Bootstrap (version 4) and see what has changed.

2. Getting Started

Our HTML code will be placed in the file “index.html”. So, we create this file and add the necessary CSS and JavaScript libraries.

Here you can see the Bootstrap 4 libraries that we need to import.

We add the CSS libraries in the “head” part of “index.html”, 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>Bootstrap 4 One Page Website Tutorial</title>

        <!-- CSS -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,600">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300">
        <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>

    <body>
        <!-- beginning of the page's code -->

Next we add the JavaScript libraries at the bottom part of “index.html”:

        <!-- end of the page's code -->

        <!-- 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>

As you can see, we add different libraries like: the fonts that we’ll use, the Bootstrap libraries, jQuery, Font Awesome icons, etc., and also our own custom CSS and JS (JavaScript) code.

We add the custom CSS in the file “style.css” (assets/css/style.css) and begin with some code that will be used from all the sections of the page:

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #888;
    line-height: 30px;
    text-align: center;
}

strong { font-weight: 600; }

a, a:hover, a:focus {
    color: #9b59b6;
    text-decoration: none;
    transition: all .3s;
}

h1, h2 {
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 300;
    color: #555;
    line-height: 50px;
}

/* ... continues ... */

As you can see I’ve used two Google fonts in this template, Open Sans for the normal text and Montserrat for the headings.

I’ve not reported all the code here, to keep the tutorial short.

3. Creating The Navbar

I will not be very specific in this part because the navbar we use here, is similar to the one I created and explained in this tutorial. So, take a look at it if you want a longer explanation.

For the HTML code of our top menu we open and read the documentation of the Bootstrap 4 navbar component.

This is the code that we create for our top navigation bar:

<!-- Top menu -->
<nav class="navbar navbar-dark fixed-top navbar-expand-md navbar-no-bg">
    <div class="container">
        <a class="navbar-brand" href="index.html">Bootstrap 4 One Page Website Tutorial</a>
        <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 ml-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="#about-us">About</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>
            </ul>
        </div>
    </div>
</nav>

Next we style the menu with some CSS code in the file “style.css” (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;
    font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    border: 0;
}

.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-brand {
    width: 136px;
    background: url(../img/logo.png) left center no-repeat;
    border: 0;
    text-indent: -99999px;
}

To make the menu links work, we use some JavaScript code in the “scripts.js” file (assets/js/scripts.js).

We also add some animation to the navbar using the Waypoints jQuery library and initialize it in “scripts.js”.

To see how we do it specifically, take a look at the tutorial I mentioned above.

Finally we make it responsive, as you’ll see at the end of this guide.

4. The Top Section

The Top section of our page will have the main title of the website, some text, two “call to action” buttons and a fullscreen background.

Here is the HTML code:

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

        <div class="row">
            <div class="col-md-8 offset-md-2 text">
                <h1 class="wow fadeInLeftBig">Bootstrap 4 Website Tutorial</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>

And the CSS code:

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

.top-content {
    padding: 210px 0;
}

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

.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;
}

We use two default Bootstrap buttons but customize them to match our design. Here is the CSS code of the first button:

.btn-link-1 {
    display: inline-block;
    height: 50px;
    margin: 0 5px;
    padding: 0 28px;
    background: #9b59b6;
    background: rgba(155, 89, 182, 0.7);
    border: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 48px;
    color: #fff;
    border-radius: 4px;
    transition: all .3s;
}

.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active, .btn-link-1:active:focus,
.btn-link-1.btn-primary:not(:disabled):not(.disabled):active,
.btn-link-1.btn-primary:not(:disabled):not(.disabled):active:focus {
    background: #9b59b6;
    background: rgba(155, 89, 182, 0.9);
    outline: 0;
    color: #fff;
    box-shadow: none;
}

For the fullscreen background we use the Backstretch jQuery plugin and initialize it in “scripts.js”:

$('.top-content').backstretch("assets/img/backgrounds/1.jpg");

We also add some animation to the various elements of the page when the site loads, with the classes “wow”, “fadeInLeftBig”, “fadeInUp”, etc. For that we use the libraries “Animate.css” and “WOW.js” which is initialized in “scripts.js”.

5. Services Section

Bootstrap 4 One Page Website Tutorial - Services

The Services section comes with a title, some text and some icons from Font Awesome, with gradient background. This is the HTML code for this section:

<!-- 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>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 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>UI / UX</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-google"></i>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <h3>Marketing</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 this is the CSS code:

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

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

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

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

6. About Us Section

Bootstrap 4 One Page Website Tutorial - About Us

The About Us section has a title and some text on the left, and an image on the right. Its HTML code:

<!-- About us -->
<div class="about-us-container section-container section-container-gray-bg">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-7 about-us-box wow fadeInLeft">
                <div class="about-us-box-text">
                    <h3>About Us</h3>
                    <p class="medium-paragraph">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                        sed do eiusmod tempor incididunt ut labore et. Ut wisi enim ad minim veniam, quis nostrud.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 
                        Ut wisi enim ad minim veniam, quis nostrud. 
                        Exerci tation ullamcorper suscipit <a href="#">lobortis nisl</a> ut aliquip ex ea commodo consequat. 
                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.
                        Ut wisi enim ad minim veniam, quis nostrud.
                    </p>
                </div>
            </div>
            <div class="col-12 col-lg-5 about-us-box wow fadeInUp">
                <div class="about-us-box-img">
                    <img src="assets/img/about/1.jpg" alt="about" data-at2x="assets/img/about/1.jpg">
                </div>
            </div>
        </div>
    </div>
</div>

The code is simple and similar to that of the previous sections.

In the image tag you can note the attribute “data-at2x”. This is because we use the Retina.js library to serve high resolution images to Retina devices.

Usually this library searches in the image’s directory and automatically serves the @2x version (double size) of that image to devices with Retina displays.

But in this case, with the “data-at2x” attribute, we decide which image to use. To learn more, click on the link above.

Next we style the section:

/***** About us *****/

.about-us-box {
    margin-top: 100px;
}

.about-us-box-text {
    padding-right: 30px;
    text-align: left;
}

.about-us-box-text h3 {
    margin-top: 0;
}

.about-us-box-text .medium-paragraph {
    margin-top: 20px;
    margin-bottom: 20px;
}

.about-us-box-text a {
    border-bottom: 1px dashed #9b59b6;
}

.about-us-box-text a:hover,
.about-us-box-text a:focus {
    border: 0;
}

.about-us-box-img img {
    border-radius: 4px;
}

7. More Services and Call To Action Sections

Bootstrap 4 One Page Website Tutorial - More Services and Call To Action

The “More Services” section is similar to the “Services” section above, and the “Call To Action” section is similar to the “Top” section. So, I’ll not report their code here.

Again I’d recommend that you read the Bootstrap grid documentation if you have any problem understanding this part.

8. Portfolio Section

Bootstrap 4 One Page Website Tutorial - Portfolio

The Portfolio section features the three latest projects of the hypothetical small business or company that we’re building this site for.

Each project has an image, a title and a short text. The portfolio can be expanded in a way that for each project there is a dedicated page with all the details of that project.

At the end of this section there is a “Load more” button that should load more projects, preferably without reloading the page. This can be done using AJAX and is a great topic for a new tutorial (let me know if interested).

Here is the HTML code of our portfolio:

<!-- Portfolio -->
<div class="portfolio-container section-container">
    <div class="container">
        <div class="row">
            <div class="col portfolio section-description wow fadeIn">
                <h2>Our Portfolio</h2>
                <div class="divider-1 wow fadeInUp"><span></span></div>
                <p>We've completed 537 projects since we started back in 2010. Check them out!</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 portfolio-box wow fadeInUp">
                <div class="portfolio-box-image">
                    <img src="assets/img/portfolio/1.jpg" alt="" data-at2x="assets/img/portfolio/1.jpg">
                </div>
                <h3><a href="#">Acme branding</a> <i class="fas fa-angle-right"></i></h3>
                <div class="portfolio-box-date"><i class="far fa-calendar"></i> March 2018</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div>
            <div class="col-md-4 portfolio-box wow fadeInDown">
                <div class="portfolio-box-image">
                    <img src="assets/img/portfolio/2.jpg" alt="" data-at2x="assets/img/portfolio/2.jpg">
                </div>
                <h3><a href="#">WordPress design</a> <i class="fas fa-angle-right"></i></h3>
                <div class="portfolio-box-date"><i class="far fa-calendar"></i> February 2018</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div>
            <div class="col-md-4 portfolio-box wow fadeInUp">
                <div class="portfolio-box-image">
                    <img src="assets/img/portfolio/3.jpg" alt="" data-at2x="assets/img/portfolio/3.jpg">
                </div>
                <h3><a href="#">Created 150 flyers</a> <i class="fas fa-angle-right"></i></h3>
                <div class="portfolio-box-date"><i class="far fa-calendar"></i> January 2018</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div>
        </div>
        <div class="row">
            <div class="col section-bottom-button wow fadeInUp">
                <a class="btn btn-primary btn-link-3" href="#">Load more</a>
            </div>
        </div>
    </div>
</div>

And its CSS code:

/***** Portfolio *****/

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

.portfolio-box-image {
    overflow: hidden;
    border-radius: 4px;
}

.portfolio-box-image img {
    -o-transition: all .8s;
    -moz-transition: all .8s;
    -webkit-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
}

.portfolio-box-image:hover img {
    -o-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
}

.portfolio-box h3 {
    margin-top: 30px;
}
.portfolio-box h3 a { color: #555; }
.portfolio-box h3 a:hover, 
.portfolio-box h3 a:focus { color: #9b59b6; }

.portfolio-box h3 i {
    padding-left: 10px;
    color: #ccc;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}
.portfolio-box h3:hover i { padding-left: 15px; }

.portfolio-box-date {
    padding-bottom: 10px;
    font-size: 14px;
    color: #aaa;
    text-transform: uppercase;
}

.portfolio-box-date i {
    padding-right: 5px;
    color: #ddd;
}

.portfolio-container .section-bottom-button {
    padding-top: 40px;
}

9. Testimonials Section (Bootstrap Tabs)

Bootstrap 4 One Page Website Tutorial - Testimonials

For the testimonials / clients section we use the Bootstrap Tabs component.

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."<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."<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."<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."<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;
    border-radius: 4px;
}

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

.testimonial-list .testimonial-text a {
    color: #fff;
    border-bottom: 1px dashed #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: #9b59b6; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffb24b 0%, #9b59b6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb24b), color-stop(100%,#9b59b6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffb24b 0%,#9b59b6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb24b', endColorstr='#9b59b6',GradientType=0 ); /* IE6-9 */

    border: 0;
}

We also use some JavaScript in the “scripts.js” file for the fullscreen background, just like in the Top section.

Bootstrap 4 One Page Website Tutorial - Blog and Footer

The Blog section is similar to the Portfolio section and the Footer is very simple with some text, social icons and a “Back to top” button. I’ll not report their code here to keep the tutorial short.

11. Making It Responsive (Media Queries)

Bootstrap 4 One Page Website Tutorial - On Mobile Devices

We use some custom CSS in the “media-queries.css” file (assets/css/media-queries.css) along with the Bootstrap’s default CSS media queries.

This way we 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; border-radius: 22px; }

    .about-us-box-text { padding-right: 0; }
	
}

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

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

    .top-content { padding: 180px 0; }

    .section-description p { padding: 0; }

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

    .about-us-box { margin-top: 80px; }
    .about-us-box:last-child { margin-top: 50px; }
    .about-us-box-text { padding-right: 0; text-align: center; }

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

    .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-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; }

    .top-content { 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; }

    .about-us-box { margin-top: 80px; }
    .about-us-box:last-child { margin-top: 50px; }
    .about-us-box-text { padding-right: 0; text-align: center; }

    .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: 10px; text-align: center; }
    .footer-bottom { padding-top: 20px; }

}

@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 */
    .navbar-brand {
        background-image: url(../img/logo@2x.png) !important; background-repeat: no-repeat !important; background-size: 136px 39px !important;
    }

}

12. Demo and Download

Here you can see a demo of the website and download it:

VIEW DEMO

DOWNLOAD IT: One Page Website with Bootstrap 4 - Tutorial (1904 downloads)

Conclusion

That’s all! We just created a single page website with Bootstrap 4. For any question or suggestion, let me know in the comments below.

All the best,
Anli

Filed under: Bootstrap, Tutorials

4 Comments So Far

  1. Solrac says:

    Do you have a tutorial that converts this Bootsrap 4 one page site to WordPress?

    This is an amazing tutorial but I would like to know if I could do the same on WordPress.

    Thanks,
    Solrac

  2. Bob Trewin says:

    Looks fantastic. Thanks for the tutorial.
    Can I have a video (you tube) running in the top-content section. If so what player would you recommend?
    Thanks
    Bob

Leave a Reply

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