Bootstrap 4 Responsive Website Theme - Start To Finish - Bootstrap 4, HTML5, CSS3

in this video we'll create a bootstrap for theme from scratch okay guys so let's take a look at the bootstrap theme before we get started so in the upper left hand corner we have the logo where it says nest and then off to the right we have our bootstrap navigation menu or navbar and then underneath that we have the landing page image that takes up the full screen with the title and the get started button above the fixed image landing screen so if we select one of the navigation links it's going to take us to different sections of the page using something called bootstrap scroll spy so that'll scroll us down to the About section for example or the portfolio section and then just underneath our full screen landing page here in the About section we have three different bootstrap columns which we'll transition into a single column layout and then underneath that we have the portfolio section with the two column layout and no space in between our bootstrap columns and then for the testimonials section will be using what's called bootstrap cards to display the images the title and the paragraph for each one of the cards then at the very bottom of course we have the footer section with some contact information centered along with a logo and before we take a look at the mobile version of the website and I give you the starter files to get started with the tutorial I want to share with you that I've just completed my first udemy course that features the full version as you see here of the Nest responsive bootstrap theme so if you want to check out the complete version of the theme and the course go ahead and check out the link in the video description and I'm also going to include a coupon in the video description just remember if you go ahead and get the theme or template along with the nest course please leave a review for me in you to me okay so back to the YouTube version of the theme that we'll be developing here let's take a look at the mobile version of the nest website so once we get down to 768 pixels it's going to transform into the mobile version and as you can see the navigation has turned into the collapsible bootstrap navigation you see here and when we click on one of the navigation links it's still going to send us down to the appropriate section of the page and as you can see also our three column and two column sections have now shifted into a single column once we get down to the medium screen width or 768 pixels with bootstrap okay so now let's scroll back up to the top or we could hit the logo the nest logo since it's a one-page theme that'll bring us back to the top also and let's expand it back to the full width okay so in the description of this video along with the link to the udemy course version will be a link to the starter files for the YouTube tutorial here so inside of the nest theme starter files will have index.html and style dot CSS I'm going to be using the free text editor called sublime text to build our theme and then also included in the files will be all of the images that we'll need to build the theme so open on the Left I have google chrome where we'll be viewing the theme as we build it and then on the right here as you can see I have sublime text open so as you can see here in sublime text we already have a little bit of CSS and the start of our HTML document laid out for us what I want to do is just make sure that I'm connected to Google Chrome here though before we go over what's already included for us with the starter files so I'll just write a little bit of information in here and as you can see I'm connected to Google Chrome on the left ok so starting from the top we have our doctype HTML for the HTML tag then inside of that we have our head section and then at the top floor head section we have our character set which is a standard utf-8 and underneath that we have the meta name viewport content width device-width initial-scale one meta tag for responsiveness or mobile versions and then we have of course the title of our website underneath that which if you're unfamiliar with where it's going to display that's going to be up here on the tab at the top of your browser in this case Google Chrome and then going back to index.html underneath the title we have a link to the latest version of bootstrap CSS which happens to be bootstrap 4.1 then we have a link to the style sheet right here style dot CSS that's included in the starter files and then in the body section of the website at the bottom we have our script source files starting with the latest version of jQuery and then the latest version of bootstrap j/s which is also bootstrap 4.1 so the first thing that we're going to add to the index dot HTML file here will be inside of the actual body tag so at the top of our website with our navbar the bootstrap scroll spy feature or scroll speed that links us to different sections of the page also gets highlighted when we scroll down to certain sections of the page so what we're gonna do is we're going to incorporate that into the body tag here okay so we're gonna say body data spy equals scroll and then data - target and then this will be the ID that we're gonna give our menu so we'll just say hash tag menu and then what we'll need to do is we'll need to reference a different ID per section of the website that we scroll to so the navigation knows to light up once we scroll to that section so the first one at the top we're just going to at the home section so we'll add an invisible HTML comment here saying start home section and then inside of that we'll have our div ID which will simply call home okay and then we can drop down and add the closing div tag and then write that this is the end of the home section with our invisible HTML comment here okay so everything inside of this section will stay lit up or the home navigation link will stay lit up rather so now let's go ahead and let's start with the actual navigation bar at the top of the website so I'm going to create another invisible comment here just saying navigation so we know it's the start of our navigation menu and then let's start our navigation off with the html5 nav tag and then we'll give it a class that's called nav bar and then nav bar - dark since we're going to be using the dark version of the bootstrap navigation and then BG - dark for our background color as dark so now we see a little bit to the start of our navigation bar and then since the navigation expands and contracts at the 768 pixel mark which is the medium screen mark with bootstrap we're gonna say nav bar - expand MD for medium or 768 and then lastly since it stays fixed at the top of the screen we'll say fixed - top okay so then we can drop down and close out the nav tag and inside of that we're gonna add a a divider tag here or div tag to make sure that the navigation takes up 100% of the screen as you can see here so we're going to use a div class with bootstrap that's called container - fluid and anything of inside of container fluid will take up 100% of the browser or window that you're viewing the website width okay so then we can close out the div and then inside of this let's go ahead and start off with our with our logo so we'll say a class and since a link will use the a tag and then navbar - brand is the class for the logo with bootstrap navigations and we'll just leave the link blank so that's going to keep us on the same page and link us back up to the top of the website when we click on it and then inside of our link we'll have our image for the logo so that's inside of the IMG folder and then the image URL or file name is nest dot PNG so IMG /s PNG okay so there we have the nest image and it's looking kind of large so let's go ahead and let's go over to style dot CSS and I'm just going to create a quick style here to make it so the navbar brand image or our logo stays at a height of two R M so if you're unfamiliar with rim one rim is equal to sixteen pixels with Google Chrome so this would be 32 pixels in height and brim is the default size or metric that we use for bootstrap okay so there we have our logo fitting in to the navbar similar to the original and let's drop down and let's add the button here next for the drop down section of our navigation menu so we're going to wrap this with a button tag and then we're going to give it a class and the default class for the toggle is navbar - toddler with bootstrap for and then we'll say type 'button and data - toggle collapse because we want our menu to open and collapse when we click on the button and then lastly we'll say data - target and this will be the ID that we're gonna give our menu which is hashtag menu ok so inside of that now we can go ahead and add the bars since we just have kind of a blank button here so we'll go ahead and add the three bars here so we used to have to add each one individually with bootstrap 3 with bootstrap 4 we can just use a simple class called navbar - toggler - icon inside of a span tag and that's going to display all three of the bars for our burger menu or drop down navigation button ok so now we can go ahead and add our div for the actual collapsible section of our navigation so we're gonna say div class and let me just expand this okay so we're gonna say div class collapse and then navbar - collapse and then we'll give it the ID we've been referencing which is simply menu without the hashtag here so div id menu which we can really call whatever we want here I just decided on menu because it's simple and then let's go ahead and add our unordered list which will of course have our list items and individual navigation links inside of it so underneath div class collapse will have UL class navbar - nav and then ml - auto which will shift our navigation links off to the right side of the screen as opposed to MX auto for example which will Center our navigation links and then inside of our unordered list we'll have our first list item and each one of our list items will have the same class which is nav - item and then inside of our list item will have a link class called nav - link followed by the actual link and then we'll have the text inside of our link but what I'm gonna do to make it easier on us is we have five different navigation links so I'm just going to go ahead and copy and paste each one of these list items out so all we need to add is the the link here so our first one of course is home and this will be linking us to the home section or home ID so it'll be hashtag home and then the actual text for the link is home and I'm going to capitalize it so there we have our first navigation link later in the CSS we'll make them appear as they sit here but to add the rest of them so we have a bount portfolio and then we have testimonials and then contact so we have an ad added the div IDs to link it to each one of these sections yet but we will as we work down index.html so just remember to add the actual text that will appear for the links with portfolio testimonials contact after you've added about okay so if we refresh there we have all five of our navigation links and then once we flex down to underneath 768 pixels or the medium width in bootstrap we have the collapsible drop down navigation menu appearing so the next thing we'll do is let's go ahead and move on down the page and we'll move on to the landing page section of the theme and similar to the navigation I'm gonna go ahead and create an invisible HTML comment here saying this is the start of the landing page okay so let's go ahead and start off with a div class that we're simply gonna call div class landing and inside of this div will have two additional div classes the first one being home - wrap and div class home - inner and then we can close out the div classes so these div classes already have style included for them in style dot CSS the reason being because they're necessary for the landing page to display properly on cell phones in particular iPhones or the iOS so here we have the style that's already included for us the only thing that we'll be doing is adding the actual image that we'll be using for the background image of the landing page in the CSS everything is already done for us aside from that so let's move on to the title and the button section so we'll drop down underneath the start landing page section and let's create a new comment saying start landing page caption okay so we're going to go ahead and create a new div class and we'll just call it caption and then we'll use a bootstrap class called center block that's going to Center everything inside of this div on the page and then we'll also use the text center class which will take care of obviously centering our text okay so now we can go ahead and add the heading for the nest responsive bootstrap theme text that we're seeing here so we're going to use a heading 3 to add this so nest responsive bootstrap theme and then underneath that we have the button which will wrap with a link so a class BTN and then BTN outline - light is a class for this particular bootstrap button which will give us a clear inside to it and the the light outline and then for the link that's just going to link us to the About section so we'll say hashtag about and then inside of it we obviously have the get started text and then we'll close out the link or button okay so now let's go back over to the version we've been working on and it's displaying underneath the landing page area for right now but later we'll shift it so it displays on top of the landing page section so it's going to look a little scattered until we get over to style dot CSS but let's move on to the About section so you might notice that the About section is a darker shade than the rest of the page around it and what that is is that's called a Jumbotron section with bootstrap so before we get to the Jumbo Strom Jumbotron let's lay out the ID for the About section of the website so the bootstrap scrolls scroll spy knows to light up the navigation menu for that particular section and so the navigation menu link as well as other links can send us straight to the About section ok so then I'm going to add a comment saying this is the end of the About section all right so now we can go ahead and add the Jumbotron okay so we're going to write div class Jumbotron which will form the gray section that we're seeing here and then we'll add the content inside of it so div class Jumbotron and then we'll want to close out the div for our Jumbotron and I'm also going to create a note here saying this is the end of the Jumbotron and then the first thing that we have inside of the Jumbotron section will be the heading but let's just make sure that it appears gray here okay so there we have the Jumbotron section and the background of the landing page as you can see is matched to the color of the Jumbotron which I didn't mention earlier so let's add the about title here which is a heading three tag and we're gonna call this h3 class heading and then we'll just write about and then close out the heading three tag and then we'll take care of the styling later in style dot CSS okay so underneath that we have the three columns section and what we'll want to do is we'll want to wrap the columns in a row so let's drop down underneath our heading three and we're gonna say div class row and then along with the closing about and jumbotron divs we'll close out the div for the row here and create a comment saying this is the end of the row okay so now we can go ahead and add the three column section so if you know anything about bootstrap you know that there are twelve columns in total so to get the three columns we'll just divide three into 12 and we get four and then just remember that it has medium breakpoint at 768 pixels so with that we'll say div class column or call - MD or 768 and 4 so basically anything over 768 pixels it's going to display at 4 out of the 12 columns and then we'll also use the Tech Center class to Center all of the text that we'll have inside of the column here and inside of each one of the columns we'll have a heading 4 and a paragraph section so I'm just gonna create a blank h4 and P tag here and then what we can do is just copy and paste the whole div class call em d4 and Tech Center class here twice so we'll paste that in twice and then all we need to do is add the heading 4 and the paragraph text so we'll start off with the full screen landing text here and then I'll paste in the paragraph text you can just write what you want or use dummy text okay and then I'm just gonna paste in the contact form information which the full version of the nest theme features a functioning contact form that sends messages to your email address so that's where we're getting this info about the contact form and the smooth scrolling links for example so now if we refresh there we have the first and last of the columns filled out and the middle one is blank as you can see but still taking up the space on the page and then I'm just going to add the heading for smooth scrolling text and then the paragraph text about the smooth scrolling right so now if we go back to the version we're working on in Google Chrome and refresh there we have all three of the columns filled out and once we flex it down to 768 pixels it's going to turn into the single column mobile or tablet version of the website so we'll do more of the styling once we get over to style dot CSS as ice I've said but let's move down to the portfolio section of the website next so similar to the home section and the About section what we'll do is let's start off the portfolio section with a comment saying that this is the start of the portfolio section and then we'll add the ID for the bootstrap scroll spy and the navigation to link us to this section of the website so start portfolio section and then div ID portfolio and then we can drop down and close out the div and I'm going to say that this is the end of the portfolio section and as you may have noticed the portfolio section will take up or the images rather will take up 100% of the screen so we're going to use that div class container fluid bootstrap class again similar to what we use the navigation and take up 100% and then I'm gonna end it off here with a comment saying this is the end of the container fluid closing div okay and then before we add the heading 3 with the portfolio text let's add some additional space in here above that heading 3 so we're gonna add a class that we're just going to call padding and later we'll style that class to add some additional padding below the jumbotron section and above the portfolio heading so let's go ahead and add that now with the h3 class heading similar to the About section and then we'll just write portfolio and close out the heading 3 and there we have our portfolio text and then similar to the the the columns that we had in the About section we're going to go ahead and wrap columns for the portfolio section with a div class row so div class row and then we're gonna add an additional class here to take away the padding in between the columns that are default with bootstrap and we're just gonna say no - padding for that class for the custom class we'll be adding and then let's close out the div for the row and create a comment saying this is the end of the row okay so similar to what we did with the three columns section four goes into twelve our 3 goes into 12 four times rather so 2 goes into 12 six times so what we'll do is we'll say Kyle MD 6 rather than call md 4 so it's still gonna break at the 768 pixel mark and turn into a single column underneath that width and then inside of each column we'll have an image and we're going to give the image a class so we'll say IMG class and we'll just call it portfolio and then we'll have the source for each one of the image files so I'm just gonna say IMG forward slash dot PNG and then what we can do is we can copy and paste the div class with the image class inside of it 3 times for all 4 images so each one of the portfolio images here is simply one png-24 dot PNG so we'll have 1 2 3 4 to make it easy on us and if we save and refresh we should have all 4 images displaying as you see here but they're not displaying at full width which will correct in the CSS later on okay so let's go ahead and drop down to the testimonial section next so similar to what we did above we'll want to create a new ID for the testimonial section along with our comment so we'll say start testimonials section and then div ID testimonials and then we can close out the div and I'm gonna leave a comment here saying this is the end of the testimonial section all right and then let's add our heading h3 class so to get our testimonials text up here so that's going to be h3 class heading and then testimonials and then we can close out the heading 3 all right and then similar to above we'll have a need a row here to have our columns inside of so we'll say div class row and then we're also going to add some padding along with this row and then let's close out the div and leave a comment saying this is the end of the row okay and then similar to the portfolio section we're just gonna have two columns and as you know 2 goes into 12 6 times so again we'll use the div class column D 6 okay and then we can drop down and close out the div and inside of that we'll have what's called a card which will contain our image and text inside of the box here so we're going to say div class card and all the text inside of it will be centered so we'll use that class with bootstrap as our shortcut here and then we can close out the div for the div class card and inside of it the first thing that we'll have will be the image okay so that's gonna have a class and we'll say IMG class card - IMG so image class card - OMG - top because the image is appearing at the top and then for our source will have IMG 4/5 dot PNG which is the image of the guy at the desk there so now if we refresh we should have the start of our card here as you can see and you know it's in the card because of the rounded corners or the border radius and let's drop down to the card body next so we'll say div class card body and then we'll close out the dip for that and we can include any content we want but in this case we simply have a heading 4 where it says John Lee and then underneath that we have a quote a paragraph quote where it says I have over 10 years of experience in technology and haven't come across a better service okay so now if we refresh in Google Chrome there we have the card with the image at the top and then the body with the heading 4 and the paragraph section so the second card is basically the same thing I'm just going to go ahead and copy and paste this one to save us some time and then all we need to do is change the image to image 6 and then the name from John Lee to Jessica Miller all right so let's refresh and there we have the second card displaying and if you're concerned with the padding or margin around the cards we'll be covering that in the CSS to make it a little more fluid and to make it look like the original okay so lastly for the HTML let's go ahead and drop down to the contact section okay so let's go and move down to underneath the end of the testimonial section and we'll say this is the start of the contact section so once we've added this HTML comment let's add our contact ID so div ID contact and then we can drop down and close out the div and I'm going to create a comment saying this is the end of the contact section okay so one thing that you might notice is the background color of the contact section takes up 100% of the screen as you can see here so once again we're going to use the div class container fluid bootstrap class so it takes up the full window and then we're also going to give this an additional class that we're just gonna call footer so we can add some additional styling to it and then let's create a comment saying that this is the end of the container fluid footer section okay so next let's go ahead and add a row and I'll explain why we're adding a row in just a second but first let's just write div class row and then we can close out the div and write end row so we really only have one row that's displaying or one column rather that's displaying but in order to get it centered on the page what we're gonna do is we're gonna add an additional column right here that's just gonna be basically blank filler space and then once we get down to the mobile version that column isn't going to appear at all okay so the column where the content actually lies is gonna take up one half of the page and the first one will be 25% so call MD three right here would be a normal column that you'd use for a four section or four column layout so we'll have Col MD three and that's just going to be a blank column and then call MD six and then I'm just gonna write Tech Center and we don't need to add an additional column v3 afterwards because it's just gonna be blank space anyways so inside of column d6 let's go ahead and start off with our logo at the top so we'll just write image source IMG ford slash nest dot PNG for the logo image okay so now if we refresh it's going to it's a white logo so it's not going to appear until we add the background color but let's go ahead and just add the content in underneath that okay so we have a paragraph tag tag or our section underneath that and I'm just going to paste the text in here and then we have a bold section where it says our locations so we use the strong tag for bold text and then underneath that we have the street name paragraph section so I'll just copy this and paste it and then to create a new line we'll just use the BR or break tag in between 100 Street name and our city okay so there we have the bold text and then the street name and the city underneath it and then let's do the same with the contact info section so again we'll use the strong tag for the bold text where it says contact info and then underneath that we'll use the paragraph tag and again we'll just use the break tag to create a new line for the email there okay so now if we go and refresh there we have the remaining bit of our content and that does it for all of our HTML and the rest of the tutorial will be done in style dot CSS as we add the necessary styling to make it look like the original so let me just do away with this extra space and let's move over to style dot CSS okay so as I mentioned earlier we already have a little bit of CSS included for us and what we're gonna do is drop down underneath the overflow X hidden for the right gutter fix CSS and let's move on to giving our font a different font family so we're gonna use the font family sans-serif and then let's change the color to make it a little bit of a softer gray than the dark gray that we're seeing with the color five zero five nine six two four the hex value so now if we go ahead and refresh there we have the text looking a little rounder with the sans serif font and a little bit softer with that lighter color so next let's move on to our navigation bar at the top so let's see what we'll need to reference in index.html here which is simply the nav bar class so I'll reference that to select the nav bar and then let's make our text uppercase with text transform uppercase and then let's give the background color of our nav bar the same shade that we gave our font for the overall body and what we can do is we can take away BG - dark which is the background color as you can see here when we've taken it away for the navigation bar okay so let's move back over to style dot CSS and we'll just say background color and then the same hex value five zero five nine six - okay so now if we refresh there we have our nav bar looking just like the original here so let's move on down underneath the nav bar and let's add our background image for the landing page section so we're going to use the home inner class that's already referenced here because all of our landing page style other than add the actual background image is included for us already due to the fixes needed for iPhones and iPads so we'll just say home in our background - image and then URL in parentheses and a single quote that's going to be the IMG folder and then landing dot PNG so IMG forward slash landing dot PNG and then if you refresh there we have our landing page staying fixed or landing page background staying fixed and we have the content underneath it scrolling on top of it so next let's move the the heading and the button that appears inside of the div class caption that we created on top of the landing page so we'll reference the div class caption with dot caption for the class and then let's give it a width of 100% and then we'll also want to give it a max width of 100% so the text inside of the caption class doesn't go outside of it as we flex the page down towards the mobile width and then we're also gonna say position:absolute because when we scroll the text is gonna stay absolute it's not going to stay fixed on top of the landing page and then we'll just say top forty percent and that's going to make it appear forty percent from the top of the page when we land on it which it does right here and then for good measure we can say z-index one to make sure that it displays on top of the landing page image across different browsers so let's go ahead and style our heading text next so that's going to be the heading three inside of the caption class and let me just change this to nest from next so we'll say 'don't caption h3 and then we'll just make the color white you can write white or the hex value for white is f F F and then font size will say 2.4 R M which is around 40 pixels and then we'll want to make the text uppercase to match the original so text transform uppercase okay and then lastly let's add the additional space or padding in between that and the button so we'll say padding-bottom to R M which is the equivalent of 32 pixels okay so that's looking pretty good until we get down to the button and then when we size it down it stays on the page similar to the finished version all right so let's go and check out the class for the button which is simply BTN and we'll reference that here with period BTN and then let's change the border width and rather than using a pixel will just say medium or a REM for that matter so that's going to give us the medium width border and then let's take away the rounded corners with border radius zero to give it the boxy feel and next let's change the text to uppercase the text transform uppercase and let's change the padding around the text to 0.5 ram top bottom 1.1 rim left/right to space it out a little bit more okay and then the the actual font size a little bit smaller in the original so let's change the font size to 0.9 remm okay so now if we refresh we can't tell them apart until we scroll down and we look for the next thing we'll want to change to make it look like the original which is the heading where it says about and the styling for that will also affect the portfolio heading and the testimonials heading which we use the same class for which is h3 class heading okay so to select that class will just say H 3 dot heading and then we'll want them aligned Center so we'll say text-align:center and then let's change the font size so we'll increase the font size to 1.9 REM and then we'll make it uppercase so let's say text transform uppercase and that's looking pretty good except for we'll want to create a little bit of space underneath the headings so we'll say margin-bottom 1.9 REM okay so that's looking pretty good until we get down to the portfolio section where the images aren't displaying at 100% and we have some padding issues that we want to correct above the portfolio text and then we'll mess with the padding for the portfolio section itself so if you remember we added this padding class here inside of the portfolio section so let's go ahead and address that by adding some additional padding to the top and bottom of that class so we'll say padding to REM top bottom and zero left right okay so now we have some additional padding there for us that goes along with the portfolio heading and the testimonials heading and the next thing that we'll do is let's make our images for the portfolio section display at 100% and that's going to expose the padding issue for the portfolio so we'll say IMG portfolio and then max width 100% so now if we refresh there we have the images displaying as we want them to but we have the port the padding in between the columns here in the center so if you remember in the HTML what we did is we added a class where it says no padding to the row containing the portfolio columns so what we'll do is we'll go ahead and select the no padding class and then the columns that follow it so we'll say dot Col - MD - 6 and then we'll simply say padding:0 all right so now if we refresh there we have the portfolio images taking up 100% of the row they're inside of their columns so next let's drop down to the card section what we want to do is add some additional margin around the cards so they're not pushed up against the sides of our browser so want to reference the card class here which is dot card and then we'll just say margin - REM all around all right so now if we refresh there we have them spaced out and looking just like the original all right so it looks pretty good until we get down to the footer or contact section so what we want to do is select the footer class that we added so we can give it the background color and we'll select the row inside of the footer class so we'll say dot footer and then dot row and let's give it its background color which will be the same hex value we've been using throughout the theme five oh five nine six two and now if we go and refresh there we have our background color but we can't see the text and our logo is looking pretty big here so let's go ahead and take care of that so we'll get to it with the footer class and then IMG and let's give it the same height as the logo at the top of the website in the nav bar which is 2r M and now if we refresh there we have our logo resized but we'll want to add some padding around it so let's go ahead and do that next so just underneath where we added the height let's say padding one REM so that's going to be one rim on the top and let's just apply this to around the entire footer section so one rim on the top then we'll say two rim on the sides are left and right and three rim on the bottom and let's change the color to white and we're actually going to apply these styles to the footer and row because if we add it to the image it's obviously not going to apply here so let's just copy it and we'll paste it to the footer class followed by the row class above okay and now if we go and refresh there we have it looking pretty good except for the margin underneath the or around the logo image so we'll just say margin 1.5 rim top bottom and zero left right all right so now if we go and refresh there we have it looking just like the original and once we get past 768 pixels it flexes down to take up half of the page okay so that does it I want to thank you for sticking around with me through the tutorial please remember to check out the full version of the nest responsive bootstrap theme with my udemy course found in the video's description and I'll see you in the next video thanks for watching

Channel: Drew Ryan

Views: 68,337

Keywords: BOOTSTRAP, bootstrap 4, responsive html, html5, css3, bootstrap website from scratch, create a bootstrap website, learn bootstrap 4

Id: Ht1F9KuhJO4

Length: 55min 13sec (3313 seconds)

Published: Tue Jul 17 2018