Bootstrap 4 Landing page Design free tutorial is here. Today in this article, we are going to create this amazing Bootstrap landing page. We will demonstrate how to create bootstrap landing page design with 3D text effect on the homepage. Most of the time you need to write too much code to create the landing page with more functionality. This tutorial demonstrates less code but more functionality. We have used bootstrap classes to improve style and responsive behavior of our landing page.

Bootstrap 4 Landing page Design free tutorial


In this tutorial, we first add background image in the background. Then add navigation on the top of the page. In this navigation, we had added website title and toggle button. In Bootstrap, we can call it navbar toggle button. It is not really difficult to create a bootstrap landing page but it depends on the functionality you used. we will rotate text in the rectangle position. we also used the button with shadow effect. The toggle button is enabled with full-screen mode so if you want to view your navigation items then you need to click on the toggle button.

When creating landing pages you need to understand that goal of your website is to limit the option a visitor to your landing page has and direct them to a clear objective.

Step 1:-

First, create the subfolder in your project. Name this folder as Image and insert the background image in this folder. you can just download it from the Image Download link here. After you download it, add this image to image subfolder. Create a new Home.html file that contains the design of your landing page. So we will just create this in the root folder path.

Step 2:-

In Home.html file create simple HTML snippet. If you want to make your page responsive then add meta viewport attribute in the head section. don’t worry we will show you how to do that. Following is created in the home.html file so you can copy it and paste it into the <head> tag.

In the head section, we added metadata. metadata name viewport is used to create responsive mobile-friendly pages. Then named your page title you can choose anything that you want. Most important part of this landing page is the bootstrap CSS and js classes. You need to add bootstrap CSS and Js files to the use of the bootstrap classes. So we just add a bootstrap.min.css file with link attribute. Then add Jquery file with using the script tag. Keep in mind that place jquery file first and then add bootstrap js files. If you don’t do so you will not able to used bootstrap toggle button functionality.

In <style> tag we just add the background image with image absolute path. When you used this code in your Home.html file keep in mind that to change image URL property. Because of we added tutorial image file path so if you are using different file location the background image will not display. Then create some CSS classes to style HTML element.

Step 3:-

In step three, we will complete our landing page body part. So just jump into the <body> Section of your home.html file and place this code into the <body> tag. Import this code into home.html <body> section.

In the above code, you will see we have created the navigation menu with some nav item. So when you run this project you can click on the toggle button and all navigation links will collapse.Just after that create page content section. Make sure do not change any class name from the home.html file if you do so then change this class name from the style tag also.

Now everything is ready, So this is our Home.html file looks like. You can just import this into the home.html file.

So now your complete home.html file looks like this.

That’s all.

If you have any question then comment me in the comment section and also share this post with your friends and family. follow us on Facebook and Youtube for more information.

Thank you for visiting us. See you in the next tutorial.