How to create a Landing Page in bootstrap?

[webdesigningindelhi]

Hi please suggest How to create a Landing Page in bootstrap?

[Lewis-H]

Step 1

Similarly to the previous tutorial, in the beginning, we'll create the basic structure of our project.

Open the index.html file in your project folder (the folder where you have unzipped MDB package) and paste the following code below <body> tag.

Step 2

Now we'll create a navigation bar. Go to Navbar Docs and copy the code for Basic Navbar. Then paste it between opening <header>s tags.

Remember to place .container inside your navbar in order to center the links.

Step 3

We have to make one significant change to the Navbar code.

Add the class .fixed-top to the Navbar.

Step 4

Now it's time for something spectacular. Let's create a full page background intro for our landing page.

Paste this code below the navbar and before the closing </header> tag:

--
Lewis

[AbigailFord]

Create the Navigation Bar
You can add a responsive menu to your landing page with just a few lines of HTML. Insert the following code into the <body> section of your HTML file:
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Hello Consultancy</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> Compose the Hero section
Add this code for that
<header class="jumbotron jumbotron-fluid"> <div class="container-fluid text-center"> <h1 class="display-3">The Best Solution for Your Business</h1> <p class="lead pb-4">We help you maximize performance and build a healthy organization.</p> <p><a href="#" class="btn btn-primary btn-lg" role="button">Learn More</a></p> </div> </header> CREATE A THREE-COLUMN SECTION TO SHOWCASE SERVICES

To that add this
<section id="services" class="container"> <h2 class="display-4 text-center mt-5 mb-3">Our Services</h2> <div class="row text-center"> <div class="col-md-4 mb-4"> <div class="card h-100"> <img class="card-img-top" src="design.jpg" alt="Design"> <div class="card-body"> <h4 class="card-title">Design</h4> <p class="card-text">Deliver the best user experience with our carefully designed responsive websites and applications!</p> </div> <div class="card-footer py-4"> <a href="#" class="btn btn-secondary">See portfolio &raquo;</a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card h-100"> <img class="card-img-top" src="development.jpg" alt="Development"> <div class="card-body"> <h4 class="card-title">Development</h4> <p class="card-text">You need software that works on every device. Leverage the latest technologies and the most powerful tools!</p> </div> <div class="card-footer py-4"> <a href="#" class="btn btn-secondary">See projects &raquo;</a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card h-100"> <img class="card-img-top" src="analytics.jpg" alt="Analytics"> <div class="card-body"> <h4 class="card-title">Analytics</h4> <p class="card-text">Consult our experts to set up proper goals and find the best stack for your next application!</p> </div> <div class="card-footer py-4"> <a href="#" class="btn btn-secondary">See testimonials &raquo;</a> </div> </div> </div> </div> </section> Peace.

[morajinfratech]

Bootstrap is a free, open-source front-end library for designing websites and web applications. It contains HTML- and CSS-based design templates for everything from typography, forms, buttons, navigation and other interface components as well as JavaScript extensions. Unlike many other web frameworks, Bootstrap concerns itself with front-end development only.

[smithmary01]

Bootstrap is a free, and easily designing websites and web applications. You will learn some technique like:

Creating a Full Page Intro, shadows, Contact Section, Google Maps, animations, Awesome toolkit

[Cartloot]

Pick CMS Platform.

Pick test format.

Go to General tab.

Arrangement design.

Go to menu tab.

Add slideshow to site.

Change content in content territory.

Make your Footer.