Step by step how to add an Alert Component of the Twitter Bootstrap

In this tutorial we'll learn how to use the Alert Component of the Twitter Bootstrap,  using the JavaScript Alert  Plugin of the Twitter Bootstrap. The Twitter Bootstrap includes many components and widgets for you to import to your web page with a minimal effort and with proved responsiveness and well design, which can be displayed on a responsive grid system that scales up to 12 <div>s columns, and adapts itself to the mobile or tablet device when size decreases.
Bootstrap is the more widely used and more popular CSS3 open source framework for developing responsive web apps,  making front-end web design very fast and easy.

We suppose here that you have already installed the Twitter Bootstrap in your MVC app. If you don't, learn  in this tutorial how to install it in just 2 minutes

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

The Twitter Bootstrap can be reached & downloaded from the Bootstrap official site : Bootstrap :

The Alert Widget can be set using the Default, Success, Info, Warning, or Danger class definitions.
Create an HTML web page or an MVC View, but make sure to load the CSS and the .js jQuery scripts in the page:

Now we'll keep COPYING-PASTING HTML markup from the Bootstrap official web site, to reuse it on our web page.

TWITTER BOOTSTRAP ALERT

Go to the Bootstrap and copy the Alert markup : 

Then paste it inside your MVC View or your HTML page, but make the following changes:

1) Discard from the button the "dismiss" class;
2) Create a jQuery for closing and opening the Alert using .show() and .hide() jQuery methods:

 <div id="alert" class="alert alert-info fade in" role="alert">                    <button type="button" id="close-alert" class="close">                        <span aria-hidden="true">&times;</span>                        <span class="sr-only">Close</span></button>                    <strong>This is an Info Alert</strong>                     There are also Default, Success, Warning and Danger Alert classes.                </div>

Add the jQuery to open-close the Alert:

<script>    $("#alert").hide();
    $("#close-alert").click(function () {        $("#alert").hide();    });
    $("#open-alert").bind("click", function () {        $("#alert").show();    });</script>

Save & refresh the web page :

Click the buttons to toggle the Alert:

Of course, the Alert is perfectly responsive Widget of the Bootstrap, adapting itself to portable devices and tablets:

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

Happy programming.....

        By Carmel Schvartzman

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