Recreate Bootstrap Grid System in Tailwind CSS

[Music] hello everyone welcome to tyrus web development tips and tutorials today is going to be a very interesting video for me to create and for you to watch as well because we will recreate the bootstrap 12 column grid system using tailwind css utility classes of grid this video is sponsored by showcase a social network built and optimized for developers and coders devs can connect to like-minded individuals and showcase their projects you can share blogs videos projects code snippets and short messages if you are a content creator you can choose to put your content behind a paywall whether you write daily tech articles share career advice or make tutorials about certain frameworks you can make some money through paid subscribers join me and thousands of developers and showcase today so if you're coming from bootstrap background one of the things you will immediately miss in tailwind css is the 12 column grid layout you could simply say call sm8 call sm4 and you know it just automatically fits into two thirds width and one third bit actually in dalvin css it's even easier to create this so let's dive deep and see how to create all those layouts from bootstrap into taylor css let's get started i will be using codeply.com as a playground for bootstrap 5 so you could do the same codeply.com and i will open bootstrap 5. i'll remove all this code here and also choose a vertical layout we don't need javascript we might need some css so let's do that okay close this all right so now uh let's say in bootstrap we have a container and then we have a row and let's start with some auto layouts so let's say within this row if we have just three columns one two and three so this automatically creates three columns right but within these columns let me add additional divs so that we can visually see what's happening let me see the class box one and then two and three let's add some custom css for this let's say height six rem text align center background color i'm going to pick this one from taylor and css because i love tailwind colors urbancss.com so let me go to color ballet reference and then here i like a teal so let me pick up this color background color this let's see what it looks like all right and then let's vertically center it using line height sex rem okay right so in bootstrap this is uh almost something very common that you use just simply put a call class within row and as many columns as you put it creates equal width columns right so let's see how to quickly do this using tailwind for which i will open the taylor and css playground which is play.tlvncss.com and of course remove all of this and here let's have a parent if and then three divs one two and three and let me also give the same box class for these three divs and in the custom css within the layer sorry components utilities components layer let me add the same set of styles right so this is what we see initially and to convert this into the same layout that we saw in bootstrap what we're going to do is just add the class grid to the parent element and to create the auto layout like we just saw in bootstrap the class that we use is grid flow column that's it so this divides it into equal width columns naturally you will see some difference here we don't have this gap that's that is easily achieved using the gap utility so in bootstrap this is called gutter so by default there is a gutter space uh you know that is created between these columns entailment the default is 0 but we can quickly add that using gap 4 okay so you immediately see the gap also another difference that you will immediately notice is some white space here so what container does in bootstrap is it restricts the space within that break point so within ah this is probably the algae breakpoint within lg it's restricted within excel it's restricted and so on so probably this is sm sorry yeah this is md breakpoint and so on the same thing can be achieved with tailwind also by adding a container class and this won't be horizontally centered by default that's again fixed with mx auto that means margin or two in the horizontal direction so you see the same behavior in tailwind also on the other hand in bootstrap you could use container fluid uh i'm not sure if it's container space container fluid i guess this is what it is yeah with container fluid you can remove the restricted width and in tailwind if you just remem remove container and mx 2 that's what you would achieve of course the last difference is that there is no space on the left and right i think that's actually not needed so this is the first layout we have achieved this now let's go to the next one let's call this example one let me just add some margin top mp4 yeah so this is example one and i'll add the same thing here as well this is just for your reference and then md4 here i can just say font bold and text 3xl just so that it it kind of looks similar okay great now i will add a horizontal rule here with some you know vertical margin of maybe eight okay and let's see if the same thing works in bootstrap some horizontal rule okay maybe my eight isn't available my5 all right that's available and i think that's my 10 here am i right yeah great let's continue the next example i am going to cover is you have something called as row columns in bootstrap let me show you i'll copy paste the same thing maybe have four columns instead of three and there is something called row calls two so when you do this in bootstrap what happens is you get two columns and any number of uh children they just fit into two columns one two three and four like this and now that we don't see any uh vertical gutter let me add a gutter g4 that works both horizontally and vertically right so this is what we have let's try and do the same thing entailment again i will copy all of this paste it here same thing 4 and now what we want is we want this to fit into two columns let's simply remove grid flow call and instead add grid calls 2 so that does the exact same thing here instead of adding row calls to what we are doing is we are adding grid calls to it's the exact same behavior that we have achieved i hope you noticed that in bootstrap we have a container class a row class and then individual columns but in tailbone we don't even need that row in between this is that container class and this is those columns so an additional element is avoided also the gap that you have added automatically adds the gaps between the columns itself but in bootstrap you cannot do that you'll have to additionally add a div within and give that a background uh because this content is the spacing that is given is for this content not for the column so instead of call i mean instead of adding a box here you can try doing this separately like you know say to a box here itself and then i think you already know this in bootstrap but i want to demonstrate it once again so let's say i'll remove all of this and you see the gap is gone the horizontal gap is gone the vertical gap somehow still remains anyway let's go back to what it was all right so what you saw that in tailwind we have avoided many more div elements in between let's continue so this was example two let me copy this paste it here we haven't covered responsiveness yet i'm coming to that let's go to example number three now the next example is where we actually utilize the dual column grid layout um so again let me copy this and paste it here i will remove this row calls to and here let's add call 1 that takes up one column width in the 12 column and here let me say call 2 call 3 and then call 6 that adds up to 12 correct so this is what we see 1 2 3 and this is the 12 column layout in bootstrap now the same thing how do we achieve it in tailbit i think g4 is a little too much here let me say g2 yeah so let's see how to achieve this entailment now here again i will copy the same things sorry i will remove grid calls to now just notice all we've done is added a grid and gap 4 and here what i'll do is i'll say grid calls 12 so that means we are telling taleman to add a 12 column layout this is what we immediately see each one by default occupies just one column width and that can quickly be changed using now for the first box we just need the same thing right we just need one column space itself for the second one we need to occupy two columns so for that we just say call span two so you see it does the same thing it's some it's the same as calls call 2 and here we say call span 3 and then we say call span 6 okay so that's the exact same thing right this is what we achieved using tailwind now all right again you can further nest columns within columns uh here in bootstrap you will have to add a row again and then a column but until when you don't have to do that let me show you that as well so let's remove this if you want to nest another grid system within you say div class row within this you will have to add a f class let's say call six and then we'll say five sorry four and five so that's what it does i just didn't add the box here i can again add another div but you get the idea so this is what we'll have to do in bootstrap but in tailwind you don't have you don't need an additional row instead you make this a grid again and then you can do the same thing so you can say grid calls too because we actually need just two columns right so grid calls 2 and just you don't i don't actually don't don't need a class at all because it's two equal width columns 1 and 2. okay i'll remove the box so this is what it does yeah if you want four and five okay that's what we have great again for simplicity's sake let me remove all of this this was just for demonstration yeah i'll leave it at this this also i'll undo all the changes i'll leave it at this now the last and most important concept that we're going to talk about is the responsiveness in bootstrap of course you know that all these calls can be called sm call md call lg and so on so let's start with the first example where we say it's called sm instead of call so what that does is okay sorry let me run it yeah so at this point again let me add a gap of 4 g4 so in mobile layouts they stack one below the other and the moment you go above sm break point this takes up equal columns correct and the same thing if you make it md above md break point it takes up that much how do we achieve this in tailwind so here this is what we had we had grid flow call and one two three now in the mobile layout just don't add grid flow call add it only at the sm break point that's what it does right so after assembling point it takes up the column layout and then you have one two and three what if we want to do the same thing for example two for the second example in the mobile layout if you want them to stack one below the other in bootstrap what you would do is instead of row calls to you would make this row calls sm2 sorry correct me if i'm wrong and you would make this call sm call sm call sm and yeah this is what you would have right after sm breakpoint you would have it in two columns same thing in tailwind we could do sm grid calls to so it's not row calls sn2 instead we add this sm at the beginning and say sm grid calls to and this naturally makes it stack one below the other in the mobile because only after sm breakpoint we are adding two columns okay so notice you don't have to do anything with the child elements it's automatically taken care of in the same thing if you want four columns in men in after md breakpoint you can say grid calls for right so again you don't have to do anything with the child elements this is much easier according to me great so now the last example in example 3 let's say we want call 6 call 6 call 6 and call 6 that is in the mobile layout everything is it it has two columns and in the slightly larger that is after sm breakpoint let's say we want call sm 4 call sm 8 and then call sm4 call sm 8 this is a slightly complex layout and then for md breakpoint we want what we had before called md1 call mg2 call md 3 and column d 6 ok so in the mobile we have equal width columns and here just after sm breakpoint we have call sm 4 and call us and 8 and at the mda breakpoint we have all four of them in one single row divided in this ratio now the same thing let's see how it can be achieved in tailwind to begin with let me remove all of this i'll remove all the call span and i will remove the grid calls 12 as well so there are quite a few ways of doing this you can retain the grid calls 12 and then according to breakpoints change the span or you can do it in a little more intuitive way that is and in the mobile layout we don't have any we have grid calls too so this is automatically achieved you don't have to add any classes here and then at the sm breakpoint we have actually two columns only technically we have two columns one and two but if you look at it you can you can consider this as three columns three equal width columns where the second and third column have merged right so it's like this column or rather uh this element is spanning across two columns that's how you can consider it because with with the ratio call sm4 and call sm8 so what we can do is at sm breakpoint we can say this has grid calls three okay this is what happens but we need to change that so for the second element after sm breakpoint i'm going to say sorry i'm going to say call span 2 even for the fourth element i'm going to say call span 2 so you see we achieve the same thing in a slightly different way like i said if this is confusing you can say grid calls 12 maybe i'll explain that approach as well after this let's finish the md break point now in md breakpoint this is what we see so you can say md grid calls 12 and here md call span 3 and sure md equals 1 6 okay this does it so i hope this example was clear but like i said let's do it the other method also copy this paste it here i'll say another way yeah please ignore this gap let's remove all of this so if the previous way was confusing to you let's do it this way now we will have the default grid calls 12 the way we have in bootstrap and here for the mobile layout we need instead of call or call six so in bootstrap instead of call six what we need to do is say call span6 okay that does the same thing copy paste the same thing oh i'm sorry yeah and we have that at sm breakpoint now we don't have to change this right we have this fixed at 12 columns we are just changing the span differently at sm break point the first div is at call span 4 and the second one is at call span 8. see this in action yes this is what it is same thing with the third item called span 4 and then the fourth item is that is spanning eight columns all right very similar to bootstrap here it's called sm eight and here it's sm breakpoint and call span four and eight so on last at md break point this is the same thing it says call span one sure it's called span two md calls span three and then md calls one six yeah so the same thing right can be achieved in two different ways there's no right or wrong you can choose whatever suits you and go for it so i hope this covers everything that is there in bootstrap grid system in tailwind according to me tailwind is much simpler and has lesser code compared to bootstrap but then again it's your choice this was not a comparison video this was more of migrating from bootstrap to tailwind if you wish to right so i hope you enjoyed this video thank you for watching hit a like and share this video ahead if you enjoyed watching this don't forget to subscribe below and turn on the notifications so you won't miss a single video from thyris

Channel: Thirus

Views: 1,363

Rating: 5 out of 5

Keywords: bootstrap 5 to tailwind css, bootstrap grid system in tailwind, bootstrap layout to tailwind css, bootstrap 5 vs tailwind css, convert bootstrap to tailwind, bootstrap 12 column grid layout in tailwind css

Id: L_R2gP4fBhw

Length: 24min 55sec (1495 seconds)

Published: Thu May 27 2021