How to Use the Bootstrap Grid with Oxygen Builder

hey what's up guys in this video i'm going to show you how to use bootstrap with oxygen so before we get into it let's quickly talk about bootstrap bootstrap is a library that's mostly used for building web apps and what it's really great for is just having predefined styles for basically every component you can think of so whether it's forms or layouts or buttons or anything like that but what we're really going to be using it for is for the layouts and like this isn't something you need to use within oxygen but there are some use cases where it helps quite a bit so for example uh like with oxygen's flexbox what people normally tend to do and myself included is when you're building a three column layout you'll just set your column width to 30 percent or 31 percent and just deal with the spacing that way but then when you kind of have a page that relies on having all the columns and sections line up perfectly it becomes really difficult when you're working with those percentages so bootstrap really helps to align things that way um and like the alternative method is to put your own paddings and margins and negative margins on the on the containers and set things up that way but i found bootstrap to just simplify things quite a bit and i've used it on a couple sites now so yeah let's talk about how to implement that all right let's get into it there's a lot to cover so i'm going to try to go as fast as i can but if there is something that you missed or didn't understand i'd recommend just checking out the bootstrap documentation because they have a lot more there as well so what we have here is a fresh af install of oxygen and what we need to do first is copy the bootstrap css into oxygen so i'll link to this in the article or the youtube description but here we have all the bootstrap css and i've basically just cut away anything that wasn't layout related so i kept all the column sizing and also a lot of their modifiers so they have like different padding and margin settings you can choose to get rid of these if you want it doesn't really matter either way but i did get rid of all the component styling so we'll copy this go to oxygen go to style sheets make a new one call it bootstrap and we'll just paste it in here go back to structure and nice we basically have bootstrap installed at this point all we have to do now is just start using it so i'm going to walk you through really quickly on how to use it for your layouts um so we'll add a section and then the way it works is there are containers rows and columns so i'm going to add a div for each one so add my first div i like to rename things just to keep it tidy we'll call it container and add a class of container we don't need to do any styling for this because it inherits the styles from the bootstrap css file so we have our container and then we're going to add another div this one is the row so we'll add the class of row and then we'll add our columns which are dips not actual columns in oxygen rename this i'm just going to call it column and i'll add a couple of these so we have two columns and i can't add my class just yet because that is dependent on what we want to do with it column classes have a couple components to it so it starts off with call and then there's a hyphen and then it references a breakpoint and then a column size which is out of 12. so the breakpoints are extra small small medium large and extra-large and the one big difference between oxygen and bootstrap which you'll need to consider is oxygen is desktop first meaning any styling any styling you apply to all devices kind of cascades all the way down to mobile whereas with bootstrap everything is mobile first and all your styling basically stays for mobile unless you explicitly set it for a larger screen size so let's say we want to do 50 50 50 columns here we'll go to our first column i'll put in call and then i usually like to use the medium break point size meaning these two break points will always stack on each other and then anything above this will have my size or like my space or yeah my size setting so if i go to column i'll say medium and then we want it to be half so we'll do 6 6 out of 12. and then we're just going to use that same class on the other one and boom we have our two columns that are 50 50. and let's just add some content to them very quickly so we can kind of see what's going on here so i'm going to add a heading make it an h2 we'll fix that line height copy some dummy text in here don't ask and then add some text and just copy the next couple paragraphs there we go and then for the heading we'll give it some spacing here too and then we can just use an image for this column so go to that column add an image pick something from the library beer bottles because it's summer give it a full size and yeah there you go i might actually use a different image because this one's a little tall i'll just add something squary uh yeah we'll just do something like that and then we can add another section so we kind of duplicate this and then maybe in this section we'll change the background color um let's make it a little more fun actually go to something bluey do like a light that's so that's not great but whatever that'll work for this and then we can swap these columns around but even just here you can tell that it's just nice to be able to have these columns line up perfectly and have bootstrap's default gutter in here so if we go back we can change this around and then here i'll just swap this image real quick and then i'll give our page a quick hero section um yeah i'll just duplicate this as well duplicate that so we'll use this for our hero except we'll add background image to it something like that and then we can change the typography just so it's more white give this a heading 1 so it's bigger don't need all of that and then i don't even want this image so i can just delete this column entirely and we'll give our section a bit more padding we'll do like 160. i'll make this oh yeah it is an h1 so i'll just make it bigger so it looks a bit nicer and then what i might do here also is i'll play around with this width it's a little narrow right now i feel like this text could go further so i'm just going to use bootstrap and get rid of this because i want this to actually be longer so i'm going to say what should we do here call medium eight so that would give us three fourths and then as we go down still looks pretty decent i'd even consider making it wider on this part so that's the other thing you can actually combine these classes and a good example of that is if we go so here like this looks decent but if we go down maybe to here like this text feels a little squished so we could make this column longer or wider and this image be less prevalent and the way we can do that is what do we so medium we want this to be eight and we want this to be four so let's actually click the proper column here right now we have it to six but we want eight and four here and then on a larger desktop or a larger screen change that back to six and six so i'm just going to get rid of these real quick i'm going to say on that column on that text column do call medium 8 and on the image that'll be called medium 4. so that's going to apply all the way up but we want 50 50 above this break point which is the large one so we can add call large six and this one can be call large six as well so now when we move up we get 50 50. same with on the bigger screen size and i'll just do the same thing for the section below for consistency [Music] so 50 50 here as we go down the image gets smaller and the text gets wider then bootstrap also has some modifiers so let's say we wanted um let's go bigger let's say we wanted this text centered with this what we could do is just put our own class on this row and center things using the builder but we can also just use bootstrap's styling if we wanted to so on the row you could do something like align items center and that actually applied for this for this row so i'm just going to copy the same thing here too so we can see the line items center and bam that was quick to know what kind of modifiers exist like i said i'd recommend going through the documentation or you can just kind of like fly through this css file and just see the different stuff that they have because you can do stuff like offsets too where basically you can have this text offset one column and then uh yeah like bit you'd still have to allocate the 12 column sections that you have but you could make this three this eight and have an offset of one if that makes sense so let's save the page preview on the front end and as you can see we have our nice and aligned bootstrap layout and to take things one step further you can add your own modifications with which i've done on a couple sites that have used bootstrap so far and i'll include this in the blog post as well um i did a couple things like have my own custom gutter sizes and these are completely arbitrary so i wouldn't just copy this letter for letter and like learn like i would just use this more as inspiration i guess or for ideas um and then adapt to your needs but i'll just copy this real quick and just show you like the kind of things that i've done with it so if we just add that to our style sheet i'll just add it to the top and show you the couple things so i have different gutter sizes and i have automatic stacking of columns on mobile so if we go back so let's say this is a little too tight for our liking i'll go to that row and then use one of my modifiers so i think i call it gutters let's say something like three so by by default bootstrap uses 15 pixels as the gutter on each side but in my gutters 3 i think i set it to 30 pixels or something like that so now you can see it automatically set the negative margins and set a bigger padding on the columns which is kind of cool and the other thing was the mobile stacking um if we go down to mobile i added in the css i added this margin top to basically any column that isn't the top one or isn't the first one so it's kind of cool because i have this column now let's select this 60 pixels or it has a margin top of 60 pixels and now everything is already spaced on mobile automatically and for something like this i have a modifier class that reverses the columns and then actually smart enough to apply the margin to this column even though it's the first one in the row if that makes sense so i hope you found this tutorial useful i know i kind of sped through things but there was a lot to cover and i didn't want this to take 20 minutes like my last attempt took and if there's anything that doesn't make a ton of sense to you i would recommend just going through the bootstrap documentation because the only real trick to this is copying bootstrap css into oxygen and then learning how to use bootstrap and i've used it on a couple sites so far and honestly i've enjoyed it quite a bit just because you don't need to worry about like what percentages to set the columns and what paddings and whatever it's just nice to have this automated system and like whenever i need to go out of section i just add the classes and everything just falls into place so yeah if you found this useful please leave a comment let me know it occur it encourages me to make more of these videos because they do take a while and subscribe to the youtube channel and i hope you have a good rest of your day you

Channel: NewPulse Labs

Views: 3,381

Keywords: oxygen, oxygen builder, wordpress, web development, bootstrap, flexbox

Id: Jj9wXV2eu1w

Length: 14min 49sec (889 seconds)

Published: Wed Jul 15 2020