Responsive Bootstrap 4 Gaming Website Build From Scratch

Articles, Blog

Responsive Bootstrap 4 Gaming Website Build From Scratch

Responsive Bootstrap 4 Gaming Website Build From Scratch


Hey everyone, welcome back to daily tuition. In this tutorial we are creating simple bootstrap
gaming website. Using Bootstrap we will quickly create this
website. This tutorial is for beginners to understand
how to use bootstrap grid system and use that in your website. In this tutorial you will learn how to create
this simple layout with bootstrap grid system. You will also learn how to use bootstrap sample
code sample to build a real website. You will also learn how to make the website
responsive for mobile devices. In this tutorial we will just copy the bootstrap
sample code and use it in the project. But before we start this video make sure you
subscribe to daily tuition channel and press the bell icon to get notified of my every
new video. So as always we say before we getting late,
let�s get started� First we will create a project file and open
it in the editor. Now we will create stock folder and copy some
images which we are using in tutorial. You can just download these images from the
description. So I will just copy the images and paste it
in the stock folder. After that we will create index.html and style.css
file. In index.html file we will create simple html5
snippets and write title. Then we go to the bootstrap site and copy
css cdn and paste it in the head. And also copy the script tag from bootstrap
website and paste it just before the closing body tag. After that we will link the custom css file
which is style.css. In the body tag create site wrapper class
and put the header tag inside of it. After that go to bootstrap website and find
out the navbar which you like. So I will select this one. Copy this code and paste it in the header. Now we will make some changes in this navbar. First we will change the brand name. I will just open it first in live server to
see live result. Ok now we will add font family to brand name
so I will choose font from google font. So in the google font website I will search
for the font and add it. Copy the link and paste it in the head. Now we will use this font to brand name. After that we will change the navigation links. So I will just change the text of the nav
links. Remove the disable class from last nav link
and create another one. Now I wanted to align these nav link on right
side of the screen so I will create div with navbar nav class and specify margin right
auto. That�s it. After that we will create main website content
section so we will add main tag. In this main tag we will add carousel so we
will find the fade in carousel on bootstrap website and copy and paste it here. Then I will change the Src attribute with
the image path. So we will specify the Stock image path here
for these three carousel items. In style.css we will remove margin and padding
from the html element. And add background color. After that create navbar class and make that
transparent. And remove this navbar light and bg light
class. And add navbar dark class. This class will make nav link color white. Now this navigation is transparent and you
will see the black body background color. Ok after that we will add position and z index
property to navbar. After that create nav link class and add font
size to it. And then create main tag and specify position
absolute top 0 and z index 0. So now you can see the transparent navigation. After this we will align the carousel previous
and next indicator. So we will create use the previous and next
class and specify width for this indicator. After that we will create section one class
with section tag. And put container class inside of it. Then create div with row class and put three
columns of col-md-4 grid. In the
first column we will insert card. So I will copy this card and paste if in the
first column and just change the image source attribute. We specify absolute property to main tag that�s
why this card is aligned to the top. Now we will create site-wrapper class to align
this. So we will just specify height for this site-wrapper
class. That�s it. After that we will add some demo text from
the lorem website. So we will copy this and paste it here and then specify text dark bootstrap class. After that we will create another card. So we will copy this card and paste it in
the second column. Change the image source attribute. That�s it. And then we will create the third card in
the third column also. After that we will create another row after
the previous closing row div. And add margin y 4 and create two columns. So in these columns we will use this card. So just copy this and paste it in the first
column. We will make some changes in the card. We remove these two li tags. And specify image. Then change this text
and remove one anchor tag from here. And name this anchor tag as play. Then specify then title text name. After that we will add offset 2 for the first
column. And then create another card in second column
so just copy the first card and paste it in the second columns. Then change image and change some text titles. After that create section 2. We will use this card here. So copy this card and paste it in the section
2. So here we will first center the text first
and change the title. After that remove image tag and create span
tag with parallax class. We will add parallax effect to this card. So first in style.css we specify black color
to all cards and add text-white bootstrap class to add
white color to the text. Ok .
After that we will create parallax class in the style.css. and add background image, background
attachment, background position, background repeat and add height 500px. Now this will create this beautiful parallax
effect. After that we will create section 3 and add
margin. And create container class and put the row
inside of it. And here we will create col-12 grid. And then add h3 heading with contact us text. And specify color to it. After that create another row and add col-md
-12 grid. And add form tag with margin top 4. Then create form control class and put a column
in that. And create input text box here. With form control class and first name placeholder. After that create another column and add another
input textbox here also with last name placeholder. After that create another form row with margin
top. And in the first column create another input
textbox with form control class and email placeholder. After that create another form row with margin
top and create a column. In this column create lable of comment. And then create textarea textbox with id example
text area control and specify 5 row and specify placeholder message. That�s it. After that we will create last section 4 and
add paragraph with text center and text dark bootstrap class. And here create copyright notice message. Using span we will change the color of the
website name. At the last we wanted to add some title for
the first carousel so after the first carousel image we will create div with carousel caption
class. And specify dnone and d-block class and create
h3 with assassin creed title. And create paragraph with three dots. So this will looks like this. That�s perfect. Everything is created. So now we will check this website is responsive
or not. This website is not completely responsive. Now we will make this completely responsive. So in the style.css file we will create media
query and with max device width and change site wrapper class height property. After that create col-md-4 class and add some
margin to it. After that we do not want to show the carousel
indicators so we will remove this using display none property. That�s it. So now you will see your website is responsive
for mobile devices. That�s all for this tutorial, if you find
anything useful then press like button and also share this video with your friends. If you have any question then comment me in
the video comment section. That is all for today. We will see you in the next tutorial
Till then be happy and keep watching.

19 thoughts on Responsive Bootstrap 4 Gaming Website Build From Scratch

  1. First of all, the video is really very helpful. And I highly appreciate it. But I can't say that it's for beginner because you were too fast !

  2. Hi bro pls can you do a complete responsive web project tut with home, about, portfolio, contact us pages also… Pls

  3. How to adjust carousel height… My pictures are big and had to scroll down a little.. I a want full view height or half…
    I am new to coding.. Thank you!

  4. 5:40 sir abolute position and top :0%; is not working .. the carousel remain at its position below the navbar. not going to the top

  5. position:absolute attribute in the main ctag is not working for my code.Images are showing smaller and bigger continuously.

  6. sir cards are not responsive in mobile mode and it creates large space between the carousel and the cards in mobile, how do I fix this?

Leave a Reply

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