Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums Vertical scrollspy with Bootstrap library – MindStick
Ask Question

1 Answers

Anonymous User
Anonymous User 04 Aug 2021
Report Abuse

Let's have an example to demonstrate toaster with the help of Bootstrap : 

<!DOCTYPE html>

<html>

<head>

    <title>Bootstrap Example</title>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>

    <style>

        body {

            position: relative;

        }

        #section1 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #1E88E5;

        }

        #section2 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #673ab7;

        }

        #section3 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #ff9800;

        }

        #section41 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #00bcd4;

        }

        #section42 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #009688;

        }

    </style>

</head>

<body data-spy='scroll' data-target='.navbar' data-offset='50'>

    <nav class='navbar navbar-inverse navbar-fixed-top'>

        <div class='container-fluid'>

            <div class='navbar-header'>

                <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#myNavbar'>

                    <span class='icon-bar'></span>

                    <span class='icon-bar'></span>

                    <span class='icon-bar'></span>

                </button>

                <a class='navbar-brand' href='#'>WebSiteName</a>

            </div>

            <div>

                <div class='collapse navbar-collapse' id='myNavbar'>

                    <ul class='nav navbar-nav'>

                        <li><a href='#section1'>Section 1</a></li>

                        <li><a href='#section2'>Section 2</a></li>

                        <li><a href='#section3'>Section 3</a></li>

                        <li class='dropdown'><a class='dropdown-toggle' data-toggle='dropdown' href='#'>Section 4 <span class='caret'></span></a>

                            <ul class='dropdown-menu'>

                                <li><a href='#section41'>Section 4-1</a></li>

                                <li><a href='#section42'>Section 4-2</a></li>

                            </ul>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </nav>

    <div id='section1' class='container-fluid'>

        <h1>Section 1</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section2' class='container-fluid'>

        <h1>Section 2</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section3' class='container-fluid'>

        <h1>Section 3</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section41' class='container-fluid'>

        <h1>Section 4 Submenu 1</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section42' class='container-fluid'>

        <h1>Section 4 Submenu 2</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md