Bootstrap alert Video Lecture - Learn Bootstrap From Basics to Building

this is part 46 of bootstrap tutorial in
this video well discuss the bootstrap
alert plugin creating an alert with
bootstrap is straightforward all we need
to do is create a div element with
classes alert and one of these
contextual state classes alert danger
success info and warning creating an
alert with alert danger contextual state
class will give us an alert that looks
like this let's look at this in action
let's create a div element with classes
alert and alert danger inside this let's
include strong element the alert message
is going to be there is a problem
submitting your form when we reload this
webpage notice we get the alert is
expected at the moment notice there is
no mechanism in place to be able to
close this alert to close this alert we
want to include this little cross button
here when we click this button that's
when we want this alert to be closed so
to get that close button inside this
alert day I'm going to include an anchor
element set its H ref attribute to hash
the class on this is going to be close
and we also need the data - dismiss
attribute the value for this must be
alert and to get that little cross
button displayed I'm going to use
ampersand times semicolon let's save our
changes
reload our webpage notice we get that
little draws and when we click that the
alert will be closed now another change
that we want to do is on the initial
page load we want to keep this alert
closed so to keep this alert closed on
the initial page load along with these
two classes I am also going to use
collapse class so with collapse class in
place when we reload this notice the
alert is hidden on the initial page load
now we want a submit button on the
webpage and then we click this button
that's when we want to display this
alert
so let's include a submit button
let's give this button an ID let's call
this BTN submit let's use button classes
BTN and BTN primary the text on the
button is going to be submit and let's
include to break elements between the
button and the alert let's also give our
alert div an ID let's call it my alert
now when we click this button that's
when we want to show the alert so with
no jQuery ready function let's use the
jQuery ID selector which is hash find
the button and associate click event
handler so when we click the button
that's when we want to show the alert
and if you look at this alert div it
also has got an ID so let's use the
jQuery ID selector again find the alert
and then call on that show method now we
want to animate the alert while showing
it we want that to be slowly fading in
so I'm also going to pass fade string to
the show method so let's save our
changes reload of web page notice on the
initial page load we have the alert
closed when we click the submit button
we get the alert and when we click this
little cross look at that the alert is
closed now when I click on the submit
button again look at that the alert is
not displayed that's basically because
when we close the alert it's going to be
removed from the Dom so when we click
the button again it's not going to
display it now if you don't want the
alert to be removed from drum and if you
want that alert to be displayed every
time you click the submit button then
there are a few changes that we have to
do first we have to remove this data -
dismiss attribute on this anchor element
let's give this anchor element an ID
let's call this link close and when we
click this anchor element you know
that's when we want to close the alert
but we don't want to
move it from the Dom so I'm going to
associate a click event handler with
this anchor element so within our jQuery
ready function let's find that anchor
element again using its ID and then
associate click event handler so when we
click the close button within the alert
day of what we want to do we want to
hide the alert instead of closing it or
removing it from Dom so when we do that
we want to be animating that so again we
are passing fade a string to it let's
save our changes
reload up a web page and at this point
when we click the submit button we get
the alert when we click this little
cross the alert is closed and when I
click on the submit button again look at
that it's free displayed all right now
let's take this alert one more step
further so here is what we want to do
when we click the submit button we want
this alert to be displayed and within
two seconds if I don't close this alert
by clicking on this cross you know the
alert should automatically be closed
however within two seconds if I click
this cross you know Dollard should be
closed so let's see how to achieve this
so after the alert is displayed you know
by clicking the submit button within two
seconds if we don't close it explicitly
we want it to be closed automatically so
to be able to close that automatically
within two seconds so within the button
click event handler I'm going to use set
timeout function so we want to call a
function here and execute some code so
we have an anonymous function here all
we want to do is we want to close the
alert and this piece of code is going to
do that for us and we want this code to
be executed within two seconds so I'm
going to specify the timeout here we
need to specify that in milliseconds or
2,000 milliseconds which is equal to two
seconds so with this change in place
let's reload
echh and look at this when I click the
submit button we get the alert within
two seconds if I don't close it
explicitly it's automatically closed
however within two seconds if I click
this the alert is again dismissed as
expected thank you for listening and
have a great day