 What's up everybody? Today I'm going to show you how to get started with Boostrap V5 Alpha in less than 20 minutes. As you might know, Boostrap is one of the popular open source CSS frameworks out there that allows us to build fast responsive sites. Although today's tutorial is just an introduction to get you started, I will be looking to develop a follow-on website using Boostrap. So if you are interested, please consider subscribing to my channel, smash the like on this video, comment below if you have any questions and now let's not waste any more time. Let's jump into the computer and get started. Welcome everybody, let's get started by looking at what Boostrap is. Boostrap is basically a free open source CSS framework that allows us to build fast responsive sites. It contains CSS and optionally JavaScript-based design templates, photography, buttons, forms, navigation and other interface components. One of the big changes in the latest version of Boostrap V5, which is still in alpha by the way, is that it no longer depends on jQuery. To get started with the latest version of Boostrap, go to v5.getboostrap.com and click get started. Now the two ways of getting started. The quick way is using the Boostrap CDN, which we can include the CSS and the JS files into a project. And the other way is by downloading the source files of Boostrap and then including them into your project. Today I'm going to show you how to use the Boostrap CDN. So let's scroll down to CSS and JavaScript. I'm going to copy the style sheet here and I've already created an HTML file which I've called index.html. And to make the style sheet work, we need to paste it here under the title, just like this. Let's go back. Now let's copy the JavaScript files, which will allow all components to function. Go back and the JavaScript files need to be pasted here at the bottom just on top of the body, just like this. Let's align them better and save. Now before we get started with Boostrap, we need to have a look at containers. Containers are the most basic layout element in Boostrap and they are required when using the default grid system. So to get started, we can create a div with the class name of container, just like this. And let's just write something like hello world. Save this. Let's go back to the page. And as you can see, our text has moved to the right side here. And this is because the container, if we inspect all elements, you will see that the container as default has a max width of 1320 pixels. And if I hover over it, you will see that the container is actually aligned in the middle of our page. Now you might be wondering, well, what if I want my layout to be full screen? What you can do is go back and inside here, we can just do dash fluid. Save this, go back to the page. And as you can see now, container is full width. And as a default, we do have some padding to the left and the right, which can be reset. So let me remove the fluid bit. Okay, let's now explore how we can use the Boostrap grid, which is based on Flexbox. So first of all, let's create a row. And inside this row, we can create two or more columns if you wish. So let's start with two. And let's call this one call one. Let's duplicate this one more time and call this one call two. Save this, go back to the browser. And as you can see, call one is taking 50% of the available space of our wrapper. And call two is taking the other 50% of the available space on our wrapper. The grid is actually based on 12 columns and we can target individual breakpoints by doing the following shortcuts. So for example, if you wanted to start with small, let's say call small and everything above this. Let's set the first one to be to take four columns of the available 12. And on the second one, let's do small again. And let's say I want the second one to take eight columns of the available 12. So eight plus four, 12. Let's take this and let's have a look at what happens. As you can see, this is now if we inspect this and let's trigger the flex guidelines just like this. You can trigger in Firefox. And as you can see, call one is now taking four spaces and call two and call two is taking eight. If I toggle the responsive design mode and shrink this down on everything above small screens is stay the same. But if I was to go under 576 pixels, which is below small, you will see that they're stacking under each other just like rosewood. So for example, if you wanted the first column to take 12 on small screens and the second one to take small screens, we can simply change the number to 12 here and 12. And everything above small will now take 12 columns, which will make them into rows. But let's say you want to target bigger screens like medium screens and above. We can simply go back and inside here we can call dash medium screens and then dash maybe let's equally space them. So this one will take six columns and let's do the same for this one. Call dash middle and everything above six is one save this. And as you can see now, the middle screens and above maybe for like tablets and laptops, they're now taking six columns. And if you go up, they're taking six columns. And if you go down, you will see that they then stack on small and below small again, they stack under each other. Okay, let's now add another breakpoint and let's make this one slightly smaller and this one slightly bigger. To do this, we can simply do call dash large and then let's say we want to set this to two columns. And let's do call dash large and let's set this one to eight, which both of them equal 10. And this also means that they're not equals 12. Well, you can do that is they don't have to add up to 12. It's not a problem at all. So let's save this, go back and see what happens. So first of all, this one is taken now two on large screens and this is taking eight on large screens as well. And the available space is marked in here and it's just empty. Let's now have a look at how we can change the order of those two elements. So let's copy this quickly, paste in here and let's maybe do six and six on small and everything above. And let's get rid of the rest just like this. Save this. And as a default, as you can see, we have call one and call two both taking the same amount of space. And let me just trigger the flex on the bottom element so we can see what if we wanted to swap the column one and column two, for example, on medium screens. Well, we can do this very easily with the order CSS property. So we can do order and then we can target the individual screen. So in this case, let's target medium screens. And let's say I want the order of the first column to be second. And I want order of the second column here to be first. Let's say this and see what happens. So at the moment, we are on small screens. But if we trigger medium screens just by going up slightly, you will see that column two is now taking first place and column one is now taking the second place. And this is how we can target individual breakpoints. Maybe we want to swap the order on all screens. We could simply just do order two and order one just like this. Save it. And as you can see column is now always going to be in the first position. Even if you go on very small screens, we have two and one. And if you go up, it would stay the same. But let's say if you wanted to target small screens, we can then do simply small, small and everything above small will be now. The same column two will be the first position and column one will be the second position. But if you go below small, you will see that column one is in its original position. And column two is taking the position of two. Let's now go up and let's have a look at some offsetting. So let's quickly copy this row in here. Let's remove the order for now so it doesn't get confusing. And let's say we wanted both columns to be equals four just like this. Let me toggle the flex on the last div here so we can see just like this. And as you can see, there is some available space now. But what if we wanted to offset the first column, maybe with two spaces? We can do simply offset dash two. And this should simply offset this div with two spaces on the left, as you can see, like so. And we can do the same for this one. We can maybe offset this by one. And this should push the second column with a little bit of space in the middle. Offsetting can be very useful to align items from time to time. But I want to spend more time on the alignment of the elements. And let's have a look at how we can do that. So if you're familiar with Flexbox, this should be very easy for you to understand. And let's copy another row. And by the way, you don't have to always have two columns. You can obviously have more columns than this. So let's remove this and this one as well. Let's remove the order. And to make this look better visually, we can actually create a div inside here. So div with the class name and let's add some utilities. For example, if you wanted to add padding, you would do something like this. Padding dash, let's say three. Three is the number of the padding that we want. But obviously this is based on rems. So it's not going to be three pixels. And then let's add some border. And maybe let's add a background color of light. And inside this div, we can add all text just like this. Let's copy this at the bottom just like this and save. Let's have a look at what we get now. And let me close the flex. And as you can see, we have column one and column two with a nice background color and a little bit of border. And this will help us to see how the alignment of those elements will work. Now, first of all, I want to add a little bit of height so we can start positioning those elements the way we want. Let's add a custom class name to this row. And maybe we can call this one my dash custom row. And let's add some custom styles inside here just like this. And let's do my custom row. And for my custom row, let's add a background color so we can see a little bit better. And I will add this color. I hope it will be easy to see. And then let's add some height. So I want to add around 400 pixels. Now, if you're familiar with Flexbox, the alignment is actually very easy to do. Let's say we wanted to align those two columns in the middle of our page. And to do this, it's actually fairly simple. What we can do is justify dash content, dash center, save this, go back. And as you can see, all two columns are now in the middle of the screen. Let's say we wanted those two columns to be actually aligned in the middle of this box. We can simply do align items, center, save this. And as you can see, we now have both of the columns aligned in the middle. And we can do similar things with this. So for example, we can do start, which is the default, which will be here on the left side. Then we can do end, which you'll probably guess this will be at the end here. And we can do exactly the same thing with the alignment of the items. We can do start, which is usually by default at the top. And then we can do end, which is going to be at the bottom here. We can also do the same thing for the actual elements by doing align self. And then the alignment, for example, start, center, or end. One thing that I almost forgot to cover is the justify content around justify content between and justify content evenly. So at the moment, we have justify content center and align item center, which has the boxes right in the middle of this div. So let me show you how the other ones work. So in here, justify content center, let's do justify content around instead. Save this. They should now distribute the items evenly with equal space around them. And if we try content between, save this. What we do is space between the items are evenly distributed in line. First item is always at the start of the line. And the last item is always at the end of the line. Let's now have a look at the evenly. And as you might have guessed, this should space the items. Let's now go back to justify center. Another thing that I wanted to show you is how we can add gutters. Let's center align them again so they look better. Just like this. And if you wanted to, gutters are basically the gaps between the column content created by horizontal padding. So let me show you how you can do this. Simply on the row, we can put gx, which is the class that can be used for horizontal gutters. And we can simply put a number. So if we save this, you should be able to see that there is a lot more space than used to be. So remove the gutter from here. You will see that they will hopefully go down. As you saw, the gutter went down. And if I refresh, the gutter goes up. So this is how you can change the gutters. Now that you know the basics, let's have a look at some components quickly. First of all, if you go back to the bootstrap documentation and click on components, you will see all sorts of useful components here. And let's have a look at a simple one, maybe the buttons. So this is how you normally add the buttons. You do button type button, and then you add a class of button. And then to change the color, you usually do button and then dash the color name, which is usually written primary, secondary, success, danger, warning, info, light, dark, and so on. So let's copy maybe the primary one and have a look at how it works. And for this, I'm going to create another one. Maybe let's create three calls this time, call. And I will paste the button in the first one. And then let's copy this three times. And then we can maybe do secondary here, secondary. And then maybe we can do danger. Let's save this. Go back. And as you can see, this is how easy it is to add some of the components. And there is a lot more that you can use such as card, courcelles, drop downs, list groups, motors, popovers, and so on. Let's say we wanted to add a component that requires JavaScript. So for example, one will be modal. So if you scroll down, they give you a lot of examples that you can use. And I'm going to use this one here. So let's copy the button that will trigger the model just like this. And I'm going to replace this primary button that we added earlier, just like this. Let's add it here in the middle. Save this. And let's go back and copy the rest of the modal. This will be the actual pop-up. So let's copy this. And I'm going to copy and paste this outside or container here, just like this. Save this and go back to a page. So if we click on this launch demo model, this will show the pop-up for us. And if I click anywhere outside it, this usually closes it, which is nice. If I click back on it again, we can either press this button to close it or we can press the X to close it. And obviously if we press save changes, nothing is happening now. And obviously we need to add some more logic to make this work. Another thing that you might want to have a look at is the utilities. For example, borders is pretty cool. You can add borders by doing border, top, border, right, bottom, bottom, and so on. You can have a look at some of the colors here and so on. So that's everything from this quick introduction of Bootstrap. Please consider subscribing to my channel for more videos just like this. As always, my name is Raddy and you are watching my channel, Raddy the Brand. And I will see you in the next video.