Bulma Tutorial (Product Page Build) #3 - Spacing & Containers

Key Takeaways

all right then gang so bulma comes with a few classes that we can use to control the spacing of elements now first of all we have the margin and the padding utility classes and these are very simple classes that can apply different amounts of both margin and padding in each direction so i've got three h1s right here and we're just going to apply some of these different spacing classes to each of these so say for example i want to apply some padding to this first one at the top in the y direction and the y direction is up and down well to do that i'd say p for padding y for the y direction and then hyphen and number from one to six now six is going to be the most padding and one is going to be the least amount of padding so if i say py6 that should be a lot of padding in the y direction and if i inspect this and hover over it we should see the green patches let me just zoom this down if i hover over this one the green patch is there that is the padding if i change this to py1 then there's not going to be as much padding as we can see right there okay so let's change this back to py6 and if i want to apply margin in the y direction this time i just say m y then a number again from one to six so i could say two and save that and now if i hover over this the green is the padding and the orange is the margin right so if i change this to six then we should get a much bigger margin like so all right then so we can also do this in the x direction so if i come down here i'm going to say px for padding in the x direction hyphen 4 and i'm also going to do margin in the x direction so mx and that's going to be hyphen 6. so if i save this the second one is going to have padding and margin in the x direction not in the y direction so if i hover over that we can see the green and the orange squares all right now if i want to apply padding on margin in the y direction as well as the x i can do that we can just mix them up i could come over here and say py4 and i could do m y as well if i wanted to save that and if we hover over now we can see we've got padding in the y direction as well as the x direction okay so very simple classes to apply padding margin in the x direction and the y direction as well so what if we want to apply margin or padding in just one of the directions so for example the top not the bottom as well so y wouldn't work because y is to the top and the bottom so to do that we can use m t for margin top and then hyphen and number again one to six so that's going to be four i could also say something like mr for margin right hyphen four then i could say maybe pb hyphen six for padding bottom and then pl or ml for the left side and that's going to be of strength three so we can use t for top r for right b for bottom and alpha left as well and they can be used with padding and margin if we save this and then hover over this we can see the margin is the top and the right and the padding is left and bottom all right so there's also a couple of other ways to apply spacing to elements the first way is to use a section class to denote a new section of content so i could for example create a section tag and give this a class of section as well and by the way this is emit in action if you use a vs code and it comes baked into it and if you want to quickly create some kind of element with a class you can type up the element name then a dot then the class name then press tab and it's going to create that tag for you with that class so we're going to use this section clash right here and what that does is automatically apply some margin and padding to this particular section so if i do a paragraph tag inside here and say lorem and then i'm going to say 30 and then tab to get me a load of lorem ipsum if i do that and then save it and come back over here we can see down here this is the section and if i inspect this then you can see this section right here it doesn't get any margin i'm sorry it just gets padding all the way around it just to give it some breathing room so each section on your web page if you embed it inside a section class would have this padding just to space out a little bit okay now it doesn't have to be a section tag that we use to me that makes sense but if you want to use a different tag you can do so for example a div give that a class of section and if i do a p tag inside here and a load of lorem as well so lorem 30 then press tab creates 30 words for us save that and come down here we can see this gets exactly the same styling it's not a section element it just uses the section class and that's what gets styled all right now there's one other thing i want to show you as well and that is a container at the minute if we make this full screen we can see that the content goes all of the way across okay now a lot of the times we have a central column of content so it's kept within say 1200 pixels or 960 pixels or something like that now to do that in bulmer we can just use the container class so right down here on the second one for example i could do a div with a class of container like so and then take the ending tag and then place it below the p right here and let me scoot these in okay so now this paragraph is placed inside this container and this container applies auto margin left and right and a max width as well to the content inside it so if i save it now it's going to centralize the contents in the middle of the screen you can see right here and if we inspect that we should see if we go over the container that we have a margin left and right of auto and if i make this a bit bigger over here we should eventually see as well a max width right there 960 pixels okay so that is how we use spacing margin and padding in bulmer