Unconfigured Ad Widget


How to create a Landing Page in bootstrap?

  • Filter
  • Time
  • Show
Clear All
new posts

  • How to create a Landing Page in bootstrap?

    Hi please suggest How to create a Landing Page in bootstrap?
    Website Designer in Delhi | Website Developer in Delhi | Website Maker in Delhi | Website Designing in Delhi | Website Services in Delhi

  • #2
    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:


    Slack vs Skype | OneDrive vs Google Drive


    • #3
      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.

      MS Teams | MS Dynamics 365


      • #4
        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.
        Flower to Australia | Christmas Gifts USA | Christmas Hampers Australia | Christmas Gift Ideas Australia


        • #5
          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


          • #6
            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.


            Unconfigured Ad Widget



            1 of 2 < >

            FreeHostForum Rules and Guidelines

            Webmaster forum - Web Hosting Forum,Domain Name Forum, Web Design Forum, Travel Forum,World Forum, VPS Forum, Reseller Hosting Forum, Free Hosting Forum


            Board-wide Policies:

            Do not post links (ads) in posts or threads in non advertising forums.

            Forum Rules
            Posts are to be made in the relevant forum. Users are asked to read the forum descriptions before posting.

            Members should post in a way that is respectful of other users. Flaming or abusing users in any way will not be tolerated and will lead to a warning or will be banned.

            Members are asked to respect the copyright of other users, sites, media, etc.

            Spam is not tolerated here in most circumstances. Users posting spam will be banned. The words and links will be censored.

            The moderating, support and other teams reserve the right to edit or remove any post at any time. The determination of what is construed as indecent, vulgar, spam, etc. as noted in these points is up to Team Members and not users.

            Any text links or images contain popups will be removed or changed.

            Signatures may contain up to four lines

            Text in signatures is subject to the same conditions as posts with respect decency, warez, emoticons, etc.

            Font sizes above 3 are not allowed

            Links are permitted in signatures. Such links may be made to non-Freehostforum material, commercial ventures, etc. Links are included within the text and image limits above. Links to offensive sites may be subject to removal.

            You are allowed ONLY ONE picture(banner) upto 120 pixels in width and 60 pixels in height with a maximum 30kB filesize.

            In combination with a banner/picture you can have ONLY ONE LINE text link.

            Webmaster related advertising is allowed in Webmaster Marketplace section only. Free of charge.

            Shopping related (tangible goods) advertising is allowed in Buy Sell Trade section only. Free of charge.

            No advertising allowed except paid stickies in other sections.

            Please make sure that your post is relevant.

            More to come soon....
            2 of 2 < >

            Advertise at FreeHostForum

            We offer competitive rates and a many kinds of advertising opportunities for both small and large scale campaigns.More and more webmasters find advertising at is a useful way to promote their sites and services. That is why we now have many long-term advertisers.

            At here, we also want to thank you all for your support.

            For more details:

            More ad spots:
            See more
            See less