Font Classes in Bootstrap

today we're going to talk about how good shot goes into your website and change the default styling of your text inside the browser because the browser does actually have a default styling when it comes to text and when you add pushed up to your website actually goes inside the code and override the default styling of the browser and answers own default styling so today we're going to talk about some of different styles we have inside text elements when it comes to bootstrap and we're also going to talk about some different tags that we have inside bootstrap that allows you to text into some cool effects so what we're going to do his you guys can see inside my website here I deleted all the concert we have inside container fluid and i went ahead and added three different header tags and a paragraph tag now what I want you guys to notice is that inside our website over here the head of tax actually changed size because the bootstrap coating inside the input stylesheet up here changes to text inside your browser so what we can do is we can actually go ahead and add a couple tags that would actually make cool effects inside the text inside the website so if i want to take for example this head up here inside the head of one tag i could actually going to add some more text could actually go and see it there's is header 1 and i can actually go inside my coat here and i can add a tag called small i'm going to open up the taxi I'm going to write small and i'm gonna close off the tag right after hit a one like so and if i refresh the browser guys will notice that we get a different type of styling for the h1 tag because we have two small element around it so this is just to show gas then we have head attacks inside the boot shop code you can also add some kind of subtitle to our headers even though it's still an h1 tag by adding the small tag around the text so when it comes to these cool effects you can add inside a website i'm just going to beat the head attacks here and just have the paragraph tag now we can actually do here is we can add some of these tags run text to make some really really cool effects using bootstrap so the first thing we're going to talk about is the one called mark if we were to take this text down here that says this is some text and i want to highlight this text I can use to mark tag inside bootstrap going to go ahead and put it around the text here refresh and as you guys can see for work soon benefits is that we get a highlighted text at the end here so we can actually highlight takes inside bootstrap now copy this paragraph and add another paragraph below it refresh you guys can see you also get inside bootstrap default margin underneath the text so there's actually some spacing between attacks which is also something that will shut does now I want to change the mark tag into something else let's say I want to do something called an abbreviation it was a BB r which is when we use some kind of radiation inside the website so let's actually go ahead and just move this up to text and the user doesn't know what text actually means so what I'm going to do inside the abbreviation tag i'm going to add a title and say text means this is a paragraph you know just to not confuse the reader going to save this refresh the browser and as you guys can see we now get this little dotted line underneath text it was actually hover my mouse cursor on top of it it now says inside a small text window this means this is a paragraph so we can actually you know tell the user what we actually mean when we abbreviate as a specific word let's say I used to love inside the website which I would never do myself but let's say i use law and then we have a cold person visiting our website that don't mean what LOL means they can be told inside this hover what exactly low means now if you want to go back inside my website here and just go ahead and copy the paragraph tag one more time we can actually go ahead and add something called a blockquote now what this means is that lets say i want to quote a specific person what i can do is i can go to say hi there and then say that this is some text is a quote by some specific person i can actually go ahead and change the mark into a block quote like so and i can go ahead and show you guys what this one does it actually asked this little quote styling to it so it actually looks like a code again we connect to change the styles we want to inside the cs5 have up here if I need to so we don't have to stick with the default sizes in type of shot just FYI and again I could actually use FYI to add an abbreviation to it because it means for information get it but let's take a block quote and I want to actually add who actually set this inside the block quote i can go inside the block cortex at a footer tag and then say we have a prison called Daniel nielsen which is me as you guys will see it now changed to styling so we get this all you know by Daniel Nelson what would you actually not need to add the dash here i just noticed like so so now we know actually who quoted this text now something has not been looking at this code here you know with all the mark taxes depreciation text block quote and say well Daniel he said we're going to do something really cool inside pushover when it comes to text and this right here is kind of normal it's not really you know awesome but it's kinda ok so let's actually jump into some of the more cool features we have inside bootstrap when it comes to using tags so let's say I have a website that teaches on how to do coding for example HTML tutorials and i want to add code to my website well right now instead of having to default starting all the code i could actually go ahead and use bootstrap default code tag you want to show that this right here the text i'm typing is code so what I can do inside my heart attack here as i can actually go ahead and add a paragraph tag and say this is some code or some text showing how to code cola next line and then what i can do it out here they can actually add the code tags we have inside bootstrap and then i can actually go ahead and just copy some of the stuff we have a PM just going to copy the the first paragraph it inside with the highlighted text and paste it inside my coat X so what would you actually get inside the browser is you don't actually tagged that shows specific cope so you got to actually see we get this default styling of pink inside the browser which indicates the right now actually coding of course we could dance darling of this is wanted to buy just you know inspect an element and see was styles change inside of here in order to change the colors but this is how we change the text to show that this is actually cooked now the next cool when we're going to learn is how to show keyboard shortcuts inside a website so what I'm going to do is I'm going to go and add another paragraph tag and I'm going to go and write something like that is actually a tech website i'm going to show how to reduce your questions that photoshop i can go and say well to create a new layer comment click ctrl + shift + and to create the layer like so so we can actually doing here to connect your wrap this specific code down here that actually shows what you need to click on inside something called a keyboard description so let's actually going to add that time we're going to say kbd and then wrap it around the text like so and go inside the browser and that's you guys can see we do actually get this keyboard shortcut looking code if we assume out that help to use what they need to click on the keyboard in order to get a specific shortcut which is kind of nice now i'm going to go to see you guys two more things you can do with text in here does actually bunch more guys can do and i'm going to go to leave a link for you guys if you want to see how to do more stuff inside text elements using bootstrap but for now this actually going to do two more so inside my coat here i'm just going to copy the top paragraph tag with the mark tag place it down and just delete the mark tag like so and inside this text i'm going to go ahead and wrap it inside a paragraph that has a specific class inside the Telegraph i'm going to say we have a class and this one is going to be called text dash something and we do actually have quite a few of these so i can actually go and say well let's say we have a success text like so what you got some notice that inside the browser to get a green text so this one is some kind of success like you did something you just signed up to use inside the website now it shows the green text that says the user has been signed up but we can also do is let's say that the user actually had something wrong when he tried to set himself up as we can go ahead and say we have a warning inside the text instead of having a success text as you guys can see now change of some kind of dominoes gray is red colors that actually has some kind of warning you know we need to need to do something before it can actually continue signing yourself up we can also do someone calls danger which of course is going to be read which means that was ok definite did something wrong and you tried to sign yourself up so we have a bunch of these different styling in here we can use for text notifications to color into some kind of you know something that indicates something specific like danger or success or if you want to mute something you know make the the text less noticeable we have a bunch of these and again the link in the description will tell you guys some more you know colors that you can act after the text now the last time going to learn here is something that actually change the background color of your text i'm going to go and create another paragraph and instead of thing text danger going to lead it and i'm going to go to say we have something called a BG dash which means that we have some kind of background teens you know in some kind of color so what I can also do hear something similar to the previous 1i can go and say we have a success meaning that right now for were to refresh the browser you guys can see we have some kind of success message with a green background now this might be even better if you want to have some kind of you know you just signed up a new user and and have a message writing inside the browser because this one is five more noticeable we can also do something very similar to the previous one like saying have a warning again if someone have something in the forgot to write something then we get this brown is you know bright color you can also do the danger color like text above it which means we now get this red color so this is how we can actually change some of the stylings or some of the effects we have on text inside butcher hope you guys found this useful and i'll see you guys next time