Responsive Bootstrap Website From Scratch – HTML5/CSS3 Tutorial

Responsive Bootstrap Website From Scratch – HTML5/CSS3 Tutorial

July 14, 2019 26 By Bernardo Ryan



in this video we'll create a flat responsive bootstrap website from scratch okay guys so let's take a look at this really colorful flat bootstrap website design before we get started laying out the website with our HTML and CSS so in the upper left hand corner we have our website logo followed by the bootstrap navigation on the right hand side and when we click on one of the navigation links it's gonna send us to a particular spot on the page so we can scroll all the way down to the bottom of the page all the way up to the top or anywhere in between let's take a minute to scroll through the website and look at the various sections we'll be laying out so at the top here we have this desktop landing page image and then when we scroll down underneath it it's gonna maintain the same color as the bottom of that image where we have a Welcome section and some heading titles along with the paragraph on the left this code image on the right and then a quote underneath so once we scroll down underneath that it will lead us to the features section where we have this banner image going from the light blue shade down to the orange fade where it says get to know our features and then we have some HTML CSS and bootstrap icons along with another heading section underneath that followed by another image separating the colors here from orange to turquoise with a portfolio section where you can add your own pictures and then at the bottom here we have a connect section that we can scroll to using the navigation that'll link us to our social media pages while we're laying out the website we're going to be using a number of different bootstrap tags for our column widths that will eventually flex down into this single with mobile version of the website with its responsiveness and then when we click on the mobile navigation it'll still send us to the relative space on the screen that we designate in our HTML so I'm gonna flex it back up to full width here and then let's take a final look at the mobile version for how it's going to appear on an iPhone 8 here where it's going to scroll us down to the bottom and then we can go back up to the top and then I'll let you know what we need to get started with the tutorial if you're new to my channel please remember to like the video subscribe and turn on your notifications if you enjoy the lesson alright so in the description of this video will be the flat bootstrap website starter files that you see here take a second to pause the video if you need to to download them real quick and then we can go over them so what I'm gonna have open to work on this tutorial will be index.html and style dot CSS so I'm going to be using the free program called sublime text which you can get from sublime text com and then I'm also going to have index.html open in Google Chrome as my web browser while we're developing the website so we'll go over the rest of the files in there in just a second let's take a look at what's already included with for us in index.html and style dot CSS okay so from the top of index.html we have our HTML doctype itself then we have the title of the website here flat responsive bootstrap website tutorial followed by our character set standard utf-8 then we have our viewport width device-width initial scale 1 for mobile websites followed by our bootstrap CSS file and then we have our jQuery file with the latest version of jQuery and then we have our bootstrap file here with bootstrap Minjae s and then we have our font awesome file so font awesome will let us create these icons that we're seeing at the bottom of the website for our social media pages then what we have here is scrolling j/s which is in our starter files that's a small script that will allow us to scroll to different sections of the website and then we have underneath that our style dot CSS sheet which we have open here also in sublime text and then the last thing that we have inside of the head of our website is a simple JavaScript script that will allow the bootstrap navigation to close once we click on one of the navigation links for the mobile version as we see here then lastly from our flat bootstrap website starter files here we have the image folder IMG that contains all of the images necessary to complete the website tutorial so I'm going to go ahead and put the starter files to the side we may reference them later in the tutorial for the image extensions alright so let's go ahead and drop down to our body section of the index dot HTML document I'm going to make sure I have it linked to Google Chrome here with some simple text and we can get started with our first tag the first thing that will lay out will be our navigation up here which is the blue bar spanning the entire page which has the light blue border underneath it ok so we're going to reference that with an html5 nav tag and then we're going to give it a class of nav bar and then nav bar dash inverse and nav bar – fixed – top so we're telling bootstrap that we want the nav bar or navigation to stay fixed at the top of our web page and then you can drop down and close out the nav tag so I'm going to be using HTML comments here that are invisible on the page to note when certain sections end so for this one we'll have end of nav and now let's add our container so div class container – fluid and then we're going to drop down and close out the div and then create a quick comment saying this is the end of our container so end of container and then I'm going to add another div class here with div class navbar header and then close out the div and let's create a comment here and say end of navbar header okay and now if we refresh the page we'll just have a black line up here which is the start of our navigation bar and header and now let's go ahead and add the button which allows us to have the drop down nav on mobile versions so button type 'button and then we'll give it a class and say nav bar toggle since this is sort of the toggle switch for our drop down navigation and then data – toggle equals collapse and then data – target equals hashtag my and then capital n and nav bar okay so that's going to be the button for toggling our collapsible nav bar all right so now if we refresh we have the start of a button up here and what we'll do next is add the three lines here for sort of the burger menu our icon with our span classes so we'll write span class icon – bar and then I'm just going to copy this and paste it two times over for each of the burger lines that we have now if we refresh there we have our burger menu looking pretty close to the finished version already so let's add our logo to the left hand side now so you can drop down underneath the button tag and we'll create an a class so a class nav bar – brand and then H ref and I'm just going to do a hash tag here to keep the link on the same page you can link to a different URL or the same web if you want and then image source IMG since we're in the image folder so IMG ford slash logo dot PNG and then we'll need to close out our link or a tag okay so now we'll have our logo added to our navigation header and later we'll Center it and change the color for now let's go ahead and add our unordered list after after referencing the collapse a collapsible navbar here so I'm going to say div class collapse space navbar – collapse and then ID my and then again capital N and navbar now let's start laying out our navigation links starting with the unordered list which will contain the links so we're going to give this unordered list a class and say UL class nav nav bar – nav and then navbar – right since we want it to appear on the right side of the screen when it's at full width for the desktop version okay so now let's take a look here so as you can see it's displaying off to the right hand side as opposed to the left alright so let's drop down and add our list items okay so Li and then a H ref and our first link is home so I'm going to write home and here in between the a tag so let's take a quick look at the navigation here and if we select the drop down button we have the home link okay so there we have our home link so the next thing that we're going to do is as you know when we click on a navigation link it's going to link us to a certain section of the page so in order to tell it to get to that section of the page what we're going to do is have our link be hashtag home and then later we're going to reference this home link in the content of our website so it sends it directly to that section of the page all right so let's add our next link so this is Li a H ref and this will be for the About section of the page so a hashtag about and then you can write about in between the a tags and then our next one Li aah ref hashtag features and then I'll write features here okay and then Li a href portfolio for the portfolio section all right and then our last one for the social media section lih ref hashtag connect and then already connect here in between the a tags okay so the one thing that I forgot to do is just close out the div class for the navbar collapse class there and I'm going to create a comment here saying this is the end of navbar collapse all right so now let's go over to the version we're working on here in Google Chrome and check out our navigation ok so there we have all of our navigation links included in the drop down menu all right so the next thing that we're going to add will be the banner image at the top of the website which has the the desktop and the blue background so let's drop down underneath our navigation I'm going to leave a space here in between the main sections of the website and let's reference the the home section all right so let's say div ID and then home and our home navigation link will link us here so there we have home and since it's an ID we'll use the hashtag there and now let's add the banner image so image source and then IMG forward slash desktop dot PNG and then I'm also going to give this a class that we can reference in the CSS leader and just call it class banner all right so now if we go back to Google Chrome and refresh here we have our great big banner image which later will have it only span fullscreen or stay within 100% of the screen as we see here so the next thing that we'll do is drop down to the About section of the website so let's again reference the the About section from our navigation so div ID about and then we'll give it a class and say container – fluid and then text – Center so bootstrap will center all the text here in this section and then I'm going to create a comment here saying this is the end of the container okay so now if we click the about link it's going to try to bring us down below the image there but we don't have the content to do it just yet so let's go ahead and add our heading one here at the top where it says welcome to my website so I'm going to be copying and pasting some of the text here to speed up the tutorial some you can type out the same stuff or put dummy text or type out whatever you like here then underneath the heading one tag will have a heading 3 where it says let me show you how to create a fantastic looking flat website using bootstrap along with some HTML CSS and J s or C HTML and CSS snippets rather so here we have our heading info at the bottom of the page centered for us already and I'm gonna create a little bit of a space here at the bottom so we can see it you don't have to add these break tags if you don't want okay so next we'll create a row so this is going to be a two column section where we'll have the left section paragraph text and then the right section will be the code image first let's create a line break or actually two to separate our head three from the row underneath so break break and then div class row which will contain our bootstrap columns so I'm going to go ahead and close out the div and then I'm going to create a quick comment here in HTML saying this is the end of our row okay so what we're going to do first is use a bootstrap class called Col – MD – six so bootstrap contains 12 different columns so six will take up half of the page and then when we get to 768 pixels it's going to turn into one column okay so now that we have our paragraph info in there let's drop down underneath this div class and create another div class call mz4 768 pixels or medium and then six for another half section of the page and let's reference the code image so image source IMG forward slash code dot PNG okay and let's save it and take a look at what we have so far so we'll have two sections already laid out for us with bootstrap here and if we use the about link at the top it'll bring us to the welcome to my website text or heading one now let's drop down and add this quote here which is a heading three tag but first let's create a little bit of space between that and the row with another break tag here okay and then we can add a ch3 and it's going to be in italics so I'll use the eye tag here and then I'm just gonna paste in the quote okay so now if we refresh there we have the this is the best website course ever quote from Jay Johnston moving on down the page let's add the next banner image which goes from the light blue to the orange shade so that's going to be charts dot PNG so we don't need to wrap this with an ID since we'll link to the featured section after this so we'll just add it with an image source tag with IMG forward slash charts PNG and then we'll give it the class banner similar to the banner image that we added before okay so now we can drop down to the features section and similar to home and about us we're gonna start off the features section with the div ID so we can link to that part of the page so div ID features and then we're going to give this a class of container – fluid and text – Center then I'll drop down and close out the ID now let's create a comment saying this is the end of the container and then what we can do is add the first part of the features section which is the heading two so it says get to know our features alright so I'm going to add the h2 tag and then paste in get to know our features and then what we'll do is drop down and we're going to create a bootstrap row to contain all three columns here okay so drop down underneath heading two and we'll say div class row and then I'm going to close out the div and say this is the end of the row and then what we'll do is create three different bootstrap columns so if we divide 12 by 3 we get 4 so call MD – four so if we flex the website at 992 pixels with Md I think I said 768 earlier it's actually 992 so let's change it too small for 768 here so sm 4 at 768 pixels that's going to go from 3 columns to 1 column next let's reference the icon here which is in our images so image source IMG ford slash html5 dot PNG and then we're going to give it an ID and call it icon so we can make it a different size for the mobile version later in the CSS and then underneath it of course we have a heading 3 where it says html5 so these three columns where we have the icons followed by the heading 3 will be basically the same so to speed up the tutorial a little bit I'm going to go ahead and copy the div class call sm 4 and paste it twice and then what we can do is simply change HTML 5 to bootstrap in this case as well as the heading 3 here and then the third one will be css3 dot PNG okay so let's go ahead and refresh and take a look at our icons and the heading underneath them here in the finished version in Google Chrome okay so moving down the page the next thing that we'll add will be our heading 3 heading here so let's drop down underneath the last div class call sm 4 and we'll add another heading 3 okay so H 3 and then I'll just paste this text in here so now if we refresh there we have our centered heading three text underneath the icons and their respective heading threes alright so moving down the page let's add the people dot PNG banner image next so we can drop down underneath the last container for the feature section and say image source IMG ford slash people dot PNG and then we'll give it a class and say banner alright then I'll create a little bit of space here and if we refresh there we have the people banner image alright okay so now let's drop down to our portfolio section so we're actually going to style this a little bit differently from the version that we're seeing here as you can see when we get down to 768 pixels it changes to only three portfolio images but what we're going to do is actually change it to 992 so we'll get to that in just a section second first let's add the div id portfolio and then we'll give it a class of container – fluid and then text center to center our text okay and then close out the div ID and class with end of container as our comment okay and now let's go ahead and create the heading to where it says check out our portfolio and I'm going to leave two breaks underneath it to create some space in between that and our portfolio images and now let's start with the first a rather the only row and then we'll add our comments so the row will contain all six images which is which will have six column classes okay so div class row and then end of row for our comment okay and then div class Col – m.d – four then drop down and close out your div class and then let's add the image source tag so I'm not going to add the image extension yet because we'll be copying and pasting this a couple times but we want to give this I D the same as our HTML bootstrap and CSS icons with ID icon okay so I'm going to go ahead and copy this column D – for all right and then in order to get the images from our portfolio to be hidden on small screens because we only want three of them to display on small screens as you can see here and actually let's make it so it is 768 pixels so we'll add an additional class here with hidden – SM for small screens and then I'll go ahead and copy this and paste it twice over so the last three images that we add will be hidden when we get down to 768 pixels rather than 992 okay so now we can go ahead and and the icons so this is going to be in an additional folder to the image folder so we'll have IMG /i cons forward slash and then the image extension so we'll start with camera dot PNG and then we have icons for slash Mike dot PNG and then we have the phone next followed by the calendar and then we have the TB and the clock last so icons ford slash TV and then icons ford slash clock okay so now let's refresh and take a look at it here in Google Chrome okay so if we use the link to go down to the portfolio section here we have all of our portfolio images then when we get to 992 pixels we have it appearing with only the three icons so next let's add our connect section here so let's drop down and add the banner image with image source and then this will be social dot PNG so IMG forward slash social dot PNG and then let's give this the banner class all right so now let's take a look at it in the version we are working on in Google Chrome here so here we have our social banner image and now let's go and create the last section that will link to using our navigation which is the connect section so div ID Connect and then we'll give it its class so class container – fluid and then text – Center and this is optional but I'm actually going to use the footer html5 tag since this is the very last section okay so I'm going to close out the footer and inside of here we'll add our div class row so drop down and close out your div then I'll have a comment here saying this is the end of the row and the closing footer tag is the end of the container okay so let's add our heading two which is connect and then drop down and we'll create a div class and call it social which will include our font awesome icons okay so close that out and what we're going to do is we're going to wrap our icons with an a link tag so a H ref and I'm gonna leave this blank for now and then we'll say target underscore blank so when people click on our social icons that will link them to a new page so our website will stay open and then we're going to reference our font awesome icons with eye classes okay so go ahead and copy that and let's paste it four times or three times rather for each icon and then we'll fill in the blanks with our links and the reference to the particular icon that we're using so I'm just going to take my links from this page here the first one is Facebook then we have Twitter and then Instagram and lastly we have YouTube so you can put your links in at a href here we have the social icons before we give them any style I'm going to go ahead and just copy my own links here and paste them into the a tag all right so I have Facebook Twitter Instagram and then YouTube okay all right so now if I go over here to the version we're working on there we have all of our social icons created and if we click on them they'll link us to each one of our social pages so that's everything for our HTML now what we can do is move over to style dot CSS where we'll lay out all of our styles for our flat bootstrap website the first thing that we'll notice once we open up style dot CSS is this import URL for a Google font so if you want to add your own custom Google font in just do a simple search for it and you can add any font you want alright so the first thing that we're going to style will be the body section of the website so I'm going to go up to the top of the page and the finished version and the version we're working on so let's go ahead and reference the body and then open and close your swirly brackets and let's add our Google font here with the font family doses and then our fallback font is sans-serif okay and then let's go take a look at the change that it made so that's going to change all of our text throughout the entire website to the dosis font that we're seeing here and let's give our font a size of 200% and then we'll give it the color white using the hex value FFF and then let's also give it a text shadow of one pixel horizontal ones vertical and one pixel of shadow and then 666 is the hex value for a gray color okay so now we have our text shadow with our white text and then it's going to show up much better once we add the colorful background so let's move down and start to style our navbar next so we'll reference it with dot navbar for the navbar class and let's give it its background color with the hex value two nine seven fb8 okay so now if we refresh there we have the blue navigation which is the same color as the banner image beneath it alright let's add the border bottom with that light blue hex value so one pixel solid five three nine eight C six okay so now it's refresh and it's gonna change our line there to blue okay moving on let's add some padding so we'll go with one pick or one percent top bottom zero left right and that added some padding up to the top here but our navigation unordered list isn't displaying correctly so let's go over to index.html and see what's wrong okay so it looks like I forgot a – here in navbar header so make sure you have that and if we refresh that should solve our navigation issue okay so there we have it and now let's drop down to a navbar brand which is the class where we style our logo and add our logo in the HTML so dot navbar – brand and we'll give it a minimum height of 55 pixels and then let's also add padding to kind of Center the logo so we'll do padding:0 top 15 pixels right and 5 pixels bottom so the 15 pixels right that should keep the navigation list items from getting too close to our logo okay so that looks good and now let's drop down to our list items so nav bar – nav Li and what we'll want to do is add some padding to the right of our list items so they're not too close to one another so padding right 20 pixels and that's gonna space them out nicely like the finished version here all right so now let's give them their color so we'll want to reference the a link so we'll need to get to it from a nav bar inverse so dot nav bar – inverse and then dot nav bar – nav Li a and then color white or FFF okay and then refresh and there we have our white navigation links so the next thing that we'll do is let's add the hover effect to our navigation that we see here with the same color as the blue underneath the navigation header okay so you can paste the same selector from above we'll just add a hover to it and then change this to background color and then let's change the hex value to five three nine eight C six that we have up here okay so now if we refresh then we have our hover style over the navigation and it's going to take effect with the drop down navigation already also okay so there we have it so the next thing that we'll do is let's add a little bit of space beneath the logo when we when we drop down as you can see the logo is kind of sitting right on top of the boarder bottom there so let's add a dot navbar – header padding bottom five pixels and that's gonna space it out good for us okay and let's change the border color now so we'll change this border to the same as the light blue shade so dot navbar dash inverse dot navbar – collapse and then comma dot navbar dash inverse dot navbar – form and then border color and that's going to be the same hex value 539 8c six all right okay so there we have it so we could have added the the class for the border around our drop down button to that but let's do it separately so navbar dash inverse and then dot navbar – toggle and then we'll give it the same border color so border color the hex value of five three nine eight C six alright now if we refresh there we have it looking just like the original until we hover over it so let's change that okay so I'm going to go ahead and copy from this and paste it in here so we have nav bar – and burst dot nav bar – toggle and we're gonna have the first one as hover and the second as focus okay and then we'll have the background color the same as the hex value above five three nine eight C six okay so now let's check out our button and there we have it alright and since we have the script for closing the navigation as well as the scroll script already in there for us it's going to bring us down to the section of the page that we reference in the HTML so now let's style our banner images so we have the top one this one the people one and then the connect one and we can make them all fit into the screen with one simple style here so we'll reference it with IMG dot banner because we have the banner class inside of the image tag so IMG banner and then we'll give it a width of 100% okay so now if we refresh there we have our first banner image as well as the rest of them displaying at 100% of the page alright so as we look around in the version we're working here on we'll find that what we'll need some padding above and possibly below some of the banner images but we'll do that later on let's move on down the page and style our headings next so the first thing that we'll style will be our heading one then we'll have heading two afterwards followed by heading three and then we have our paragraph text after that alright so for our heading one we really only have one here on the website and that's the welcome to my website text that we see here okay so let's change the font size to 300% which is about three times 16 pixels in google chrome and then we'll give it a font of 800 and then refresh and let's make our text shadow a little more pronounced instead of one pixel let's have our text shadow at 2 pixel to pixel to pixel and then we'll keep with the grey hex value all right so let's refresh and we have it looking just like the original here okay so now on to our heading twos the first one is get to know our features and let's change the font size to 210 percent okay and that's going to effect a couple of other heading twos below next we have our heading threes and let's change the font size for them to 150 percent okay and then if we refresh we have it looking somewhat like the original let's go ahead and give it a max width though so we have it a max width of 80% of the page okay and then let's Center it with margin:0 auto okay so that looks good and then let's do our paragraph text here alright so we'll have our paragraph text at a font size of one hundred and twenty percent okay and right now it's even with the top of the image or a little bit above so let's add some padding to the top of our paragraph section so we'll give it a padding of 6% all around or you can just do padding top if you want it to stay as wide as it was all right okay so it's looking pretty good here as far as all of our headings and the texts go so one other thing I want to do just to make sure let's Center our images all right so we'll reference them with IMG and then margin:0 auto to center them okay all right so now let's drop down and let's reference our icons next so if you remember when we added these images in the HTML we added an icon class so here for example with html5 PNG we have actually ID icon so we'll do a hashtag icon since it's an ID rather than a class and then we'll give it a max width of 200 pixels and then let's give it a margin to create a little bit of space here between it and the text as well as above we'll give it a margin of 1% top bottom and then Auto left/right all right looking pretty good so the next thing that we'll do is let's drop down to the bottom of the page and style our social icons all right so let's reference those with the social class so dot social and then we'll give them a font size of five hundred percent and then if we refresh there we have them and they're displaying in these blue link shades and then let's add some padding so social a for the links and padding three percent all around and then let's also give them a color white all right so if we refresh we're not really going to be able to see them now because they have the white background so let's add a hover color to them with dot social a colon hover and let's give them a hex value of D 5 D 5 D 5 which is sort of a light gray shade okay so now when we hover over them we can at least see them before we add the background color to the connect section down here so let's move on up top and let's take care of some padding and add our background colors so the first thing that we'll add padding to will be our home ID right here so the home ID is what the desktop image is nested within and then we have about features portfolio and connect at the bottom so let's go ahead and reference all of these in our CSS so we can add the background color and any padding that we might need to the top or bottom of the sections okay so starting with the home ID let's give it a padding of 60 on the top so padding top 60 pixels you may need a little bit more for really wide screens but 60 pixels should be pretty good here all right so that pushes it down some so we can see all of the the lamp up there all right now let's drop down to our About section so hashtag about for the ID and then let's give it a padding of 70 pixels top bottom and zero pixels left right okay so if we refresh there we have a good amount of space and then let's give it the blue background color so background color hashtag 1f b8e be for the light blue shade alright then if we refresh there we have it and it's flush with the desktop image above alright next is our features section so hashtag features and then let's give it a padding of of 70 pixels top to create some space between the image above and then the heading two and then we'll give it a padding of 50 pixels on the bottom all right so now let's add our background color for the orange shade which is ff9 eight zero zero okay and then for the portfolio section let's add the same padding so padding 70 pixels on the top zero on the right and then 50 pixels on the bottom with the background color as that turquoise shade so background-color hex value of zero zero b2c a okay looking pretty good and now let's do our connect section so pound or hash tag connect and let's give it a padding of zero top zero right and 12% bottom or we could have just done padding-bottom twelve percent so that's going to create some space underneath our social icons and let's give it its purple background color with the hat hex value seven six over six seven three rather a b7 okay so there we have it looking pretty good alright so all of the spacing looks good except for this heading three section right here so let's check that out in our HTML and we might need to just move around some break tags or add some okay so let's add the end of our row to the top of our heading three here and let's add two break tags above our h3 okay so that looks much better all right so that's everything for the full-width version of our website it looks almost identical to the original version here the next thing that we'll do is add a few media queries so the up we've got a little bit of space off to the right here so let's take care of that so in bootstrap if you've if you have that make sure that you have zero margin on your row so dot row margin zero because I think that bootstrap inherently gives a margin of 15 pixels or negative 15 pixels rather to the rows so let's go ahead and add a media query and we'll let's actually check out our our portfolio section real quick sorry before we add the media query and let's change this to or let's rather what we're gonna do is we're gonna add hidden excess for extra small so these columns are also hidden on extra small screens sorry I missed that when we were laying out our HTML okay so now if we refresh we'll just have the three icons displaying at the extra small width okay so let's go back over to style dot CSS and drop down and we'll create a little media query here so at media and then in parentheses max width 768 pixels and let's change the size for the font size of some headings in the paragraph to start so h1 let's change our font size to 170 percent from 300 percent and then let's change our heading to text to a font size of 160 percent from 210 okay and our heading three let's change that to 120 percent from 150 and also let's make it a little bit wider so rather than having an eighty percent let's say max with ninety percent okay so that looks better and let's move down to our paragraph text so we'll reference that with P and let's change the padding to three percent on the top instead of six percent and then we'll give it a font size of 100 percent from 120 percent all right so moving down the page let's make this code image smaller so if you remember in our HTML we gave this an ID of code which we can reference here so if we scroll up here we have our code image oh no we didn't add it so let's do that now okay so ID code so image hashtag code and then we'll give us a max width of 160 pixels all right so that looks much better here for the mobile version and moving down the next thing that will resize is so there's a lot of space underneath the banner image up there at the top you can mess with that if you want let's change the icon size for the images as well as our HTML bootstrap CSS icons here alright so we'll reference that first with the column SM for SoCal – SM – for and then the hash tag icon so dot call SM for small for icon and let's give it a max width of 110 pixels all right okay so that looks much better here okay and then let's move down to our portfolio images and resize these so that's going to be called MD for icon rather than SM for and again we could have actually we could have styled this in the same line there but let's go ahead and separate them to md4 alright so there we have our icons a little smaller and let's space them out a little bit here with padding bottom 8% okay so that looks better and lastly let's resize our social icons here so I'll reference that with the social class and let's give them a font size of 200% from 500 percent alright so that does it I'm going to go ahead and get rid of some of this extra space in style dot CSS and index dot HTML and then let's take a look at the final version here with our social icons change there and we have our drop down menu sending us to all the different sections of the page alright so that does it as I said I want to thank you for sticking around with me through this bootstrap tutorial if you enjoyed the tutorial please do like the video subscribe and turn on your notifications then I'll see you in the next tutorial thanks for watching