Bootstrap 5 - First Look

[Music] hey what's going on guys so bootstrap 5-alpha was just released and I wanted to just do a first-look type of video to go over any changes and just give you an example of how you can get set up with version 5 now this isn't going to be a full crash course or anything because like I said this is still an alpha and there's gonna be things that are added to it but I will be doing a crash course at some point in the future so today we're gonna look at what's new and just create a simple login page using bootstrap 5 and show you some of the new features so the website where you can find everything is v5 get bootstrap comm so if you want to mess around with it that's great maybe a small personal project or something but I wouldn't recommend doing any large production project with it just because there's there will be breaking changes in the future although I don't think that the jump from version 4 to 5 is gonna be as significant as the jump from 3 to 4 just like 3 to 4 wasn't as bad as 2 to 3 so I think a lot of the class names and stuff like that will stay the same you're just gonna have more available to you so to use version 5 right now you can use of course used to CDN although if you do it that way it's not very customizable so you can either download the the source files from the website or you can install it with NPM which is what we'll be doing in a little bit so we'll set up a workflow to compile sass and use variables and so on so firstly the documentation has been improved there's a new look and feel with more information especially when it comes to customization one of the issues with bootstrap over the years is that many sites that use bootstrap a lot of them seem to look the same you can immediately identify that it uses bootstrap so it seems like they're giving us more guidance to customize your themes so that not every site or every app looks the same they actually expand on version force theming page with more content and code snippets for building on top of sass files there's also a starter NPM pry which is also available as a template repo on github so better Doc's more information more customization the color palette has also been expanded for further customization it has many different shades of different colors similar to other CSS frameworks like materialized they've also done some work to improve color contrast alright so the best part of all bootstrap 5 is no more jQuery no more dependency on the jQuery library you only need the bootstrap Java JavaScript file although Popper j/s is still used for tooltips I believe but not having to include jQuery will save on file size it seems that they're trying to make version 5 very future friendly they even dropped support for our Internet Explorer so that they could use things like custom properties which ie doesn't support and this is a good thing ie held web development back in many areas for a long long time so I'm glad that they dropped support for ie glad that they dropped jQuery and we only need the JavaScript the bootstrap javascript file now so as I said one of the reasons for dropping IE is for support of CSS custom variables before there were only a handful of route variables for colors and fonts and stuff like that in version 4 but now they've added a bunch four components and layout options such as the table component so you can see here we're using CSS custom properties so the bootstrap form components and the documentation for forms have also been updated there's a dedicated area just for forms they've redesigned the form controls in version 4 the custom controls like radios and checks and switches they were in addition to whatever the default browser styles in version 5 they've gone fully custom so all checkboxes radios select lists things like that they all have a custom appearance to unify the style and behavior across all operating systems in all browsers so this is pretty nice version 5 has a new utility API they've created a Tsingtao since asked to create our own utilities on the fly with the ability to modify or remove utilities that are already provided this is sort of takes from tailwinds and some other CSS frameworks and toolkits the ability to create your own styling utilities and I'm going to show you how to do this but this is an example of the width utility so we have the utility name the property which is with the class to use which is W and in bootstrap we can do you know W - 25 - 50 75 and then these are the values so if you do W - 100 it's gonna be with 100% so you can actually go in and you can change this stuff you probably don't want to change it directly you want to create a new file and overwrite it but you could modify this and you can also create your own utilities which I'm going to show you how to do in a little bit so version 5 also has an enhanced grid system they kept the bulk of the system in place because there was some issues in the version 3 - for upgrade and they built on the existing grid system instead of replacing it so some of the changes are a new sizing tierre of XXL the gutter class has been replaced to a utility much like the margin and padding so you can do you know G - whatever G - 1 G - 2 using the spacer values as you would with margin and padding form layout options have also been replaced with the new grid system vertical spacing classes have been added and columns are no longer positioned relative by default so pretty subtle changes or additions but like I said they didn't want to have things break like you had from upgrading from 3 to 4 with the grid so another thing that's been added is a new set of icons so bootstrap now has its own icon library so you don't have to use something like font awesome our material icons you can use bootstrap icons which are SVG's so they scale quickly and easily and I will give you an example of using these you can actually install bootstrap icons with NPM so we'll take a look at that as well all right so I think all in all there's some good additions and changes I haven't looked at every single component and remember things are still going to be added this is only alpha one but let's just jump in and setup a project and build something simple to just give you an example of setting things up we're also going to look at the utilities API okay so like I said if you want to start working with bootstrap five you can go to v5 get bootstrap calm and just like with version four you can include the CD and if you want if you go to get started you can grab the CSS file here you have the JavaScript file here bootstrap Minjae s and then you have popper for tooltips which is just a tiny tooltip library so you can do that but you can't really customize much that way so you could either download the source files or you could use NPM which is what we're going to do and it's important to mention that what I'm doing here with NPM you can set up the same workflow with bootstrap for it's not it's not particular to version 5 we're just gonna be using version 5 and I'll show you for instance the utilities API and stuff like that so I'm gonna jump into vs code I just have this vs v login page folder and you do need nodejs installed because I'm using NPM which is the node package manager so we want to first just init a package Jason so I'm just going to tack on - why so I don't have to go through the questions yes let me just make this a little bigger here okay and then we want to install bootstrap 5 and we can do that with NPM installed bootstrap now you can do at next and that will give you the latest version however you might be watching this at a time where it's already a different version so if you want the same version that I'm using it's 55.0 0 - alpha 1 okay so that will get that installed if we look at our package Jason you can see that right here now you can also install boots that the icons package with NPM so if we do NPM install boot strap - icons that will install that and if we look in node modules you'll see all of these SVG icons that we can use and if you look at our bootstrap folder we have the dist folder which is our compiled CSS and also our JavaScript so we have bootstrap j/s we also have the minified j/s which we can include in our HTML and then we also have our sass folder which is what we're interested in right now so we have the main bootstrap at CSS file this is what we want to include in our main sass file so we'll get that set up and this just includes everything else basically you also have the variables file here you can see some of the new colors new shades whatever and you don't want to edit anything directly here because if you upgrade bootstrap it's going to get overwritten so you want to create your own variables file and we'll get into that so let's close that up and just minimize that now to set up our workflow with sass you need a sass compiler what I would highly recommend is live sass compiler if you're using vs code it's just as easy as clicking this watch sass button down here now I do have some settings that I want to show you before I get started so if I go to my settings and I search for live sass and I actually want to go to my settings dot Jason so these are the settings that I use this right here so we have live stats compile dot Settings dot formats and inside this object we have the floor mat which is compressed so it will be minified when this when the sass is compiled to CSS it'll be minified dot CSS extension name and then it's going to go into a folder called CSS if you don't add a save path it's just gonna get added to your sass folder and then I just have false for generate source Maps okay so if you want to just copy these settings you can and if you already uses this extension I'm sure you already have your you know your stuff set up so I'm gonna create a folder called s CSS and here we're going to create a file called main dot s CSS and we want to use bootstraps so what we want to do here is just import from we want import want to go up one level into node modules and then we want bootstrap as CSS bootstrap s CSS and we'll go ahead and save this and now what we can do is just click down here it says watch SAS it's going to compile into CSS okay so chromatically creates a CSS folder with main dot CSS which then includes all of bootstrap all right so that's that's all we have to include in our HTML so let's create our index.html and just call this bs5 login and then let's just add a link tag here it's gonna go to CSS slash main CSS and then I'm gonna go down here and I'll just put an h1 for now but there's a few classes I want to add on the body if you bootstrap classes one is d flex which will just display as flex and then Tech Center and then I wanted to have the secondary color as a background so I'm going to add the BG secondary and these are all these are all bootstrap four classes as well so nothing new but let's save this and then I'm going to open this with live server and you can see that we have our secondary color background we have our hello now I want to change the value of secondary I don't want to use this color as the background and this is where a customization comes in so we can go to our main dot s CSS and again we don't want to edit the variables file directly we want to just add our own here so you could you could either create a new file or you can just put them in here a new sass file and let's change the variable of secondary to I'm gonna change it to just a light light gray so f4 three times and now if I go ahead and save that and we go back now you can see we have our light gray background so this is how we can get our workflow set up to really customize bootstrap now as far as the HTML goes let's let's let's use an example of the icon so I want to actually put an SVG icon one of the bootstrap icons at the top of the login so inside of a form and I'm gonna give this a class of form again let's get rid of this action so inside this form I'm gonna put an image tag now so these are SVG icons you can use them in multiple ways in fact if you go to the docs it'll show you you know different ways you can use them I'm gonna I'm just going to include it directly into the source here so I want to go into my node modules bootstrap icons icons and I'm going to use bootstrap SVG and I just want to add on to this a height of 72 and width of 72 and then I just want to add a class of mb4 which is the margin bottom utility okay so we'll save that we should now see that bootstrap icon now there's some custom styles that I would like to add so if you want to do that you could put them right in the main s CSS what I'm gonna do is create a new file here called underscore style dot CSS s CSS and the first thing that I want to do in this custom style sheet is just set the HTML body I want to set the height to 100% because I want everything aligned in the middle horizontally and vertically and then for the form login remember I put I gave it that class I'm gonna set the width to 100% but set the max width to 330 pixels and set the padding to 15 pixels and let's set the margin Auto so that it's in the middle okay so if we go ahead and save that and then we go to our main s CSS we should be able to just import style and since we need a semicolon and since it's an underscore it's not going to get compiled into you know style dot s CSS it's just going to be imported so now if we take a look it's right in the middle so for the the rest of the HTML I think what I'll do is just paste it in because I don't really want to just type a bunch of HTML in so I'm going to grab that and paste it into index right under the image so what we have is just an h1 we're using a couple classes here changing the font weight to normal it's an h1 but format it as an h3 label so we use s are only because it's only visible on screen readers inputs so we have an email inputs we're using margin bottom two we have a password input and notice we don't need to use the form group class and it should just still it should still look good check box so check box and these are just standard bootstrap classes we're using BTN primary although I do want to change the primary color variable but let's save this and take a look okay so that's what it looks like now if we want to change some stuff like I want to change the primary color of everything not just the button but just the primary color in general also I don't want any rounded corners I want to change that as well so what I would do is go into my main j.y I'm sorry main s CSS and let's set its primary I'm actually going to set it to the bootstrap purple which is 401 f7 C and then for the border radius we want to set border radius to zero and then we also want anything that's has dash SM or - LG to be zero as well so if we save that now we can see that we have sharp corners on the inputs and on the button so anything that you want to change you want to customize you can just change the variable or add the variable now I want to show you how we can use the utilities API so if we look in node modules bootstrap scss and we look at the utilities so we can use this API here we need to have this utilities default and then we use map merge and we can add any utility we want so I'm going to kind of mimic the padding utility if Isis for padding you'll see that we're using the property padding the class is P and for the value we're using the spacers variable which is actually in the variables file so if we search for spacers and we have one R M as the default in them for one we have that divided by four - is that divided by 2 so it just uses a spacer same with the margin now what I'd like to do is create an input padding utility because if I use the padding utility on the input so if I go to my email input and I do P - let's do P - - that's not even going to change it because it doesn't it's not bigger than the standard padding if I go to the next one up which is P 3 it's too big so I want to create a utility that gives me the amount of padding that I want to use on inputs so let's get rid of that and what we want to do is go into our main s CSS again we don't want to touch the the bootstrap files and you could either create a new file or just put it in here and just like I showed you in the bootstrap file we need to set utilities default actually its exclamation default and then we want to set utilities and we want to use this map merge and they give you these variables so you can put them in variables but I'm just going to put it right in here so oops map merge and in here we're gonna open up a set of parentheses and then it's important that you need to put the comma and then add utilities here so this is the should be the correct syntax and just a semicolon and then in here we can actually add our utilities so we want one called input padding so this is just a name this can be anything and we want to set that to a set of parentheses and here we want the property that we want to use such as padding and then we want the class that we want to use in our HTML so the class I'm gonna call IP so we should be able to do like IP - 1 IP - 2 and so on and then we want our values so values are gonna put in parentheses and say like 0 0 1 will do 0.3 REM you could use pixels you could put whatever values you want here and whatever of course whatever property you want so it's that and then 3 which is gonna be 0.7 let's do 4 0.9 and let's do 5 will be 1 REM okay so those are our values so hopefully this is clear and you could of course go after this input padding and you could put another utility if you wanted to and you can also edit the ones that are already there if you wanted to set like the width you know I you have W - 25 W - 50 let's say you wanted to add W - 30 or something like that you could override that so now I'm gonna go into my HTML and I should be able to add IP - let's do - - which I don't believe is going to actually add any padding because of the default padding but if we do ip3 now you can see the email has more padding than the password and this is actually what I wanted and if I wanted that bigger I could do IP 4 and now you can see it's even bigger and if I open up my dev tools over here and we check it out so we get we have IP floor and if we look down here we have padding 0.9 REM okay so I'm just going to change that back to IP 3 and I'm also going to add it on to this input IP 3 and then that gives me the padding that I want for our inputs now one thing I didn't do for this project is include the JavaScript so if you want to do that I mean you could just grab the CDN you could grab it from v5 get bootstrap calm or you can include it from from our node modules so if we go down here in our index.html and do script source and we can go to node modules bootstrap dist J s and then bootstrap Minjae s so that'll include that now we there's certain things you might need the popper library for so you can install that with NPM as well so I think it's popper dot J s pretty sure that's it and then if we go to node modules let's just reload that soap-opera J ass dist I think it's this right here yeah so we want to include if you need it so script source node modules popper J s dist and then it's this UMD I believe it's this UMD and then popper Minjae s so you can include it like that as well if you need to use any you know JavaScript widgets or anything like that but that's it guys I don't want to go too far into this like I said it's it's an alpha one so once we get past that stage once we get past alpha it'll go ahead and do a crash course and we'll build some kind of theme to something that's more in depth because things are going to get added and changed along the way but that's it guys hopefully you enjoyed this thanks for watching and I'll see you next time

Channel: Traversy Media

Views: 686,339

Keywords: Bootstrap 5, bootstrap, bootstrap 5 alpha

Id: I7CfaDYzTVM

Length: 23min 31sec (1411 seconds)

Published: Thu Jun 25 2020