Bootstrap: How to Easily Code a Responsive One Page Website

Hello There! We all have been in a position to write endless lines of custom CSS code to make our website look structured and beautiful. But maintaining that huge code is a separate task itself. But ever since we have Bootstrap and other front-end frameworks, this task has become quite easy.

Bootstrap is a front-end framework that has pre-written CSS code classes. The code is available to us via Bootstrap’s official website. We can simply add Bootstrap’s custom classes to our HTML Elements to style them as per our liking.

In this post, we are going to build a responsive one-page website template with just the help of HTML, CSS, and Bootstrap. There is no specific pre-requisite for coding this template, but yes a little knowledge of HTML and CSS is a plus to understand the code better.

You can find the complete code on my Github account.

Disclaimer: I have drawn my inspiration from Angela Yu, who is a Lead Mobile Instructor in The App Brewery. I highly recommend you to try out her courses for web and app development, it’s all worth the time and money.

So this template is a clone of Tinder, but a lot cuter. Because it is designed for animals and they also truly deserve a date. We will build this template section by section. I will be sharing the code separately for HTML and CSS. Despite the use of Bootstrap, we have styled our template a lot to give it the look and feel of a Tinder Clone.

Bootstrap has made our work easy by delivering classes that are very much useful to make this template responsive with just a few lines of code. Like any other project, we have to make one “index.html” and one “style.css“. Make sure to link your stylesheet to your HTML file.

HTML and Bootstrap Script

Following is the HTML Script for our Template, which also includes various Bootstrap classes to make us make the most benefit of the grid system, carousel, and the colors that it offers. Just download the file and open it in your Visual Studio Code Editor or any code editor of your choice. You now have your HTML file ready with Bootstrap classes.

https://drive.google.com/file/d/12yz4VQ_xBB330XHDnjlvfAnMTXdk15gD/view?usp=sharing

CSS Script

I know it’s a lot of code, but trust me, once you get the final result, you will be proud of your efforts. The CSS Script for our Template is as follows:

* {
    font-family: 'Montserrat', sans-serif;
    padding: 0px;
    margin: 0px;
    font-weight: 900;
}

.container-fluid {
    padding: 0% 10%;
}

#title {
    background-image: linear-gradient(to bottom, rgb(255, 0, 43), rgba(255, 81, 0, 0.904));
    color: #fff;
}

h1 {
    size: 5rem;
    line-height: 1.5;
    font-weight: 900;
}

nav {
    background-color: rgba(0, 0, 0, 0.233);
}

.navbar {
    margin-bottom: 4.5rem;
}

.navbar-brand {
    font-family: 'Ubuntu', sans-serif;
    font-size: 3.5rem;
    font-weight: bold;
    margin-left: 25%;
}

.nav-item {
    padding: 0 15px;
    color: rgba(163, 162, 162, 0.603);
}

.nav-item a:hover {
    border-bottom: 2px solid black;
}

.download-btn {
    margin: 6% 1%;
}

.heading h1 {
    font-size: 4rem;
    font-weight: bold;
}

.dog_img {
    transform: rotateZ(30deg);
    height: 60%;
    margin-left: 10%;
    -webkit-box-reflect: right 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.226));
    z-index: 1;
    position: absolute;
    top: 30%;
}

/* Features */
#features {
    padding: 7% 15%;
    background-color: white;
    position: relative;
    z-index: 2;
}

.icons {
    margin: 5% 30%;
    color: rgb(255, 0, 43);
}

.icons:hover {
    color: rgba(255, 81, 0, 0.904);
}

#features h3 {
    font-size: 1.7rem;
    font-weight: 900;
}

.feature-box {
    text-align: center;
    padding: 5%;
}

#features p {
    color: rgb(145, 144, 144);
}

/* Testimonials section */
#testimonials {
    text-align: center;
    background-color: rgb(255, 0, 43);
    color: white;
}

#testimonials h2 {
    font-size: 3rem;
    line-height: 1.5;
}

.testimonials-img {
    border-radius: 50%;
    width: 10%;
    margin: 5%;
}

.carousel-item {
    padding: 7% 10%;
}

/* Pricing Section */
#pricing {
    text-align: center;
    padding: 5%;
    font-weight: 800;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: fit-content;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}
#pricing p {
    font-weight: 700;
    color: rgb(255, 0, 43);
}

#pricing h3 {
    color: rgb(255, 0, 43);
}

.pricing-col {
    margin: 8% 5%;
}

/* Call to Action */
#cta {
    text-align: center;
    background-image: linear-gradient(to bottom, rgb(255, 0, 43), rgba(255, 81, 0, 0.904));
    padding: 5%;
}

#cta h3 {
    color: white;
    font-size: 2.4rem;
    font-weight: 900;
}

#cta button {
    padding: 6px;
}

/* footer */
#footer {
    text-align: center;
    margin: 2%;
}

#footer i {
    margin: 15px;
}

#footer i:hover {
    background-image: linear-gradient(to bottom, rgb(255, 0, 43), rgba(255, 81, 0, 0.904));
}

/* MEDIA QUERIES TO MAKE IT SCREEN RESPONSIVE */
@media screen and (max-width: 1028px) {

    #title {
        text-align: center;
    }

    .dog_img {
        position: static;
        transform: rotate(0);
        -webkit-box-reflect: right 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0),     rgba(0, 0, 0, 0.0));
        margin-bottom: 0%;
    }

    nav {
        background-color: rgba(0, 0, 0, 0);
    }

    .navbar {
        margin-bottom: 2.5rem;
    }

    .navbar-brand {
        font-size: 2.5rem;
        font-weight: bold;
        /* margin-left: 25%; */
    }

    #cta h3 {
        font-size: 2rem;
        font-weight: 600;
    }
}

After all this hard work, it’s finally time to see how our template will look like. So here is a glimpse of the template that we just created using only HTML, CSS, and Bootstrap.

You can view the complete site here: https://vaishali2327.github.io/LovPet-Project/

It was a fun and easy front-end project which is ready to go live. I will be linking this project with the back-end too in the future, so stay tuned for that. Comment down below if you have any suggestions or for your feedback. Thank you for your time.

Check out my latest articles here: