Rapid Website Design with Bootstrap Laurence Svekis | Laurence Svekis | Skillshare

Rapid Website Design with Bootstrap Laurence Svekis

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 9m)
    • 1. Bootstrap2

      1:17
    • 2. 1 Course Introduction to Bootstrap for rapid web development

      2:30
    • 3. 2 Web resources

      3:41
    • 4. 3 Build a default Bootstrap Template

      4:20
    • 5. 5 How to create a Bootstrap 4 Navbar

      10:00
    • 6. 6 Complete Navbar in Bootstrap

      7:38
    • 7. 8 Containers for content

      4:21
    • 8. 9 Bootstrap responsive images

      6:18
    • 9. 10 Build Footer Element

      4:23
    • 10. 11 Add Google Map API

      9:44
    • 11. 13 Update map Add Carousel

      9:43
    • 12. 15 Create Contact Form

      5:06

About This Class

Rapid Website Design with Bootstrap
Learn how to use Bootstrap to apply classes to HTML pages for styling. Make responsive websites from scratch quickly
Bootstrap helps you create webpages faster!

Connect the Bootstrap framework to your web projects, to access amazing classes that can easily be added to HTML pages to create styling. Bootstrap also provides a number of commonly used components that can also be added with classes and attributes into your web pages.

This course is designed to show you how to build your own custom website from scratch using Bootstrap as a framework. Bootstrap has you covered, it lets you take the repetitive styling work out of you web design projects and focus your time on the user experience.

This is a unique web project designed for beginners to learn more about how to make websites with Bootstrap. This course includes a step by step approach, beginning with a blank file and showing you how to build a website.

Source code is included so you can work alongside the lessons and create your own project.

HD quality video
Learn how to add classes
build a navbar menu
add Google maps APi
create content sections
explore the Bootstrap Grid
useful jQuery components
I'm here to help you learn Bootstrap and ready to answer any questions you may have. Enroll now and see what you can do with Bootstrap.

Transcripts

1. Bootstrap2: bootstrap helps you create Web pages faster. Connect the bootstrap for your work to your Web projects. Toe access. Amazing classes that can easily be added to each to male pages. To create styling. Bootstrap also provides a number of commonly used components that can also be added with classes and attributes into your Web pages. This course is designed to show you how to build your own custom website from scratch, using bootstrap as the framework bootstrap has you covered. It lets you take the repetitive styling, work out of Web site design projects and let you focus your time on user experience. This is a unique Web project designed for beginners to learn more about how to make websites using bootstrap. This course includes a step by step approach, beginning with the blank file and showing you how to build a website from scratch. Source code is included, so you couldn't work alongside the lessons to create your own projects. HD quality video. Learn how to add classes. Build a navigation bar menu at Google Maps AP I create content sections exploring the bootstrap grid. Use J. Corey components and a whole lot more. I'm here to help you learn food strong and ready to answer any questions you may have. Enroll now and see what you can do with Bootstrap. 2. 1 Course Introduction to Bootstrap for rapid web development: welcome to our course on building a website from scratch in under one hour. My name is Lawrence, and I'm excited to have the opportunity to present this course to you today. Within this course, I will be showing you how you can build an amazing looking website really quickly and easily utilizing bootstrap and boots dropped for framework in order to develop your website . So this is going to be based around HTML code bringing in bootstrap CSS classes. And then finally, we're also going to include some JavaScript, Jake worry and some additional bootstrap components that are based around J. Corey. So one of them that you see here below is gonna be the Google Maps. Ap I This is a really useful component that you can add to your web page in order to allow your visitors to be able to navigate and actually locate your position on a map. So if you have an actual physical location, this is a great thing to include on a map. So help users be able to find it where you're located. Eso In this case, I've included on every page within the Web site. I've also created a contact form a quick showcase gallery. Here s so this is a bootstrap carousel here. So about default functionality within the carousel. And it's really easy to bring this into your Web pages. We're also gonna be looking at how we can bring images into bootstrap. How weaken style those and so on. We're also going to be interested and looking at how we can make our Web pages responsive is one of the main things and the coolest things. But boots drop is that it builds responsive web pages. So what we're looking at right now is, as I did, just the website. The navigation menu resize is the image is resized and everything looks proper, depending on what size screen you're coming in out. So even on mobile devices, your Web page will look fantastic when you utilize bootstrap and also the navigation menu. So now we've got the same options as we did before it, just on a smaller screen and scaled properly. Eso This is what boots drop could do. And you can build amazing websites just like this with a little bit of HTML and bring boots . Drop into your projects and I'm gonna show you how to do this. So when you're ready, let's get ready to start creating some amazing websites from scratch 3. 2 Web resources: within this lesson, I want to provide a quick overview of some of the resources that I'm gonna be utilizing in order to rapidly develop a website from scratch. So first of all, I've got my editor opened here and have created a blank index dot html page. So if you're looking to use the same editor that I'm gonna be using within the course I'm using brackets. There is a number of other editors out there as well. The reason I'm using brackets is it's an adobe product. It's free, it's open source works across different platforms. So it's a really good utility. And if you are looking for a new Web editor, this is a great one to try out some of the other resources that I'm going to be using. Within the course, I'm gonna be using chrome as my browser. And the reason that I like chrome is because we've got access to Dev tools. So on a Windows machine, it's control. Shift I and depth to us gives you the ability to communicate some information from your source code into your your console, using JavaScript as well as you get the whole overview of the different elements. You can see CSS and so on. There is a lot of good information here, and I'm gonna be making use of it throughout the course as well. So this course is based around building a website using HTML and a little bit of CSS, and we're gonna be using boots drop as our main framework for building out the website. And for those of you that aren't familiar with boots, drop Bootstrap allows us to apply a bunch of classes into our HTML and have styling pre built styling within those classes and really built wet projects in a really rapid mobile First Responsive Way. And basically, what that means is that when we we linked to the bootstrap library, we get access to all those classes and then within the classes, we have options. Teoh format are html code, and I'm gonna be showing you how to use that within this course as well some of the other resources that I'm going to be using throughout the course. So I'm gonna be linking to Ajay Kori library, some using a cdn. So this is just a Web file Web library here. I'm gonna be getting it from developers dot Google and they've got a bunch of the popular libraries listed here. So I'm gonna be taken this jet J coury code and bring that into my project another resource that it could be using. I'm gonna be using blind text generator. So this is going to give me the ability to Teoh generate some default text in order to use it as placeholder text within my website to give it a more real feel to it as well I'm gonna be using images from Lauren Pixel is the same idea, just dummy images that replacing within my Web project to make it look and feel more real. Another one of the resources that we're using within this course is I'm gonna be using Google Maps A p I and I'm gonna be showing you how to a simple map location into your web page so this could be used for visitors to your website. If you have actual physical location than you can use that marker, use the coordinates. Place a marker on the map so that users confined it where you're located. So all of these resources we're gonna be utilizing through wrote the course and we're gonna be building out this amazing website from scratch. So in the next lesson, let's begin writing some code. 4. 3 Build a default Bootstrap Template: in this lesson. The first thing that I wanted to do is set up my basic bootstrapped template. So this is my index page that I've already created, and I'm ready to go to start adding in my HTML code. So the first thing that I like to do is start with the doc type and this is just basically indicating that we've got a document each team l five type filed here that we're gonna be working with. Then open up the HTML tags, close those off, start by creating your head. So Ted tags open and close and then within here I like to usually use some of the meta information, So I like to set that character set. So ut f eight I also want to set the view port. So the view port is important, Especially when what Web visitors come to you view your web content on a mobile device or a different size screen. So this helps resize that screen Teoh the device with so default sets it to the device with and scales it to one so shrink to fit. No. So all of this stuff really does help with how your content gets output within a mobile device. We should also always add in the X you a compatible I e. Edge. So this is for the new version of Internet Explorer. So if you have any compatibility issues, this will help a swell. And then, of course, I like to include a title. So this is gonna be bootstrap website, and this is all we really need here within the head section? No. Next I'm gonna set up the body tags, so I've got the spacing for the body information here. Eso What I wanted to do now is go over to to Bootstrap and pick up some of the CD ends for boots dropped four. So let's open up our browser, go over to the bootstrap website and conveniently, they included the bootstrap Cdn here. So I'm just gonna grab that. And so this is for the C. S s library, and I'm gonna bring that in now. We don't always necessarily need to include G query eso If you're just looking at using the boots, drop classes and you don't want any of that G Koury component functionalities such as the models and there are cells and so on then you don't have to include the bootstrap J. Corey, But for this case, I usually do like to include it. And in case I do want to have access to it, I've got it all set up and ready to go. So first of all, in order to include the bootstrap JavaScript library, JavaScript, libraries, the bootstrap libraries based around G quarry. So we've got access G. Corey first, So we need to link to the G quarry library. First step to bring in the boots, drop javascript. And then we've got the JavaScript file here as well, so we can bring that in s o. This is bringing in all of that bootstrap functionality. And there's actually going to be one other file that we need to bring in in order. Teoh have it not throw any errors. And this is gonna be a tether file. So this is available at Cloudflare dot com. And currently, at the moment, we do need this tether file because this boots drop JavaScript file is gonna be looking for some of the pieces within tether and tether is essentially used for tool tips. Eso if you're not using any of the tool tips and boots dropping. If you leave out the tether, you're going to see an error within your console. But everything else is still gonna work properly. So the tether essentially is for additional functionality within your your JavaScript bootstrap library. So there we go. So we're all ready to go. We've created our default. Bootstrap website. Saved it. Now we can go over and we could take a look at it. And of course, we don't have any content in there as of yet. So this is coming up in the next lesson. That's where we're going to start working and adding some visual content for Web visitors. So it's coming up. 5. 5 How to create a Bootstrap 4 Navbar: Now we're ready to go and start adding in some visual content within our Web project. So every website needs a navigation bar. So this is what we're gonna set up first within our bootstrap framework. So with boots dropped for there has been some changes to the navigation framework. So I'm gonna highlight those as we go through the building of this. So essentially, we're setting up a class calling at NAFTA Bar s. Oh, this is what's from before as well. And we've got some options as to are now bar colors now, So I'm gonna use nav bar dark. And so there's now bar dark now bar light. And the difference is that we need to specify what color code we want, what color of text we want to use. That's what this is doing. The nab our dark and now Warren light eso if I do something like background primary which is also new with boots dropped for, you're going to see that now whenever I refresh it, which we don't have any text in there. But we can see that we get the background color of blue so new with boots dropped for stability of set background colors. And then we also have this now bar light or non bar dark, which gives us the ability to update the text accordingly. S. So let's go ahead and add in some additional content in here. So I want to set up a div and I'm going to give it a class. So this is gonna be part of the content that collapses. So I'm going to give it a class of collapse. So it's again, this is a bootstrap class and another one of the changes within bootstrap is that now with nav Bar, we need to specify. So we've got naff bar tog ta global, and we need to specify on what size screen it's ta global. So that's the big change when it comes to bootstrap. Four is we've got a whole lot more control with the different sizing of the screens and the different classes. All have these the's specifications on the screen size, and we didn't have that with bootstrap. Three eso. Now we've got more control on the size is. That's why I'm adding that in there and now we've got the ability Teoh actually to toggle some of this content So I'm also gonna add in a logo, son, this is just gonna be a span, and maybe this can hold up the whole place. I'll keep a placeholder for some of our local information for this website. Another thing that I want to do is I want to identify this particular div because we're gonna need to identify it with the toggle button. So let's give it a name s Oh, this is gonna be the name for our ta Global content are now four ta global content. So now and I'm just gonna call it now talk so that we know that this is where the contents of our content that's going to get toggled is gonna be so just going back Teoh the different colors now. So notice that when we say dark, we get dark text and whenever we switch this toe light, we're going to get accordingly. Light text. So this is all depending on what? So let's go ahead and add in some text here, as well as give this one on I d. So that we can identify it. Remember, again, this is going to be the element that's gonna hold the collapsible content. So let's give it, Give it on i d. So I'm gonna give it Now talk for the top global navigation items also within here. I want to create a span. And maybe this could be some local or some type of information. Eso bootstrap four now has another class as well. So this class is going to be called nav bar brand, and this is gonna indicate any content that we want to do branding for Let's go and take a look at what we've got now. So now when I look at it, I've got this white text blue background and so going back again to the nav bar dark. If I flip this to now far light, we can see that now the it's gonna be assuming that background is light. So it's going to give you dark colored text. And the opposite was now barn dark. Eso that that way the text is a light color so background primary is the default blue. And now with boots drop, we can use all the different background colors that we want as well. So we've also got warning and so on. So these air the typical bootstrap colors that are available to us, And we could really utilize thes within background colors Now with bootstrap for So let's continue to build out our navigation bar. So now we've got a logo there, and we also need toe list out some of the links that we're going to be using within our navigation bar. So I'm gonna create some spacing for that, create a new ordered list. So this a nordeste is actually gonna be our love. Now, bar eso we've got to give it a class. So these air all default bootstrap classes and you need to include all of these classes in order to build out a navigation bar. So, no, there's quite a lot of different classes that were utilizing right now, but I really did want to jump in and show you what can be done with bootstrap to bring in the power of Bootstrap. So I am gonna review these classes as well. So this class knave is different than knave bar because this is just for a regular navigation class allowing you to style your content as regular navigation items. So just to give you a sample of that so I'm gonna do list items. So we know that within a new ordered lists, we want to have a serious of list items and boots dropped for again has a new class for that so that we can identify or better so that it can better identify what we see as the list items within bootstrap. And so we've also typically, within a menu you're gonna have, ah, hyperlink going out to wherever, whatever part of the page, whatever link pains you want a link to. And we also need to include a class for this as well. So now Link is gonna be the class of them, including, and we just shut that over and would just say Link one. So now let's go take a look at this within our browser, and I'll show you what this looks like. So there we go. So we've got our first link sitting there, and because it's just enough, it's There's a differentiation between a knave bar and a knave. So show you actually, what the difference is here, and I'll see what's gonna look like without the specific classes in Bootstrap. So let's create several other list items, and I just bring them back in line. Over here, I give this one a link to two and a link to three. So notice that we keep them all. That's knave items. We don't have any increment on the different list items. So now when I refresh it, we see we've got Link one link to Link three. But it really doesn't look good because it's not aligning it properly. So even though knows that this is a knave list, it doesn't actually know that it's a knave bar unless we specify nav bar. And this is a knave bar now. So that's the class. There s. So when we change that, then right away it takes the characteristics of a navigation bar. And with bootstrap, we can also move things around. So typically with CSS, we'd have to float it over to the right hand side. But bootstrap gives us a class for that. And again, we do have the option now within bootstrapped four to specify screen sizes so we can specify that we want it to float over to the right hand slide on small screens. That's what this class does. We also have the option to do left and so on. Or we can also adjust when we want this breaking point to happen. So we could do it on large screens if we wanted to show you what the difference here is gonna be eso now, when I refresh it, we see that were pulled over to the right hand side on the large screens. But whenever we hit that breaking point, notice how these items here are now going to shift over to the left hand side. And that's because we've set our breaking point to LG. So typically for something like this, we probably wouldn't want it to move over unless I unless maybe it's a small screen or something like that, that we're trying to save that space. So again it's It's all a matter of preference and design. But Bootstrap gives you all of the capabilities here in order to implement it. And another thing you might have just noticed there that whenever I shrink it down, it I it disappears there. The content disappears there, and that's because we've said it to this knave bar ta global excess And basically what that means is that whenever we have that small size that we're going to set it up to be toggled . And in the next lesson, I'm gonna show you. Add that toggle button because now that we're hiding it, we actually do need to make it talk. We need to have a button toe open that navigation menu back up. So that's coming up in the next lesson. 6. 6 Complete Navbar in Bootstrap: in the last lesson, we showed you how you can create a navigation bar fully styled using the bootstrap classes . Now, whenever we collapse it where still missing away to open up and un collapsed. This navigation bar, which would typically expect on the smaller screens and bootstrap, gives you full control to take care of this. And it's got a lot of great options for this. So typically, we might use a button element in order to do this. And again, the magic really happens within the classes. So everything with bootstrap is related to these classes. And this is where Bootstrap picks up the information that it needs in order to make all of these actions happen. So this class is called nav bar toddler. So that means that it's a toddler for the talk a ble Traa global class down here just below . And we are gonna hook thes together and gonna show you how eso again we've got that option to hide it so we can do hidden and we're gonna hide it on sm up. So if we don't hide, it's gonna be always visible. And this is again you with boots dropped four. Where we've got ability to set that break point when whenever we want this'll navigation bar to show up. So let's do buttons. We need to specify that this is a type button We've got also some attributes here, so these air bootstrap attributes that you need to include for your toggle button to be ableto work. So the 1st 1 is that it's a data toggle collapse so that Bootstrap understands or the Web browser can understand and relate that this is the action that we want to take with this button whenever it gets clicked. That's gonna pick up all of these attributes and information accordingly when we've got these classes in place. So Dega Target is another super important one. And this is where we need to specify that we're targeting to nav tog. So whatever we had given this, I d make sure that we're setting it up as that not to be the target. And then let's shut this down and we'll take a look at it within the browser. So when I refresh, it s so I get my navigation toggle bar there on whenever it shrinks down, so notice that it's not quite working yet, so we still have to finish that hook up. But essentially, we've got our buttons showing up. Whenever we shrink down to the size of the screen whenever we enlarge it. Then we get all of these items showing back up. So let's so let's update the one mistake that's left here. And if this is important to note that when you are specifying a date a target, it doesn't actually know what target this is. So it doesn't know if this is an I D or class or a tag. So we need to specify, just as we would with CSS where we include that hash. And this is something that is gonna be used over over within bootstrap. And a lot of times people leave these out. So it is important to include that hash. In order for bootstrap to be ableto identify this as a button. So now when we click it, everything's working and working properly. So I did want to highlight that. We need to make sure the data target relates to the element that we have here, and in this case we're using I D to identify it. So make sure that everything hooks up properly. So just as a quick overview what we've done here, this is essentially the nav, the nap element, the nab our element. So in order to use a naff bar, we need to specify that this is a knave bar this stuff over here, this is just for coloring. So even if I was to remove that, we still get all of the same functionality. But of course, we can't see our button there because we haven't specified any colors. Eso This is something to keep in mind and we don't have to include this background color eso weaken, Do something where we can set a color We can set it up in their CSS and create our own color. Or we can add an in line style and we could do something like background color and something like red so we can pick eso now with bootstrap, we've got a lot more options for the background colors. So if you want red, there you go. That's how you to do red. And if you pick a color that is, that is a like a light color. Then make sure that you're specifying that, uh, the nav bar. Dash light is the color of the fought, so this just specifies the color of the fund and then the other one, we're specifying the background, the stuff over here. So this button is linking Teoh. This element over here and what we're doing is make sure that you include these two attributes. The 1st 1 indicates what this button class is all about. It's a collapse button and where our target of this collapse so linking it over to this I d . Over here. We're specifying that this is enough bar toddler, and we don't have to hide. It's going up, but it's always a good idea because then it just doesn't look right if we don't hide it. So that's why that's the reasoning for hiding it. And usually when you're hiding it, you keep it in line with this ta global. So if I was to change this to M d, we could change this to S m, and now are breaking points would be different. So whenever we shrink it down, so we're not quite as small when we're shrinking it down. And then, of course, you have to adjust these accordingly as well, because we're still floating sm, right? So then this one would have to be changed to M. D. So it's in line with that going back over here, refreshing it. And now we see everything is aligned properly again. So with bootstrap, for they gave us more control with the breaking points. But it's also quite a bit more here with getting everything to work in line. It's a lot of times is just some small adjustments that you need to do. It's an over here with the unheard list. This is where we have our actual links within the nav bar. So we've got knave, and we saw how without the nav bar nav, that they're not floating over to the right where they're not in line s. So we need to include that to make sure that it's a horizontal navigation bar. And then we also floated over to the right, so we saw that we can position it to where we want it to be. Make sure that our list items include nav item and of course, we need to include the nav link. In order for bootstrap to be able to understand that this is the styling that it's expecting that every one of these list items if it has a link, it should be indicated that these are the links. So now that we've gotten one of the more complex parts of the website set up, up and running now the rest of it is just designing it the way that we want. So next lesson, we're going to design some of the website content. Eso again, depending on what you want to do with your website, if you want to have how many columns you want, having your website and so on. This is so easy to do with bootstrap using the grid set up. So we're gonna be taking you through that in the upcoming lesson. 7. 8 Containers for content: in this lesson. I want to add in some additional elements here for sections within our Web page. So start by creating a div and give it a class of container. So within boots drop, we have two options. We can do container, or we could do container fluid. So the difference here is how how much of the actual space within that particular element, we're gonna be allocating to this web page? So container is more restricted space as opposed to container fluid s. So I can just basically show you what this could look like. I'm going to quickly throw in some more dibs here. Suggestive is to break apart our first rope and boots drop when you're creating boots, drop whenever you want to do any kind of structure where you've got multiple rows, multiple columns. It's got really good functionality for that. So we start by defining that we're starting a brain you row and let's say we wanna have three column website. It's a bootstrap is based on based on 12 column system. So three s a 12 divided by three is four. So we set seal l is the class here is what it actually hasn't changed from the previous version of Bootstrap. So CEO L dash whatever size of whatever size of screen we're looking at, we want the break point. So I want to break this at M D. So I'm gonna set see oil Dash MD and specify four as the number of columns that I wanted to take up. So Section One and creates, uh, will create other the other two sections as well. So I'm going to just copy and paste that out. So now we've got section two and Section three eso I'm gonna do quick some quick CSS and I had some CSS in here. It's a style on that. So this is just in order to be able to see the border. Eso Let's just give it a class of ABC and we'll give it a border one pick, solid block so that we can see wherever we're ending these particular elements. And maybe we want else to do a background color as well. So background color. And let's just make it really DVD or something like that. So now whenever I apply this eso that this, we can see where the container is and maybe We also want to take a look at and see where these columns are. So let's open up our Web page, and now we can see essentially, this is what the column, what it's gonna look like when we're using a regular container. And so the other option is to do container fluid. And so, essentially, there's two different types of Web pages on the larger screen. So container fluid is just going to stretch out all of these sections across that entire available space that we have for the Web page. So see that section 123 Now it's spread across nice and evenly across eso. If we got rid of that, can we go back down to more of a constrained with? So we see that these move in, we get gutters at the site and so on. So again, depending on what your design is calling for, you could use container. You could use container or container fluid, but in this case, usually I like to use container cause I do like to have all of the white space here at the side. But again, this is all depending on what your design calls for. So Now I can get rid of this because now that we see where it's located, we don't necessarily to use it at the moment. So I'm going to just remove that. Refresh it. And now they're all gonna go. Wait. So we're all ready to go to continue to build out our web page and add in some content here . So you're not in some dummy content, Maybe some images and so on. So all of this is coming up in the next set of lessons. 8. 9 Bootstrap responsive images: so working with bootstrap, it gives us a super amount of flexibility, especially when it comes to these column. Let's so let's say, for instance, we still want a three column website, but we want to shrink down the two side columns and have more space within that center section. So it's really easily done and adjusted here within bootstrap. And the other good thing about Bootstrap is that it's mobile friendly, already tickle. So let's see here that once we hit that breaking point of M d way, see that the columns actually start to stack one on top of the other. So that's all that the center part says is this gives us an indication of when the website needs to stock, and I do have my screen size and large to 250%. So that's s I'm gonna change it too small so that we get a little bit more time with the different sections before we actually break and we get them stacked one on top of the other . So now, within this lesson, let's continue to build on our Web page. And let's add in some images and with bootstrap, you've got some options to style some images as well. So let's take a look at those. Open up our content here. We're going to use some of these Lauren pixel images, so I've got this one over here maybe just copy that source code and would drop some images into these sections. So one image there and even want to have another image down here. They don't want this one to be exact same. And maybe this one was going to be a super huge image s. So I show you how bootstrap can handle that as well. Also, let's add in some text content here, so it's gonna copy some of this out and creates to be a paragraph here with some content and so on. So actually, this should probably go in the center center section because that would just make more sense. And maybe we've got a cent maybe two paragraphs of content in there because we've got lots of space in the center section. So there we go. So now we've got our different sections, but oops. We see that our images are flowing over to the different sections, so our images aren't aren't responsive yet. And the good thing about bootstrap is they have us covered for this. We do have the ability to update those images and make them fluid. And now, with Bootstrap four, we also have the ability to specify weaken, specify some additional classes as well. And we can also float the text and, ah, whole lot more. So let's open up the editor, and we'll make some adjustments on these images. So you see that this image source here, let's add in our bootstrap class. So it's bootstrap class, and we need to specify that we want this image to be fluid. So the class is image. I am G dash fluid. So just like that container was fluid. And now, once we said it to image fluid, we see that now that that image becomes responsive, we still need to take care of that other image at in that same class so that both of our images are responsive. So basically what it's doing is setting a max with 100 so it doesn't matter what images were loading, what size they are by default, it's only gonna allow. It's only gonna allow toe load up to up to the amount of with that's available within that self. So we also have ability to update some other images and align them a swell weaken round the corners. Eso we can float it over to the left over to the right, and we also need to specify that size as well. So let's, uh, create one of these. Take one of these images and I got a place. It's somewhere in the text here, and I also add in fluid image. But I'm also gonna float it over to the left hand side so much like what we did over here whenever we did our float float MD right, we're gonna do float excess left. So basically that means that it's always gonna float over to the left, but because we've got lots of space, so I do need to cut the size of that image. So maybe this image is 200 by 200 so refresh that won't try that again. So we see that we can float that images to the left. We can float them to the right, get them in line with the text, also get them Teoh, make to fit responsively into the available spacing that we have within our Web page, and we says we adjust the image sizes adjust as well. So bootstrap makes it really easy to be responsive. It's another thing with images with bootstrap three. We had some additional options with images where we could round them and so on. So bootstrap four has made some adjustments to that s so we do have the ability to do rounded s. So this is a separate class s. We could do something. If we wanted this one to be rounded, we could add in that option for rounding of it. We also have the ability to set image thumbnails off, want to come out and look like a thumbnail and weaken set as a thumbnail. That's gonna just so I've adjusted this one to be rounded, and I've adjusted this one to be thumbnail format. So I see that there are some updates here. So this rounded corners here, we've got Maura thumbnail format between the text there. So you create images within bootstrap next section. We're gonna complete this this particular page, and we're gonna add a footer, and we're also gonna then look into how we can add mop a p i in order to give location of where we're located at. So you might want include that on every page or maybe the contact page. But for this instance, we're gonna created here below within that footer section. So all of this is coming up in the next settle essence. 9. 10 Build Footer Element: in this lesson. We want to complete our Web page by building out the footer and setting up our mapping area . So notice that we do have a class container. This is an important one to note because depending on what your design is calling for and how you want to create your footer if you want your foot or to be in line with the contents of your container, then you would keep that within that container section. Or you could create another DIV here and give it a class container so those would be in line as well. The other option is to add it in within this container where he could do a container fluid if you want to go all the way across. So what I'm gonna do is I'm actually going to create a separate div. I'm going to give it a class of container and then so this is going to give me some more flexibility and especially if I'm creating a website where I may or may not necessarily have that same container div here. That's the another reason to carry all of your footer because this footer content could potentially be across all pages where, as the one above might not need to be across. So this one here could be changed depending on what page the users landing on on. That's the reason why I wanna have this differentiation here between the sections. Eso let's create a couple sections here so they would have won called section and then within here will have Div i d. And this is where we're gonna place our Google map. Eso that's gonna live within this element. And then just below that, maybe we'll have something called Footer Eso This will be our Web page footer and then within here we can add in our footer content. So again, this is gonna be going across the entire page. So I'm going to just create Div here to hold the contents of that. And maybe we can do our copy, right? And company name or something like that or website eso. Now we've got all of our content here. We're already to go toe add in our map, we refresh it, we've got our copyright and so on, sir, Typically with the footer, you might have a different color or so on. So let's add in the class and backgrounds and will do primary. So maybe you want have a blue back background to your footer so you can do it that way as well. So really easy to make these adjustments. Or, of course, you can set your own classes within your CSS. So let's just call this footer and I know this is might be confusing here. We've got a tag foot or class footer, so we're going to bring that into my CSS footer background. Give it a height and let's check the suit house and see how that looks. So now this looks more like a footer on. Of course, we could add in all of our content here and so on. We can also do things like we could center the text us if you want the text centered. We could do that as well. And with bootstrap four, we also have the option to center our text depending on our screen size. So this is new again, but I think for this instance, we're just going to do text and we're going to specify excess, so basically, this will center the text doesn't matter what size screen we're on. Eso center, The text that's within that footer section and we could be more specific as well. And bring that class over to the Div if we want Teoh. And that's the reason why I created that extra Div. Because just in case we want to do that, do it that way and in case you want to break apart or footer with some additional content as well. So now in the next lesson, I'm gonna show you can update this mapping component and we're gonna be utilizing the Google Maps AP I So they do have some code here, and I'm gonna show you what this code will do and how you can bring it into your Web page and how you can actually place marker on the webs on the map in order to indicate wherever your business is located. So that's coming up in the next set of lessons 10. 11 Add Google Map API: in this lesson. I want to show you how I can bring Google. Map AP I into your Web project. So just looking at this we can sign up for Google maps over at developer dot Google for it slash maps, and you can sign up here to get your map a p I key Now with a map, a p I key. You could use it to monitor your application, and you'll also need it if you want to take a license on it. But if you don't include it, then you can also use the Google map. But it's always better to register and set your application up with the Google map. Eso That way, whenever you're linking over to the source, you're linking over to your map, a P I key. The first thing that you need to do is bring that Google Library into your Web project. Eso We already have all of the J query functionality and so on. So let's add in the maps. Google ap eyes dot com maps AP I J s and we're going to go with version three. So now we've brought in the Google Maps library and, of course, we won't go to the Web page. We're not going to see anything different were covert or console. There's no errors that are being thrown. So we do have There is actually a warning here, as this isn't an error, it's a warnings, a slight difference here. But it's going to tell us that we have no a P I key. So again, if you're going to be using it within a Web page and you will be using a lot just registered a P I key and the Google Library within this type of format, where you do question Marquis. So let's go ahead and write up our code where we're gonna populate this element here with a Google. Not so let's add in our script tags here and with this map. What we want to do is we want to make sure that it's actually loaded, so we're gonna listen for a Google eso. This is all part of the Google object that we brought in from this particular library. So we're doing Google Mops event and we're adding a dawn listener and we're listening on the window object. We're listening for toe load, and we want to run a function once it's loaded, so I n i t Statistically we use function name I n I t once it's initialized, So just stick with that and then we need to set up that function that's gonna fire off when this particular event gets triggered. So this is the i n i t. Function. And so this is gonna initiate and create the map content. So let's go take a look at this. Just make sure that everything is loading properly. Are usually check to see if I'm getting consul errors s. Everything looks correct. Of course we're still getting that. No, a p I key issue there as well Eso Now let's set up some variables, so variable eso wherever your coordinates are for your business. This is where you could set these. So this would be a lot and lawn So just crawl l a l and it's gonna equal to. So these air the parameters used within the Google map so we can set a latitude and a longitude. So if you know your latitude and you know your longitude, this is where the map marker is going to sit, So it's gonna sit it maybe wanna wait. I'm actually not sure where this is gonna end up, but we'll just give it a shot with the latitude and a longitude of one week on. Now let's create the map objects or set a variable. Call it map because this is gonna be our brand new map object. So do new Google maps dot map to create the map object and let's set up in the document, Get element by i d. And then this is where we need to identify that element that we want to contain that particular Mup. So we've called it map, so that's where we need to identify it. And now we just need to add in the rest of the pet parameters. So we've got some options here how we want to present that map content eso weaken. Set a bunch of parameters here as well. Some of them things like zoom eso these air default parameters are available within the Google maps. We can also center. It s so we want to center that map on these coordinates. Some taking the co ordinates l e l l a l. And that's where we're going to set those on the center of the map. You could also bring those in a swell and just created as an object there. Go to the Web page from Refresh it, and we'll take a look at that and see what looked. This looks like there's one other additional thing that we do need to set, and we need to set some styling for this particular map elements. Right now, we've got our map element there. Let's go up to where we're setting our styling. We're gonna locate that map element and add some styling to it. So what you want to do, typically you want to set a width for it. So set with a vet to 400 pics or whatever makes sense freight for your website designs. So height, 400 pics And maybe we could even do something like a background color if we want. Of course, we could also do it by percentage as well. So, again, whatever makes sense, and typically, if it's a responsive site, you might want to do it within percentages. So this is a background color, and this is in case the map doesn't load, so just do a great color now whenever we go to our Web page, let's refresh it and see where our map ends up. So now we've got this map object here. We've got some styling applied to it, and there we go. So now we've we've centered our map. Eso looks like some words ending up somewhere in China s Oh, maybe let's do instead of a map, 400 is do 1% or we could center it. I'm actually going to get rid of the width. And I think the only one that you do need is height. So let's give it a height of 200 pics. And now let's go back out and take a quick look at that and see what this ends up. So So if you don't set default with, it's just gonna automatic take 100% and it's gonna build it. That map object here. That's just taking a few seconds here. Toe load out eso. Another thing we might need to do is we need to add in a marker, so let's go ahead and add dot marker. And so going back down to here, we're setting up original source code. We've got our our map that we've set up. And now let's do the marker object. So this is another object similar to what we did with our mop. So just call it marker and we're going to do new Google mops marker and specify the parameters of the marker that we want to create. So it's going to be this same thing where we need to position it so position. And it's a good thing that we set up that position within this object here, the l A. L. So now we can set that position and we can position the map with that particular marker. So this is just the container of the marker. So let's see where we ended up where we set that marker. So we probably yes. So you have to figure out where your latitude and longitude is, and that's so you can set up your map and, of course, center your map. So by default, your map is always going to be centered within this particular page. So maybe we wanted to set for latitude minus 40 just a quick update, their refresh it, and now we can see where we end up. So we're ending up almost in Australia a za latitude. Of course we can update the longitude as well. And again, this is just all random here. I'm actually not sure where I'm ending up with this map, but it is kind of fun to play around and see where he end up with latitude and longitude. And I got one more. Try it that some copying what they had within the Google parameters there for latitude and longitude eso one more shot at it. And of course, we can change all of these parameters Zoom level and so on. Eso, in this case worst. We're ending up in Australia and the zoom level was five in that case as well. So in the next lesson, we're gonna finish off this project and show you how you can make some additional pages really easily at this point Now. Now they've set up your basic template for bootstrap. Add in your other maybe two pages that you haven't. When your website I update some of this content and so on, that's coming up in the next section 11. 13 Update map Add Carousel: this lesson. I want to complete our Web page template so we can link out to a number of different pages . Have one page for index. So this is gonna link out to my index dot html over here. I'm gonna show. So this is gonna be basically to showcase maybe some products so we'll add something in there, and then this is gonna be contact the HTML so it's gonna be for our contact page. So now index is the way that we wanted to look. Let's update our showcase, Plage. So first thing I want to do is just save this entire Web page, as showed out. Html have just saved it as showed out html. And in this case, what I want to do is I want to completely update what I've got here within this particular div s. I'm going to get rid of that, get rid of all of this stuff, and I'm gonna add in a carousel in its place. So carousel is just one of those image rotate er's where you can demonstrate, possibly if I've got some showcase images that I want to really highlight. I can add those in here so Let's add them in within this particular div. I'm going to give it on I d So every carousel you need to set up on I d in order to identify it. So care images or some car images or something like that? So that now we have unidentified air. Let's give it a class. Eso This class is going to be on the parent container and the class is carousel slight and we need to set up on a tribute here s O for this carousel. Just keep in mind that you do need the bootstrap JavaScript in order. Teoh, get it working. So, carousel eso the data right is care. So? So I'm just updating this parent toe. Have that information eso next we need to create all of our inner care sell items. So let's do give and let's set up a class for this as well. So this is going to be a class called care carousel inner and we can close that one off and then within here we can list out all of our inner items and there are some slight changes now with boots dropped for in order to accomplish a carousel, eso we can. Just making sure I've got all of my dips here properly. So I think it looks like I've ended up with an extra div here. So let's remove that one there. So carousel inner. So there are some slight changes to the way the carousel is work. We specify carousel items within bits dropped four. So class and carousel item. So this is for each eye, each image that you have within your carousel. Starting one is given an additional class of active and then within here. I can specify my image source and let's give it a source. Let's just dio do place place. Hold it. That's another one. Like the Lauren picks over, you can get images. I'm going to get a really wide image and multiplied by 500 pics and close that off. So let's duplicate that out so these ones aren't active. And now let's go into our Web project and take a look at see what we've got now. So when I refresh it, I've got my showcase here. So I've got my carousel. There s oh, right now. I don't as yet so much sure. Uh, we've got to take a look and see why we're getting technical issues there, but it doesn't seem like that's loading properly. Eso That's another thing that we're gonna take a look at. So it looks like I should update this map ap I So let's just do that quickly. Eso I've got my key in here so I can update it s o j s key. And now we're doing call back to I n i t. Which is that same function I've got here so I can remove that. And now when I refresh it, this should take care of this issue here that we've been having with Google trying to force us to use the a p a. Ki. So, of course, always better to use that a p a ki library instead of just trying to link out as I was doing eso. Now we've made an update to that, and we can go ahead and update the rest of our carousel for boots drop. So going back to boots drop and I would stop functionality. So we set up all those carousel items they are rotating here we see it. If we watch it long enough, we'll see that rotation but we're still missing those typical where you've got the carousel indicators as well as carousel controls. So you can actually control which images you get to view. So I can show you how to update those as well. So it's open up our editor. And first of all, let's set up our carousel indicators. So the carousel indicators are usually those see thru type circles that you see, and they help you guide you through the number of pages that you have within the carousel. So this could be done within a Norden with an ordered list, I should say, And the class for this of the default boots dropped class care. So Indicators s, I believe with bootstrap three we had indicator. So now we've got indicators. So just make sure that you are aware that with Bootstrap, for there are some changes here. Eso list item So data. So again, this is an attribute that house specify what element we want to control. So this is where that I d is ever so important because we need a way to link to that s so now that we've got that link, we've made that connection one were attribute data slide to essentially this is going to slide it, Teoh whatever item within that particular order it is here. So essentials going to cite it 2012 s O that we just have to make those updates. Class is active. Selous wins by default active. So make sure that we set that active. Close that off and it's gonna actually build up all of these lists items itself. So we don't have to worry about that up removed. That, uh, that active class also update the slide toe one slide to school back out here. And now we see that we've got the ability toe have thes these indicators here where we're located and also make sure that we indicate that these are going to I. D s. The data targets. Let's try the suit, refresh it, check it out. And so now we've got our carousel working. I rolled out up to the top. There s so now we've got all of that working. And lastly, let's add in some controls on the left and the right of the carousel. So do that here, just below the carousel inner part. We're just gonna add a couple elements here, so they're gonna be anchors class. So this one is gonna be class left, caress carousel control. That's the class. And then now we need to indicate what we want to do with it. So we need to each ref it to the i d from up above there. So the main parent object and we'll do data slide, and we need to specify where we're sliding it. So this one sliding Teoh previous and just set that over, there s so we can also specify different icons as well that we might want to utilize. So there are some default icons with them bootstraps, a SPAN class, and this icon is gonna be icon previous. And let's try that it see what that looks like? So we've set up the left one so we can move to the previous ones and now to set up the right one. So this is just gonna be the opposite that we would do here. So it's gonna be rate carousel control and we're gonna slide Teoh, we're gonna slide it to next, and the icon instead of previous is gonna be next. Let's go now and refresh it so that will give us the icon on the right icon on the left. We can use any one of these indicators as well to move through all the different elements there that are available. And then, of course, we've got our mouth working properly now because I added in the key. So the next lesson we're gonna finish it off with their last page. So we have our contact page in order to complete our Web project. 12. 15 Create Contact Form: in this lesson. I want to complete our web projects. So our last page that we needed to create is a contact page. So what I did, I took showcase, duplicated it, called it contact HTML and removed at the carousel stuff. So let's start by creating, creating a form type and then within the form tag, I'm gonna create a div, give it a class of form group. So this is bootstrap. A bootstrap class helps you grouped together that input content. That means that grouping together elements like label. So here we need to specify four and the i d off the input that we want to label s O. In this case, it's gonna be your name. Let's create that input. So this is gonna be tight text and class. So another bootstrap class, its form control given an I d off name because we used name within the label as well in order to bring that together and so we can also do things like we can add in a placeholder we want. So this, uh, this is just that great outs, that great a part that shows up within that input. So let's maybe take a quick look and see what the contact form looks like we've got Your name s another one. I'm gonna just copy this one out and update some of the field names there. So another one that we would typically have ISS, maybe email. So make some quick adjustments. So being html five, let's do the email type e mail your email. And so lastly, we need a submit button as well. So let's just take a quick look at this. Make sure that we've got our to our two fields. There s so lastly, let's add in a button so we don't need a form group for the button. I can just do button here at the bottom. Title equals submit. This is just a typical submit button and this case, let's use some of the boots, drop classes. So let's use Bt end to specify that it creates a button out of this element. And then primary is going to give us that blue button. Send a message and there were also Now we've completed our input form here for the web user . We can also add some additional styling here so I could give it a class of my form or something like that and go up to here and my form. And maybe I wanted to add some padding and stuff around the forum. So, polity, take a look at that, see what this looks like. So that gives us some padding around there. And I believe I had given it a class. My form not, uh and I d life forms. That's why that wasn't showing up. Eso Now we've got some padding around there. Sometimes you might want to add, like a really like porters. One pick so lids and we could do a really late border if we want. We might also want some margins. So maybe 2 10 picks. Margins go back. Refresh it. Now it's more centered type form. And as I said, these air, the placeholders, your name, your email and so on. So now we've got all of the functionality within all the pages. Everything's working properly and we've essentially built out our website from scratch. I'm going to zoom it back down to 100% so you can take a closer look full screen page here and see what are what Page looks like. And of course, because this is built in bootstrap, it's fully responsive. So when I resize it down, everything still works the same. I've got the ability to go to the different pages, so I've got my all of my images styling. I've got my map styling, my form styling. So everything works as expected on the different sized screens. And essentially, that's how you can create a website using bootstrap use. I've added in some additional components, like the Google maps, a P I, which you don't have to obviously include, unless you want to. And essentially, this is the basics of how to build a website using bootstrap. So I advise you. Check it out for yourself. Take a look through the source code, try it out for yourself and see what you can make happen with Bootstrap