Coding

Bootstrap 4 Alerts & Modals | BOOTSTRAP 4 TUTORIAL

  • 00:00:01 welcome to this video great to have you
  • 00:00:03 on board in this video I want to dive
  • 00:00:06 into alerts and modal's so we will have
  • 00:00:09 a look at how these work and not just
  • 00:00:12 how we can add them which is really
  • 00:00:14 simple but I'll explain this too but
  • 00:00:16 also what happens behind the scenes and
  • 00:00:18 how bootstrap makes sure that the things
  • 00:00:20 we see here looked away they look like
  • 00:00:22 so let's dive right into that
  • 00:00:27 notice the pager the state with which we
  • 00:00:30 finished in the last video now as I said
  • 00:00:33 and these are at the beginning now it's
  • 00:00:35 time to add some modal's and alerts now
  • 00:00:37 one important information here this
  • 00:00:41 won't become a real complete website
  • 00:00:44 because I want to focus on the core
  • 00:00:46 bootstrap features or some of its most
  • 00:00:49 important features but if you like we
  • 00:00:51 can always do another serious where we
  • 00:00:53 add some back-end some server-side some
  • 00:00:55 database and build an entire project
  • 00:00:57 with that and with bootstrap so dad
  • 00:00:59 might be a good alternative so with that
  • 00:01:01 let's just dive into modal's and alerts
  • 00:01:04 and let's see how that works and let's
  • 00:01:05 start with the alerts now what is an
  • 00:01:08 alert to begin with an alert simply is
  • 00:01:10 an element which you typically only
  • 00:01:13 display conditionally be that because
  • 00:01:16 you're using a front-end framework like
  • 00:01:19 react or angular or view and you render
  • 00:01:22 it upon a certain event like a user
  • 00:01:25 entered some invalid data into a form or
  • 00:01:27 you display it because you use
  • 00:01:31 server-side framework to render your
  • 00:01:33 views something like Express or laravel
  • 00:01:36 and so on and the user may be also
  • 00:01:39 submitted a form or did something else
  • 00:01:41 where you want to show a message to him
  • 00:01:43 and want to inform the user about
  • 00:01:45 something then you would render that
  • 00:01:47 alert into your server-side rendered
  • 00:01:50 code and send back an HTML file with
  • 00:01:53 that alert in it so hard coding an alert
  • 00:01:56 into a single HTML file as we're doing
  • 00:01:59 it right now is rarely what you do but
  • 00:02:02 in the NT code you will use is the same
  • 00:02:04 so let's just add an alert in my HTML
  • 00:02:07 file below the navigation I will add an
  • 00:02:10 alert and an alert is simply an element
  • 00:02:13 a div a block element with a certain
  • 00:02:16 class so let's say add a div here and on
  • 00:02:19 that div I'll add a CSS class and that
  • 00:02:22 CSS class is alert now we can enter some
  • 00:02:25 text between the opening and closing
  • 00:02:27 tags like I'm an alert and we showed for
  • 00:02:30 accessibility reasons also add the roll
  • 00:02:33 alert here to inform screenreader sense
  • 00:02:36 on what this element is about with that
  • 00:02:39 if we save that and
  • 00:02:41 we reload our page we just see that text
  • 00:02:44 now I don't know about you but it's not
  • 00:02:47 dead impressive though what we can see
  • 00:02:50 if we open the developer tools and we
  • 00:02:52 inspect this alert we can see let me
  • 00:02:55 expand this the alert class here is
  • 00:02:58 already doing some work it's adding some
  • 00:03:00 padding some margin and a border which
  • 00:03:03 is transparent now what's the sense or
  • 00:03:06 the idea behind the transparent border
  • 00:03:08 the idea is that we can now add an
  • 00:03:10 additional class to that alerts div
  • 00:03:13 which will simply set a special
  • 00:03:16 background and border color to give us
  • 00:03:18 an alert that looks a bit fancier now
  • 00:03:21 why is the setup chosen like that
  • 00:03:23 because there's more than one way of
  • 00:03:24 displaying an alert sometimes you want
  • 00:03:27 to display a info message which
  • 00:03:29 shouldn't look too aggressive so you
  • 00:03:31 don't want to use red or yellow as a
  • 00:03:34 colour there sometimes you want to
  • 00:03:36 display a warning but not an error so
  • 00:03:38 maybe you want to use yellow instead of
  • 00:03:39 red and sometimes you need that normal
  • 00:03:41 alert which is red and sometimes you
  • 00:03:44 even want to display a success message
  • 00:03:45 it's also called alert here but it
  • 00:03:48 obviously should have some green color
  • 00:03:50 that is why you simply add a second
  • 00:03:52 class to this div and this now defines
  • 00:03:55 the kind of alert you want to show and
  • 00:03:57 the class always has this pattern alert
  • 00:04:00 – and then simply some special suffix
  • 00:04:06 which defines what it's like you for
  • 00:04:08 example have primary if you set this and
  • 00:04:11 you reload you see we have this blue
  • 00:04:13 alert here now it takes the entire width
  • 00:04:16 of the page because by default is alert
  • 00:04:18 if occupies the entire width typically
  • 00:04:21 you would of course combine this with
  • 00:04:22 the grid so you could add a container
  • 00:04:25 here and then you could add your row and
  • 00:04:28 in there your Col class like that and
  • 00:04:33 now if we add our alert in that class
  • 00:04:37 here we still have a column but due to
  • 00:04:39 the container this is naturally centered
  • 00:04:42 and in the middle of everything so if we
  • 00:04:44 now inspect this we see here we got the
  • 00:04:46 row doing work here we got the column
  • 00:04:48 doing work and we got the container
  • 00:04:49 which centers this so this is how you
  • 00:04:51 would normally do that of course you can
  • 00:04:54 also add
  • 00:04:55 spacing to the top avert you to some
  • 00:04:59 natural element which is added for
  • 00:05:01 example we could have a number of class
  • 00:05:03 here number row I mean and never call
  • 00:05:05 them and in there an h1 tag where I say
  • 00:05:07 alerts and modal's and percent of course
  • 00:05:12 so so this is an example setup but back
  • 00:05:15 to that alert
  • 00:05:16 we added alert primary and as you can
  • 00:05:18 see this is blue now we also can use
  • 00:05:22 alert secondary if we do that then we
  • 00:05:26 got the secondary base color bootstrap
  • 00:05:28 defines and that's this grayish color so
  • 00:05:30 that's kind of a neutral message you you
  • 00:05:33 might want to display sometimes more
  • 00:05:36 interesting maybe are the special
  • 00:05:38 classes like success now as you might be
  • 00:05:42 able to guess this gives us a green
  • 00:05:44 alert so this is obviously a great
  • 00:05:46 choice if you want to show some success
  • 00:05:48 message to the user
  • 00:05:49 besides success we also got danger and
  • 00:05:53 danger will give the user a red alert so
  • 00:05:57 this is what you want to use when
  • 00:05:58 foreign validation fails something like
  • 00:06:01 this we also have alert warning this
  • 00:06:05 will give us a yellow alert so that's
  • 00:06:07 interesting if you don't have an error
  • 00:06:09 yet but you maybe want to notify the
  • 00:06:12 user of something when at well give a
  • 00:06:14 warning to him we also have info this is
  • 00:06:18 again a bluish color so it's actually
  • 00:06:20 the same color as primary hat
  • 00:06:23 if you have a look at the color codes
  • 00:06:25 there and now we add primary it primary
  • 00:06:32 again if I reload a slightly different
  • 00:06:36 color I guess it's a different blue but
  • 00:06:38 it's also blue so primary or info would
  • 00:06:41 be the colors though important the
  • 00:06:43 primary color uses the primary theme
  • 00:06:45 color and you can actually override
  • 00:06:47 theme colors when you're building
  • 00:06:50 bootstrap from source so to say when you
  • 00:06:52 embed it into your build workflow
  • 00:06:54 therefore primary is not always blue
  • 00:06:57 that's important to keep in mind
  • 00:06:58 now we also got light and dark light
  • 00:07:01 will have a white background dark will
  • 00:07:03 have a grayish background and this is
  • 00:07:05 how you can work with alerts that's
  • 00:07:07 really most important thing
  • 00:07:08 to them now you can also add two special
  • 00:07:12 things to alerts one is links you can
  • 00:07:15 add links so maybe we add a link here
  • 00:07:19 click me and let's have a look this is a
  • 00:07:23 normal link leading nowhere in our case
  • 00:07:25 if we save that and we reload it looks
  • 00:07:30 like this like a normal bootstrap link
  • 00:07:31 with that bluish color now maybe you
  • 00:07:34 want to have a color that fits the alert
  • 00:07:36 you are having and you can get that by
  • 00:07:39 adding a special class to that link you
  • 00:07:41 can simply add alert – link as a class
  • 00:07:44 in there with that if you save that in
  • 00:07:47 reload now you see it actually looks
  • 00:07:50 different it now is a dark blue bold
  • 00:07:52 text and if we change the alert – let's
  • 00:07:55 say success you will see that this
  • 00:07:58 doesn't stay blue but now it's dark
  • 00:08:00 green so this adjusts the link to the
  • 00:08:04 alert type which is very helpful of
  • 00:08:06 course now you can also use H 1 and so
  • 00:08:10 on text in there you can for example add
  • 00:08:13 let's say let's say a h2 tag and you can
  • 00:08:16 give this a special class alert heading
  • 00:08:19 there you could say this is an alert and
  • 00:08:23 then you could simply add a paragraph in
  • 00:08:27 here with no class you don't need to add
  • 00:08:30 classes here to use them and this will
  • 00:08:33 now give you a special heading which
  • 00:08:34 also takes the color of the alert and
  • 00:08:36 then on normal text now important you
  • 00:08:39 can of course use any HTML element in
  • 00:08:42 there you can add lists and an alert if
  • 00:08:44 you want you can add the margin helper
  • 00:08:48 classes bootstrap offers so everything
  • 00:08:50 you can use outside of an alert
  • 00:08:53 basically can be used in there too of
  • 00:08:55 course you always have to test if it
  • 00:08:57 looks good and if it makes sense to be
  • 00:08:58 inside of an alert now the last thing I
  • 00:09:01 want to show you is that you can
  • 00:09:03 configure bootstrap or add something
  • 00:09:05 such that these alerts can automatically
  • 00:09:08 be dismissed now you can of course
  • 00:09:10 always do that manually with your
  • 00:09:11 favorite JavaScript library or framework
  • 00:09:14 but let's say you render this alert as
  • 00:09:17 part of a server-side rendered page
  • 00:09:19 which is returned by your Express or
  • 00:09:21 level
  • 00:09:21 in this case you typically want to or
  • 00:09:25 you might want to be able to remove the
  • 00:09:27 alert without adding a front and
  • 00:09:30 framework though that is possible too
  • 00:09:32 now to make this dismissible you first
  • 00:09:35 of all need to ensure that you're
  • 00:09:36 importing these scripts at the bottom
  • 00:09:39 you need to bootstrap javascript files
  • 00:09:41 and then you need to add something to
  • 00:09:43 your alert and that's something first of
  • 00:09:46 all is a button which allows you to
  • 00:09:48 remove the alert
  • 00:09:49 so let's simply add a button here
  • 00:09:54 let's give it type button and let's then
  • 00:09:58 simply add there's a cross in there
  • 00:10:01 basically so we can do this by adding a
  • 00:10:03 span and add the times character and
  • 00:10:09 let's add Araya hidden here to true to
  • 00:10:13 indicate that this won't be real content
  • 00:10:17 now if we save that and we go back we
  • 00:10:20 see that cross button here now doesn't
  • 00:10:22 look too beautiful does it now what we
  • 00:10:24 have to do is we have to add alert this
  • 00:10:28 miserable to our alert here and to the
  • 00:10:32 button you have to add a class to the
  • 00:10:34 closed class now if you do that and you
  • 00:10:37 reload you see that the cross is here at
  • 00:10:40 the bottom now this simply happens
  • 00:10:42 because the button of course is an
  • 00:10:44 inline element we can position it at the
  • 00:10:47 top of our alert though and now it's
  • 00:10:50 here in the top right corner which looks
  • 00:10:52 a lot better now one thing you'll notice
  • 00:10:55 though is if you click that button
  • 00:10:56 nothing happens because we haven't
  • 00:10:59 really connected this alert in this
  • 00:11:02 button to the bootstrap JavaScript file
  • 00:11:04 we do this by adding a special attribute
  • 00:11:07 to the button the data
  • 00:11:09 – dismiss attribute this will be
  • 00:11:12 automatically watched by the bootstrap
  • 00:11:14 javascript file and we can simply add
  • 00:11:16 alert as a value here and this will then
  • 00:11:20 tell the bootstrap JavaScript code
  • 00:11:22 essentially that whenever des is called
  • 00:11:24 the alert will be removed with that if
  • 00:11:29 we now reload now I can click this
  • 00:11:31 button and remove the alert now as you
  • 00:11:33 see it disappeared instantly we can
  • 00:11:35 change this behavior by adding the fade
  • 00:11:37 show classes here to the overall alert
  • 00:11:40 so next to alert and alert success or
  • 00:11:42 whichever you have and now it fades out
  • 00:11:45 as you can see so this is how you can
  • 00:11:47 make your alert dismissible without
  • 00:11:50 adding any custom JavaScript code that
  • 00:11:53 were alerts let's now move on to modal's
  • 00:11:56 now what is a modal to begin with a
  • 00:11:59 modal is this pop-up like window which
  • 00:12:02 does not open a separate browser window
  • 00:12:04 but which simply renders in front of
  • 00:12:06 your other content on your page now
  • 00:12:09 let's add such a modal to our page I'll
  • 00:12:12 add it in front of my grid here it will
  • 00:12:14 be in overlay anyways and how do we add
  • 00:12:18 a modal well we simply add a div that's
  • 00:12:21 always a good start when using bootstrap
  • 00:12:22 I guess and then we need to assign the
  • 00:12:24 modal class to that div now next we can
  • 00:12:29 define some content inside of that div
  • 00:12:32 we can also add some accessibility
  • 00:12:34 values here you can always find them in
  • 00:12:37 the details bootstrap documentation
  • 00:12:38 you'll find linked in the video
  • 00:12:40 description or below this video to be
  • 00:12:42 precise so inside that modal div we now
  • 00:12:46 have to define the content of that modal
  • 00:12:48 and for that turns out that we actually
  • 00:12:50 need another wrapping div for
  • 00:12:53 positioning bootstrap tasks behind the
  • 00:12:55 scenes and that should be modal – dialog
  • 00:12:58 modal dialog now takes the different
  • 00:13:00 modal components we have to be precise
  • 00:13:03 it takes yet another wrapper needed for
  • 00:13:06 the padding inside the modal which is
  • 00:13:08 mole – content now we can finally start
  • 00:13:11 adding content for example we can add a
  • 00:13:13 modal header now a modal header is
  • 00:13:15 optional you don't have to add one it
  • 00:13:18 allows you to provide a caption a title
  • 00:13:21 for your modal and also a close button
  • 00:13:24 but you can close the modal differently
  • 00:13:26 – so here is the modal header now let's
  • 00:13:29 add h2 tag in there where we can say
  • 00:13:33 please confirm and this h2 tag should
  • 00:13:38 also receive a class the modal – title
  • 00:13:40 class which will style this in a nice
  • 00:13:43 way now we can add a button here as I
  • 00:13:46 said which allows us to close the modal
  • 00:13:47 it will again hold
  • 00:13:49 span with that times characters with
  • 00:13:52 this cross character we saw before
  • 00:13:53 this button is a type button and it will
  • 00:13:58 receive the closed class just as you saw
  • 00:14:01 in the alert it basically is the same
  • 00:14:03 but we add here now with that we got a
  • 00:14:07 title here now if we save everything and
  • 00:14:09 we reload we don't see a modal well
  • 00:14:12 we'll come back to that in a second this
  • 00:14:15 is our modal header now before we try
  • 00:14:18 seeing it let's also add a modal body
  • 00:14:21 now you always should have a modal body
  • 00:14:23 that is the core content you display and
  • 00:14:25 in there you can use the bootstrap grid
  • 00:14:28 you can construct a form you can do
  • 00:14:30 whatever you want
  • 00:14:31 here I'll simply add a paragraph where I
  • 00:14:33 say this is the modal body do you like
  • 00:14:38 it and to allow the user to give us an
  • 00:14:42 answer we can also add a modal footer
  • 00:14:44 which is optional again now in that
  • 00:14:46 modal footer we could add more buttons
  • 00:14:48 and these buttons could also be used to
  • 00:14:51 send data to the server and close the
  • 00:14:53 modal just close the modal in case of a
  • 00:14:55 cancel button stuff like that now
  • 00:14:57 actually I'll dive deeper into buttons
  • 00:14:59 and forms in the next video in this
  • 00:15:01 series but for now let's simply add a
  • 00:15:03 basic button let's add a confirm button
  • 00:15:07 here it's the only button we'll have
  • 00:15:09 let's say and that will also receive
  • 00:15:11 type button which by the way is never
  • 00:15:14 required for this to work just
  • 00:15:15 semantically require or make sense and
  • 00:15:17 let's give it a class of BTN and then
  • 00:15:20 BTN secondary maybe now with that we got
  • 00:15:24 a basic modal again more on buttons in
  • 00:15:27 the next video now we still can't see it
  • 00:15:30 if I reload that there's no modal the
  • 00:15:32 reason for this is that the modal by
  • 00:15:33 default isn't visible it typically is
  • 00:15:36 shown upon a certain action now how do
  • 00:15:39 we show it we need JavaScript for that
  • 00:15:41 and you can always add the classes that
  • 00:15:44 will show it manually we'll inspect the
  • 00:15:46 modal to see which these are but for now
  • 00:15:48 let's simply add a button to show it so
  • 00:15:50 in my grid and I just recognized I am
  • 00:15:54 inside my grid so let's add that modal
  • 00:15:56 outside of the grid container it would
  • 00:15:59 work otherwise cube but it's not read us
  • 00:16:03 makes sense semantically so let let me
  • 00:16:06 get out of the grid and in that grid
  • 00:16:08 I'll now add a new row and a new column
  • 00:16:10 and in that column I'll simply add
  • 00:16:12 another button and for that button I'll
  • 00:16:14 say show mul now to show that first of
  • 00:16:19 all let's give it to type button tomb
  • 00:16:20 now let's also give it some button
  • 00:16:23 classes button button primary maybe to
  • 00:16:25 give this some nice styling now to show
  • 00:16:28 the modal I'll add another data
  • 00:16:30 attribute data toggle and here I will
  • 00:16:34 say modal this also is automatically
  • 00:16:37 picked up by bootstraps JavaScript code
  • 00:16:39 and it will recognize that when we click
  • 00:16:42 this button we want to show a modal
  • 00:16:44 however we also need to be clear about
  • 00:16:46 which modal and for dad will give our
  • 00:16:49 modal and ID so here on that div element
  • 00:16:52 which has two class model I'll also add
  • 00:16:54 an ID and you can set up any ID you want
  • 00:16:57 like demo modal again you're totally
  • 00:17:01 free to choose whichever ID you want now
  • 00:17:03 take that idea and go down to your show
  • 00:17:06 modal button there and on that button
  • 00:17:08 you now add data – target this is
  • 00:17:11 required by bootstraps JavaScript code
  • 00:17:13 to understand which modal you want to
  • 00:17:15 show or hide so now we simply add that
  • 00:17:18 ID here with a hashtag in front of it
  • 00:17:21 because we actually passed the full CSS
  • 00:17:23 selector and now we can reload we see
  • 00:17:26 that button if we click it we see our
  • 00:17:29 modal and this is how it looks like now
  • 00:17:31 if you click that button here nothing
  • 00:17:33 happens if you click that cross nothing
  • 00:17:35 happens if we click the back drop it
  • 00:17:37 closes low so that's a default behavior
  • 00:17:39 clicking the back drop removes the modal
  • 00:17:42 now before we make these buttons work
  • 00:17:45 let's quickly inspect this modal here's
  • 00:17:47 our modal class or our modal div you see
  • 00:17:50 the modal div actually wraps or spans
  • 00:17:53 the entire size of your page which makes
  • 00:17:56 sense you want to have it on your entire
  • 00:17:57 page now they're on that modal div you
  • 00:18:00 can also see that we got a show class
  • 00:18:04 now we didn't add that if you inspect
  • 00:18:07 the modal in our code there's just a
  • 00:18:09 modal class no show class this is
  • 00:18:12 actually the class which is added when
  • 00:18:13 we run that JavaScript code when you
  • 00:18:16 click that but
  • 00:18:17 now this show class is part of what
  • 00:18:19 shows the small modal besides the
  • 00:18:21 display:block property if I uncheck
  • 00:18:24 display block and I remove the show
  • 00:18:27 class and set this play to non here ever
  • 00:18:30 not just remove it set it to non
  • 00:18:33 then the modal is gone and this is what
  • 00:18:35 you can do with your own JavaScript code
  • 00:18:37 to in case you don't want to use
  • 00:18:39 bootstraps JavaScript package you can
  • 00:18:41 add this class and set the style with
  • 00:18:43 you react angular whatever you're using
  • 00:18:45 or vanilla JavaScript know the modal is
  • 00:18:48 still there as you can tell now this is
  • 00:18:50 this modal backdrop diff which was added
  • 00:18:52 automatically by the JavaScript code we
  • 00:18:54 executed because we didn't add this here
  • 00:18:56 we don't have the class here so you will
  • 00:18:58 have to add a div with a class modal
  • 00:19:01 backdrop and show manually – just in
  • 00:19:04 case you want to rebuild this without
  • 00:19:05 using the bootstrap JavaScript package
  • 00:19:07 with that let's reload the page and open
  • 00:19:10 again though would be nice if these
  • 00:19:12 closed buttons would work now again you
  • 00:19:14 could use your own JavaScript
  • 00:19:15 implementation to manually set this play
  • 00:19:18 to non and remove the show class and
  • 00:19:20 remove the backdrop but of course we can
  • 00:19:22 also make these buttons work and we do
  • 00:19:24 so by going to these buttons and on the
  • 00:19:27 button we simply add something here on
  • 00:19:30 our modal we simply add data dismiss
  • 00:19:35 again to our button and this time we
  • 00:19:38 specify modal as a value here before we
  • 00:19:42 specified alert to close an alert now we
  • 00:19:44 want to close a modal and by the way you
  • 00:19:46 can only have one mole at a time
  • 00:19:48 multiple nested modal's are not
  • 00:19:50 supported so with that we added this
  • 00:19:53 dismiss trigger – well dismiss any mole
  • 00:19:56 or dem modal we have let's also add the
  • 00:19:58 same for the button in the footer and
  • 00:20:00 now if we reload you see if I click
  • 00:20:03 these buttons we close the modal and
  • 00:20:05 again this could be done with your own
  • 00:20:07 JavaScript – that is how the bootstrap
  • 00:20:10 modal works in its core now in the
  • 00:20:12 official Doc's you'll learn more about
  • 00:20:14 what you can put inside of a modal that
  • 00:20:16 you got alternative classes if you need
  • 00:20:19 a bigger or smaller modal that you can
  • 00:20:21 also create a modal with scrolling
  • 00:20:23 content it will scroll automatically
  • 00:20:25 then and that you can vertically Center
  • 00:20:27 a modal now one thing I want to show you
  • 00:20:29 right away now
  • 00:20:30 is if we click that the motor just pops
  • 00:20:33 up it's there it doesn't animate in and
  • 00:20:36 would be nice if it wet and actually
  • 00:20:39 that is a simple default behavior you
  • 00:20:41 can add with just the addition of one
  • 00:20:44 class on our mode layer besides just
  • 00:20:48 adding modal you can also add fate and
  • 00:20:50 this will make sure that the modal fades
  • 00:20:52 in with that edit if we reload now
  • 00:20:55 you'll see it slides down and fades in
  • 00:20:57 and it always removed like that this
  • 00:20:59 certainly looks nicer and therefore is
  • 00:21:01 something you should consider adding to
  • 00:21:03 any modal you display that's actually it
  • 00:21:06 for modal's I hope this was helpful for
  • 00:21:09 modal's and alerts I should say I hope
  • 00:21:11 this was helpful and allows you to add
  • 00:21:12 these features to your next project in
  • 00:21:15 the next video of this series we'll dive
  • 00:21:17 into forums and buttons and see what we
  • 00:21:20 can do with these see you there