Hi everyone in this blog I’m explaining about Bootstrap components.

Creating ScrollSpy with Bootstrap:

The scrollspy is a navigation mechanism that directing visitors to the different sections of a page that has huge amount of content. Also the menu targets based on the scrolling position will be automatically highlighted to indicate the visitors where they are currently on the page. It saves the time and makes the content of your pages more accessible to the visitor.

Example:

Download these library:

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Use Custom CSS:

<styletype="text/css">
    ul.nav-tabs {
        width: 140px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1pxsolid#ddd;
        box-shadow: 01px4pxrgba(0,0,0,0.067);
    }
 
    ul.nav-tabsli {
        margin: 0;
        border-top: 1pxsolid#ddd;
    }
 
    ul.nav-tabsli:first-child {
        border-top: none;
    }
 
    ul.nav-tabslia {
        margin: 0;
        padding: 8px16px;
        border-radius: 0;
    }
 
    ul.nav-tabsli.activea, ul.nav-tabsli.activea:hover {
        color: #fff;
        background: #0088cc;
        border: 1pxsolid#0088cc;
    }
 
    ul.nav-tabsli:first-childa {
        border-radius: 4px4px00;
    }
 
    ul.nav-tabsli:last-childa {
        border-radius: 004px4px;
    }
 
    ul.nav-tabs.affix {
        top: 30px;
    }
</style>

HTML Code:

<divclass="container">
    <divclass="row">
        <divclass="col-xs-3"id="myScrollspy">
            <ulclass="nav nav-tabs nav-stacked affix-top"data-spy="affix"data-offset-top="125">
                <liclass="active"><ahref="#section-1">Section One</a></li>
                <li><ahref="#section-2">Section Two</a></li>
                <li><ahref="#section-3">Section Three</a></li>
                <li><ahref="#section-4">Section Four</a></li>
                <li><ahref="#section-5">Section Five</a></li>
            </ul>
        </div>
        <divclass="col-xs-9">
            <h2id="section-1">Section One</h2>
            <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
            <hr>
            <h2id="section-2">Section Two</h2>
            <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
            <hr>
            <h2id="section-3">Section Three</h2>
            <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
            <hr>
            <h2id="section-4">Section Four</h2>
            <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
            <hr>
            <h2id="section-5">Section Five</h2>
            <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
        </div>
    </div>
</div>

Output:

Creating Miscellaneous with Bootstrap:

Bootstrap provides a handful of lightweight utility components for common usages.

Jumbotron:

The Bootstrap jumbotron component provides an excellent way to showcase the key content or information on a web page. Just wrap your featured content like heading, descriptions etc.

Html code:

<divclass="container">
    <divclass="jumbotron">
        <h1>MindStick</h1>
        <p>We have sharing the knowledge and provide services…</p>
        <p><ahref="#"class="btn btn-primary btn-lg">Learn more</a></p>
    </div>
</div>

Output:

Creating Breadcrumbs with Bootstrap:

A breadcrumb is a navigation scheme that indicates the user's location in a website or web application. Breadcrumb navigation can greatly enhance the accessibility of websites having a large number of pages.

This is a simple example of creating breadcrumbs with Bootstrap.

<divclass="bs-example">
     <ulclass="breadcrumb">
          <li><ahref="#">Home</a></li>
          <li><ahref="#">Products</a></li>
          <liclass="active">Accessories</li>
     </ul>
</div>

Output:

in my next post, i'll explain about Step for Computer Troubleshooting