Build A Responsive Bootstrap Website A Full Screen Image Slider using Bootstrap 4, HTML5 & CSS3

in this video we'll create a website using HTML CSS and bootstrap before so before we get started I want to thank all you guys for the likes on the video that I put out last week where I set a lifetime goal of 1000 likes and if you can do the same for this video I would really appreciate it this video is the second of three videos deriving from the advanced bootstrap theme course that I just put out on udemy which I'll link to in the video description last week we did the original theme with the full-screen landing page in this video we'll do the image slider version then next week we'll cap off the new no theme design with the video landing page which I'm excited to share with you alright so let's take a look at the theme here that we're gonna lay out and as you can see the design is going to be similar to last week where we had the landing page at the top of the screen here we have the full-screen image slider and then as we work down the website we're gonna have some different elements from the udemy course that I put out including the portfolio section and the team section so if you participated in building the website in the last video and you just want to add certain elements to your website from this video you can go ahead and do that okay so let's get a rundown of the website starting with the logo up to the top left then we have our navigation on the right and when we click on one of the navigation links it's gonna send us to a different section of the page and the link will stay highlighted to tell us which section of the website we're covering then on top of the landing page we have these headings along with the get started button which will send us to the next section of the page and here on the sides of the image slider we have our previous and next buttons which we can use to go to the different slides as well as the indicator buttons at the bottom there which we could also use to navigate the image slides so later in the video I'm going to show you how to add those of course and you can do away with the previous and next buttons or the indicator buttons that you see right here if you want to okay so moving on to the next section we have a section that I'm just gonna call course and this is a little self-promotion but you can use it to your own agenda with the heading a paragraph text and then the button that you can see right there and underneath that we have the portfolio section so as you can see when we hover over different portfolio images they'll zoom in and then if we go ahead and click on one of the portfolio images it'll open up in a new tab displaying the full image okay so let's move on down through the page to the next section where we have a paragraph and then the button followed by this meet the team section which will feature bootstrap cards with the image and then the editing and text box underneath it which we'll learn about later on followed by the footer section at the bottom with the social media buttons that I'm going to show you how you can customize and add your own icons here alright so let's move back up to the top of the website here and size it down to take a look at the responsiveness and the mobile view so once we get to 768 pixels it's gonna shift into the mobile version with the drop down menu as you can see here and with the drop down menu the links are still going to reflect which section of the website we're on and moving down the page you'll see that the three column sections for example with the portfolio has turned into a single column as well as the cards section from the meet the team part of the website down here it's going to go from the two columns to the single column section and the footer will size down from being centered on the page to taking up the full width okay so let's size the website back up and I want to show you what we'll need to get started to participate with the tutorial so in the description of the video we'll be the starter files for the website that you'll need to get started so you can go ahead and pause the video for a moment if you want to download those and then once you do I'm going to open up index.html and style dot CSS in my text editor which I'm using the free program sublime text for another good one is Visual Studio code and then I'm going to have index.html open in Google Chrome as we're building the website so once we go into sublime text and open up index dot HTML you'll see that we have a little bit of content already included for us and as you can see here in google chrome the content that's included will be the course section of the website so I can include a little bit of self-promotion with the starter file download you'll also see that there's some CSS already laid out for us for that course section so what I'm gonna do for now is I'm just gonna comment this section out so we don't see it and then once we get down to this part of the website I'll just enable it again so we can have that already filled out for us to save us some time so let's go over what's already included for us here starting at the top of index.html with our doctype HTML and then we have our actual HTML tag spanning the entire document with the language English they're included with the tag and then inside of our head section to tell the browser how we want the website to display we have our character set at the standard utf-8 width device-width initial-scale 1 for mobile devices then we have the title of our website that appears at the top of the web browser inside of the tab there that's also going to be the largest text that appears if you were to do a google search for a website and then moving down underneath the title tag we have the first stylesheet link which will link us to bootstrap min dot CSS so that's going to be inside of the bootstrap folder here and then the CSS folder and then as I said it's bootstrap mint CSS which is this file right here then the next stylesheet that will link to will be the actual style dot CSS file which is right here in the root directory and we also have that open in sublime text already then we have the CSS file fixed dot CSS so what that's going to do is that's going to set some corrections to the bootstrap framework for example overflow sometimes you get sort of a little gutter that appears off to the side of the website so that will make sure that that doesn't happen now let's drop down to the body section of the website where we're linking to our source our script source files so we're gonna start that off with the actual jQuery file where we have jas /j query and this is the latest version with three point three point one and that's in this folder right here and then underneath that we have a link to bootstrap Minjae s so we'll go back into the compiled bootstrap folder here and then we have the J's folder and then we have bootstrap min Ju and that's all that we'll cover inside of the starter files for now later on in the video will cover the images folder as we reference the different images while we build the website then the last script source file right here is two font awesome and with font awesome as you can see since I put this website together it's already updated so that's why we're gonna link to it externally it's because they update it really frequently so I'm gonna go ahead and change this to five point six point one rather than 5.50 and we're all up to date with our font awesome icon link okay so let's go back over to the finished version of the website and take a look at the first thing that we're gonna lay out in index.html and that's gonna be something called bootstrap scroll spy so you might already be familiar with it but bootstraps roll Spy let's less light up the navigation links per section of the website that we're scrolling over or that we are navigating inside of the browser so as you can see when we get down to the core section or the portfolio section the navigation links are going to be highlighted to reflect that part of the website so to add bootstraps Scrolls by we're gonna add something called data - spy to the body tag for the website and we're gonna say data spy equals scroll and then we'll need to add the ID that we're going to give the navigation to link it to the body with data target and that ID is going to be navbar responsive with a capital R okay so once we've added that we'll add the first ID that we're going to be linking to for bootstraps rolls by well which will be the home ID so let's create an invisible comment saying that this is the start of the home section which will span the length of the full screen image slider I'll also create a comment saying that this is the end of the home section and then let's go ahead and add the div ID for bootstrap scroll spy which is just div ID home and then we can drop down and close out the div and before we add the content to the home section we're gonna go ahead and lay out the rest of our div IDs spanning the whole page to link up bootstrap scroll spy to our navigation once we add that to the home section in just a few minutes so I'm gonna pop copy and paste the home section right here and then I'm gonna show you a little shortcut that you may already know so I'll just add two hash tags and then we actually already have the course section laid out so I'm gonna go ahead and drop this down to the next section underneath the course section which will be for the portfolio part of the website as you can see right here so the shortcut that we're going to use for sublime text I'll put a little image up to show you that so basically we're just select all instances of the two hashtags and then I'm gonna change that to portfolio and then I'm just gonna make the div ID lowercase and then we can do that to the team section beneath the portfolio div ID so I'll just say team make it lowercase and then we can use the shortcut again for the contact section at the very bottom so I'll go ahead and select it and then just change this to contact okay so now we have all of our div IDs set for bootstrap scroll spy so we can move back up to the top of the website and start building our navbar that has our logo and navigation links inside of it so move back up to the div ID home and just beneath that let's create an invisible comment saying that this is the start of our navigation okay so once we've made our comment here let's drop down and start off with the html5 nav tag and then we'll say class navbar and then after that we're gonna have a class to set the width at which the navbar expands from the mobile version to the full width version so we're gonna say navbar - expand and then we're gonna use the medium screen width with MD so MD as you probably already know if you've built a bootstrap website before will be the transition at the 768 pixel mark so at the bottom of style dot CSS we have a little cheat sheet and MD as you can see here will be for the media query at 768 so now let's add navbar - dark to set our links to a light color to match a dark background and with that if we go and refresh we're not gonna see anything yet because we haven't given it a background color so we'll just use BG - dark for the background color and there we can see the start of our navbar and then the last thing that we'll add to our nav class will be the fixed top class because we're going to keep our navigation bar fixed at the top of the screen okay so let's move on to the logo next which is gonna be wrapped with a link with the anchor tag and then we're going to give this a class called navbar - brand which is standard for logos with bootstrap and then we'll set our link and I'm just going to link us to index dot HTML the same file or on and then we can add our image inside of it and then close out the link so let's go ahead and get the image folder or the image file rather and that's going to be inside of the image folder and then we have Nuno PNG so we'll enter the image folder and then Nuno dot PNG and let's go ahead and check it out here in Google Chrome so there we have our logo later on we'll resize it we'll make it half the size of the original size so it looks good on high resolution phones and let's move on to the drop down button next okay so for the drop down button we're just going to use a button tag underneath the logo so we'll say button and we're gonna give this a class called navbar - toddler because it's the toggle button and then we're gonna give it a type of button and then we're gonna say data - toggle collapse which with bootstrap as we know the button is going to open and collapse the navigation and then we're going to give it the same div ID for the data target as the bootstrap scroll spy data target and that's going to be the ID navbar responsive as we see right here alright so I'm going to go ahead and paste that in and then we can drop down and close out the button and if we go check it out in Google Chrome we'll see the start of the button but we don't see the icon inside of it so let's go ahead and add a span class for that and the bootstrap class for the icon is navbar - toggler - icon and then don't forget to close out your span tag so once we refresh there we have our toggle bootstrap button and now we can add the actual navigation so let's drop down underneath the button tag and I'm gonna leave a space and we'll start a div class off called collapse and nav bar - collapse and then we can give it an ID that we've been referencing with navbar responsive we'll just need to remove the hash tag because this is the actual ID rather than a reference to it and then once we close off the div let's go ahead and start our unordered list which will contain the list items with the link so we'll say UL class navbar - nav and then we'll say ml - auto meaning margin-left:auto which will position our navigation or unordered list off to the right hand side if you want it position to the left you would use mr auto so once we've added that let's go ahead and we can close out our unordered list and then add our list items so we're gonna say li class nav - item and that's the standard list item class for the bootstrap navigation and then we have a class nav link and then we'll say H ref and then the hash tag home - link us to the home ID and then we can add the text inside of that so actually let's just copy this and paste it a few times because everything's going to be the same except for the references the different sections of the page and the text for the link and then we can add the home section at the top along with the text so I will say that when you're not using bootstrap scroll spy as we link to the first div ID at the top of the page you'd want to add a class active to the first link with the a class or for whatever page you're on but here with bootstrap scroll spy it's going to take care of the active class for the different links so we don't need to add that here so let's go ahead and fill out the rest of the div IDs followed by the link text and then we have the last one which is contact and I'm going to go ahead and save it and refresh and let's go over to Google Chrome and there we have all of our links so as you can see right now the contact link is lit up that's going to be normal with bootstrap scrolls by if there isn't enough content to fill up the browser window it's gonna assume that we're at the last section ID which is the contact section okay so let's move back over and I'm gonna flex this back up to full screen width and we can get started on the full screen image slider that appears behind the fixed nav bar okay so let's go back to index.html and drop down underneath the closing nav tag and I'm going to create a new invisible comment saying this is the start of the image slider so start image slider and then what we're gonna do is we're going to create the main div ID were the image slider and we're gonna call that div ID carousel example indicators because the indicators at the bottom and the screen that we just saw will be what controls the different slides you can also remove that if you want I'll show you how in just a second so div ID carousel example indicators and then we're going to give it to classes carousel and slide and then we'll say data - ride carousel and then would boot with bootstrap we can set the interval right here inside of the div for how much time it spends on each individual slide so right now it's set to 7,000 it's not going to be quite seven seconds because I have the video sped up a tiny bit but we're gonna set it to 7,000 which would mean seven seconds and then we can drop down and close out the div and I'm also gonna create and a ending invisible comment saying this is the end of the image slider okay so once we've done that let's go ahead back up to inside of the div ID and we're gonna add the individual data targets for the carousel indicators which will be inside of an ordered list so we'll say oh L class carousel - indicators and then we can drop down and close out the ordered list and then we'll say Li and data - target and then we'll reference the ID carousel example indicators that we add at the top here so we can go ahead and just paste that in followed by they're following the hash tag for the ID and then we'll need to send that to a particular slide so with bootstrap carousel for the image slider that always starts with the number zero so we'll say data slide two equals zero and then for the first slide we'll add class active because we want it to be active as we see right here and then once we've done that we can close out the list item and we'll need to do this for the two other slides so you can go ahead and just paste that in and we'll remove the class active and then we'll change this to one and then the third one will be data slide two number two so if you want to do away with the carousel indicators you can just delete this whole ordered list but you'll want to keep the div ID at the top of the image slider section that we've added so let's move on to the first slide so as we can see we don't have any content yet so we're going to add our first slide inside of a new div class that will be inside of the div ID and we're going to call this carousel - inner and then optionally for people with screen readers you can add roll list box if you want you can add s are only to the different image slides if you're familiar with that for people with screen readers okay so let's go ahead and close out the div and I'm going to create a closing comment saying that this is the end of the carousel inner and inside of that we can add our first carousel item for the first slide so let's create a new comment and I'm just gonna say slide one and then we'll add our div class carousel - item and then similar to what you would do with the nav item for a navigation we're gonna give this an active class all right so now we can add the actual background image using a style and to set the image we'll use the background image style so we'll say background image URL and then in parentheses we'll add the image which of course is inside of the IMG folder and then that the first image is just going to be computers dot PNG so I am GE Ford / computers PNG and now that we have the first slide set unfortunately we're not going to be able to see it until we add some CSS in style dot CSS to set a height for our carousel item so let's go ahead and let's add all of the CSS for our website leading up to the image slider in sequence so the first thing that we're going to add will be our Google font so I'm just going to do a google search for google fonts lato which is the font we'll be using and then I'll select the font and then we're going to want it in bold so I'll hit customize and then select bold down here and then to embed it we'll use the import URL style here which I'll just paste in at the top of the style sheet and then we'll also need to reference the font family so I'll copy that and then let's go back over to style dot CSS to add the font family and to do that we're going to go ahead and target the body of the HTML document itself and then let's set a style called overflow X hidden first to make sure that all of our content stays within the browser window and then we can set our font family to Leto and then while we're in the in the body section I'm gonna also add the color that will appear throughout the website for our font that's sort of a dark gray shade blue greyish shade so we're gonna say color hashtag 505 962 for the hex value and we're not gonna see that on the version we've been working on yet because we don't have any text yet but let's move on to the next bit of our styling which will be for the navbar at the top of the website so let's create a new comment here or really our first comment in style dot CSS and I'm just gonna say navbar to indicate that this is the start of the navbar style and then let's go ahead and reference the navbar class and let's set our text to uppercase and then we're also going to make it bold so we'll say dot navbar and then text transform uppercase and then we'll say font weight 702 take advantage of that 700 weight we got from google fonts to make it bold and if we go back and refresh there we have our uppercase characters for the links as well as the bold font so let's um size it down slightly with font size point 9 REM and if you're unfamiliar with rem-1 rem-3 this is about 14 and a half pixels and then let's space the characters apart a little bit with letter spacing point 1 R M so that looks pretty good until we add the correct color to the links as well as spacing them out a little bit further which we'll do with the list item but let's set the background color to give it its transparency so we'll say red green green blue is zero for all black and then for alpha will give it a forty percent transparency with 0.6 and then we'll say important to override the background color that we gave it to our navigation already so now that's that set we're not going to see it transparent right now because we don't have any content behind it but let's move on to the logo next so I want to reference the class that we gave the logo called navbar - brand so I'll say dot and a half bar - brand and it'll make the height 32 pixels or to rim which is gonna be half the size of the height for the logo which as you can see right here is 64 pixels in height and this is always good to do for high resolution screens so it doesn't appear pixelated so we'll say height - rim and then if we refresh we'll actually need to target the image so we'll say navbar brand IMG to select the image and there we have our logo resized so moving on back to the links let's go ahead and space them out a little bit more by referencing the list items so we'll say dot navbar - nav which is for the unordered list before we can get to the list items and then let's give them a padding on the right side of 0.7 REM okay all right so that's spacing what's pretty good click the original version there's a little bit of padding on the top so we'll add that to the links themselves so let's go ahead and do that so we're gonna reference the navbar dark which set the light color to the links and then navbar - nav and nav link to override the color of the links and we'll also add some padding so we'll say navbar - dark navbar - nav and then navbar - link and then for the color you can use the hex value ffff for white or you can just say white and now we have all of our links white until we hover over them well it's also change the padding just to match the spacing to the original so we'll say padding top point a trim which will move it slightly further away from the top of the browser window so to target the active class and the hover let's go ahead and reference the same selector and we'll say dot active to target the color while it's active / bootstrap scroll spy section and then we'll say comma and colon hover to target the cover color as well and we're going to use the shade that you're seeing here in the logo sort of the turquoise ish green whatever you want to call that and the hex value is 1 e BB a3 all right so let's go back and refresh and as we learned earlier when we laid out the navigation the last link is gonna stay activated with bootstrap scroll spy because we don't have any content yet so let's move on to the first slide with the image slider next and let's start it off with the new CSS comment and we'll just say slider and then we'll need to set a height to the carousel item that we added for the first slide so let's go ahead and reference that so that's going to be dot carousel item and then we can set the height using vertical height so for example we could say 50 VH which will make it 50 percent of the page but we're gonna do a full-screen image slider so we're gonna say 100 vertical height and that's gonna fill out the entire browser window okay so once we size it down as you can see no matter the width it's gonna say stay [Music] 100% of the screen and it's not overflowing outside of it because we set the overflow X hit into the body all right so let's go ahead and move back over to index.html and for the first slide we're going to set the caption with the headings and the button that appear on top of it so we're gonna add that inside of the div class that we gave the div class carousel item which I forgot to close as you can see here but that's alright that wouldn't have made it so we can see the image we still had to add the height and we're gonna call this section carousel caption so div class carousel - caption and then all the text in here will be centered as you can see so we're gonna use the bootstrap class text - Center which will take care of that for us and then we can close out the class and let's add the first heading which will be a heading 1 where it says welcome to Nuno so I'll just type that in and later on we'll make it uppercase so you don't have to worry about the characters for now and then for the heading three will say animated bootstrap theme and then moving on underneath that we have our button and we'll use an anchor tag for that and then we'll add the bootstrap classes to get the button displaying as we want with BTN and BTN - outline - light and then we're going to use a large button with BTN - LG and then the link for the button is going to send us to the course ID so we'll say hashtag course and then we can just add the text for the button which is get started and then close out the link so with bootstrap buttons if you want to learn more about how to style different bootstrap buttons you can just do a Google search for it and then under bootstrap components with the documentation you'll see buttons on the side and that's going to show you all the different classes as we move down so we're going to be using the outline button right here the light one which is kind of hard to see but it looks really good with dark images or backgrounds behind it so once again that's just bootstrap components if you want to learn more about buttons and how to add different bootstrap elements to your website so there we have the caption displaying with our headings and the button but we're not going to style that right now let's move on to add the next two slides so we can drop down underneath the div class carousel item and let's create a new comment saying that this is the second slide and then once again we'll want to add carousel item as our div class and then we'll just take out the active class and we'll need to change the background image to computers - 2 dot PNG so computers - 2 dot PNG and then I'm going to close out the div and if we go back over and refresh we can wait it out for 7 seconds or we can whoops I forgot the dash here or we can use the carousel indicator at the bottom of the screen to see the image ok so let's move on and let's just change the number two to number three to add our third computer image and then if we go back and refresh we have all three of our slides appearing but we don't have the previous and next buttons added yet so if you don't want those you can skip over this section but let's go ahead and create a new comment saying it's the start of our previous and next buttons alright so these are going to be inside of an anchor tag so we'll say a class carousel - control - PR evie for previous and then for the link we'll need to link to the ID that we set for the carousel or image slider overall with carousel example indicators and then we'll say roll equals button and you can also add s are only here if you want for people with screen readers but won't skip over that and then you can add data slide previous and then inside of the link we'll need to add the actual icon so we'll say span class carousel - control - preview icon and then we're gonna add area hidden equals true to hide the previous and next buttons - from screen readers alternatively you can use s our only previous or next to enable the navigating of the carousel for screen readers but if there's no content with the images it doesn't really add any value to the website okay so let's move on to the next button so we can just paste in the previous content and then we'll just change prev to next in the three instances of it and then if we go and save it and refresh there we have the previous and next buttons displaying for us alright so now that we have all of our slides laid out before we move back over to style dot CSS let's drop down through the website and fill out more of the HTML content so as we know we already have the course section laid out for us we just have to remove the hidden comment here to enable that section and we already have the CSS laid out for us in style dot CSS so if we refresh there we have the new no theme bootstrap course content there with the link to my course as I've promoted at the beginning of the video and we can drop down to the portfolio section next so let's move back over to the HTML document and just underneath the portfolio div ID let's create a div class and we're gonna start the jumbotron which gives us the dark background color that we're seeing separate us from the white background above and beneath the portfolio section so we're gonna say div class Jumbotron and then we'll also add container - fluid which will make it so we have zero margin to the left and right of the viewport or browser window and then let's drop down and close out the div for our jumbotron and I'm also going to create a comment here just saying that this is the end of the Jumbotron because we're gonna have a fair amount of content inside of it and then let's add the first bit of content inside of our Jumbotron which will be the heading that we're seeing there with the line underneath it so we're going to use a heading three tag to create the heading and we're going to give it a class so we'll say h3 class heading and then we'll add the text which is portfolio and then close out your heading three and for the line that appears underneath that we're gonna go ahead and let me just refresh so there we see the portfolio text and the jumbotron or at least the start of it there and as I was saying for the line underneath the heading we're just going to create a div class for that that we're gonna call heading - underlined so we'll say heading underlined and then close out the div okay so now we can drop down to the portfolio that we have here and since this will be different bootstrap columns we'll need to nest that within a bootstrap row and then we're also going to give it a class called no - padding which will customize ourselves that's not a bootstrap class to remove the padding in between the columns where we're seeing the portfolio images so I'm just going to create an ending comment for the row similar to the jumbotron and then we can move on to add the first bootstrap column for the first image here so since we have three different columns if we divide three into twelve we get four and it's going to make the transition at the 576 pixels ark for small screens rather than 768 so that's going to be the SM rather than the MD so naturally will say column SM and 4 so once we size up past the 576 mark will have 3/4 of the column display all right and then I'm just going to give it a div class that will call portfolio so we can style these images different from the other images that we add throughout the theme and then let's add around the image a link that will send us to a different tab with the full image displaying so we're going to say a href and then we'll need to reference that first image that we're linking to which is inside of the portfolio image here and that's going to be one dot PNG so we'll use IMG forward slash and then we'll go into the second folder with portfolio and then one dot PNG and inside of the link we can go ahead and add the image that's going to display on the website so we'll say image source and then we can just reference the same file extension here for the first image and if we go ahead and refresh we have the image displaying here but if we click on it now it's going to open up in the same tab so we'll want to add a target underscore blank to the link to send us to a new tab in our web browser okay so you can't really see that a new tab is opening but I can assure you that it is so let's go ahead and move on to add the rest of our images so to save some time since the images and their extension are the only thing that we need to change let's go ahead and just copy and paste this five different times for the to cover all six of the portfolio images okay so once you have it pasted out we can just go down from number six to fill out all of the different file extensions for the different portfolio images so we have five dot PNG or six rather all the way down to one dot PNG so if we refresh we can see that we have all of the images displaying here but we'll need to add some styling to get it looking like the original so now that we have our portfolio images let's add the rest of the content inside the Jumbotron which with the paragraph text and the button underneath so we'll add that just above the end of the row and we're gonna use a class that was already used for the course section called narrow to make it so it's not so wide so it only takes up 75% of the screen we're also going to learn a trick in the footer section so you can do that using bootstrap classes but for now let's just use that narrow class again which as you can see right here is set to a width of 75% so we don't really need it for this section because the paragraph text doesn't span that wide but in case you add more content the narrow class will help you out and then we'll use the text centre class to Center all of our content and to create a little space above and beneath it will use Cal - 12 which is a full column width but it gives us some padding on the top and bottom and then for the paragraph text we're going to use a class with bootstrap that's called P class lead and that's what was used in the course section which makes the paragraph text a little bit larger than the inherent paragraph text so I'm just going to go ahead and paste that in here and then we can close out the P tag and let's add the button underneath that with the anchor tag and then class BTN and BTN - secondary and then that's going to be a medium sized button which was styled in the core section so we'll say BTN - MD and then the link for that say H ref and I'm just gonna copy the link from here which is do my course of course and then we'll say target underscore blank to send us to a new window or tab and then for the text I'm just gonna say bootstrap course and close out the link okay so let's go and refresh and there we have the paragraph text and the button appearing underneath the portfolio images so let's drop down and let's just finish off the HTML com content before we go over to style dot CSS and let's move on to the team section of the website where we'll have a heading that's very similar almost exactly the same as the portfolio heading except for we'll just change the text to reflect the team part of the website so we'll say h3 class heading team and then we can drop down and we'll add a new bootstrap row which will nest the columns inside of it here so we'll say div class row and we're also going to add some additional padding you can see they're kind of spaced out a good bit here so we'll just add a class that will customize ourselves called padding and there there is an option to add bootstrap padding classes but it gets kind of messy I just like to use a standard like padding class that we just style once and you can reference throughout a theme okay so now that we've closed out the row let's go ahead and the first section so this is going to transition at the 768 medium screen mark so we're gonna use div class called - MD for medium and then 6 which goes into 12 twice because we have the two columns there and then once we're inside of that we're going to use a div class with bootstrap called card and then all the text is centered inside of the card so we'll say Tech Center and then we can drop down and close out the div so bootstrap cards if we want to reference the components again there's a cool feature that you can check out and you can customize the placement of the image and the content with the cards as you can see right here we're gonna do an image on top and then the body section at the bottom in this case as we see so let's go ahead and add the image with image class card - image - top and then for the image source if we reference the image folder that's going to be inside of the team folder so we'll have IMG Ford / team Ford / team dot 1 or team one rather dot PNG alright so then moving on underneath the image we have the body section of the card so we'll say div class card - body and then we can drop down and close out the div and inside of that we'll have a heading right here where it has the name so we're going to use a heading 4 so h4 and I'll just write in Jessica Miller and then we have the quote with the paragraph text underneath so we're just going to have that with a regular paragraph tag or you can use the site tag to make it italics with the quo and there we have the first of our two cards filled out so before we move on to the next card let's take care of centering the heading threes that we added as you can see right here with the team text and then the portfolio text so I'm going to go ahead and wrap this with a div class call - 12 to add some padding around it and then we'll also just say text Center and then I'm just going to indent these and close out the call twelve div class so now let's also apply this to the portfolio heading three up in the jumbotron so I'll just paste that in indent and then close out the Cal 12 div okay so that looks better with it centered and with a little bit of extra padding around it so now let's add the second of our cards so similar to the portfolio section we don't really need to change much so let's go ahead and just paste in the first card and we'll just change that to team two and then we'll change the heading 4 to charles davis and then we can just leave the paragraph text the same okay so there we have our second card and as we know once we get to the style section we'll take care of that padding in between them but let's move down to the footer section of the website next so we'll go down to the contact ID and for the footer section we're just going to start it off with a good old-fashioned html5 footer tag which will later apply the background color too and then inside of that to Center our content and then have it changed a full width once we get down to 768 pixels we're gonna start a div class row and we're gonna say justify - content - Center so we can just use a single bootstrap column that doesn't take up the full width and have bootstrap Center it for us inside of the footer so this is something that you could do instead of adding that narrow class that we used earlier and then let's close out the row and then we'll just need to add the column inside of it so for this column we're gonna have it take up almost half of the page a little bit less so out of 12 columns will use up 5 and have it change at the medium screen width to the full column layout okay so now let's add the image which will be the same file extension that we use for the logo which is new no PNG and then we can add the paragraph text underneath it so I'm just gonna paste this in alright and then underneath the paragraph text we have the text that says contact info and as you can see that's bold so we'll just use the strong tag to make it bold and then underneath that for the phone number and the email address we'll put that into a paragraph tag and then we can just keep it inside of the same paragraph tag and create a line break with the BR tag and then we have the social media links at the bottom of the page so let's go ahead and add those and we'll also Center the text here so there we go alright and then moving on to the social media icons that appear towards the bottom of the footer section we're gonna wrap those with a link so we'll start those off with a H ref and then let's um link it to a different tab with target underscore blank and then for the icon with font awesome that's going to be iCLASS and they're all going to start with F a BFA - and then we can close out the eye tag for the icon as well as the link and since we have three different social icons let's go ahead and just paste this out three times and then we can add the link and the class for each icon so you can link to your own social media pages I'm just going to copy and paste my link here just make sure that when you add your links you have the full address with the HTTP or HTTPS for SSL okay so once we have our links in there each one of the social icons from font awesome as I said we'll start with FA or sorry FA b FA - we could which you can get from right here if you want to search for your own icons and for Facebook will just say FA b FA - Facebook and then - Square because there are multiple versions of Facebook icons as well as Twitter which will use the square version of for this as well and then with Instagram I don't think that they've come out with a square version yet so we just have the one icon for Instagram which we'll use which is just FA - Instagram alright okay so let's take a look at it and there we have our icons giving us the blue link color and [Music] we'll go ahead and resize those in just a moment but let's take care of let's take care of the the socket with the line and the copyright text that appears at the bottom of the footer section so we'll just use a heading or a horizontal row class for that and we'll give it a class called socket and then we'll just use ampersand copy semicolon for the copyright icon and if we go back to Chrome and we fresh it's gonna be kind of not aligned properly but once we add a width to the HR class it will realign itself okay so let's go ahead and get started or get back to our style sheet and the first thing that we're going to style is something called the off set so when we click on the links sending us to different sections of the page as you can see the navigation is sitting on top of the content so if you remember from the course section that already has the class added to it here that was included for us with the starter files where it says class offset so let's go ahead and just add that to the different div IDs for the sections of the website and we'll add those to all of them except for the home section where we don't need one because we're already at the very top of the website so we'll say class offset and basically with offset we're going to create some space at the top of the sections so the link to the ID sends us to the bottom of the navbar so we'll say offset colon before and then to account for that space right there we're gonna give it a height first so we'll give it a height of 4 R M and then we'll say margin top negative 4m to kind of erase the space that we don't have blank white space and then we'll make a blank content style here and then we'll say display block which will actually allow it to appear okay so now it's accounting for that space which is about 64 pixels at the top and there's actually a tiny bit more space to account for there so we did a little bit too much so let's try 3.9 R m to try to match it up exactly to the start of the ID so that's closer but there's still a sliver of space so we can change that to 3.8 gram and you can mess around with this depending on your customizations to the navbar for example so that looks good and all right so let's go back to styling the website from the image slider where we added the caption content to the slider so above the core section comment let's drop down underneath the carousel item style and we'll want to reference the class that we gave to the caption so that was a custom class that we added just called carousel caption this isn't a bootstrap class but we'll go ahead and reference it here and as we know from the HTML that we added with the carousel caption right now its position at the bottom of the screen but to get it centered on top of the image slider what we're going to do is we're going to give it absolute positioning so we can position it wherever we want so as we see right here it's at the bottom and let's just say position absolute and then we can give it a position from the top of the website and we're gonna say 38% which will Center it on the page for us so there we have it centered and then all of our text for the caption will be uppercase so let's go ahead and say text transform uppercase and then let's drop down to start styling the headings so the first setting is going to be the heading 1 where it says welcome to Nuno so that's going to be inside of the carousel caption class so we'll say dot carousel - caption h1 and then let's give this a font size of 3.8 ram which will be about 60 pixels or so and then we'll say font-weight 700 to make it bold and then let's also space the letters out a little bit with letter spacing point 3 r m and it's dropped down to the next line so we'll need to give it a width to the carousel caption class let's give it a width of 100% and once we do that because we're using absolute positioning we'll need to position it left and right so let's say write zero and then we'll also need to say left zero so it takes up the full 100% width okay so there we go all right so now as I said let's move down to the heading three actually I think we need to add to the heading 1 some some text shadow let's go ahead and do that and then we'll move on to the heading 3 so drop down underneath the letter spacing and we'll say text shadow point 1 R M horizontal point 1 R M vertical and then we'll give it a blur radius of 0.8 rim and we'll just give it a color of black and then let's also add padding bottom one r m to separate the heading 1 from the heading 3 ok so let's go and refresh it and there we see it lining up except for we'll need to resize the heading 3 and then we'll move on to the button so we'll say carousel caption h3 and then let's change the font size for this as well to 32 pixels or to rim and then for the text shadow let's also use one rim for the horizontal and vertical and then we'll just use our point one rim rather and then we'll use point five rim for the blur radius and then we'll also use black back to make the white text stand out the most with the dark background and then for the padding let's say padding-bottom 1.6 R M to separate it from the button underneath it okay so that looks good except for obviously the button styling so if we go back over to the HTML the button that we're using for this will be the large button and since that's the only large button that we're using for the website we'll just reference that class itself and we're gonna say border width medium to make the border thicker and then we'll say border radius to get rid of the rounded corners and then the finished version has a bit larger font to it so let's increase the font to one point one rim so we'll say font size one point one rim and let's save it and now if we toggle back and forth we can't tell the difference okay so that does it for the image slider section of the website later on we'll get to the media query to resize the carousel caption once we go down to 768 but for now let's drop down to well we already have a course section filled out for us so let's drop down to the portfolio section okay so let's move over to or drop down underneath the course section and you can add a portfolio comment if you want but wanna reference the Jumbotron first so inherently the Jumbotron has a little bit of border-radius it's kind of hard to see in the video but if you look closely it's there so we're gonna say border radius zero to keep with sort of the boxy feel of the website which will remove the rounded corners and then let's reduce the padding on the bottom and top so we're gonna say padding three rim top zero left right and to ram bottom and now it's reduced a little bit so that's gonna look a little cleaner I think that they add a little too much padding to the jumbotron inherently okay so that looks good and now let's go and let's style the heading three that first appears inside of the Jumbotron where it says portfolio and if you're a member from the HTML that was a heading three class that we gave the class heading and then we have the heading underlined class just underneath it so we'll say h3 heading and let's increase the font size to 1.9 rim and then we'll make it bold with font weight 700 and uppercase with text transform uppercase and if we refresh there we have it looking like the original okay so we'll need to add some padding to separate it from the line underneath it will say padding-bottom 1.9 rim and then we can style the heading underline class so we'll say heading underline and let's set a width for it so that's going to be 3 r m in width and then once we set the width we'll need to give it a height so we'll give it a height of point to R M and then the background color we're going to use the same color that we gave the navigation with the hex value 1 EB be a 3 which is that green shade so there we have it but it's off to the left so to Center it let's go ahead and add margin:0 auto and then we'll also just add a little bit of margin underneath to separate the portfolio images with two R M so margin:0 top auto left right and to R M bottom okay so now that that's set let's go ahead and style the portfolio images next okay so if you remember from the portfolio section in the HTML as I make a portfolio comment here we used a class to reference the portfolio images specifically that's just called portfolio so to get to the images will reference that class first and then image which is inside of it so we'll say dot portfolio image and then we'll give it a max width of 100 percent to keep it within the column and then to get rid of the space in between the columns will reference the class that we added to the row which is no padding so to get to that will reference the class and then no padding or the row rather and then no padding and then the column class so we want to select all instances of the column so we'll say row no padding and then in brackets Kyle asterisk equals Kyle - because all the columns start with Kyle - and then we can just say padding:0 okay so let's refresh and there we have the portfolio section without any padding in between the images so as we can see when we hover over the images there's a transition effect let's go ahead and add that next so we'll add that to the image but first we'll need to add the hover effect so that's going to actually scale it and then to make it a smooth transition we'll add that to the image so we'll say transform scale 1.1 and then we'll change the cursor from the pointer to the zoom in cursor and now if we go and look at it it's gonna scale for us but it's not going to be a smooth transition so what we'll do is we'll go back to the portfolio image reference where we added max with 100% and let's add transition transform 0.5 seconds ease so that should give us a nice smooth transition while it's scaling so that looks good except for its overflowing outside of the portfolio so let's reference the portfolio class by itself and we're just gonna say overflow:hidden ok so that looks good so that's everything for the portfolio section but let's move down to the team section here and there's a little bit of space that we'll get rid of in between the different cards so let's go ahead and just reference the card class with dot card and we'll say margin to REM to separate them and there we have it okay so that looks good but I'm noticing some spacing differences as you can see the start of the team section is a little off using the navigation so let's add margin bottom zero to the jumbotron okay so now if we select it there we have it matching up to the bottom of the jumbotron when we select the team link so now we can move on to the last section the website which is the contact section or the footer so let's go back to the style dot CSS and I'm going to create a comment here saying this is the start of the contact CSS and then if you remember inside of that we have the footer tag so let's go ahead and reference that and then we can add the background color so we'll say footer open and close your swirly brackets and then we'll say background color and the hex value for this is going to be 404 seven four II and I think this is a darker shade than a similar color but a darker shade of the the color of the text that we added to the body of the website of the body tag so there we have the background color and as you can see the text in it is too dark so we'll change that to white with color white and then we'll need to add some padding to get some spacing to the top and bottom of it so let's add a padding to REM on the top and three RAM on the bottom so two REM top zero left right and three REM bottom okay so now the spacing looks better and then let's also just add a little bit of margin to the top of the footer to separate it from the cards with margin top one REM okay so that looks good alright so now let's move on to the logo and we're gonna make this bigger than the logo in the nav bar so we'll get to that with referencing the footer and then image and then let's change the height to three REM instead of two REM which is what we gave it in the nav bar and then let's also just add some margin to it to separate it from the content around it so we'll say margin 1.5 REM top bottom and zero left right all right so that looks good and moving on the next thing that we'll do is let's make all the links in the footer of white so on cell phones you might see that the phone number and the email address appear as links and appear blue in color so we'll change that to white and then this will also affect the social media icons making them white as well okay so that looks good and then with the social icons let's go ahead and resize them and then we'll add the hover effect for when we hover over them to get the same green shade that we've been using throughout the website so we'll say footer and then SVG SVG inline - - F a it's kind of an odd class but if you select the icon that's the class that you'll come up with and then we'll say font size 1.6 rim and that looks better except for let's space them out a little bit so we'll space them out a little bit vertically and to the to the right so we'll say margin 1.2 mm top and then 0.5 mm right and then we'll just say 0 0 4 bottom and left okay so that looks good and then you have the hover color to add so let's go ahead and use the same selector here and then we can just add the hover effect so colon hover and let's add the color hex value 1 e BB a3 that we've been using okay alright so there we have the hover effect - the social icons and then lastly for the full width version of the website let's go ahead and style the socket at the bottom is with the called little copyright section on websites so let's style the HR class socket with HR dot socket and then we're just gonna say border top point to rim and then we're gonna give it a gray shade so we'll say solid and then the hex value six six six which is solid gray but we're going to add B 71 and then let's give it a width of 100% so it's going to be an off gray shade and now with the 100% with as you can see it's realigned the positioning of the footer so you can also change that to the green it looks like kind of loud at the bottom the website though so let's just keep it to that gray shade all right so that does it for all of the CSS for the full width version of the website but as you can see when we size it down everything looks pretty good until we get towards the top of the website where we'll find that we have some headings to correct so this heading looks kind of big in the course section and then obviously the heading for the the carousel caption all right so let's go ahead and create a new comment and we're just going to say that this is the start of the media query so we'll say media queries and then close out the comment and then we're going to target the 768 pixel mark but because bootstrap starts at mobile-first with min-width as you can see right here we're gonna have to use max width 767 to match the min width 768 mark so since we designed for a full width website rather than mobile first we'll use max width instead of min width okay so let's go ahead and target the headings inside of the carousel captions so since we're just gonna override this style anyways we can just go ahead and select it from the full width and then paste it in here and I'm just gonna delete some of this because we're not going to style everything we just need to reference these styles that we're gonna override so we'll do away with the text shadow with the font weight and we can do away with the border width and the border radius for the button and then in addition to that what I'm gonna do is I'm just going to indent some of this so it looks prettier alright okay so let's go ahead and let's resize the font for the heading one so let's drop that down to 2.3 ram from 3.8 and then we'll just cut this in half with 0.15 for the letter spacing and 0.5 rim for the padding on the bottom okay so that looks good so let's move on to the heading three and let's change that to one point two rim and one point two Ram and then for the button let's just make that one RIM to make it slightly smaller all right so now if we toggle back and forth you can't really tell the difference until we get down to the heading in the course section that we see right here where it says new no theme bootstrap course so we'll want to reference the narrow class because the heading 1 is inside of that but we didn't actually style that earlier and it didn't come styled inherently so let's go ahead and just target that using the narrow class and the heading 1 so we'll say dot narrow and each one and then we'll just say font size 1.5 REM alright okay so that's made it smaller but the paragraph text underneath it looks kind of big now so you could style that if you want if you remember that's just the lead class inside of the paragraph tag so we'll just say P lead font size 0.9 REM and that's a little small let's just change it to one rim okay so that looks good alright so you can mess around with the sizing and the styling and customize this however you want for your own use but that does it for the complete tutorial I'm going to thank you for watching please remember to check out my bootstrap course in the video description like this video subscribe turn on your notifications and then I'll see you in the next video thanks for watching [Music] you

Channel: Drew Ryan

Views: 208,933

Keywords: bootstrap, bootstrap carousel, bootstrap 4, full screen slider, image slider, html, html5, css, css 3

Id: Thw33qJ5DXo

Length: 85min 49sec (5149 seconds)

Published: Sat Dec 22 2018