Make a Tinder Clone using Bootstrap
Make a Tinder Clone using Bootstrap

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 have your HTML file ready with Bootstrap classes.

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:


Vaishali_Rastogi

Hey There! I am Vaishali Rastogi and I am a tech-researcher. I've been doing writing for a good 4-5 years, so here I am now. Working on my own website to make people digitally aware of the updates in technology.

2 Comments

คลิป · July 16, 2021 at 9:39 am

Howdy! Someone in my Myspace group shared this
website with us so I came to look it over. I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers!
Outstanding blog and brilliant design and style.

    Vaishali_Rastogi · July 16, 2021 at 5:30 pm

    Thank you so much for this sweet appreciation! 🙂
    Please do share it, so I get more motivated to work towards it.

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

twenty + 20 =