Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3

in this video we'll create a complete bootstrap website from scratch using bootstrap for html5 and css3 okay guys so before we get started I just have to thank you for all of the likes on the fixed background bootstrap website I put out recently I want to set a goal for this video because I think it's the best bootstrap video I've made yet so I'm setting a goal of 1,000 likes and hopefully you can help me reach it so I can keep putting out better content okay so let's take a look at the complete full width version of the website here before we get started then we'll check out the mobile version so at the top we have our logo then the navigation on the right followed by our image slider beneath it with the two buttons here and the heading text above then at the bottom of our image slider we have these indicator buttons that can bring us to and from the different image slides and at the top you'll notice that when we scroll down the navigation is called a sticky nav in bootstrap so it's going to stay sticky and fixed up there until we get down to a certain section of the website then it will disappear okay then underneath our image slider we have this Jumbotron in bootstrap where we can feature some text and a button for example then as we scroll down we have the three column section with the icons this two column section with the image fixed background image here then this cool feature with bootstrap where you can have hidden content so when we click on it we'll have these emojis which you can add optionally then beneath that we have what's called cards in bootstrap so that's where we have the image title paragraph and then the buttons but beneath that then we have another two column section this connects section with these font awesome social media icons will be adding then at the bottom of course we have this 3 column footer section at the bottom of the website so let's scroll back up and I want to show you how the different sections will resize as we get down to the mobile section using the bootstrap grid system so let's go ahead and size it down and take a look at the mobile width and then we'll resize different sections to see when they transform from three columns to two columns or to one column so at the top let's look at our navigation here so if we select our drop down nav it's gonna lay out all of our navigation items and then as we scroll down you'll find that at this width all of our sections have a single width but as we scroll up some sections will turn into two columns some sections will stay one width at the next breakpoint so for example as we scroll up these sections are still staying one column and then these icons here will go from a single column to two columns and then to three columns okay so we're going to go over all of the different breakpoints in bootstrap so you can make things flexed to different column widths as you're seeing here with the emojis and I'm also going to include all of the different break points inside of style dot CSS for you which we'll get to in just a second so in the description of this video will be the bootstrap website starter files that you're seeing here including index.html and style dot CSS so I'm going to be using the free program called sublime text as my text editor while we build the website and then I'm also going to have index.html open with Google Chrome as we're building it so we can see the development of the site so also included in the starter files will be all of the images that we use throughout the tutorial including the four gif images that you see in this folder here all right so I'm going to go ahead and put this aside and let's move over to sublime text so we can check out what's already included for us inside of the starter files so let's take a look at style dot CSS first because index dot HTML is where we'll start coding for the tutorial so at the top of style dot CSS we have a Google font imported for us here then underneath that we have some media queries laid out which will reference later in the tutorial then we have a few fixes beneath that so we have a fix for our image slider which is the carousel and then a fix for our fixed background image that will be scrolling over then we have a fix for the padding for the responsive bootstrap then at the bottom here we have a invisible comment in CSS laying out where all of the breakpoints are in bootstrap so from the extra small point all the way up to extra large okay so we'll be referencing that throughout the tutorial let's go over to index.html now so from the top we have doctype HTML then our language english then inside of our head section we have our character set standard utf-8 then width device-width initial scale one for mobile websites followed by the title of our website then underneath that we have our bootstrap CSS file for bootstrap for then the latest version of jQuery followed by the latest version of popper J s and then the latest version of bootstrap J s here followed by font awesome which will allow us to use the social media icons that we're seeing here at the bottom of the website and then lastly inside of our head section we have the reference to style dot CSS then already included in the body section will be HTML comments for each one of the sections of the website that we'll be laying out to make it easier for us ok so I'm just going to type in some dummy text here to make sure them can to Google Chrome which I am as you can see here and then let's go ahead and get started with our first tag which will be the header that we're seeing here for our navigation bar or the navigation itself okay so let's go over to indexed on HTML and then we'll get started underneath the navigation comment here so we'll start with the html5 tag nav and then we'll add our bootstrap classes so the first one is nav bar and then we'll have nav bar - expand - m.d so a referencing MD because that's the break point at 768 pixels as we see here where it's going to change from the mobile navigation to the expanded full width navigation and then we'll have nav bar light + BG light which is the light bootstrap navigation with the white background and the dark navigation item text and then also we'll add sticky - top as opposed to fixed because we're using the sticky navigation next we'll add our div class container for our bootstrap container so this is going to be container fluid so it takes up 100% of the screen and we'll be referencing that throughout the tutorial so underneath that what we'll do is add our logo first so if we refresh we can see a little bit of the nav light up there nav bar light so let's add a class navbar our logo and then we'll add our link so I'm just going to do the hashtag but you can do index.html for example here and then we'll add our image here for the logo so that's going to be IMG ford slash logo dot PNG since we're in the IMG folder there in the starter files and then we can close out our link tag the a tag there and here we have our logo displaying all right so let's go ahead and move over to our navigation button here so we'll reference that with the html5 button tag and then we'll give it a class here so we're gonna say class navbar - toggler since this is our toggle switch basically for our navigation and then type button and data - toggle collapse because our navigation will be collapsing opening and collapsing and then we'll say data - target hashtag navbar and then capital R in responsive so we'll create that ID the div ID for that in just a moment okay so now if we refresh we'll have the start of our drop down button here so let's go ahead and add our icon so in bootstrap for all we need to do is add a span class here as opposed to a line for each bar in the icon so we'll say span class navbar - toddler - icon okay so now if we go and refresh there we have our navbar icon completed so let's go ahead and add a class for our collapsible nav for now and then we'll add the ID for our data target for the navbar button so we'll say div class collapse navbar - collapse okay and then inside of the same div we'll add an ID and it's going to be the navbar responsive with the capital R okay so you can drop down and close out the div and then inside of here we'll have our unordered list so UL class navbar - nav and then ml - Auto so ml - Auto is gonna push our navigation when it's at its full width off to the right-hand side as opposed to having it in the middle so as you can see here at full width we have the navigation pushed off to the right-hand side okay so next we can go ahead and add our list items so let's start with the first one with li class nav - item and we'll make this the active navigation item in just a second with an active class but first let's go ahead and lay out the rest of it with a class nav link and then we'll add our link here so I'm just going to leave it blank for now and then you can write your text for the first navigation link and close out the list item so I'm going to go ahead and copy this and paste it I'll be doing that here and there throughout the tutorial to save us some time okay and then I'll add the active class here for the first one and if we refresh there we have the active class darker than the rest so let's go ahead and fill out the rest of these navigation items with about and then we have services team and then the last one is connect okay alright so there we have all of our navigation links later in the CSS we'll make them a little larger and space them out a little bit to look like the original here so now let's drop down and get started on our carousel image slider okay so we can go underneath the image slider html5 comment and we'll start with our div ID slides and then we'll give it a class called carousel space slide and then we'll say data - ride carousel okay and then before we add our images I'm just going to drop down and close out the ID here what we're gonna add will be our carousel indicators so those are the links at the bottom of the image slider let me just show you here that bring us to different slides so we'll go ahead and reference those first here so we'll say UL class carousel - indicators and then we can close out our unordered list and then inside of that we'll have list items so we'll say Li data - Target and then we'll reference the div ID that we just created called slides so hashtag slides and then data slide - and the first one will be 0 okay so I'm going to go ahead and just copy this and paste it three times for each navigation slide with the link beneath and then I'll change the first one to class active all right so we're not going to see those pop up yet until we add our images so let's go ahead and do that so we'll start with div class carousel inner and then close out our div and then inside of that we'll have our first carousel item so div class carousel - item and then we'll have our image inside of the div so it's going to be image source okay and then we'll reference the IMG folder and our carousel images will all be background dot PNG with the second being background two and the third being background three so I'll go ahead and copy this and paste it twice over okay and then we'll just change the image extensions here and I'm gonna make the first one the active class alright so now if we refresh the images are way outside of the finished version dimensions for the image slider but we can see the carousel indicators at the bottom already alright so let's go ahead and add our content that sits on top of our slider now okay so the first thing that we'll need to do for this is we'll need to wrap it with a div class so we'll say div class carousel - caption and then we can close out our div and the first thing that we'll add will be our heading 1 where it says bootstrap so we're going to use an h1 class and we're going to say display - - so bootstrap has display classes which makes the text large and a lightweight as you can see here so you have display 1 2 4 so 2 is one of the bigger ones and now let's add our heading 3 beneath that so h3 complete website layout and then we'll have our first button underneath that so we'll say button type 'button and then we'll give it its class here with BTN and then BTN - outline - light and then BTN lg4 large okay so now if we refresh there we're seeing the beginnings of our outline button so let's just write view demo here for the first button and then we can add our second here okay so again this is going to be type button and then for the class it will be BTN and then BTN - primary and again we'll use button large okay so by default the primary button is going to be the blue shade and then so later in the CSS we'll give it the bootstrap purple shade that we see a few times throughout the tutorial right here okay so the next thing that we'll do is let's drop down to our Jumbotron that we see here so we'll go down underneath the Jumbotron class or comment rather and we'll start it off with a div class container - fluid and then we'll have our div class row and then we'll also reference the Jumbotron class here okay and then we can close out our divs then inside of our div class row we only really need to reference the the bootstrap column with where it goes from a single column to the next so a two column width or a three column but what we're going to do for the first couple of sections here is we're going to reference all of the div class columns here so we'll have the extra small for less than 576 pixels and then we'll have the the small followed by the medium large and extra large okay so we'll say div class column XS - 12 so at extra small widths we'll have it take up 100% since there's 12 different columns in the bootstrap grid as well as at the small width and then at the medium width 768 pixels will change from full width to 9 columns and then it'll stay at 9 columns for the larger screens at 992 and then at extra-large it's gonna change to 10 columns okay so then we can close out our div here and let's add our paragraph here so we'll use p class lead which makes this some sort of lightweight text here in bootstrap rather than just a regular paragraph tag and then I'm just gonna paste in the info here for web hosting and then we can close out our paragraph okay so at the bottom there we have our web hosting information and a quick plug by the way if you need web hosting to get your website website uploaded to the Internet I'll have a link to the web host that I use in the video description so if you need help with that just leave a comment and you can use the link in the description all right so next let's add our button here so again we'll have this at 12 columns at the smallest width and then 12 again for the small screens and then at medium width 768 pixels we'll go to 3 columns and we'll keep it there for large screens and then at the extra-large we'll go to two columns since that's all that's left with our paragraph taking up 10 columns okay and then we have our link here for the button and we'll write web hosting inside of it and then we'll just give our button class BTN BTN - outline - secondary and then BTN - LG for large okay so now if we refresh our Jumbotron here we have it taking up the full screen until we get to 768 pixels where it will turn to nine column nine columns for our paragraph there and then three for our button okay so next let's go ahead and drop down to the Welcome section here so again we'll use the div class container fluid so div class container - fluid and then we're also going to add a class here so you'll notice throughout the tutorial that we use this several times and we're just going to call it padding so we'll be adding some additional padding between the the containers and rows here in bootstrap all right and then row welcome text center so row and Tech Center our bootstrap classes welcome is a class that will style ourselves later to give this section its width along among some other things all right so now let's add our div class here and this is just going to be Col - 12 because it takes up 100% of the screen and all 12 columns and then we'll add our heading 1 so it's going to be H class or h1 class rather display 4 rather than display 2 and then we'll just say built with ease and then we can close out our heading 1 okay and then underneath that what we're gonna have is a horizontal rule so later we're going to give it its style for now we can just say HR here and then let's add our next column so this again is going to be a full width column so we can say div class call 12 and then we'll use the P class lead and I'm just gonna paste in the text here okay all right so now if we go and refresh the version we're working on we have our paragraph text there and our heading one displaying centered with the text enter class and we can move on to the three column section below okay so let's drop down and let's again create our div class container - fluid and we'll also add padding to this container and then ro text Center and then we'll also add padding to the row all right so we're actually going to add padding underneath the horizontal rule that you see there so we're gonna use the the bootstrap horizontal rule called my four and it's gonna kind of create that light gray horizontal rule here that spans across the whole page so H our class my dash for in between the closing divs for our container and our row so we have padding on both sides of the horizontal rule here okay so let's go ahead and get started with the first of our three columns here so we're gonna say div class and let's use the the single width column here so we'll say Col - XS - 12 and then call sm6 because it's at half the width at the 568 pixel mark as you can see here and then once we get to 768 pixels it's going to be three columns so one-third or call - md 4 so md 4 768 pixels and then let's go ahead and add our icon here so we'll be using the font awesome icon reference so we'll say I class FA s and then FA - code and then close out your eye tag there and underneath that we'll have a heading 3 4 8 - html5 and then our paragraph text underneath so as you can see this is the difference between the regular paragraph text and the P class lead alright so let's go ahead and refresh and there we have our code icon as well as our heading 3 and the paragraph so if you do a Google search for font awesome icons you can go ahead and just add any icon that you want here just pay attention to the classes that we use when we style our icons later so I'm going to go ahead and just paste this section in here just once and we'll change this to bold since there isn't actually a bootstrap icon with font awesome we'll just use the bold icon and then I'll change this to bootstrap and then bootstrap and bootstrap 4 which is the latest version alright and that's gonna also stay the same as the first where it goes from one column to two and then two three but as you can see here the CSS portion will go straight from one column to three columns alright so let's go ahead and change the columns here so all we need is Col all we really need is call md4 but you can add Collis m12 if you want also alright and I'll change this to CSS and css3 and now let's go ahead and refresh and looks like I missed something here so this is actually f a B rather than FAS all right so there we go with our CSS icon there alright and then if we flex up we'll go from the two columns to the three columns okay so now let's go ahead and drop down to the next section which is the two column section with the text on the left and then we have the image on the right so this is gonna change after the 768 pixel mark but we'll get to that in just a second let's go ahead and start off with our div class container - fluid and then we'll I also add padding to this container and then we'll add our div class row which will also have padding okay so div class Rho padding and now let's add our div class for the column here where it changes at the large screen mark which I believe is 992 pixels okay so let's go back to index dot HTML and we'll say div class and will reference the the medium one here so div class call em d12 and then call lg6 all right and then we can close out our div and then inside of that we'll start with a heading to where it says if you build it so if you build it dot dot dot and then underneath that we'll have a few different paragraphs okay so there we have our heading two so I'm going to go ahead and just copy and paste these paragraphs in here all right okay so then I'll paste the last one and then we'll add our button which if you remember from the the button that we added the second button that we added inside or on top of our image slider this is going to be the same as that the primary button so as we can see here it's changing to the half width okay so that is yeah there we go at 992 pixels for the large screen so if you want you can go ahead and just get rid of this and you'll find that nothing changes so all we need to add is is the column for the break point when it goes from full screen to something other than that okay so let's go back to the finished version here and let's add our second column for the image that we're seeing here okay so we'll say div class Col - LG - 6 and then you can close out the div and inside of that we'll have our image so IMG source IMG ford slash and the extension for this will be desk dot PNG and then we'll also give this a class here and we're gonna say image - fluid for responsiveness okay so there we have it and have it changing at the nine hundred ninety two pixel mark and then I have forgot to add this button that I was saying talking about so the button is going to be a primary button once again I'll just add a break in here to create some space before the button so it's going to appear blue until we style it in the CSS so we'll say a class BTN BTN - primary and then I'm just going to write learn more in here in between our a tag okay so there we have our primary button just like the image slider button that we see here alright so moving on down the page the next thing that we'll add is let's go ahead and add a a bootstrap horizontal rule and then we'll add our fixed image background okay so this is going to be HR class my - for similar to the one that we added before that spans the whole page and gives us that sort of light gray feeling or color and now let's add our fixed image background so we'll wrap it with a figure tag and then we'll have div class fixed - wrap and then we can close out the div and inside of that we'll have a div ID and we'll just call it fixed all right so next let's go ahead and add that hidden emoji section here okay so we're gonna use a button and we'll just give it a class and we can call it anything we want so we'll just call it fun and then we'll have data toggle collapse similar to our navigation and then data target and we'll just call it emoji so the ID emoji and then the text it just says click for fun and then we can close out our button tag okay so now let's go ahead and add the ID that it's opening up so div ID emoji for the data target there and then we'll give it its class collapse then we can close out our div and inside of this we'll have our container so div class container - fluid and then padding and then we'll have our row so we'll say div class row text Center okay so I'm going to go ahead and close out these divs and then we can add our columns so if we look at the emojis here we'll find that they're going to go from the single a rather four columns to three columns to a single column so it's 12 6 3 so we'll just reference the six since we don't need the 12 so call SM 6 and then call MD 3 and then inside of that we'll have our gift so we're going to give this a class called gif so we can give it a max width later in the CSS and then we'll have our image source IMG ford slash gif ford slash and this one is panda dot G F okay and then we can close out our div and now if we refresh we should have our first gif image appearing here if we click on the button there okay so there we have it and since we don't have the CSS added added for a max width right now it's not going to display like the finished version but let's go ahead and add the rest of them so I'm going to go ahead and just copy this and paste it in a few times and then we can change the name so the second one is just puh for this guy and then we have unicorn and chicken dot gif alright okay so that does it for the gifts section and as I said if we click on it for now it's not going to appear how we want it but we can still see it shifting at the widths all right okay so the next section is going to be the meet the team section so let's go ahead and get it started underneath the meet the team comment here with our container so we'll say div class container fluid padding and then for our div class row we're also going to use that same welcome class we used earlier in the HTML and then we'll have our text center class for the the centered heading so let's go ahead and create our comment our column rather for the meet the team text here so we'll say div class call 12 because it's full width and then we can close out our div as well as the one for the container and the row and then we're going to use the display for class similar to what we used above so each one class display - for and then meet the team and close out your heading one tag there then underneath it will have a HR horizontal rule that will style later on okay so now if we refresh we should be seeing our meet the team text down there and let's move on next to our cards section okay so with the card sections we're going to go from one third to a single column at the medium width at 768 pixels so let's start with our container here and then our row so we'll say div class container fluid and then padding and then just dip a class row padding okay and then you can close out your divs and each card will be inside of its column so since it's gonna change at the 768 pixel mark will say div class call MD for okay and then we can drop down and close out the div and inside of that we'll have another div class for the card so div class card then we'll close that out and then we have our image class for the card so this is going to be IMG class card - OMG - top since the image is at the top rather than the bottom or the middle and then source for our image will be IMG /team one dot PNG and they're all going to be a team one team two team of three okay and then underneath that inside of our card we'll have our card body so div class card - body and then we'll have our title and our text okay so h4 class card - title and then we'll just say John Doe and then close out our h4 and then we'll have a paragraph class here for our card - text and then I'll just paste in the paragraph here and I'm just gonna change this to John I'm not sure how I got Joe in there okay and then we'll have our button so a href we'll just use the hash tag you can make it a blank link and then class BTN BTN - outline - secondary and then I'm just gonna write C profile here okay so let's go ahead and refresh and there we have our card but the image is looking kind of odd okay so for the the the image class looks like I added IMD rather than I am G okay alright so now it's not distorted all right so let's go ahead and add the rest of our card info here so we have Mary Jo and then fill ho so I'm just going to go ahead and copy this all the way to the column D for class there and then I'll change this to team two we'll change this to Mary Jo and then I'll change the paragraph text here okay so there we have Mary Jo appearing and then let's go ahead and add fill okay so I'll paste in the one third column here change this to fill ho and then I'll change his bio card text all right okay so Mary is appearing there twice so let's change this to team three and there we have all of our cards laid out and if we flex down a little bit more it's going to change to the single column width at 768 all right so next we have another two column section where it goes from a single width to the two column width at 992 so I'm going to go ahead up to the first one when that we add because it's going to be pretty similar to this and just copy it and paste it to save us some time here so I'll paste that into the two column section comment or underneath it and we can get rid of the the button here and the break as well as the last paragraph and then all we'll need to do is change the paragraph text and the heading two so actually we'll keep that break in there so I'm just going to change this to our philosophy and then to match the original I'll change the the paragraph text here okay and then for the image I'll change this to IMG ford / bootstrap - dot PNG okay so let's go ahead and check it out and then we have our two columns section changing at the large screen mark alright so let's move on to the connect section where we have the heading followed by our social media links here so our connect heading as well as the social media links will both be full with columns and for the social media buttons will add the media queries to give it its responsiveness in the CSS so let's start with our div class container fluid and then we'll give it its padding and then we'll have our div class row and text center and then padding as well and we can close out our divs and we'll add our first full width column here for the connect heading text so we'll say div class call 12 and then we'll have our heading 2 and we'll just write connect and then we can close out our div and then we'll have another div class call 12 underneath that for our social links here but we're also going to add an additional class just for our social links called social so Kyle 12 and then social and we'll also give this padding okay so we can drop down and close out the div and now we'll add our links for our social icons so you can put in your social pages here facebook.com slash w3 newbie for example for mine I'm just going to leave it as the hashed though to make it simple for now okay so inside of our link we'll have our eye clasp and then this one is fa b fa - Facebook but let's um let's copy and paste this out first and then we'll change our extensions or add our social extensions so the first will be fa Facebook and we have Twitter and Google - + - g and then Instagram and YouTube okay so now if we go and refresh it doesn't look right we're seeing all Facebook ones here so we're missing something ok so looking at our code it looks like we've I forgot the the end of the eye tag here so go ahead and just add that for each one ok so now after refreshing there we have our social links displaying for us ok so the next thing and the last thing that we'll add will be our footer section at the bottom so we're gonna wrap this with the html5 footer tag and then let's give it its div class container fluid and padding and then div class row text Center okay and then we can close out our divs and this is gonna be a one-third section so we'll use the column for SoCal MD for for 768 and then the first thing that we'll add will be the image for the logo that we're seeing there so image source and then IMG /w three newbie dot PNG okay and then underneath that will have a horizontal rule here so we're gonna say HR class light which will style later and give it its a light color and then we'll have a few different paragraph sections underneath so first we have the phone number here then the email address and then we have the street and the city state and zip code or postal code okay so now we can move on to the next column so if we refresh it's going to look a much light much better when we have the dark background and the light text we'll be able to see the logo and the horizontal rule okay so div class call md4 and we'll start off with our horizontal rule class light and then underneath that we'll have a heading five where it says are ours and then another horizontal rule light and then underneath that we'll have a few different paragraph sections here so P and the first one is Monday 9:00 a.m. to 5:00 p.m. and then Saturday 10 a.m. to 4 p.m. and then it closed on Sundays so Sunday closed ok so if we refresh there we have the second of our three columns and let's move on to the last one now so since it's similar to the second I'm just going to go ahead and paste this one in here and we'll change the the paragraphs here to all city state zip code ok so now if we refresh there we have it all right and then lastly let's go ahead and add the the socket section as some people call it which is the section underneath the footer so we'll say div class call 12 since it's full width and then we'll have a horizontal rule so HR class and we're gonna say HR class light and then a heading 5 where we have the copy sign so that's ampersand copy semicolon and then W 3 new b.com ok so that does it for all of our HTML and by the way feel free to use this design the copyright isn't intended for me to have some type of copy on it it's just in there for the sake of the design all right so let's move over to styled on CSS and get started at the top here after our imported Google font with our first style so the first thing that well style will be the HTML and body sections with a little reset style so let's go ahead and reference HTML and body and then we'll add our height and width at 100% and then our font family which as you can see up here is Poppins from google font and then our backup font is sans-serif we'll also give it all of our font a color of two to two which is a little bit softer than then black okay so if we refresh there we have the change in our font style and it's a little bit lighter with sort of a dark gray so the next thing that we'll style is let's go ahead and style our navigation bar as you can see in the finished version here it's a little bit thicker and taller so let's add some padding so we're gonna say a dot navbar to reference the nav bar class here so dot navbar padding 0.8 REM okay and REM and M if you're unfamiliar are similar they're both based on the route font size which is 16 pixels so one REM or M will be 16 pixels okay so if we refresh there we have our padding for our navbar looking just like the original so next let's go ahead and add some padding to our list items so we'll say navbar - nav Li and then we'll say padding right 20 pixels or we can use about one point three or four M or REM okay so that's looking like the original but we also want to add some more size to our navigation link so it referenced the a class nav link here dot nav link and then let's change the font size to 1.1 m and then I'm gonna say exclamation point important all right so now if we refresh there we have the navigation items looking just like the original okay so next let's drop down to our carousel or image slider so we'll say carousel - inner IMG to reference the images and we'll give them a width of 100% and a height of 100 percent so they take up the full screen and we can see the whole image okay so now we can finally see the whole image here and next we'll want to style our caption so here we have rather down here we have carousel caption as the class ok so dot carousel - caption and we'll say position:absolute and we don't want it at the bottom we want to push it upward so we're gonna say top 50% and if we refresh we'll see that it's still gonna be towards the bottom so we'll add one more thing will add transform and translate why for our y-axis negative fifty percent okay so now if we refresh there we have it displaying right in the centre for us so next let's go ahead and style our heading 1 where it says bootstrap to get it looking like the original here okay so that's going to be the h1 right here so we'll say dot carousel - caption h1 soon so we don't want to style all H ones like this and we'll give it a font size of five hundred percent okay and then we'll also want it to be uppercase so text transform uppercase and then we'll give it a text shadow so we'll say one pixel vertical one pixel horizontal with the width of 10 pixels and then the color will just be black with the hex value zero zero zero okay so it's looking like the original and let's move on to our heading three underneath that so we'll say dot carousel - caption h3 and we'll give it a font size here of two hundred percent which is 2m or REM and then font weight five hundred to make it a little thicker here and then for our text shadow we'll say one pixel horizontal and one pixel vertical and then a width of 10 pixels with the hex value for black okay so now if we refresh I mess something up so let's change this one to 15 actually okay so the shadows a little better there now on the heading one and then for this one it looks like I added a too many one pixels here so we just have horizontal and vertical now okay so there we have our text shadow now let's drop down to our buttons so let's add a little bit of padding here also padding bottom one REM okay so there we go so I know it's not the best practice to use amusing REM M percentage pixel but hopefully you get a feel for all the different measurements with me using them all here okay so now let's change our primary buttons background color so let's use the hex value six six four eight b1 and then we'll change the border which is inherent with the buttons with bootstrap - one pixel solid 5 6 3 D 7 C which is a bit of a lighter purple shade or darker rather ok and then let's change the hover color so we'll say dot BTN - primary : hover and we'll use the same styles here basically the background color and the border so let's change this one to the five six three D seven C okay so there we have it and it's looking similar to the original but I think I use the six six four for the border as well in the original here so it's completely solid okay so there we have it and now that completes our image slider for now until we do a little bit of media queries let's drop down to our jumbotron and we'll want to get rid of some padding so we'll reference the jumbotron class here with a dot Jumbotron and then padding one REM okay and then let's also give it our takeaway rather any inherent border radius it wants to give because I think the jumbotron by default has border radius so border radius zero okay so refresh and there we have the the width of it and the padding looking just like the original here all right so let's drop down and move on to our welcome class next so as you can see here it's full width but we want it to be kind of centered with a max width so it doesn't go off to the far sides of the screen but before we get to our welcome class let's go ahead and add the the padding for the padding class that we added throughout the tutorial as you can see here referenced along with the container fluid and the row class so we'll say dot padding and then we'll just say padding - bottom - rim okay so if we refresh that's gonna space out everything pretty nicely but so we don't need padding top on anything but the welcome class so we'll add that in just a moment let's first give it its max width and then we'll Center it okay so we'll say dot welcome for the welcome class and we'll give it a width of 75% and then we'll say margin:0 auto to center it okay so now if we refresh there we have it centered at 75% of the width and let's also add some padding to the top of it just above the built with ease text so we'll say padding top to rim and I should say by default bootstrap does use REM okay so now let's go ahead and just style the heading or rather the horizontal row for our welcome class so dot welcome HR and then border - top two pixels solid and we'll use the hex value b4 b4 b4 which is sort of a mid to dark gray color and let's give it a width of 95% so it doesn't span outside of the the text beneath it all right and then let's also say margin top 0.3 rim and margin bottom 1 REM so that's gonna space out the bottom a little bit and take away a little bit of space on top okay so that does it for the welcome class let's go ahead and drop down to the three column section here with our icons so we'll want to resize and make our font awesome icons larger here and then we'll change the color alright let's change the color first and then we'll make them all larger together so for the first one effe code will have the color be 5 4 d 2 6 and then refresh and that's not right it should be orange so ii 5 4 d 2 6 and there we go and then let's change our bold class here so fa - bold and the hex value for this is 5 6 3 D 7 C I think it's the same purple shade that we use for the buttons which is kind of the bootstrap purple hex value and then for the css3 the blue hex value is 2 1 6 3 AF okay so they're looking pretty good and now what we need to do is change the size and we'll space them out a little bit from the text beneath so we'll reference all three of them here with commas so we can apply the size and the margin to each one without doing them individually so we'll save font size for EM which is I think is about 64 pixels okay and then let's add some margin all around to space them out from the heading 3 text underneath so margin 1 REM all around okay so that looks pretty good just like the original and the next section we don't need to do anything to the two columns section here since we already made our primary button purple as you can see there with the learn more button and then our fixed background image is already taken care of so the next thing that will drop down to will be our gift section so first we'll make our button 100% width so this is going to be the button class fun for the emoji section so this will be dot fun and give it a width of 100% and then a margin of the on the bottom to space it out from the meet the team text there of to rim okay so that looks better and next let's go ahead and just give a max width to our gifts so we'll use the image class gif here so dot gif and then max width 100% okay so there we have them displaying like the original and if we flex it down it's going to change to two columns to one column all right so the to meet the team card section is all complete as well as the two columns section underneath so the next thing that will drop down to will be our social media Connect section here okay so we'll want to reference the social class that we gave it with dot social and then will reference the a for the link so dot social a and then let's change the font size to 4.5 m and then padding since that makes them larger but we need some space so we'll say padding all around three REM okay so that looks much better and we'll resize them to look like the original here when we get to the media queries so next let's go ahead and make each one their relative hex value okay so for Facebook the hex value is three be five nine nine eight giving it kind of that soft blue shade that we know of we think about Facebook and then let's add the lighter blue for the Twitter icon so this will be FA - Twitter and the hex value is zero zero a C II D okay and then for Google+ so Google - + - g the hex value for the red shade is dd4b39 and then for Instagram it's five one seven fa8 for that kind of flat blue turquoise shade and then for YouTube the red color which is pretty simple it's BB zero zero zero zero okay so there we have all of our shades and then what we'll need to do is reference all of them at once you can do individual hover shades I'm just going to do them all the same hover shade here to make it simple so reference all the classes for our social icons with a comma in between each and then we'll add the hover shade so I'm just gonna make this sort of a light gray shade after I paste in the column colon hover for each so this will be the shade D 5 D 5 D 5 which as we'll see is sort of a light gray similar to the w3 newbie icon where it has W 3 in there okay so that's looking pretty good I actually forgot the horizontal rule here in between the connect section and the two column section so if we go up let's go ahead and add that in between the divs here for the container and the row or the row in the container so H our class my - 4 so if your refresh okay so there we have it and now let's drop down and style our footer so will reference the the footer with just footer since we use the html5 tag for that and then we'll give it a background color of 3 F 3 F 3 F which is sort of a soft dark grey black color and then we'll make all of our text color D 5 D 5 D 5 which is a light gray okay so that looks pretty good and then let's add some padding on the top of to rm2 space it out some and next let's go ahead and style our horizontal rule so H our light and then we'll say border - top 1 pixel solid and then we'll use the same color so D 5 D 5 D 5 alright and then let's also give it a width of 75% so it doesn't take up the full column so that looks pretty good and then let's minimize the the padding a little bit to make it a little bit less spaced out and I use the our ours here for both so I'll change this to service area like the original and then let's say margin-top 0.8 REM rather than the padding and then margin-bottom 1 REM ok so that looks pretty good except for the last horizontal rule here we're gonna make that different from the HR light also our phone number so the phone number will just reference with footer a and let's keep the color D 5 D 5 D 5 because if we don't do that it's gonna appear blue the default link color on cell phones when we look at it or iPads for example so we'll say H our class light 100 for the last 10 our horizontal rule and we'll make it a width of 100% so HR dot light 100 and then let's just use the same style here except we'll give it a width of 100% okay so now if we refresh there we have it okay so that's all of our CSS for the full width version so now we'll move over to some media queries to resize the carrousel caption info as well as some of our headings and the social links at the bottom ok so let's drop down and let's use these media queries here so I find that for the purposes of making tutorials it's easier to use media queries like this with the max width rather than the min width media queries with bootstrap which basically means mobile-first styling so let's go ahead and get started with our first media query at the max width of 992 pixels so let's go ahead and first change the size and the padding on our social icons so we're gonna say font size for em to bring them down from 4.5 on the full-width version and then we'll give them a padding of two REM okay so now if we refresh they're a little smaller here until we flex it up past 992 okay so that's all we're gonna do at 992 so let's drop down to 768 next and starting from the top of the website let's go ahead and resize our carousel caption info so that's going to be our heading 1 heading 3 and the buttons so if we take a look at the original here when we size it down it's going to be a little smaller all over all around as opposed to what we have here okay so we'll reference that with the carousel caption class and to make this easy on ourselves we can just copy our carousel caption heading 1 and heading 2 as well as just the carousel caption itself okay so let's bring that down and paste it here in the 768 mark and let's get rid of transform translate y and position:absolute and we'll just say top 45% to bring it up a little bit here a little bit higher to the closer to the top and then for our heading one we'll change the font size to 350 percent from 500 okay so that's looking better already and then let's resize our heading three text so we'll get rid of the text shadow and we can leave everything else so we'll resize it to 140 percent and then we'll make the font size or font weight rather 400 rather than 5 and then point to RIM for our padding bottom okay so that looks pretty good now let's move on to our buttons so we'll say dot carousel caption dot BTN and then font size 95% so that looks better and then we'll reduce the padding slightly so we'll say padding 8 pixels top bottom and 14 pixels left right okay so that looks good and now moving on down the page at the 768 mark the next thing that will resize will be our heading text here so this is the display for text in our welcome section so here we have tip h1 class display 4 so we'll say dot display - 4 and let's make the font size 200% okay so that looks better so it looks a little small here this width but most devices for the 768 mark will be smaller than this and then scrolling down that resizes our meet the team text as well and now let's resize our social media links again for this width to make them a little smaller okay so we can just copy this social a with the font size and the padding and we'll change the font size to 2.5 m from 4 and the padding to 1.2 REM okay so that looks pretty good all right and then as you can see in the style that CSS file we have one more media query at 576 pixels so this is basically the extra small width with bootstrap so it's going to apply to anything under 576 so let's start off with our carousel caption info here so what we can do is once again copy and paste our carousel caption classes into the 576 and we'll change the the top to 40% and then this to 250 and then we'll change our font size to 110 for the heading 3 and then for our button will change it to 90% with 4 pixel top bottom 8 pixel left right okay so that looks better and then also if you haven't noticed once we get down to 768 or 7 576 rather the carousel caption indicators will are just carousel indicators will disappear so we'll say display:none okay so now if we refresh they've gone away and then we'll do our display for and our social icons okay so I can just copy them from 768 and paste them in here and we'll change the display for font size to 160 and then for our social icons will change them to 2 rim and we'll change our padding for them to 0.7 remm okay so that looks pretty good so let's go ahead and scroll up and we'll take a look at the finished version here because that concludes all of our HTML and CSS for the entire tutorial so that does it I want to thank you for watching please remember to like this video subscribe if you haven't already leave a comment turn on your notifications and I'll see you in the next tutorial thanks for watching [Music]

Channel: Drew Ryan

Views: 1,646,275

Rating: 4.9411669 out of 5

Keywords: bootstrap, responsive bootstrap website, bootstrap 4, html5, css3, bootstrap tutorial, how to make a bootstrap website, bootstrap website from scratch, responsive bootstrap website start to finish

Id: 9cKsq14Kfsw

Length: 87min 47sec (5267 seconds)

Published: Wed Mar 14 2018