This blog will create a website homepage snippet using HTML, CSS, and bootstrap four frameworks. As we know, bootstrap is a helpful HTML, CSS, and js framework for the developer. It has got lots of pre-made templates. Using those templates, a developer can start a project in no time. They don't need to go through all those default codings at the beginning because the bootstrap framework will take care of that.
This tutorial makes a full-screen homepage where we have applied bootstrap four navbar and carousel templates. I modified the code a little bit so that we can have the looks like the image shown. For this project, I will suggest you follow the tutorial video below from start to finish and then proceed further. In this way, you can have some idea about the necessary coding of this project.
I hope you watched the entire video and got the idea of the project. Let start with the HTML first. First, I linked the bootstrap four CSS and js files. If we want to use the bootstrap four pre-made templates, adding those files is a must. Apart from the bootstrap files, we have to add the latest jquery file as well; otherwise, some snippets of bootstrap, which requires jquery, will not work. After using the bootstrap templates we require, we will modify the CSS according to our needs.
First, we start with the navbar, and for that, we have to look for the navbar template in the bootstrap documentation page. If you don't see the snippet directly after the search, you have to scroll down a little bit to find our required template. We then have to download the source code from there and paste it into our project. Save your project and run it in your browser. Now the navbar is the whole width of the viewport, and if we want a margin padding from left and right and center-align, we can add bootstrap 'container' class.
Now, as we have added the navbar to our project, we have to make some edits to achieve the look of our finished product. By default, the main navbar will be on the left beside the logo, but we have to move that to the right. Besides, we don't want the search bar on the right side. So we will curtail some codes from the snippet and add a bootstrap four class named 'ml-auto' beside the 'navbar-nav' class unordered list. This class will help to move the nav-item to the right side. We will use another bootstrap class called 'fixed-top' with the navbar to stick to the top of the page.
Now it's time to add a carousel to our project. Please search for the carousel on the documentation page. Please copy the code of the one with the carousel-caption in it. Later we will add images to the carousel and change the text in the carousel-caption. The caption will be at the bottom of the carousel, by default. We will change the base value in CSS so that it comes in the middle of the carousel.
Let's move to the CSS part. First, we will give the carousel-item class height of 100vh and a max-height of 300px. For making the carousel-caption in the middle of the carousel, we will add a bottom value of 270px. For the logo, you can use an image logo, but for the sake of this tutorial, I used plain text. The background images I used here all have a background in them, so I have a white color for all the carousel elements. Without further explanation, I am providing the source code to you so that you can have a look at it by yourself.
Bootstrap 4 Homepage with navbar and slider (Source Code) :
After adding the files that are required, make one HTML and one CSS file. Copy the code below and paste them to your project and save.
ADD HTML
ADD CSS
I hope you find this project helpful. Follow my social media profiles to stay connected with the blog. Thank you for stopping by, and keep coming.
1
Comments
Please Do not Enter any spam link in the comment box
Good job, thanks...
ReplyDeletePost a Comment
Please Do not Enter any spam link in the comment box