Step by step how to use the Breadcrumb Component of the Twitter Bootstrap

In this tutorial we'll learn how to use the  Breadcrumb Component of the Twitter Bootstrap as a Menu. The Twitter Bootstrap includes plugins, components and widgets for you to use into your web page with proved responsiveness and elegant design.
Twitter Bootstrap is the most widely used and most popular CSS3  framework for implementing responsive web apps,  making front-end  design  fast and easy.

If you don't have already installed the Twitter Bootstrap in your MVC app , learn  in this tutorial how to install it in 5 minutes

In just 5 minutes we'll build a responsive web page using the  Breadcrumb  Component of the Twitter Bootstrap :

The Twitter Bootstrap can be downloaded from the Bootstrap site : Bootstrap :

Make an HTML web page or an MVC View, but be sure to import the CSS and the .js jQuery scripts in the page:

TWITTER BOOTSTRAP  Breadcrumb 

Go to the Bootstrap and copy the Breadcrumb  markup : 

Then paste it inside your MVC View:

The markup is the following:

<div>
                <ol class="breadcrumb" style="margin-bottom: 5px;">
                    <li><a href="/Twitter">Twitter</a></li>
                    <li><a href="/Twitter/Components">Components</a></li>
                    <li class="active">Breadcrumb</li>
                </ol>
            </div>

Save & refresh the web page :

And of course, the Breadcrumb  is fully responsive on mobile devices and tablets:

That's all!!  In this tutorial we've learned how to use the  Breadcrumb Component of the Twitter Bootstrap as a Menu.  

Happy programming.....

        By Carmel Schvartzman

כתב: כרמל שוורצמן