Bootstrap 5 Crash Course | Website Build & Deploy

[Music] hey what's going on guys in this video we're going to be building a bootstrap 5 website for a fake bootcamp now this is a crash course we're going to talk about you know how to set up bootstrap and all of the well not all of them but most of the common classes that you'll be using as far as you know nav bars and cards the grid flex and all that but i wanted to do it in a way where actually building something rather than just doing like a video version of the documentation so this is what we'll build we'll go ahead and add a navbar at the top we'll have some smooth scrolling we have the showcase area with the image we'll be using flexbox for this or i should say the flex classes that bootstrap offers same thing with the newsletter then we're going to look at css grid and the bootstrap grid system which we'll use to do this here these boxes we're going to use some bootstrap icons we have these images and content here and then we're going to be using the accordion as well for frequently asked questions we have some instructor cards we have at the bottom here the contact info and we're also going to add a map using mapbox and then a footer and we also have a modal if we click on start the enrollment that'll open up modal and it is completely responsive so if we make this a little smaller here you can see still looks good we're going to make everything stack on small screens we have our hamburger menu all right so that's what we're building now this video is sponsored by hostinger and we're going to at the end of this deploy to a shared hosting account and we're going to do that by first pushing to github and then taking that github repository and using it to deploy to hostinger which offers really really cheap and reliable hosting so definitely check them out hosting of all types of shared cloud hosting wordpress virtual private servers and more and i will have a link in the description for 10 off so definitely check them out all right so that's it let's go ahead and get started all right so i have the bootstrap 5 documentation open and we might reference this throughout the project for certain classes and components so if you've never used bootstrap before or maybe you've never used any css framework basically we have a set of predefined classes to create specific elements and the documentation will give you some good examples of that so for instance if we go to components and we look at let's say buttons it'll show us an example and it'll give us the specific classes so we have btn as kind of a foundation class for buttons and then additional classes like primary secondary success for these different colors you also have like the outline style here so you have these classes you have classes for sizes so btn lg btn sm for small so you can find pretty much everything you want as far as components and if we look up here you have forms classes for forms and layout like the grid system but we're going to go over all this in this project now some of these like the accordion this is dynamic you can see it does have some click events so this needs the bootstrap javascript bundle for the accordion and modals and pop overs and things like that all right so first thing we're going to do here is just make it so we can use bootstrap and there's there's a lot of different ways to do this we're going to go with the quick and easy way which is using the cdn so basically we just need to include this link tag with the default bootstrap css file and then we also want to include the the javascript bundle for things like modals and accordions now the downside to using the cdn is you can't customize the bootstrap css if you want to be able to do that which you probably will at some point you're going to want to download the source files so if you go here to download you don't want the compiled css you want the source files because that gives you all the bootstrap sas files sas is a css preprocessor or pre-compiler that basically allows you to edit these the bootstrap variables like let's say the primary color the secondary color the the font size of the buttons if you want that stuff to change and you want to customize it you'll have to edit the sas files and then compile it with a sas compiler now that goes beyond the scope of this project because this project i i mainly want to focus on the bootstrap classes and how to layout a website with it i'll probably do another video on customizing it with sas and setting up tooling and all that all right so we're just going to use the cdn so let's jump over to the text editor i'm using vs code and i have some things here already i have the empty index html and empty style dot css now we're not going to be writing a bunch of custom styles is just a couple things i want to add here later on and then i have this img folder this image folder with some svg images which are this one here the showcase this fundamentals image and this uh this react image and these are all from undraw.co they have some really cool illustrations and it's all free it's all stock images so let's start off in our html file here close the sidebar up and we're just going to create a boilerplate with emmett so exclamation enter and for the title here we'll say front end boot camp and then we're going to want to include bootstrap include the cdn so right here i'm going to copy this link and i'm going to put this right put it right above the title and then right below that i'm just going to add a link to the custom style sheet we have which is just style.css and then we also want the javascript bundle right here so we're going to copy that and the great thing about bootstrap 5 is there's no need to you don't have to include jquery as a dependency anymore prior to version 5 you had to use jquery and i think that that's something a lot of us have been waiting for is to to scrap that so in here i'm just going to say hello and save and i want to open this up so you can either just open the index html or you can use an extension if you're using vs code called live server which is what i'm going to use and this will just basically open it on a development server alright so we can do that by just right clicking and saying open with live server and we should see hello and you shouldn't see any any margin or anything here the fonts change so we know that bootstrap is being used so we're going to kind of just start top to bottom let me move this tab to the first and then this here we're going to start off with the navbar which of course is very important for any website and then we'll just kind of go down all right so for the navbar let's go over here and let's get rid of this hello and we're going to use an html5 nav tag with the class of navbar and then we want to do navbar dash expand and this is basically so we can make it responsive we could do any size we want here small medium i'm going to do large and what that means is when it hits the large break point and you know a certain screen size then the nav bar will expand to show all the links anything under the large is going to be just a hamburger menu so let me just show you here so this is past the large break point when i hit the large which is right here you can see it changes i could set this to like md for medium and then it would keep these links shown up until medium which is i think right here and then you can even do small which is right here okay and if you want to see the exact number of pixels for the break points you can go to was it layout break points so for large it's going to be anything above 992 pixels medium is 768 small is 576. none is is anything under 576. all right so we want to expand on large and then for the the color of the navbar i'm going to do a bg dash dock so you have these bg classes as well you have dark light which is like a light gray you have primary secondary all those colors and you can actually see those if you go to where is it customize color so you can use any of these these primary secondary success danger and you're going to have these colors by default but like i said earlier if you want to use sas you can change the values of those but we're going to go with dark and then i'm going to do navbar dark which will actually make the text light since the nav bar is dark all right so let's just go with that for now and if we just save that as it is we should just see this dark line at the top there's nothing actually in the nav bar so let's go inside here and let's let's add the logo or the branding so i'm going to put in a tag here i'm going to give it a class of navbar dash brand and just put a number sign in here and let's say front end boot camp so if we save that we should now see the brand or the logo now see how it's right up against the edge here we could add like a padding clasp but i don't want it to just extend way over like that if we make the this real wide so i'm going to actually put a container in here a container will will do we'll do just that it'll contain it into a certain space in the middle so i'm going to add a class of container right here and then i'm going to move the a tag here inside of the container so now you can see we have some space on the side here and everything will be contained you know inside here and it'll end like right here all right so now that we have the brand let's do the menu next so under the a tags make sure you're still within the container everything is going to go within the navbar container we're going to have a div with the class of collapse and also navbar dash collapse because we want this to be able to collapse on smaller screens so that we have you know the this right here and on larger screens it'll be it'll show the links so inside this div let's go ahead and add our ul and this needs a class of navbar dash nav because that's what it is it's the nav bar navigation and inside here we'll have our list item each list item needs a class of nav dash item and then each link inside the list item needs a class of navbar or i'm sorry nav dash link and we're going to have this go to number sign learn and here we'll say what let's say what you'll learn and then let's copy yeah let's just grab this list item and we're going to have three of these the second one here is going to go to questions our number sign questions and we'll just get rid of this text here and say questions and then this one is going to be instructors rid of this text oops we'll change that to instructors all right so i'm going to save that and if we take a look this is kind of the default layout it's going to be right next to the branding now what i want to do is push the links over to the side here or push the menu to the side so in the ul we can add a class of ms so margin start dash auto and that will align it to the right now if we hit if we go past the large break point you'll notice it disappears and that's because of our nav bar expand lg we could change that to like sm and then it won't disappear until we get to the sm but i'm going to keep that at lg all right now we want to be able to have a button i'm going to make this a little smaller we want to be able to have that hamburger menu button so what we'll do is go in between the brand the link and the div the collapse div and we're going to add a button we're going to give this a class of navbar dash toggler and let's give it a type of button and then we need to add a couple extra attributes here one is going to be data bs dash toggle and basically we just want to say we want this to be collapse we want the toggle to collapse and then we need to target a specific item to toggle so we need data dash bs dash target and we're going to set that to some kind of id which i'll just do navbar so so number sign navbar and then we just want to put that id onto this div with the collapse so id equals well let's do nav menu i don't want to use navbar so we'll change this to nav menu all right now we need to put something in the button because there's no text in here or anything and we can add a hamburger icon with a span tag and we just want to add on to that navbar dash toggler dash icon if i save that now we're going to see this menu and if i click it it's going to toggle the this div right here because it's targeting nav menu and this has an id of nav menu so now we have a responsive navigation without really having to do much work at all aside from assigning some classes and some attributes html attributes we didn't have to write any css or javascript or anything like that all right so that's pretty much it for the navbar pretty simple now we're going to move on to the showcase area which is this right here this part here and we're going to use a little bit of flexbox and we're going to look at some padding and text classes so let's go actually i'm just going to comment this stuff just to make it a little neater so we have our nav bar then underneath that we're going to do our showcase all right so we're going to start off here i'm going to use a section i like to break my pages up into different sections we're going to have a few classes on here one is going to be bg dash dark because i wanted to have a dark background i'm also going to do text dash light to make the text light and then i want to have basically padding all the way around now with margin and padding you have specific classes like you can do let's say pt dash one through five and that's padding top and one is a certain amount of pixels and then five is two is is more three is more and then five i think is the highest so you can do padding top you can do padding bottom whatever five um and then you can also do px which is going to be padding on the x-axis so basically the left and right you could do that you could also do the y-axis which is the top and bottom or if you want it all the way around you can just do p-5 which is what i'm going to do here now i also want to center the text so i'm going to use text center here and i want to align actually we'll just go with that for now and then inside here we want to use a container because if we look at the final project this is you see the space right here we don't want this content to go up against the edge so we want to put it in a container basically all of this stuff will be in a container you don't want the section in a container though because that's the dark background you want that to extend all the way so let's add a container and then inside here we're going to be using flexbox actually if we save that yeah so if we save that we just see that the dark background here but inside here we're going to have two flex items so let's just put a div here for now trying to think of the best way to kind of teach this so this is going to be our flexbox and then we're going to have two items inside here a div with all this stuff and then the image okay so two flex items inside of the flex box so we'll have a div and then under that we'll have an image and we might as well just add the stuff we need here so source is going to be image slash showcase and then in the div let's see so in the div we're going to have an h1 and let's say become a web developer and we'll just see what that looks like so far so right now it's just an h1 and then an image right with some divs now i want to align these side by side so i want it to be in a flex row so this div right here that contains these two items the div and the image i'm going to add class onto this and to use flexbox we can do d-flex if i save that right away it's going to turn it into a row it's going to align them side by side now with images even without bootstrap or you know without adding any kind of css your image will break out of its container so i'm going to add on to image class and i want this to be bound into the container so we can use a class called image fluid okay which now is in the container i want it to be smaller as well so we can use a size class basically we have width and height classes i'm going to do w dash 50 which will make it half the size or 50 percent of the size okay and then yeah so that's starting to look good now i don't want flexbox to be enabled on really small screens on let's say mobile screens so what i'm gonna do is here instead of just doing d flex which means you know use flex on all sizes you can actually add uh break point or break point size classes in here like sm so what this will do if i do d dash sm flex i'll save that you can see now it's not displayed as flex until it hits the sm break point which is right here okay so basically on mobile screens it's going to be still up and down it's not going to be a flex row but once it gets past that then it's going to be a row all right so let's figure out what other stuff we need to do here we might as well add the rest of the content over here one thing i do want to do is this become a web developer i want to have the web developer be a separate color so i'm going to use a text color class so let's add a span tag here so i'm going to do span with the class of text and i'm going to do dash warning which by default is a yellow color and then we want to put that the text of web developer we want to put that inside of the span so now if i save that we take a look now you can see that's that a different color now underneath the h1 we'll have a paragraph and inside that i'm just going to grab the text so i'll have to type all that out and i mean you can put whatever text you want in here but if we save that that's what it's going to look like now i want it to be a little bigger so we have a class called lead that we can use if i save that you'll see now the text is a little bigger and then i just wanted to add a button underneath that so let's see if this paragraph underneath that i'm going to have a button ultimately this is going to open up our modal but we're not going to do that just yet i just want to get the button so let's do btn i'm going to do btn-primary which will make it that blue color by default and then i'm going to do btn lg to make it a little bigger than the the default okay and then we'll do the modal attributes later on but let's just put in start the enrollment okay so if i save that now we have a button now i want a little bit of space above and below the paragraph so i can add a margin class remember we can do m and then i'm going to do y which is the y axis top and bottom so let's do m y dash 4 and save now we have a little bit more space now i do want the text centered on small screens like this but i want it to be aligned on the right or i should say at the start on anything that's that's bigger than a mobile screen so i have text center here which will by default make it text center but then i can also do text dash sm so small on small screens and up i want to align it to start okay and you can use text start as well but this is just saying starting at the small break point then align it to the start okay and you can see on very small screens mobile screens it'll be centered and then anything above that it's going to be start or to the left i think i said right earlier but it's left aligned start end would be the right all right so now let's see on very small screens i don't even want to show the image so what we can do is go down to the image which is right here we're going to add on to this i'm going to add d dash none so d is just display this is just setting it to display none now this is going to not show at all but what i wanted to do is show on anything bigger than a small s the small break point so we can do d so d dash block is display block but i want it on small and up so d s m block now if i make this a little bigger then the image shows up all right so we're making this nice and responsive just pretty much as we go so let's see we want this to be aligned this way like in the middle so with flexbox you can use uh you can with your css you can use align items and justify content to align on the horizontal and the vertical axis so right here we have our flexbox we're going to say align dash items dash center and we also want to justify content and justify content is going to be this way and i want it to be between so let's do justify dash content dash between so we'll save that and now you can see i mean there wasn't any space here to begin with but if there were it would be justified in between here but the align items actually made it center this way so now that looks pretty good all right and i think that's all we need to do for the showcase let's see oh you know what i did add i had a little bit of padding on the nav bar here we don't really need to do that but i guess it looks better with a little more space so let's go back up here to let's see the nav tag and i'm going to add a class of py so just padding on the y-axis of 3 and that just gives it a little bit more padding and you can mess around with it and you know see exactly what you like so that's the showcase so now the next area we have is this newsletter area so we just want like i think this is an h3 or something or an h2 and then we have this this input form here and it kind of has the button integrated with it it's an input group so let's go under the showcase section and let's say newsletter and this is also going to be a section i want that blue background so i'm going to use bg primary and let's do text light because it's going to be dock by default and let's do p dash 5 padding actually let me just see something real quick as far as the padding goes i guess the showcase padding is fine all right so in here again we're going to want a container to contain everything within that blue background the section and we're going to use flexbox here as well we are also going to i'm going to show you how to do the grid system with the columns but i also wanted to use flexbox you could use either but i wanted to include both just so you know how to do it but basically we're gonna have two items you know just like we did up here side by side so let's do that we'll create a div here and i'm gonna give this div a class of d dash md flex because i don't want want flexbox to kick in until the medium break point and then let's do justify dash content dash between and let's do align dash items dash center okay so that's our flexbox now inside here we're going to want first of all the h3 and i'm going to give this a class of mb-3 that's margin bottom three but on medium screens i don't want any margin bottom so let's also add mb dash md for medium screens and then xero and then here we'll just say sign up for our newsletter all right so if we save that that's what it's going to look like now this shouldn't be so far over let's see and i suppose about container wrong all right that's better now i also want on larger screens i want it to look like the laptop is kind of resting on here so i want to get rid of the space and the reason we have this space we have it all the way around because we're using p5 so padding 5 all the way around so what i'll do is go up to this showcase section and right after p5 i'm going to say plg so padding on large screens 0. and if i save that now you'll see that we don't have that space there and her laptop's kind of resting on the bar but now her head is kind of too close to the the navigation so i'm also going to add pt padding top on large screens we want that to be five which will push everything down okay so mobile screen and it's only on large screens that the laptop will look like that just because you know there's a lot of text on the side here and you can mess around with it if you want but now let's continue on with uh with the newsletter so we have our h3 now we want what's called an input group which is like the you know the input with the button kind of attached to it so if we go to the documentation and we go to forms input group gives you a bunch of examples what i want is something like where is it like this right here with the input and then the button which is this second div here so i'm just going to grab that and let's put that in here so it's a class of input group we don't need the mb the margin bottom and then so if i just go ahead and save that it's going to look pretty bad so we need to do a couple things here first of all let's change the color of the button so instead of outline secondary i'm going to do bg dark okay so that'll change the button i'm also going to add btn-lg which will make the button larger it'll also make the input larger because it's an input group and then let's change this stuff here like the placeholder that's gonna be enter email and then these right here since i copied this from the documentation it's gonna include the accessibility aria attribute so label described by and it is good to have these because it it makes your website more accessible to people that are you know hearing impaired vision impaired but i'm not going to go over that stuff in this video i might do a separate video on accessibility but just for now we're going to get rid of those and then down here let's see we don't need the id on the button if we save that this this looks okay it's just too wide now there isn't a class we can use as far as i know to make the input group shorter or you know a shorter width so this is where we're going to use a little bit of custom styling so i'm going to add on to the input group we'll call this news dash input and then we're going to go into our custom style sheet and basically what i want to say is on medium screens so right here and up i want this to be half the size okay so this is kind of split in the middle once on under medium which is here and less that looks pretty good so we don't really need to do anything there so we do need to use a media query in our css because we only want this to be in effect let's say min width and remember the the break point for medium is 768 so we're going to say as long as it's over 768 by saying the minimum width 768 then we're going to take our news input which is our custom class and we're going to say give it a width of 50 percent so now if i save that oh so now you can see that that is now takes up half the space which looks much better on bigger screens smaller it's fine if it takes up a hundred percent because it's stacked okay so that's the newsletter section now let's move on to right here these three boxes and this is where we're going to get into the bootstrap grid okay and and under the under the hood it uses the uses css grid so let's create a actually put a comment here i'll just call this boxes and let's go ahead and create our actually let's see what section we'll do p dash five so padding five all the way around container make sure i spell it right this time and then to use the grid we just need to use the class of row okay so row is going to surround our columns we basically just want three even columns which is pretty easy to do we can use the class of call and i can just put whatever in here for now and let's say we want three even columns i'll save that and now we have three even columns and it doesn't look like it just because this is aligned to the to the start but if we do like um text dash center now you can see that now they're aligned into the center so what we want in these columns actually one more thing if we just use call it's going to be three columns even on really small screens which we don't want we want this to stack on mobile screens meaning we want it to go you know we don't want it to be in columns so we can just add on to this we'll say call dash md which means that it'll add the columns on medium screens and up so now if i save that now you'll see it stacks on small screens once we hit the md then it goes into the column so we're going to use call md now inside these columns we want to have cards which if you go to components cards you can see different examples so something like this with an image and a button just a very simple card a card with a title so there's different examples here we're just going to type it out because it's not too bad so in this first one here in this first column the we're going to have a wrapper class of card and then as far as the background i'm going to do bg dash dark because you can make the card whatever you want whatever color and then let's do text dash light now i actually want to have an icon in here let's close that up i want to have an icon and you could use font awesome or something but bootstrap now has its own icons it used to back in the day i think it was bootstrap 3. they had icons but then they got rid of them for a while but now they're back so we're going to go ahead and use that and i'm not sure let me see if we go to cdnjs i just want to get the bootstrap icon cdn i don't know if it's here no it's not all right so let's just search for a bootstrap icons so it's icons.getbootstrap and this gives us the examples we could install with npm but i don't want to do that in this video i know there's a cdn i used it let's see all right let's search for bootstrap icons cdn this blog have it yeah here we go so we're going to want to include what's this bootstrap icons all right so we're gonna grab this link right here and that should allow us to use the icons so let's put this right below the bootstrap link and we should be able to use those so let's go back down to where we're right here inside of our card and this is where i want to use an icon so i'm going to just add here an i tag with a class and it's similar to how font awesome works instead of fs we use bi so uh bootstrap icons and then whatever the the icon i'm going to do bi dash laptop because i want to use a laptop icon and let's see if that works yep so you can see the little icon now i want this to be bigger than that so what i'm going to do is actually wrap that in a div and i want it to be the size of an h1 and in bootstrap if you don't want to use an actual h1 tag or an h2h3 you can use that as a class so we can have a div with the class of h1 and we can move this into here and if we save it now you can see that that's bigger it's the size of an h1 i also want to just add margin bottom to this so in addition to that let's do mb-3 and then under that div that wraps the icon we're going to have an h3 and we want to give this a class of card title and let's say virtual okay so we have our h3 and let's also do some margin bottom bottom on this too so mb3 and then under the h3 we'll have a paragraph of the class of card text okay so we have card card body card title card text if you have an image there's also card image in here let's just do lorem i forget what i did 15 maybe or 10 just want some dummy text in here we'll try that let's see now i had a little more i think it was 15 it doesn't really matter i just want it to look as similar to the original yeah and then let's see we're going to have a link underneath the paragraph a read more link that's formatted as a button so you can add these button classes on links as well we'll do btn dark and this will just go nowhere and then in here let's say read more is that what i did no that's primary we actually want that to be primary and i mean you can use whatever colors you'd like but i think that looks pretty good so we want three more or two more of these so what i'm going to do is grab so we have the we already have the call mds let's just grab everything within this call md so basically the card and let's go to the second one paste that in and then we're going to change some things up here let's change the text to hybrid we're going to change the icon from laptop to let's say person dash square and i also want to change the color let's do text i'm sorry bg secondary which by default is like a gray dark gray and then for the the link here let's do btn dark okay so we'll check that out good and then the the last one is going to be you know the same style as the first one we already have that in the clipboard so i'm going to go right down here and paste that in and then let's change virtual to [Music] in person let's change the icon to bi dash people there we go okay so this is coming along the next thing we want is basically these two so learn the fundamentals learn reacts with these images and we're just going to use the grid here as well and just use just have two columns you of course you could use flexbox if you wanted to but let's go under this section here and we'll just say learn sections so let's do section and class of p dash five this one is is going to be it's just going to have the light background so i think that's just fine just p5 and we also want to give this an id because we want the navigation to take us down to here so remember the navigation we have pointing to an id called learn and then let's have our container and then we'll do a row and as far as alignment i want to align items center so i want to center it vertically right the tab the text and all that and then let's also do justify dash content we'll do between the two items jesus i can't type today all right so if we save that we're not going to see anything just yet oh one more thing i just want to show you on very small screens the columns if you want to have space in between here i'm just going to go right back up to the first to the row we created in the boxes which is right here and i'm going to add g-4 so what that does is it gives it a gap and it gives it a gap all the way around you can also do gy for just gap this way and gx for just gap that way but i want to do that just just to separate them up a bit so basically that i i feel like bootstrap five is is getting closer to like tailwind where they give you these really low level classes but in addition to that you have you know cards and alerts and all that so i'm i'm really liking bootstrap five i like i really like tailwinds as well but um you know bootstrap five you don't actually have to have as many classes and there's already some pre-pre-made styles the downside is is it does it can look a little bootstrappy especially if you're not changing up the the main colors and all that actually yeah that's i think that's good yeah alright so let's continue on so we have our learn sections we're going to put inside here so this is our grid row and then we want to have our two columns so the first one let's do call we're just going to do call md and this is going to be an image so the image is going to be in image slash fundamentals and we want to make sure we add a class of image fluid so it stays in its container so fluid and then underneath that div we'll have another call dash md and i'm actually going to add padding on this so p5 and this is going to be the content which is going to be first in h2 we'll say learn the fundamentals and then under the h2 let's do a paragraph with the class of lead which will make it a little bigger we'll do lorem 15 and then let's do another paragraph under that we'll do lorem let's say 30. let's see what that looks like all right so you can see they're side by side we have the text over here and then i just want to have a button underneath or a link formatted as a button so under the paragraph let's do a with a btn and we'll do btn dash light here and let's do a margin top just to push the button down a little bit or the link down a little bit and inside the a tag i want to read more and i'm also gonna put a chevron icon right before it so we'll do i dot bi and we want bi dash chevron dash right all right see what that looks like good and it should stack yeah because we did call md not just call so that's pretty good now the next one is going to be similar so i'm going to just grab this entire section copy that paste that here and then let's change or let's add bg dark to this section and you can see how we're kind of piecing in all these sections that's how i like to build websites like this um so we're going to do bg dark and let's see what else we want to do we're going to change the image here to the react now i actually want the image to go on the other side so i'm going to grab this div the call div with the image cut that and put it underneath this call div which ends right here so we'll place that there and then let's change the text here to learn react and i think that's it let's save that see what that looks like okay so the text obviously we want that to show so bg dark let's also do text dash light all right i think that's yeah same thing cool so those are pretty easy next thing we want to do is the questions which is going to be this right here we're going to use the accordion so let's move on to that we'll say question accordion is that how you spell accordion no it's an o all right so let's say section and we're going to give this a class of p5 just like all the rest of our sections but i'm also going to give it an id for the menu and i'll show you that in a second so let's say questions and i just want to save this and show you that if i click on the menu if i click on this this is going to go to learn and notice how ignite it goes down there nice and smoothly which just happens by default because we used a specific class in our nav bar which was uh where is it we used it on the ul no we didn't wait a minute do we even add it maybe we don't even need to use that class i thought we had a scroll class i could have swore we added that maybe we didn't i guess you don't need it i thought you needed a specific class for that to happen but i guess not i guess this just happens by default which is pretty cool but one thing i do want to do is fix the navbar to the top since we have this type of navigation and that's really easy all we have to do is add a specific class onto our navbar called fixed dash top so now the nav bar will just stay there and we can just kind of you know navigate around if we click on this it'll bring us to the top now one issue we have see how it doesn't account for the space here so her head is now under the nav bar so to fix that i'm going to go into style css and i'm going to say body and then i'm going to use the pseudo selector before and let's say display block now when you use before or after you have to add the content we don't actually want to put any content in there so just empty and then we're going to add a height of let's say 60 pixels so basically it'll add like a ghost element of 60 pixels so that it pushes it back down all right so i know that was kind of a detour but let's go back down to where we left off so boxes learn sections accordion now this is going to be quite a bit of um of markup so i'm trying to decide if i want to copy and paste some of this no we'll just type it out it's not too bad because we can just once we have one question we can just copy it paste it and just change the text so let's add a container and we're going to have a heading so we're going to use h2 i want this to be centered so text dash center and let's add margin bottom 4 and this is going to say frequently frequently asked questions save that good so we see the heading down here and then underneath the h2 we're going to have our accordion so we want to give this a class of accordion and there's different types i'll just we'll just go ahead and take a look at this so we have like this style where it has the the the heading here has a border i want to use the flush version which looks like this i think it looks a little cleaner so we do want to use the accordion flush actually i guess maybe we could just copy this let's see yeah you know what i'm just going to grab this and then we'll just kind of customize it so right here under the h2 i'm going to paste that in and if we save that we should see an accordion okay so that works all right so we're just going to change some of the content here let's go up to the first one so we have this div here with accordion accordion flush this wraps everything and for let's see the id instead of accordion flush example i'm just gonna i'm gonna command d and select all of those the accordion flush example and just change that id to questions because it makes more sense and it should still work fine and then let's see we want to go to the first item here i guess we could put a comment we'll just say item one so each div with the accordion item is a specific item so this one here would be item two and i think we have what three total item three no there's another one well that's three no there's only three all right so let's go to item one and we're gonna keep accordion item keep the header we have the button again i'm gonna get rid of the the accessibility attributes just to avoid any confusion get rid of that get rid of these you don't have to do this i just want this to be i want you guys to be able to understand everything here all right so back to item one and basically we have you know we have the accordion item div we have the header and for the id for the header here i don't think we actually need this for what we're doing so we can get rid of that maybe we should have just typed it out but that's fine whatever then we have the button here accordion button collapsed we want to leave that the target though the target has to match this right here okay so we have the button and then we have the div and these have to match so let's change this we'll change this to question dash one and then we also want to change the um uh where is it this right here the id i want to change that to question dash one so that should still work okay and then we'll change the text here let's say where exactly are you located and then for the content or in the body here i'm gonna just get rid of this and let's do lorem we'll do lorem 50. okay so that's going to be the content down here now for the next item you know what i'll do is i'll just copy the first item that i just put so this ends here so we're gonna grab this wait is that right no sorry guys i'm just grabbing the div with the accordion item class and let's close that up and then i'm going to just go to item 2 and i'm going to just replace all this actually i'll just replace yeah so that's item two we'll paste that in and then we have item three which ends right here let's paste that in so now we should have three of the same questions so let's go to item two and let's change the target so this right here we want to change that and that to two because this is question two and let's say how much does it cost to attend and we'll just leave the same body that's fine so item three let's say what do i need to know so like what technologies what skills do you need to know and let's change question one here and here to question three so now we should have three separate questions that open separately but i want to have a few more so what i'll do i think i still you know my clipboard still has the first item so i'm going to go under item three let's say item four oops paste that in and let's see we'll do how do i sign up and let's change let's change uh so we have question one right here let's grab that and that this is going to be four and then let's do what was the other question i had i think i had five will you help me find a job so let's go under item four which ends right here item five do you help me find a job and then just change the target from one to five all right so now we should have five questions good so that's the frequently asked questions section with the accordion now we want to do the instructors so this is going to be similar to like the um the cards we did above so let's go under the this entire section here and let's give this an idea of instructors so the menu goes to it and then we'll give it a class of p-5 and also bg dash primary because we wanted to have that blue background and then inside there let's do class of container and then we'll have a heading let's do h2 text center and text dash white and we'll say our instructors okay so we have our heading then we're going to have a paragraph underneath that so underneath now let's do paragraph we'll say lead to make that make it a little bigger we want to text center and let's do text dash white and i'm going to do margin bottom five and in here let me just grab that text okay so we have the paragraph now underneath that we want to have our grid with our columns so let's create a row and we're going to do gap 4 or it's actually gutter i say gap but it actually is stands for gutter and then let's do call so call dash md what i want to do here is have it on medium screens i want it to be split into two columns so we're gonna do dash six which might seem a little confusing if you haven't worked with the grid system but basically there's 12 columns total right so we want this to take up half of the 12 columns so we're using six on medium screens on large screens we wanted to take up three of the 12 columns so that we have four columns so let's do call lg on mg lg so on large screens we want to take up three okay and then in here we're going to have a card and we're going to use bg dash light which will give it a light gray background and then let's do our card dash body and i'm also going to text center inside the body we're going to have the image of the person now i'm just going to i'm going to use a specific api here and you can basically just get random pictures of people so it's going to be https randomuser.com or i'm sorry not com dot me slash api slash portfolio is it no not portfolio portraits so portraits slash and then you can do men or women this one will do men and then just a number so 11 jpeg okay and then let's add some classes to this so i want to make this a rounded image so we can simply say rounded dash circle and let's do mb3 all right so we'll save that see how that looks so far all right so we have our guy in the circle here and then underneath that image let's do the name so we'll put in h3 and this is going to be the card dash title and let's do mb3 and we'll say john doe and then paragraph with card dash text and we'll do lorem 15 and then we want some social media links for each of these these uh instructors so let's do an a tag here and this would this would go to their page i'm not going to put anything in here but this will be the let's do the twitter one so an i an icon and we want class of bi and then bi dash twitter now i also want this to be dark it's going to be blue by default but i want to use text dash dark here and let's do margin on the x-axis so mx-1 all right so if we save that we take a look you can see there's the twitter icon so now i'm going to copy this a tag down let's do two three four and the second one is going to be facebook and then let's do linkedin and we'll do instagram okay so now we should see all of the icons here now i'm just going to copy the column so column starts here ends here i'm going to grab that whole thing and let's go underneath we're going to have 4 total so 2 3 4. and if i save that it's just going to be all the same person now we're on we're past the large break point so we have each one is taking up 3 of the 12 columns when we hit the medium it goes to 2. okay so it looks like that and then it stacks on small screens all right so let's just change up the content so it was the first one okay so that's the first one which i'll leave as john doe the second one here let's change to jane doe and then i'm just going to change was the image right here instead of men i'll just change that to woman and then let's see this one here the third one let's change the name we'll say steve smith and we'll do men and then slash 12 and then the last one here let's do woman 12 and for the name we'll change that to sarah smith alright so save that and now we should have all different people all right cool so next we just have basically this this contact with the map here and we're going to use mapbox for this if you don't want to you don't have to but you do need to just sign up and get an api key and then we have the footer and then we have the modal up here you know we click start enrollment so those are the things we have left so let's go down under this last section and we'll go ahead and create let's just say contact and map and then let's do section p5 so padding 5 and then let's add a container class and then in here we're going to have a row with gutter 4 and we want two columns that start on the medium screen so let's say call dash md and then in here we're going to put an h2 h2 with some classes just want to text center it this is the contact info heading so we'll do that we'll do mv4 and let's say contact info now i want i wanted to include a list group somewhere and so i mean it doesn't look the greatest this here if you want to change this up you can but i wanted to have a list group because you'll probably use these pretty often like if you have sidebars with i don't know if it's a blog with like category links or something like that so let's do a ul and we're going to add list dash group and i want this to be flush so we're going to use list dash group dash flush and let's also make it a little bigger so i'm going to use lead as well and then each inside of a list group each li is going to have a class of list group dash item and in here let's put a span because i want that the label to be bold so there's a class you can do fw for font weight and bold and in here we'll say main location and then outside of the span you can put i don't know i just put 50 main street boston mass so if we take a look at that there we go and then i just have i'll just paste these in because it's just like the phone and email and stuff it's all formatted the same way so we just have another list group item with the enrollment phone the student phone the enrollment email and the student email so if we save that it's going to look like that now for the second item or for the second column i should say let's go under this one and let's say call dash md and this is where i want to put the map so what we need to do is go to map box if you want to do this you want to go to mapbox.com sign up i think i'm already logged in here okay and then you just need to get an access token so you can do create a token don't use mine i'm going to refresh it afterwards and then you need to include if we go up here to web let's say use the mapbox cdn and we want to grab let's see we have the css file which i'm going to grab first and i'm going to put that up at the top we'll go right let's go right above our custom style sheet and below the bootstrap stuff so that's the css and then i'm going to grab the script tag here and let's put that down at the bottom so we'll put that right under the bootstrap script tag and then we want to open up our own script tag because we do have to add a little bit of javascript here and let me see does it actually give us yeah let's say next so now we want to grab everything that's in this script tag and paste that in there okay make sure you use your own key here this is gonna it'll automatically put your key inside there and then let's see so we have we're creating a new map box we have a container called map so inside of the column here we're going to have an id of map oops why didn't that work i don't know why i am it's not working right now but say div id and we're going to set that to map and that's it we don't need to put any other html in there so you can add other values to i'm just going to save this to align this correctly so you can add other things inside of this instance and we want to add a center point because we want to focus on a certain area and this is going to take the longitude and then the latitude so i'm just going to do 7 negative 71.06 and this is just a boston location but you can put whatever you'd like and then 42.357.25 that's going to be where we want this centered and then i'm going to set the zoom level set that to 18. okay now if i save this and we go back we're not going to see anything just yet because the div doesn't have a height or a width so this is one more thing we have to do in our custom style sheet is take that id of map give it a width of 100 a height of 100 percent and i'm also going to add a border radius of let's say 10 pixels okay so now the map should show and it should be centered on you know whatever latitude and longitude that you put in there so the last thing we want to put well actually we want to do the footer and then we want to do the modal so for the footer let's go right here footer and we're going to want to use a footer tag here and let's do p dash 5 and bg dash dark for our footer and let's see actually there's some other classes we want to do as well so i'm going to add text white and text center now i'm also going to position this relative so we can use position relative as a class and the reason i'm doing this is because i want to have a go back up button and i'm going to position absolute within the footer so in here let's use a container and inside the container we'll have a paragraph give it a class of lead let's say copyright uh and we'll just use ampersand copy and let's say 2021 front end boot camp so if we look at this so far okay it's just going to look like that and i just want to add a go back up link with an icon so under the paragraph let's do an a tag and give it a class of position dash absolute so it's positioned absolute within the relative footer and let's give it a class of bottom dash 0 and end dash 0. you're a little restricted with the positioning you can check it out in the documentation and i'm going to do p5 for padding this will just go to number sign which will bring us up and then for the icon let's do i tag with a class of bi and then a class of bi dash arrow dash up dash circle and then also h1 just to make it bigger so if we save that it brings me back up but you'll see that now we have this this up arrow if we want to go back up to the top all right so the last thing we have to do is the modal let's just make sure this looks good on mobile so everything should just be nice and stacked good all right so the modal let's go back up to the button so the button in the showcase which is right here so we have this button that says start enrollment and we're just going to want to add on to this a couple things couple attributes so after the class let's put data dash bs dash modal and i'm sorry dash toggle so remember with the navigation we did bs toggle we set it to collapse well now this is going to be set to modal and then we need the target so data dash bs dash target and we're going to set that to number sign and roll that's going to be the id of the modal all right now to use the modal let's go to the documentation here we have to add i believe we have to add a little bit of of javascript or maybe we don't no i don't think we have to initialize it anymore um but let's go down to because it's kind of a lot so i think maybe we should just kind of copy and paste so this will give us something like that is there one with a form this is okay that's just showing you to use the grid you can toggle between modals i thought there was one with a form that we could kind of just use as a template but i don't know we'll just grab where is it live demo yeah we'll just grab this so the trigger we already have right we already have the button with the toggle and the target so we're just going to grab this right here copy that and then let's we can put this anywhere really i like to put it at the bottom so i'm going to go under the footer and paste this in now the id is example modal i want to change that to enroll so i'm going to actually just command d that that and change that to enroll and now if we save that we go back to this button here and click it should open up the modal which doesn't have anything in it just yet but we know that that works so now in the body let's see yeah we'll just save it we'll keep that we'll keep the footer as is in the body we're just going to want to create a form so i'm actually going to put actually have a paragraph first let's do a class of lead and we'll say fill out this form and we will get back to you okay and then underneath the paragraph let's create our form so we'll say form it's not actually gonna do anything so we don't need an action and inside here let's have uh each each label and input will be in a div with mb3 just to kind of push the next one down so let's add a label so we'll say label for first we'll do first dash name and we're going to give this a class of call dash form dash label and label will just be first name and then under that underneath that we'll have an input with the class of form dash control and let's give it an id of first dash name which matches the label so if we save that and we take a look we should have our first field now the rest of the fields i'm just going to paste in because it's pretty much the same thing so underneath this div with the mb3 we're going to have three more so the second one is going to be the last name then we have email then we have the phone so now if i click that we should see our form and instead of save changes for the button let's change that to submit okay so that's pretty much it and i think this i mean this looks decent you can kind of tell it's bootstrap mainly by the colors this blue hair is is known for for being bootstrap but you could easily you know use sass and change the primary colors and change some other things and compile it and have a custom bootstrap css file but i think that it's it's nice that we have you know the smooth scrolling we have a modal we have an accordion it's responsive we have a hamburger menu and we didn't really have to write any custom css or javascript to be able to do that which is nice so now what i'm going to do is deploy this to hostinger and we're going to get this up and running all right so we're going to be using hostinger to deploy this website and hosting our sponsoring this video they're extremely cheap and reliable and great for just about any kind of hosting we're using a shared hosting account so i'm just going to go ahead and log in okay so i already have an account here with at traverseydemo.com i just registered a new domain called frontendbootcampdemo.com and that's the domain i want to use and i have a premium shared hosting account here that's pending setup so we'll go ahead and just quickly set that up so we'll say start now and obviously you would only do this this part once once you create an account so i'm going to choose other for the type of website and i'm going to choose the domain front-end bootcamp demo and then from here you can go on and you can use wordpress and set that up they'll set that up for you but i'm going to say skip i will start from scratch and click on finish setup and it should take us right to our panel okay so that's all set let's say manage site and this will take us to our control panel now there's there's multiple ways that you can deploy so of course you can use like ftp if you want ssh we're going to use git so down here under advanced we'll say click on git and we need to generate an ssh key so i'm going to click on that and let's copy that and then we're going to go over to github and let's go to settings because we want to add that ssh key so under ssh key our ssh and gpg keys we're going to say new ssh key i'm just going to call this hostinger and we'll paste that in and add it and now we just want to create a new repository so let's go to add new repository and i'm going to call this bootstrap let's call it bootstrap bootcamp website okay and i'm gonna keep it as public and i'll have the repository just link in the description as well so from here let's go ahead and just copy this get remote add command and then i'm going to go back into vs code and i'm just going to use my integrated terminal so command or control tilde and we want to first init or initialize a git repository once we do that let's get add all so we're adding it to the stage everything to the staging area then we'll get commit dash m and we'll say initial commit okay now i'm going to paste in that get remote add command that i copied and let's go ahead and i'm just going to use the main branch if you want to create a separate branch you can but we're going to say git branch dash main and then we're going to push to that main branch okay so once we do that and we reload this page we should see our files so now all we have to do is grab under code here since this is public we're going to go to https and just copy that link go back to this page and let's go ahead and paste that in and the branch is going to be main and create we should see a little message that says it was added okay get repository successfully stored so now down here you'll see your repositories and all we have to do now is click on deploy are you sure you want to deploy yes okay so deployment start deployment end let's close that up and now we should be able to go to the domain and we can see the website has been deployed all right so that's it i hope you guys enjoyed this little project and i will see you next time

Channel: Traversy Media

Views: 209,121

Rating: 4.9632554 out of 5

Keywords: bootstrap, bootstrap 5, html, css, css frameworks, bootstrap crash course, bootstrap 5 crash course

Id: 4sosXZsdy-s

Length: 78min 48sec (4728 seconds)

Published: Wed Jun 09 2021