Bootstrap 5 Crash Course Tutorial #5 - Utility Classes

okay then gang so bootstrap 5 provides us with an increased amount of utility classes to change things like position spacing shadow border border radius font weight etc on any elements and you can find a full list of all of the utility classes right here on the utilities section of the docs and in fact we've already seen a couple of them in action for the font colors and the font weights let's take a look at a few more examples in our page okay so there's a few different utility classes i want to show you so i've split this page up into sections first of all we'll look at margin and padding then borders then box shadow and then finally font weight and this is not going to be a full set of utility classes i'm going to show you here i'm just kind of introducing you to them there are more but we will probably use more of them that are not here in the future in the rest of this series all right then so let's start off with margin and padding and these are the ones that i probably use most often just to give a bit of extra spacing to the elements so let's start with a div and i'm going to give this a few classes first of all i'll say bg hyphen primary just to give this a background color and we'll come back to the classes in a second then i'm going to say small margin and padding so the way we add margin and padding is by using very simple classes for margin we just say m and then hyphen whatever strength we want to use and that strength can be one to five so if i say one then it's a small margin if i say five it's a large margin so let me say m one first of all and if i go over here you can see this very small space around this blue box if i inspect the element we can see down here the margin is not 0.25 ramps so that is the m1 class now if i change this to m2 we're going to see this increase let me show you now it's 0.5 rems so it doubles that margin and we can see that if i go to something like m5 and save this then we can see it's got a much bigger margin now it's three ram all right so it goes from one to five the same is true for the padding let's change this back to m1 and we'll do p hyphen one as well and by the way this applies margin and padding in all directions top right bottom left so if i save this now we'll see the padding inside the blue box and again that's 0.25 rems for p1 all right so let me duplicate this just so we can compare it to m5 and p5 as well so let's do that and in here we'll say large margin and padding save that and we can see the difference between these two things all right then so let's do some more examples i'm going to do another div down here and give it a class again of bg hyphen primary and what i'm going to do is say margin in y direction padding in x direction so remember y is the up and down direction x is the left and right direction so what i want to do is only apply a margin in the y direction top and bottom and to do that i can say m y and then the strength so my hyphen one would be a small margin top and bottom let's do something like three which is kind of the medium ground and also i want to apply padding in the x direction just going left and right and to do that i can say px hyphen and then whatever strength which is going to be five so if we save this and preview we can see now we've got a lot of padding left to right but no margin but we do get the margin top and bottom all right cool so let's do one more example for this i'm going to create div down here again i'm going to give this a bg hyphen primary color and then inside i'll say margin and padding for each direction so what if we want to apply padding and margin to each direction separately for example i might only want to apply a margin top or it could be that the margin top is different from the margin bottom and the margin right well all we do is use a series of different classes for margin top it would be m t and then hyphen strength for example three for margin bottom and b hyphen four for the strength and then if we want it to the left and right we don't say m l or m r instead we say ms which is margin start for the left and we could apply something to that or m e for margin end which is to the right and we could apply strength to that i'm not going to do that i'm going to apply that to the padding instead so i'll say p s for padding start and that's going to be five and then i'll say p t for padding top which is going to be four p e which is the n to the right two and then pb which is the bottom we'll just say one all right so now if we save this we can see that the padding and the margin is going to be different in each direction in fact let's do margin start as well as five and we'll say margin end as one just to apply margin on the left and right that's different as well so we have a tiny margin over here on the right and a bigger margin on the left so these are really useful utility classes for adding margin and padding to any element all right then so let's move on to borders so then i'm going to come down here and do a div with a class of margin hyphen 3 so all directions just to give this div some space around it and also p hyphen 3 to give it some space inside and also i'm going to give it a class of border and we'll just say default border for the text so if we save this we can see now we get this light gray border around this div so that's just by applying this one class right here we get that little border we can also customize this so i could say div and then again we'll say m hyphen three and also p hyphen 3 to apply the margin and padding then i just want to apply border to the top so border hyphen top this time and also i want to apply a border to the right as well so i can say border end for that so we'll say individual borders and this could be as well border bottom and border start if we save this we can see the top and the end over here all right then so let's do another example we'll say div m hyphen three also p hyphen three and then this time border hyphen start have it at the start and also i'm gonna colorize this border hyphen success so i can use any of those theme colors to colorize the border as well so inside here we'll say border success color art start save it and preview over here and we can see the green color just on the left for the border all right so let's do some more examples down here div dot m hyphen three dot p hyphen three and then i'll say border start again border danger this time so it's the red color and also i want to make it thicker and i can do that i can say border hyphen and then a strength one to five so five would be the thickest one would be the thinnest so let's do oops i've made a complete error right here let me get rid of all these and carry on with this so border hyphen danger and then dot border hyphen five tab that's better and in here we'll say thicker border save it and preview and we can see that nice thick red board on the left all right so let's make now maybe a rounded border so we'll say div dot m hyphen 3 dot p hyphen three again and then this time i'm going to say rounded oops rounded if i can spell it then border then border hyphen five so what we're saying here is apply a border this is a rounded element and a thickness of five so pretty thick so rounded corners right here save that and preview and we can see rounded corners around the edge of the border let's do one more example i'm gonna say div dot m hyphen three dot p hyphen three dots rounded hyphen pill we'll see the difference in a second border and then border hyphen five and rounded pill corners save that and if we take a look at this you're gonna notice it's much more rounded now at the left and right so it makes it into that kind of pill shape and that's this class right here rounded pill and by the way that's not just for borders you don't have to have a border we could take this off and just give it a background colour for example i could say bg hyphen primary like this and it would still be around it it's just that we have the border the border gets that rounded effect as well okay all right so that's borders let's take a look now at box shadow so i'm going to say div i'm also going to apply m hyphen 3 p hyphen 3 to this then i'm going to use a shadow hyphen small so that's a small box shadow so elements with small box shadow like so save it and preview you might just be able to see this box shadow if you zoom in i can see it right there let's do a larger one so let me copy that and i'm going to change this to lg and change this to large save that and preview and we can see a much larger box shadow down here it kind of sticks out from the page a bit more and if we just take off that it's kind of like a medium shadow so if we preview that we can see a medium shadow now all right so that's about it for box shadow pretty simple next i want to show you a font weight now we've already seen one of these for bold text and it looks something like this p f w hyphen bold so font weight hyphen bold and that would be bold text i'm also going to do some other examples so let me duplicate these a couple of times so we've got bold and then i'll say bolder which is bolder than bold then we'll just have some normal text so let me change this to normal so no classes just so we can compare it i'll change this to bolder as well then after that we'll do a light variation and we'll change this to light then we'll say font style instead of font weight and this is going to be italic like so and do one more and we'll say font style italic and also apply a font weight of light so we can double up on those things we can have font weight and font style so let's change these italic and then down here italic light text all right so let's preview scroll down here bold text bolder text normal light italic and italic light so i know that might have been a bit boring but i just wanted to show you all of these different utility classes available to us that we can add to elements to apply these different styles and they are really useful when we want to customize the look of the components a bit more and like i said there are a lot more utility classes available i've just kind of scratched the surface so definitely check out all of these utility classes in these different sections and we will probably be using more of them as we go forward through the rest of this course

Channel: The Net Ninja

Views: 19,912

Keywords: bootstrap, bootstrap 5, bootstrap 5 tutorial, bootstrap tutorial, tutorial, bootstrap 5 crash course, bootstrap crash course, what is bootstrap, bootstrap 5 new features, crash course, responsive design, responsive development, CSS, bootstrap sass, bootstrap setup, install bootstrap, bootstrap getting started, bootstrap guide, bootstrap 5 guide, bootstrap 4 vs bootstrap 5

Id: nCeHeA7IsvU

Length: 12min 15sec (735 seconds)

Published: Thu Jun 17 2021