Getting Started with Bootstrap 5 for Beginners - Crash Course

[Music] what is up everybody gary simon here so today we're gonna be covering bootstrap five and let me show you the project we're going to build in doing so all right so we can see it's just uh you know nothing's too exciting or fancy's happening here but we're doing this the bootstrap way it of course is fully responsive and looks good and works well so if you don't know what bootstrap 5 is uh you've probably been living under a rock or your brand spanking new to web development but if you go to getbootstrap.com i basically it is a quickly it allows you to quickly design and customize responsive mobile first sites i with bootstrap the world's most popular front end open source toolkit it's been around for a long time so we're going to be covering how to install it in within a robust development environment with like hot live reloading and all that good stuff we're also going to talk about how to get the project started um we're gonna talk about how to customize it and theme it uh and much much more so as always make sure to subscribe and let's get started now wait one second the sponsor of this video is hostinger.com now they offer web hosting domains and much much more and make sure before you do anything else to click on the top link of this youtube description to get our exclusive offer just for the design core subscribers where you're going to get 10 off now they have some of the fastest hosting and also the best bang for your buck and the greatest support that you can find out there so if we take a look at hosting we go to shared hosting we're actually going to use this later on in the course there'll be a timestamp for it where we register a hosting plan along with a domain and then we're going to take that bootstrap layout that we created and launch it here live on the web and it's they their system makes it so easy just to get started so by the way make sure i cannot stress this enough that when you go to add your own hostinger plan which by the way is extremely cheap i it goes all the way up to 48 months which would calculate to a dollar 25 per month make sure that their coupon code is right here so again you click on that top link in your youtube description and it should be automatically applied all right everybody so this is the third time i'm recording this video tutorial um so the first time it's it's not quite my fault i'm going to tell you what happened so if you go to getbootstrap.com and you go to get started and then you click on here under build tools and you come over here you see this little part right here it says get started with bootstrap via npm which is a no package manager i'll i'll describe that in a second with our starter project so it's basically um it's it's over at github.com and this is just a quick way for you to get started with presumably bootstrap 5 by cloning this repo and then installing it and that's what i did for the first tutorial um and then like an hour before i was ready to publish it two days ago because that's when this video was supposed to be released i kind of realized i i said i need to check to make sure this is the correct version after the fact it was bootstrap 4. i didn't bother reading right here where it says that this is built with bootstrap four with plans to update for five why here on the the 5.0 documentation do they have this little thing about getting started with it right here like uh uh get rid of that until that's been updated it will save me massive amounts of time and then the second time i went to record this i hit a button on my mouse which switches the feed of what's being recorded and it recorded the wrong screen five minutes into the video and i recorded over an hour and one take on that time so uh yeah not very happy but you knew how enough about that crap let's get started for me it's a third time all right so um if we go back to home what is bootstrap you know well i already covered that in the intro so let's just go to get started and there's a bunch of ways to get started the easiest way to get started is going to be through the cdn which is content delivery network all right so basically all of bootstrap is going to be hosted on some other server we're going to call content delivery network and you're going to bring it into your project that's the easiest way to get started and it tells you exactly how to do that you paste this here for the css you're also going to need javascript and this thing called popper we're going to use a build tool all right or a bundler and webpack is one of them that you can use and also parcel is another and so what these do is basically these are more these are set up for more robust development environments and they give you a lot of flexibility and all of that good stuff so we're going to use parcel i just personally like parcel um and we can do it the partial way so the first thing you need to do is install the parcel bundler now before you can install parcel because we're going to do it the npm or the node package manager way you have to have node.js so head on over to nodejs.org if you don't have it and you click on downloads and you can use a window installer or mac os dollar or whatever you're also going to need a code editor of course if you're brand spanking new i'm going to hope you know that already though you should know html css before touching bootstrap um and so i'm going to be using visual studio code so visual studio code right here i have a um just it's i have no folder open as you can see um so we're going to go to view and we're going to go to terminal and we're going to create a folder so let me make sure you can see that yeah you can see just beyond my shoulder on this side um and we're going to type in we're going to type in i'm going to go in my code folder that's where i store all my projects and we're going to type in uh mkdir to make a directory we're going to call it new bootstrap we're going to cd into new bootstrap and there we go all right so node hyphen v uh version 14.17 that's what i have uh if you type that node command and it says it's unrecognized you don't have node installed you have to restart uh visual studio code and or your console or command line or whatever and now we need to make sure that we install parcel after that's ready to go so i this is going to be the command with node package manager right here npm install hyphen g the hyphen g is just short for global it'll install on your machine so you only have to install it once you can use it for all your your projects in which you use uh parcel uh the partial bundler and so you want to make sure you want to install that as well after that we're going to head on over to the documentation then you install bootstrap all right so how do you do that well let's click over here and this is what you run npm install bootstrap before we run that command make sure you installed the the parcel bundler by the way then you're gonna wanna i put npm init in our current project folder hyphen y which means just yes for all the prompts that it will show you otherwise so we're going to hit enter and there we go now one thing that we see here i'm wondering if i hit code peer code period uh yeah it's gonna open up a new window inside of that current folder so now that we can see that package.json file that was created okay so if you don't know what this is basically uh this will store all the project dependencies uh the main two being bootstrap and also popper.js and when we install that you'll see that this file will change all right so if we go back to our terminal hit control tilde key which is a little key next to your one on most keyboards we're going to install bootstrap so right click just to paste that npm install bootstrap hit enter and magic will happen there we go now we have a node modules folder uh we have popper js oh that's interesting and installed it already but that's kind of strange it doesn't show it here so you know what just to be safe because this is what i've done in the previous videos i i definitely want to install the popper js although it's already there you know what let's try not installing it because it's already here popper js core and so we'll see if the javascript functionality work works proper js by the way is just uh a third party thing for tool tips popovers positioning engine whatever and bootstrap uses it so that's why we need to install it along with that as well okay um now let's go back to parcel here um so pure dependency here's where it's saying to install popper js core let's do that anyways now that i think about it at least add it as a dependency and there we go all right um next up importing javascript all right so before we do that um this is a folder structure right here and we want to make sure ours pretty much looks like that so um right now if we compare notes um we don't have a build folder we don't need a build folder that will come near the end when we go to uh prepare the project in order for it to go live on the server um node modules don't ever want to touch the files in that folder so don't even touch this over here if you do and then you go to update it in the future it just overrides what you write and then we're going to have a sas and a source so a sas folder scss with a custom scss file so let's create that just click down here anywhere hit that folder button scss and then create a file i called custom.scss scss is a sas extension and sas if you want to google it i learn to learn more about it i have crash courses everybody does it's just a different way to write css with enhanced abilities ultimately what you write here gets compiled down into a regular css file all right then we have another folder which is the source folder source and inside of here we have two files called index.html and also a index.js file okay let's um temporarily just get out of there now we're going to go back to our index.html and now our project structure looks like this more so importing javascript we're going to use this one you have options if you want to import everything from bootstrap you can do it with this line right here in the index.js file just like that and save and then i if you only want to import specific plugins that your project needs because let's be honest most projects aren't probably aren't going to utilize everything from the full library then just import what you need this way um it's going to save load time and all that stuff and then you can import just you know one if you need to as well we're going to do everything just to ensure that everything's already there import css all right so the way we'll do the importing of this css is we're going to come into our index.html and actually they have a little boilerplate right here let me just copy that and we see it's linking right here to our index.js file which is right here that's good and then inside of our head tag we're going to do link we're going to be we're going to hop out of that current folder let me make sure that is correct by the way yes and then into the sas folder and then we're going to choose custom.scss which is a little strange because i browsers don't understand scss files they own they only understand css files but parcel allows us to put in a sas file like this and it will know what to replace it all right so we're just going to leave it just like this all right so that's looking good uh let's go back to the documentation see if there's anything else oh yep we need to edit the package.json file and we're going to copy the script section right here we're going to go to index no we're going to package.json rather and then we're going to get rid of this default scripts make sure you put that comma there and there we go so all this stuff right here um we're going to run npm mpm run dev which is just short for putting this here in the console and that's going to be the when we're developing the project which is where we're going to run at the end when we're finished with it and we're happy with them we want it to go live on the web we're going to run npm run build and then it'll run this stuff and we're gonna have to adjust and get rid of this thing because it was not working for me and it doesn't work for other people for some reason um but we'll just leave it there for now so i think that should be it i could be wrong but i'm gonna take a chance and we're going to try this so ctrl tilde to get that up npm run dev let's see what happens building pauper js bubble bot now we can control left click right here and ctrl shift i or f12 to get out the developer tools in either firefox or chrome depending on what you're using and this looks like it's uh working here pretty well all right so it's blank of course because we have no html all right great so now we can close out of that and we are ready to rock sweet okay so the first thing i guess we'll talk about is a background color it's all kind of like i always i think about when i'm starting to design a site or whatever um how do we change the background here within oh in order to get to that part there's one step we need to do when we have to worry about the importing bootstrap by the the sas files so if we go back here and importing css you want to do it one of two ways right here so go to this page option a is to include all bootstrap and that's what we're doing we're just going to take this line right here we're going to copy it um and before we go to paste it you could also do option b which is include parts same same thing as the javascript section except this is the sas section all right so do this if you i really want to have a performant app and everything runs fast so we're going to go over here paste that in and there we go so how do we change things like a background color all right so we could technically just do it ourselves with custom css like for instance i like to show different ways to do things so we'll do and here we'll do inline css say background black now if we save this and we go back to here and we refresh it's black all right we don't want to do it that way because there's a bootstrap way of doing it which if there's a bootstrap way of doing it and you're using bootstrap you might as well do the bootstrap way all right so there's something called sas variables um and there's a bunch of them that are already defined in i bootstrap itself so i mean customize colors how do we customize the colors um let's see if there's something called bg or body that's kind of strange it's not there so it can be a little bit difficult to find certain things like what about in the css variable section is there a bg nope body i forget what it's called let me look in my reference code real quick um it's called body hyphen bg let's see if we just do a search for that all right well either way see us one thing that's frustrating is you may have to go to google and type in how to customize bootstrap 5 background in order to find exactly what you need i already know i already did that i forget where it's at in the docs unfortunately but here's how we do it we take a body hyphen bg and then we put in i i i kind of i don't want to pure black but i want to close to black so we'll do black here and then we can just come here hover over that and then this little color picker shows up and around 27 i think that's good right there so now if we go back here make sure that we remove that other code and we go back we'll refresh and there we go so that's the way you want to do things if you can customize them with utility classes and also sas variables and stuff like that you want to do it that way i mean if you don't it's not a huge deal but you know it's the options there all right so next let's uh talk about a container so containers there's a section here go to containers all right so i containers are a fundamental building block of bootstrap that contain pad and align your content within a given device or do viewport so we have to ask ourselves do we want like uh the first thing we're going to build is the navigation where it has the logo and then the actual navigation up top sometimes it's called a nav bar do we want it to extend all the way out to 100 left in 100 right of the browser or do we want it like on a large desktop like this to be confined um so that it's not so out so far so typically you do kind of want to have things centered uh on really large desktops uh because it's you're gonna get whiplash like looking left and right so that's what we're gonna do um and there's different containers and the very most basic one is this one div class container we're going to copy that and we will simply paste that right there and your content goes in the middle we'll just remove that comment we're going to save and we're going to see what happens and nothing happens that's because nothing's inside of the container and the container itself is just an invisible element if we get the dev console out by hitting f12 or ctrl shift i we can go to elements we'll click on div class container and notice it has it says one three two zero by zero pixels up here in upper left uh if we give it some height over here in the styles section we could say height like 300 pixels and then background green this is going to show us temporarily because if we refresh this these changes don't get saved uh what's happening with this container so it's actually responsive so on like a phone like on this side it's going to be 100 left and right because we can use that we don't have a lot of space as it is but when we come out you'll see that it just it adjusts itself and it stays centered so if we refresh this we'll see those changes go bye-bye all right so now let's talk about a nav all right so if we go here and just type in nav we can go to navbar section and this is a really long page i mean look at all these examples that you have at your disposal and that's what it mainly is it's just examples on how to create like a navbar like this there's like a search one here's a really simple one how i kind of like how you get it started here's one with an icon icon plus text um here's a simple one although it's kind of strange that should have this right aligned if there's nothing over here um here's one with the drop down link so basically you have a lot of a lot of options um for this for getting this all up and running so let's just start with one that's closest to what we want and then we'll customize it so i like this one i'll have a drop down link we're just going to cut or you just click this copy right there what am i doing and we'll paste it in the middle save it go back refresh oh there it is it's already refreshed all right so there we are here's our navigation guess what it works and if this link does not work when you click it and drop down it means that there's something wrong with your javascript it didn't get uh you didn't do it correctly so make sure you do that also has a mobile navigation by default all right so i want to customize the crap out of this because i don't want to have a white background i want this pushes positioned over there to the right and i want to change some colors so what shall we do well first let's change the navbar text to something else uh like some company like maybe that's going to be your company name there we go some company um kind of like boring company which is uh elon musk's company i talk too much um and so let's now take this this navigation and push it over here to the right i try to look through documentation to see if there's something that if there's a utility class that allows you to just put in the class in html and just kind of write a line sync i couldn't find it so we might have to do with the custom css way i did see something that possibly might work and i'm going to experiment with that real quick i don't think this is going to work um just just bear with me though um if we look here div class navbar and i have item i might try to put i let's see here because i saw something in the examples see notice how this is right aligned this whole section and they put d hyphen flex that might work it's probably not going to work but i'm going to try anyhow so in the html i think it would probably be right here if it works i'll be like really surprised yeah it didn't work well no big deal we're gonna have to do things the custom css way all right so if you know anything about css which you should you shouldn't be hopping into bootstrap without knowing css at least at a fundamental level then you know there's a lot of stuff uh there's there's a couple ways to structure layouts flexbox and grid so they use the flexbox a lot and you can see items html elements that have flex on flexbox it shows it right here so we can kind of click on it see like what's happening um if we open this up we'll see we have another flexbox this is the one like where we notice all the purple out there we want to take that those four links and align them to the right of that flexbox all right and so if you don't know how to do that i'll show you it's justify content and it'll be flex end there you go so that's how you align a flexbox and just push it to the right now of course this doesn't save it when we do it in the browser and so looking here we have to see i what this is called exactly um i think we'll just refer to it as navbar collapse it's right there so we go to our css and we put in uh navbar collapse oops didn't mean to put that quote there justify content flex hyphen end and refresh and there you go now how about changing the color i don't want a background here so what we'll do is i and by the way there's a whole color section that will tell you all this stuff like theme colors in the background here's a primary color i'll show you how to change all that stuff what we're going to do is instead of we don't want nav bar light and bg light we just want navbar dark and that's it so watch what happens now it's magic there it goes no more longer so it's inversed there's no more background and the text instead of being black is now white all right what about this this logo what if we want to make it bold and we want to um change the color to like whatever our primary color happens to be all right so to do that we're going to use some utility classes again read the docs we can do text and if we go here there's a whole text section where you can use these utility classes like uh to like align text to the center there's text wrapping word break text transform font size we'll use that i and there's and if i go to let's see what are we trying to do make it bold all right there's font weight right here so fwi from bold that's all we have to add to it so fw hyphen bold and i also want to change the color to our primary color so we do text hyphen primary so now once we save there we go it is both bold and now it is also blue which is the primary color what if we want to change the primary color or any of the other colors that are associated with our apps we do that in custom sas and we do it just above here where all the sas variables are so for me we're going to change um body bg i also the default text color is going to be body color we're just going to make that white because it's on a black background and then also the primary color so these are the sas variable names which you can find in the documentation um i'm the only one i'm going to change is just the primary color there's secondary and there's other ones but for me this is just let's just make it green for now just to show you that it does indeed work there it is it's green and for me it's just a different hue or of blue and it's shaded i think a little bit it's going to look a lot like the original but it's just a lighter sort of the other one was kind of darker what about changing the font family again this is all in the the text uh or the documentation font family has to be somewhere here yep font family sans serif there's the variables all this stuff you can actually change and overwrite so this is what it's using system ui um i want to change it to something else so font family sans serif we're going to use poppins i like that font so much i used to like sand i mod sarah but now i'm a poppings guy for the most part all right so now i already have poppins installed so like if i go back it's going to work and believe it or not it is a different font it just it looks a little bit similar to a system ui but most people won't have that installed so if you use custom fonts go to fonts.google.com assuming it's at fonts there's so many fonts here so use something that's already here typically um and then we can search for it poppins i'm going to use two font weights the more you use the longer your app will take the load so 300 and 700 we're going to copy this right here we want to use the link which is the html way of importing a font it has several advantage advantages as compared to using import which is like the css way of doing it um so let's just go here and we will paste that nothing's going to change because i already have the font but now the people who don't have the font their browser will download those font and font weights that we specified all right so so far so good but what uh i want to change some other things um i want more white space on the top here because i think it's too close to the browser edge right right all right and so there are utility classes for margin and padding which is just the way two different ways to define white space or the empty space between elements margin is on the outside of elements and padding is on the inside of elements and we'll see we're going to use both so you can see exactly what i mean um so what we'll do is first i want to get you used to reading the documentation so uh if we type in margin here we go did i say here we go and we'll click on spacing utilities right here there's a whole little system set up all right so first the first letter of the class name that we'll use depends on whether or not we're using margin or padding so if margin is to move things away from the outside of an element padding is to move things away that happen to be on the inside of an element so for margin that's m padding p now next one what's the next character it depends on which side like if we only want margin top we're just going to choose we're going to specify mt if we want padding top it'll be pt uh bottom i start n and then also blank if you wanted to have all four like like if you want mt if you want five uh the unit five which is where the size are right here to affect all four corners you just put mt or m hyphen five or p hyphen five hopefully that makes sense so for us um we are going to use just margin top because we only want to move the top away from here and we're going to use mt hyphen five all right so we're gonna add that right here on the nav so mt hyphen five now watch what happens it's moved down a bunch more so five is the largest if you need to go more you can either do it through custom css or by overriding that um mt or or the size i think it would be in here somewhere let me see if it's at about the bottom utilities api i'm not sure if it might be in here i think there is a way to um override those things it might be maps that you do in here but either way um this is good for me i don't need to override it okay so now what about if we go back i want this area to be i want each of these links to be further separated out from each other they're just too close in my opinion so you could try adding margin or padding but i tried that already and didn't work so depending on you know for for whatever reason maybe i'm doing it incorrectly correct me if i'm wrong but i'm gonna do it the custom way uh with my own custom css so if we come in here um we can let me go back to my reference code real quickly and i sorry i'm being slow i found it okay um we can see if we come to nav let's see here nav item we need to find the area where that padding exists so right now found it sorry uh it was right here notice where right here it says uh this media query min with 992. we're going to copy that whole rule set and go into here and sometimes when you copy it leaves out brackets so i'm just gonna have to fix or do that manually there we go and if we change this like to 1.5 look how it's separated everything out so you can do things the custom cs css way and make sure everything still works and it does all is good all right looking good so far now let's do another section let's say we want a hero section here a section is usually just like sometimes it contains like a photo or a photo background it doesn't have to but it always can usually contains like a headline ad copy along with a sub headline and sometimes a call to action so we're gonna um create that from scratch so um we have to think outside we have to think back to containers for me in this particular design decision i want this this graphic that we're gonna use to extend all the way out fluid it doesn't matter how large the browser is so we're going to use a fluid container and that's in the container section the documentation so here's what that html will look like let's see all right so we're going to do i'm going to use the m abbreviate abbreviations for writing html instead of doing div class and typing everything out from scratch i'm just going to put period for class and container hyphen fluid hit enter so that saves you um typing so i have an emmet crash course on my channel just do a channel search for that on youtube all right div container fluid um and we're also going to have a container inside of it though a fixed container because i only want the photograph itself to be like a banner that goes all the way across but then the content inside will be structured just you know along the same path as the rest of the text so we're gonna have a container inside of there and then we're gonna have an h1 element so if you know anything about html which i hope you do um this is a headline i mean this is what the the tag the tag you would want to use so visit our building make sure you spell right and then also a paragraph and our building is so stylish you'll want to live there this is i just come up with random stuff so let's save this and see what it looks like it's gonna it's not gonna look good all right so visit our building our building's so stylish you'll want to live there okay so first of all let us get that background image in there first so i already picked out some images i and so what we're going to do and i'm going to provide the zip file for this whole uh you know the source code so that you can download that zip file and get access to these same assets right here so this is my other project and what i'm going to do is we're going to create a new folder make sure you click outside of here to go to the root and type in assets right click reveal and explore and we're going to hop into that empty folder and then in my reference code i'm going to drag these four we're going to use those other three but the one we want to use for this is the abstract.jpg let me copy that and get those back in there okay it's going to be this dark one all right so now we're going to go back to our custom css now that we have that image there and we are going to specify container fluid and you know what probably a better way of doing this we might have multiple container fluid elements we're not going to in this particular design but you might in a real project so we can just give this a custom class name like custom bg all right so we'll save that and then we'll change this to custom dg and inside of there we're gonna say background black and we're gonna give it a url we're gonna hop out of our sas folder into the assets folder abstract.jpg and then also background size cover that'll that'll that'll adjust how the image is placed into that container we also specify a color just in case the image won't load for whatever reason on a person's device so at least it has a different background color and there it is so you can you can kind of see it but here's the problem in terms of design this looks like crap right i mean this does not look good there's no padding here on top things are squished up it's too close to the logo we can use the utility classes to fix that stuff so for the container we need padding because inside of this container we want white space that's pushing visit our building and this stuff away from being so close to the edges on the inside so that's padding we also want margin to take this whole container here with this image and push it away from the nav bar so how do we do that we will specify right here in container fluid margin top we'll go five that's like the largest you can do and for container here we'll do padding top five padding bottom five and watch how better it's gonna look look at that it looks so freaking much better all right let's say we want this to be bold again there's text utility classes for making that happen happens to be fw bold so h1 class equals fw bold we'll save that and let's also put class sub head i think that's a default utility class as well if i refresh this okay so visit our building has now been bold i i don't think that yeah i don't actually don't think that subhead was won but i'm no big deal either way um let's put in a bigger font size so fs hyphen is for font sizing we're gonna do four um we're gonna put margin bottom zero because there's a little bit of default margin bottom on a paragraph so we just reset it to zero that way and then we're also going to i make it gray we can do that by text type in white hyphen 50 like as in 50 opacity so if we save this look at that so now we have a good visual hierarchy between these two elements and they contrast well both through contrast i font weight and scale or font size so this is all looking good right here so let's see what happens when we look at it on desktop here or responsibly rather everything works okay cool let's continue on let's say we want to have some cards like three columns of cards now what's a card well in ui design it's basically just a container that has information pretty simple right and there's components for that in bootstrap so card alright and look how long this page is they have so many card examples your head will explode so just be careful all right so the card that i envision will have basically like this i just don't want a button i just want an image a card title and a description and that's it and then we're going to customize the crap out of this thing uh we could just go this way i'm going to call i'm going to do the custom html way all right so we're going to put everything in a container this time uh just like the other stuff and we're going to have another eye let's see here nope we're going to have a row okay so this is the part we're going to talk about the grid which is like one of the most important aspects of bootstrap which is understanding the grid so if we go to layout and we go to grid here's our grid page all right so whenever you want to have columns like this you put you have your container if you want but the most important element is to wrap all those columns in a row and then you have each of your columns right here and then i there's also a bunch of other information such as sizing your columns in relation to the size of other columns i you can see and you can also do responsive columns like your columns will be based on the viewport like call hyphen small small hyphen eight it's based on a 12 call grid column system um and we'll get into that here a little bit um in the last section but for now the the way we're going to do it we're going to have three equally sized columns so it makes things a little bit more simple um so in our container we're going to specify a row and inside of there we're going to have a call hyphen small and inside of there we're gonna have a card so like i mentioned we are uh gonna have if we could go back here to card yeah uh we're gonna use one that's similar to this all right um so let's just type it out from scratch we're going to have um let's actually you know what let's do this real quick just so i can demonstrate the column thing so i'm going to save if we go back you can see the three columns right here obviously it lacks white space it's tucked right up against that um but if we scale this in we'll also see that it's responsive so they stack from columns into rows when it doesn't when there's not enough space to have three columns so that's all handled for us out of the box all right let's get rid of those two we'll replicate this once it's finished uh because we do want to have three uh and then so then i what we're going to have is a div class of card and in card i which is we'll leave it that card for now and i'm going to copy an image element on the side of the screen we're gonna have an image at the top and notice this pat it's pointing to assets building1.jpg that's in here these are from unsplash.com by the way and then we have a class of cart image top and then just an alt attribute of large building for accessibility we're also going to have a card body and this is all coming from the documentation in that card section and then that's going to hold a h5 class of card title and that will be card title here and then we'll also have a paragraph so paragraph class card text and i'm going to copy that really quick this is coming from the documentation itself let's see what this looks like notice how large it is so let me show you something real cool and you don't have to follow this part let's take this column and do three so notice how that it's filling out automatically which is what i want basically um we have to fix things because look at this not good right so um i don't want white background here i want to be darker backgrounds with white text so to do that we're going to do the custom css way and so if you're wanting to change like this this white background color here we come in here we're going to choose card body and we'll be able to adjust the css um by the background by adjusting the right there so if we go to background and we type in gray for this one there we go now we have the color picker we could choose right around roughly where we want and we like that we also don't want to border so border none whoop i guess that's not i think that's over here on the card element yep there it is there we go so all this stuff wasn't being saved though we're just experimenting in the browser first we're gonna go to custom so we're gonna take card border none and also card body is gonna be background i'm gonna use this gray right here let's save it and there we go now they're all changed what's the issue up here not enough white space we use the utility class of what we use padding uh we'll use yeah uh let me see here what was i doing i'm looking at my reference code um yeah we'll use padding top three on container and then on row we're gonna use margin top i let's see five all right there we go so it really pushes it away quite a bit by doing both of those all right um a few other things i want to change though um let's take our paragraph i want to make this bold i want to make this a little bit um like gray to increase the visual hierarchy between these two type elements and i also want to increase the padding inside of this container so what we'll do is where it says card i know let me see yeah we're where it's here what we're going to do is we're going to put font size i is going to be oh wait i'm sorry i'm looking at the wrong section on my uh unreal what am i doing font weight is going to be bold for title all right and let's replicate that across these three so now if we save this we can see they're bold and then we're going to target this specifically in that selector with custom css just to change the color um and the way we'll do that is just card body paragraph selector so come in here right there save it and now it's just gray as you can see how it changed quickly um also one last thing uh we're going to give ourselves padding on the inside and we go to card body and which is right here we're going to do um padding or p hyphen 4. now we don't put top bottom light right because we want it to be all four and then also i wanna have rounded bottom quarter edges because the photograph has rounded on the top left and right so what we do there's a utility class called rounded and we'll specify just the bottom if you want all four sides it would be just rounded alone so let's look at the first card because that's all we've changed and then we can see the difference it's kind of hard to tell about the padding or the rounded thing but these are rounded down here like these are rounded up there all right so let's just replicate that real quickly awesome so now we'll save it and there we go now let's see what it looks like responsively that's probably a little bit too small like right there we could probably leave it at that but that's where the responsive uh grid utility classes would come into play just to fix that i'm gonna leave it like it though all right and let's do one final section uh where we're gonna get more into the grid and let's say for instance we only have a three column section down here where we have like an email opt-in section all right so that'll give us a little bit more uh practice so we're gonna stay inside of this container and we're gonna put a div class a row because we're gonna have a new section of content and we're also going to move it up away so monitor margin top five oh so this will move this section away from here physically and we're going to have in here let's just do a a regular column and then we're going to adjust it right here is going to be an h2 with a class of margin bottom five and we're going to say join our mailing list and to the right of it will be like a form just like that all right so we'll have another column and this time it's going to be based on the form components that we have and there's entire section for forms so there's a lot here um and actually the first example has exactly what we want right here an email section we're going to copy all that and i'm just going to take those three lines and paste them in right there let's get these tabbed up correctly save and look at that how cool is that now this is kind of far away but we need a submit button so in the third column we'll have a submit button and you can see the submit button right here so that's what we're going to use copy it gary what are you doing all right so we're going to have another call and just paste that right there let's see what happens all right number kind of some issues here like this buttons up too high it should be lined right here also it's just like a bunch of white space over here it doesn't look that good and it doesn't also collapse so we need to fix that all right so the way we're going to fix that is we're first going to say i call him hyphen 12 all right on there and if we save this it means it's going to take all 12 of the columns from the grid and it's going to assume it for itself that's why it's on the top right now we don't want that though we only want that for mobile so we're starting mobile first notice how it this is how i want it to be and then maybe once we come out to around medium we only wanted to take a half of the columns which would be six so we what we do is we then specify call hyphen md for medium and then six all right so nothing changed you can't tell yet i actually this might be it right here medium we'll see though um but but now you can notice it's gonna it's gonna create six elements or six it's going to assume six columns all the way from medium and up i so then when we get to large it should only take four of them because it doesn't need that much space when we get on a larger viewport hopefully it's making sense so now we do call hyphen lg four we'll see if there's a difference notice how it just moved over so now this is four grid columns at large and then it transitions watch things will move over to halfway like this will shift over here to half point right there all right so now we need to make some adjustments though to these uh as well for this to to work correctly um we're going to put call hyphen small here and then we're going to put call hyphen 12 for the button which means it will by default on mobile it will take all 12. so it'd be a big button people can easily press with their finger and then call medium just two meaning medium at medium viewports like maybe on tablets and up all the way to desktop it's only going to take two columns so let's save that okay there we go so now it's nice and large here come in come in and then it's going to alter itself just like that all right um so we have some issues though like look how close that is that's not good um so what we can do is i want to show you another way of specifying stuff here um actually i'm going to try margin top like three i want to see what that does it does move it down okay so um let's see for i want to show you another way like say for whatever reason you might want to do inline css we could do style equals margin top 2m units [Music] and look it still has the margin top so you have options i like to show different ways to do certain things we're also going to change it to a 100 percent width so again style width 100 we'll save it refresh and there we go [Music] and notice how it it assumes 100 of no matter what size it is on which is what we want and notice now it is also in line because i use margin top 2m units and i just had to experiment with is a 2.1 or 1.8 but this is pretty much the same right here all right i looking at that i think we're pretty good here uh in terms of just having the design that we want so everything works now and you can see how easy it is just to build out a responsive decent looking eye design with bootstrap 5. all right so now we want to run that command npm run build all right which is going to run this right here so let's just try to run it without removing this little flag right here because i can never get it to work anyway and we're already running this um we can get up a new terminal here and then we can run npm run build just to see what happens we're gonna have to probably make some changes here in order for this to work um need to install the following rim raff okay that never happened to me before let's just hit yes don't you just love it and here we go unknown option experimental scope hoisting so maybe the bootstrap documentation is just not working correctly and also outdoor that's not going to work either so they have like outdated documentation unfortunately um so also i'm going to get rid of main index.js because that was screwing up stuff too let's save this and let us run npm run build again hopefully it will work building custom css blah blah blah notice it created a build folder and there we go so here's our build folder if we open this in right click and open it up and we double click on index.js it hit better work and it does look there you go this is what we want to get live oh let us also by the way use the other images here building three and two we'll rerun that just because i'm kind of anal about that i i don't want to reuse images and of course when you make updates this is one way that you can do it you can just run that np on run build once you're ready and um if we go back here double click this there we go oh i'm glad i did this because i look what happened these are like uneven cards so i want to show the um the fix for that i and it's it's basically a matter of i couldn't find a um the bootstrap way of like trying to make those even cards so we're just going to do the custom css way and the way i found to do it and again with the help of the dev tools of the the browser we take our card image and our card image top and we say object fit cover and we say aspect ratio is going to be like 1 to 0.7 and aspect ratio is a relatively new css selector um and if we go back to the live version here we go now everything's nice and organized the way it should be so now that we've made that adjustment ctrl tild npm hit the up arrow key to use your to go through your last latest ran commands and there we go so now we'll have the updated version it's in build and what we want to do is go back to our file explorer we go to build and we select all these right click i'm going to add them to a zip file and let's call it build.zip and then in our new hostinger account and we're going to go to first thing i'm going to want is a domain name so i'm going to choose just something i know is going to be available bootstrap wait my bootstrap five site.com like that better not be taken there's no way that is taken i mean you never know with the com i mean everybody has everything okay domain is available all right so here we have a 8.99 a year um let's go ahead and add that to the cart verifying availability and then we're also going to want to select a hosting plan of course so let's make sure osinger.com for slash design course because we obviously want to make sure we're using that all right there we go and so let's go to hosting shared web hosting is all we need for something quite simple like this so we have premium shared hosting single shared hosting ideal solution for beginners like how cheap that is i we can select this right here and all right what we have here you want to make sure uh the coupon code design course is specified here you may be like wait what a second why is this sixty dollars it was supposed to be like two dollars for hosting uh don't worry about that because you can change this right here so if you just do um this option like the one month option um it's 9.49 a month 24 months obviously the more you buy up front the cheaper it will be so like 48 months you could save 86 based on the monthly fee um we're just gonna choose this option right here select a payment i yeah i could probably just use paypal i wonder if i have a a balance with hostinger they should be paying for this stuff for me we'll just choose paypal for now and then we'll go ahead and submit secure payment and get that all ready to go all right so i by the way i forgot to add that domain to the cart so i did that real quick before i submitted the process uh the the payment rather and i have now the hosting account and the um the domain name ready to go so let's see what is happening here blog we can just choose other um name our website uh these are some of the other domains that i've had my bootstrap 5 site that's the one we want to choose let's just make this a little bit larger i had to move the next part off the screen because it had all my personal details so i'm going to hit finish registration and there we go my bootstrap 5 site is being registered all right this should only take a few moments which way you want to go build a new website or migrate my website so let's just skip i will start from scratch and finish set up oh chosen website location europe we could change that layer because i'm in the us all right um it takes about three minutes to complete setup uh we're just going to wait until that's done all right uploading files i'm not sure what file they're uploading because i didn't specify anything it might be something from their own end um credentials getting this all ready as you can see it's it's a pretty seamless process it's not too painful at all all right and the uh website's ready so manage site all right so what i want to know is if i go to mybootstrap5site.com is there anything there yep your account has been created so i literally just i registered this like a few minutes ago and it's ready to rock look at those cards okay and then we just scroll down to import site choose a file which is going to be the zip file and i'm going to go to my new bootstrap which is the one we're working in build and build.zip click import and that's how easy it will be so now in a second it's going to go live and there it is says imported all right great so now we can go to my bootstrap 5 site and there we go it's up and live for everybody to see look at that awesome stuff all right everybody hopefully you learned a lot and now you've got your feet wet with bootstrap you know how to read the documentation and you can start building out your full bootstrap five websites all right make sure to subscribe if you haven't yet and i will see you all soon goodbye [Music]

Channel: DesignCourse

Views: 34,738

Rating: 4.8425198 out of 5

Keywords: bootstrap, bootstrap 5, bootstrap 5 tutorial, bootstrap 5 course, learn bootstrap, learn bootstrap 5, bootstrap course, bootstrap 2021, how to install bootstrap 5, installing bootstrap 5, parcel, bundler, webpack, gary simon, designcourse

Id: 1nxSE0R27Gg

Length: 61min 42sec (3702 seconds)

Published: Thu Jun 03 2021