Create a Bootstrap Invoice for Security Quickly and Easily

Bootstrap invoice for Security

today we're gonna learn how to create messages using bootstrap inside our websites and as you guys can see in front of me here decides to scratch the website we've been building for the past couple episodes because it wasn't very pretty so instead what we're gonna go into at the end of this series is we're gonna go and try and build an entire front page using bootstrap just to give you guys an idea about you know building an actual website using bootstrap and the end of the series here so what we're going to go into today is just focus on creating messages now I want to say messages inside bootstrap I'm talking about a block that has some text inside of it and then depending on the message the blog is going to have a certain styling as well as the text inside of it and if we were to have links inside the block it would also have a certain styling so inside our code we're gonna go ahead and start up by going inside our body tanks as you guys can see I have a container inside my body tag just so we have the messages inside the middle of the screen and inside this container I'm gonna go and create a dip box now inside the dip box I'm gonna go and write some kind of text so I could actually say success just to give you some kind of message you did well like so now for what to go inside my dip tag I can actually go ahead and add a class that exists inside bootstrap called a well now a well is when we have a regular piece of text that has a block around it so basically all creating here is just a very basic message that doesn't indicate a warning or anything like that so the way we can decide the size of this well is by saying well - and then the size of it so right now if I want a small message I can go ahead and say SM then I can refresh the browser and you guys to notice we get a small message inside the browser again if I were to go back inside my code and change it to LG it stands for large refresh you guys can see we get a bigger padding around it so this is a basic way to illustrate text inside some kind of message now forward to include some kind of styling to it and actually indicate some kind of like danger or success I can go ahead and tint this up a little bit so instead of writing a well which right now is just a standard styling for adding padding around text I can go ahead and write alert instead of writing well LG we can go ahead and write what kind of styling one tab inside this message so right now if we want to have a success message like I have here I can go and say alerts - success if it were to refresh the browser you guys can see then now we get a green success message and again if I want to make something a bit more bold I can go back and stop my code and change my success text by adding a strong HTML tag around it so I can go ahead and just copy this around it like so and as you guys will notice now we get a strong message inside a browser now for which include a link inside this message here let's actually say we want to say success you did well here is your price or something like that we can actually go out and say we want to include an anchor tag inside the message here and inside the anchor tag can say here is your price like so and if we were to go inside the browser now you guys will notice that we don't really have the default bootstrap styling or at least this time the match is this message here so what I can then do is I'm gonna give this anchor tag a class so I can say class set - alert - link and now for what you refresh the browser you guys can see it actually matches what we just did in here so now we get a dark greenish color that indicates a link so if I were to go back inside my styling here can actually go inside my alert dip box and change it from success to danger if I wanted to go back inside my website and I got some notice that the entire styling team's inside my message here now the next thing we can do to this message here so we can actually be able to dismiss it so we were to click on some kind of X icon we can actually get rid of it and the way we do that is by going back inside our code and inside my div class here called alert alert danger I'm gonna go ahead and add a class called alerts - dismissible like so and then inside the div tag at the first line I'm gonna go and include a anchor tag and inside the anchor tag I'm just gonna write has tag inside the link because we don't want to link to anywhere and then I'm gonna go and include a class inside this anger tag which I'm going to call close then we're gonna go and include a attribute called data - dismiss which I'm gonna go ahead and set to equal to alert which simply indicates inside bootstrap that this is a alert dismiss fee - including inside this anger tag and then the last attribute we're gonna include is called area - label and we're gonna go ahead and set this one to equal to close so this is a closing button inside this message here now inside the actual text I'm gonna go and say we have a m % times semicolon which is simply a simple that is basically an X we could also just set X to the 1/2 but this is the actual symbol for it so now for words to save this and actually go inside my browser so you guys will notice then now we have a X symbol we can actually click and once I click it it disappears which is a really nice feature inside you know messages now if you guys think it disappeared too fast we can actually change it by making it fade out instead so if we were to go back inside my code I can instead go and stop my alert - dismissible and say we want to add a fade space and give a word - then go back to my website refresh you guys can see that now it fades out so these are different ways we can actually include messages and actually make them disappear you know with an actual user input inside your website hope you guys enjoyed and I'll see you guys next time