Create a Responsive Website Using Bootstrap


In this article, we will build a responsive website using Bootstrap step by step. Twitter Bootstrap is the best platform to build your website from scratch. It gives you reusability and flexibility of code. To make a website responsive we will use the bootstrap Grid system. So in this tutorial, we are making gaming website design. This article is for beginners.

create responsive website using bootstrap step by step

What will you learn in this tutorial?

  • Responsive navigation
  • Parallax Scrolling effect
  • Bootstrap fading Carousel
  • Cards
  • Form controls

In this tutorial, you will learn how to create Resp onsive Navigation which is responsive for mobile and tablet devices and make navigation menu transparent to make carousel visible. Along with that you also learn how to create carousel using three carousel item.

After that, we will show you how to use cards to make a complete website and how to use form control to make contact us section of the website.

So let’s get started…

Creating a Project

Now first you need to create a project folder to store all files inside of that. So we will create a folder on the desktop and open it in the editor. we are using visual code editor you can choose your favorite one.

After creating a project create a stock folder which contains our project images. You can download the images from this link.

Then create two files Index.html and Style.css. We will use the index.html file for creating a design and Style.css file for generating style for the HTML component.

Index.html

In this file, we will first create a simple html5 snippets. Then specify the title of the website and then link Bootstrap files to it.

In this code, we create a simple html5 snippets and link bootstrap CSS and js files. In the head tag, we will first link bootstrap minified version file using bootstrap CDN. Using CDN you do not want to download and import bootstrap file in your project. Just using the CDN link you can access it and use in your project but to access the classes you only need to enable the internet connection.

After that, we will link google font CDN. if you are not familiar with google font then we would like to explain it first. usually google font is used for typography. So if you want to use some font in your project then using the google font you can do that as well. So in the head, we will link the google font CDN.

After that, we will link custom CSS file to create the custom style for the HTML elements.

At the last, we will link the bootstrap javascript file and jquery file to the project. This file is used to create client-side operation.

Creating Navigation and Carousel

Now we will generate some code to create responsive navigation and also create bootstrap fading carousel. So we will first create navigation and then create fading carousel.

So now here in this code. We will create navigation menu using bootstrap navbar. we will specify the brand name and also specify font family to it. we are using this font family from google font. After that, we will create bootstrap toggle button and generate bootstrap links.

after that, we will create fading carousel. In this carousel, we specify three images which are slide infinite. we will also provide the h4 heading for the first slider. along with that, we will specify previous and next indicator to the slider.

Just import this code in the index.html file to see the result.

Bootstrap Cards

In this section, we will create the bootstrap card using a grid system. Let’s look at the code.

Now here in this code,  we had created a section. In this section, we created a row and put the column inside of it. we specify col-md-4 and create three columns of col-md-4.

To understand better let’s look at this example.

In the bootstrap system 12 column consider as a full width of the screen or viewport. now to fill this 12 column we will create three column of co-md-4 class. it means when you combine this classes you had 12 column grid. The different between col-md-12 and col-md-4 is in the size of the column. And also what about the md. md is considered as medium devices. which means you can take this column width 4 on the medium screen size of devices.

In the first three column created using col-md-4 and other two are created using col-md-4. So in the first three column, we will create a card. In this card, we specify the image path. Make sure you replace the src attribute with your own image path.

we will create three cards with the same card code but just be changing the image of the card.

After that, we will create another card but this card is little different from the other three ones. we had used this card to create other two different cards on our website.

Parallax Effect

Now we are creating a parallax effect to our website. To create this effect we are usign the card and image to generate parallax effect. Just import this code.

In this code, we created a card. We will center this card text using a text-center class of bootstrap and at the end of the card body, we will create parallax span class. In the parallax class, we will specify the image and create parallax effect to it.

We will create style.css file code letter in this article.

Form Controls

Now we will create form control for contact us section. In this section, you will learn how to create contact use form control.

In this code, we just created a section and put bootstrap container class inside of it. After that using form row and col class, we will create rows and columns. with the use of form-row, you can create a new row and use col class you can create a new column to it.

After what we had just put the input text boxes with the placeholder. at the last, we will create text area text box.

Copyright Symbol

In the last section, we will create copyright symbol with copyright message. we will just put the paragraph tag and create massage for the user.

So now our design is ready.

Style.css

Now we will create a style for the HTML elements.

Import this code in the style.css file.

If you are familiar with CSS then this code will difficult to understand to you.

In this code, we just put the navbar class position relative and main tag to an absolute path. this will create a layer and then we will make that navbar transparent.

After that, we will create parallax effect to the image. make sure you do change the image path to the image. Just change the path and replace with your image file path. at the end of a style.css file, we will create media query to make that responsive.

So everything is created. Your Responsive website using bootstrap is ready.

Now we will put everything together.

So your index.html file looks like this.

index.html

Style.css

If you have any question then comment us.

Follow us on Youtube.

Thank you.

Leave a Reply

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