Bootstrap 4 Rapid web development framework HTML CSS JS | Laurence Svekis | Skillshare

Bootstrap 4 Rapid web development framework HTML CSS JS

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
26 Lessons (2h 47m)
    • 1. Bootstrap4

      1:20
    • 2. 7 Structure of Bootstrap

      6:52
    • 3. 8 Bootstrap Containers

      7:07
    • 4. 9 Bootstrap introduction to the Grid

      9:19
    • 5. 10 Working with the Grid

      9:05
    • 6. 11 Bootstrap grid push pull offset

      6:05
    • 7. 12 Hide elements in Bootstrap

      3:05
    • 8. 14 Bootstrap Tables

      10:29
    • 9. 15 Bootstrap Forms

      12:02
    • 10. 16 Bootstrap Buttons

      4:49
    • 11. 17 Button Grouping with Bootstrap

      2:50
    • 12. 19 Working with Images in Bootstrap

      6:28
    • 13. 21 Bootstrap JumboTron

      2:11
    • 14. 22 Applying Labels to Content in Bootstrap

      2:29
    • 15. 23 creating alerts in Bootstrap

      4:29
    • 16. 24 Introduction to using Cards in Bootstrap 4

      13:42
    • 17. 25 Working with Cards in Bootstrap

      8:11
    • 18. 27 Nav classes in Bootstrap

      4:45
    • 19. 29 Create a navbar with Bootstrap and customize it

      6:21
    • 20. 30 Add collapse function to navbar

      4:01
    • 21. 31 Create a responsive Navbar

      6:46
    • 22. 32 Setting up breadcrumbs in Bootstrap

      3:45
    • 23. 34 Pagination with Bootstrap

      2:26
    • 24. 35 Adding Modals to your website

      7:55
    • 25. 37 Carousel setup in Bootstrap

      11:45
    • 26. 38 Update Bootstrap website

      8:32

About This Class

In this complete course students will learn how to build their very own website from scratching using bootstrap 4

Transcripts

1. Bootstrap4: welcome to our course on how to build your own website from scratch using bootstrap for within this course, we're gonna show you all the amazing things you could do with bootstrap and how you too can utilize bootstrap within your web projects to let us introduce you to bootstrap and how to create websites. So we've got some really great examples how to set up bootstrap within your Web pages. Also, all of the source code that we're gonna be working with within this course is also included . We've got some amazing examples how the grid system works, king at cards and overall, the poor fundamental concepts of bootstrap, including than you an improved navigation bar, Bootstrap. How we can use backgrounds and all the different options that we have with things. Course is perfect for anyone that's familiar with bootstrap or even those of you that aren't familiar with bootstrap. To get going quickly with this rapid web development technology, I'm gonna show you how easy it is to work with bootstrap and how you can simply add in classes and really make some amazing changes within your Web pages. This is all gonna be done really quickly course, Bootstrap is responsive. Mobile first design. I'm really excited to have this opportunity to present foods dropped four to you. When you're ready, let's begin learning food straw for 2. 7 Structure of Bootstrap: in this lesson, we're gonna be going over the structure of bootstrap and also start building at Web pages using boots drop. So initially, what we're looking at here is that basic layout that we had taken from the bootstrap website. So if here at the top, they've got the doc type. So this is just indicating to the browser to be will understand that this is a HTML five document and that to be able to expect each time l five code over here, HTML tags were specifying the language. So always best practice to specify the language that you're going to be using within the content. So this really does help out with the browser and understanding what type of content it should be expecting as well as the character set. So this is well helps the browser understand what type of character said it should be expecting to render out an output from that HTML code. Next, we've got the view port. So what this does is this helps scale the Web page. So depending on what the device with this, it helps accommodate in shrink and scale that webs Web page to be more compatible, especially with mobile devices. When you're coming across smaller screens, it helps you build that out and set that up. Next, we have a specific tag specifically for Internet Explorer, and what this tag does is this helps force Internet Explorer to render out in the latest rendering mode. And with Bootstrap four, we've also dropped support for Internet Explorer eight, so it's no longer being supported within the newer versions of Bootstrap. And realistically, you should be building out websites and not have to worry about being able to support Internet Explorer eight. And as time progresses, it's gonna become less and less relevant that Internet Explorer eight be compatible with in your website builds. Well, I do advise that you do check with your Web users. Check your starts to see how many users may possibly be affected with i E. Eight non compatible coding. Next, we're looking at style sheet, so this is a simple link out to the bootstrap style, the boots dropped style sheet. And, of course, if we had downloaded boots drop, which we we have, we could link out to the bootstrap CSS as well. In the difference between I'm I am and just the regular CSS is just the way that it's being output and laid out to take a look at this within boots. Drop here and we've got this bootstrap files here as well. In the download, it's located in the d I S t. So that's the distribution libraries, and we can see that we've got the regular bootstrap. So the bootstrap without the men ified version, this is in a more readable format. And then this is just the same file that we're linking out to S O. This is the version. Boots, drop 4.0 Alfa two. So this is the same one that we're actually linking out to within our cdn eso. We could do this a swell if we downloaded Bootstrap. All we would need to do is include the CSS file and this Js file, and it's located all the way in through the bootstrap, the route than the docks and then the d I S t. And this is where you find those usable CSS and JavaScript libraries that you could then include into your Web project. And in case you don't want to link out to a cdn. So one of the benefits of linking out to already pre built versions. So what we've done over here, one of definite benefits of linking up to Cdn, is that it gives you the ability to possibly load the code faster. The idea is that these websites, if somebody has already traveled to one of them so other websites using the same libraries , this library would be cashed within their Web browser and they wouldn't necessarily need to read. Download the library and stored in their browser would result in improved speed. And, of course, if you are using JavaScript than make sure that you do include J Query and with JavaScript , we're typically adding it to the bottom just before we're closing off the body tanks. And that's because we want all of the the dawn information toe load, and the dom is the document object model. And essentially, this is the contents that are contained within your HTML code. So when that loads into your Web browser, your browser builds out what's called a Dom, and Jay Curry is one of the best ways to utilize an interact with that dawn content. And geek worry, of course, is just a JavaScript library. So it's a JavaScript library that helps you interact with your Web page, your HTML elements and the same thing with the style sheet. You can also just link out. You could download that distribution version of boots drop and you could link out to the boots dropped Js or the bootstrap men ified. And typically you're just gonna link out to the men ified version because typically you won't be updating the Js file, and you won't be updating the CSS file. So you just take these libraries as needed and then create your own JavaScript and your own style in order to customize those components and boots drop. So that's usually the best practice to go. And the quickest way to get going with bootstrap. Open up the JavaScript and you can see there's quite a lot of functions that are pre built and that you have access to once you link out to this library. And, of course, the men ified is with that spacing and idea with men ified as it loads faster because it's removed all of that excess white space so the file size is actually gonna be smaller. So the next lesson we're going to start looking at the heart of Bootstrap, and that's the grid system. And understanding how to build with the grid system is at the heart of understanding about how to utilize bootstrap, so that's coming up in the next set of lessons. 3. 8 Bootstrap Containers: this lesson, we're going to start it with containers and containers. Essentially, they're one of the most basic elements that are used within bootstrap and essentially there . Some there dibs, and they're the main container, as the name indicates for all of your source quote. And it allows boots dropped to be able to create responsive, fixed with containers and make adjustments. See do have to two choices when it comes to containers and the way that we indicate that a particular element is a container. We give it a class of container, and as mentioned, we do have an option so we can do regular container. Or we could do container fluid. And the difference between container and container fluid is that fluid is 100% across. And when we just do container than we've got a max with on the max, wits are set with the break points that we have available to us within our build. Eso There are several break points within bootstrap, and when I mentioned break points, what I mean is where the points are that it readjusts. So when it comes to important, understand the grid system and how the grid system works. Essentially, if we have a fluid container, it's going to go all the way across. And when we have a container, it's gonna work on the break points. And over here we see what the break points are, and we have a preset container with so at extra large, our container with on a max or without being fluid, is gonna be 1140. This is gonna be the biggest with that we have available to us. And even if the page is way bigger than that, it's only gonna take up this much space. So take a look at our source code and a show you with. The difference between the two is so right now we're at container fluid, so just leave it at container and what I'm gonna do, I'm gonna bring in my customized styling. And this is one of the ways that I usually like to customise boots. Drop is Teoh. Use my own style sheet, so make sure that you do place it after the boots drops style sheet because you want to make sure that you have the ability to customize that CSS that's provided in bootstrap. So All I'm doing is I've already created a couple files here, and it's just on the same root directory. And of course, typically you wouldn't be placing it right on your root directory. But this is just for demonstration purposes. So I'm gonna hook up that style sheet, and I'm also gonna hook up my JavaScript. So the script source and this one again, this is sitting on that root directory so we don't have to look very far to get access to it. And one of the things with HTML five, we don't have to specify the source type anymore. Previously in previous versions of HTML, it was best practice to specify its JavaScript, but we don't longer have to do that with HTML five. So now I can open up my styling and I can add additional styling. So if I want to add something to the container, so if I want to add a background color. So this is just so that we can see how wide the container is, and I don't think you typically would be using aqua color in such a large fashion. But let's take a look in and see what happens here and I think I'm gonna set up a quick grid here as well, because we do need to have some contents here in order to be able to see. So with boots, drop grids, we we typically build out the website envisioning that it is based on a grid system. And what I mean by grid system is just a number of columns and rows. So the columns going across and with bootstrap by default, we're building with with 12 columns across for each for each row. So that's the max columns that we have going across and how we indicate a column. And I'm gonna talk about this in upcoming lesson as well. So if I'm setting up a medium column and I'm giving it a length of four, then I do something like that and I'm just gonna type in one there, and I'm gonna copy this one over and so that we do have a total value all the way across. So that's gonna come out to be 12. So four plus four plus four. Let's take a look at this again, and we see what this looks like. So we see what the fluid grid that we do it automatically centers that not with the fluid with the regular container at automatically centers that and that. We do have these three really neat columns here I an update that styling a little bit more and update what? That call um, MD four and Anna add a border around it so that we can better see them. And also, I'm gonna give them on minimum height. So this again, this is just so that we can take a closer look and we can see what's happening here so we can see that each one of these columns it's evenly spaced. So four for four and we have a total of 12 all the way across. So we're gonna look at this in upcoming lesson where we're going to look at single columns and just different ways that we can build out our grid system. Eso if I go back into the code and if I change this to the container to fluid, we're actually gonna take up that whole available website space. So see here when we refresh it DOT column or that container now contains all three of these , and by default, these ones aren't they don't contain the color. So we gotta go back here in the CSS and we've update this so that we can actually see that color there. So just going back in here, refreshing it. And now you can see that the container is full across, and even when we go ahead and we re size it, we see that these containers, they contain that same dimensions and we can see that we do have the ability to resize, and it nicely stacks. When we get to a certain break point, we're going to talk more about break points and how the grid system works in the upcoming lesson. 4. 9 Bootstrap introduction to the Grid: the way break points work in Bootstrap is there set with media queries and media queries. Essentially, they allow us to resize our Web page depending on what amount of available pixels are that are available on the Web page. So here we've got for bootstrap, for we've got all of our different break points. So typically, we've got a break point here for the extra small. So these air the really small screens such as mobile devices. You've got small to medium here, and this was mawr indicative off tablets. So you've got a little bit more spacing and a little bit more screen real estate toe work with. And you can do this when you're designing for these particular devices, you could set either small or medium. And then, of course, there's a large for even larger screens and then the extra large for the super large screens anything over 1200 picks. So typically, most desktops, they're not gonna be that much larger than 1200. So if you're designing for for a particular size and you want everything to fit really nicely, then you could just go with that default largest size and use the container as we have looked at in the previous lesson and also noticed that we've got these class prefixes here . So these are indicative of calling over to the particular column size that we want toe access and whenever it breaks below this column size, much as what we saw in her demonstration here. So at this point, it doesn't matter if the container is fluid or not, as were re sizing. We're seeing that it's gonna always take up 100% because until we get Teoh the larger sizes until we get over 1200 pics on space within our browser, that container, fluid or not fluid is going to make a difference. I'm going to just change this back to you. Just regular container just because usually when I'm building websites, I like toe have a container, a contained area for them. Eso We can see here that there is a big difference between the container fluid and the regular container. What I'm looking at, the dust stops and it's not it's not taking up that full with so going back into the bootstrap default files, we can see here that in the CSS when we go in the regular CSS. We're going to see all of these break points are listed in here. They're listed as media queries, so we'll probably see a few here. That was with scroll down and we take a look at this code. We see that we've got the media print here on. Then we've got the different media sizes. So we've got the men with Max with, and this essentially in CSS just just means that this is what we want to show Max with and everything down. Everything up from here is what we want to show eso. This is again. This isn't boots drop for so we can see that we can be really specific if we wanted to eso If you want to hide everything up front that's not available on a small screen, then we can add in the hidden sm up and the same thing for the M D. And you're going to see that these are re occurring. These MD's LG's smmes excels, and this is just gonna be used to specify how various elements appear within your Web page , depending on the screen size to see all of these breaking points and the other the same ones that are being listed within their websites. When you go to here, you see that these are all the same break points and essentially just have the same access to them. And the other thing with the break points is that when we're looking at our source code within bootstraps, I'm going to go back to that index page. We see that I set all of the break points the same So I had call, um, so this just essentially says that I want to create a colum the next value here. So essentially, we've got one class name, but it could be divided up into three separate values. So the 1st 1 is a column so essentially want on indicate that we want to call him. We want a break it at m. D. So this is medium size when we go over here column MD is medium, and we want it to be four columns to take up four columns of space. So if I was to change this to S M, we'll show you how this is gonna now behave so going into our web page, Refresh this and we see that we don't initially see any difference. Of course, we do see a difference here within the styling, because I haven't indicated that one. So we should update that as well, so that we can see the same grids as we did with the medium. So we see that initially, because they're screen size is full size, we're not gonna actually see anything changing. Think with inspect Element. We can actually see your screen sizes here. As we're adjusting eso, we can change the screen sizes to be responsive. So this is 400 pics. We can update for Mobil's, We can see it, and this is a chrome browser, and it's comes with depth tools, and this gives you the ability to see different screen sizes just by clicking over here within your depth tools the way I access it, you can access it either by clicking on the screen so you can dio inspect here, So control shift. Ah, you can also go up here in the settings and you can also you can right click anywhere where there's white space and you get access to that menu, and this is only in chrome because I'm using chrome. I do have the ability to see these different sizes really easily. Eso We noticed that when we start shrinking down notice up here in the right hand corner, we see how Maney picks we do have across, so he's just strung below 1200. So now we're shrinking the screen below in 900 we haven't hit any of the breaking points yet. We're are going to hit one very soon. So as you see here, once we hit this seven 70 break point, we see that the columns automatically or stocking. So they're going from columns where we had three columns. They're stacking into Rose because this one now has hit a breaking point. And once it hits that breaking points no longer considered an m. D is considered full with across gonna be the same thing for the other ones as I continue to shrink down. Once I hit that last breaking point, they're going to stack again as separate roars and the columns they're all gonna be gone because now have specified that I want columns at these particular break points. And this is the behavior that I want to see once somebody is rece izing it so looking at our code once again we see that we do have We do have the first column set at S M. So once it hit that break point it Bennett shrunk under that break point. So once it went below, once it went the low 5 44 We hit that break point, MD Once we hit below 7 68 or once we hit below that break point, Then we saw it shift into a call him. And also, if you want to keep them just as just as regular columns and we don't want to have any break points at all, I can always indicate that I wanted X s so the way to do that? So if I change this to access and of course I'm gonna have to update that styling. So before we take a look at that, go back over here and I'm gonna update styling, So call him access. And when I will take a look at that and now we're going to see that no matter how small of a screen we have, we always have those three columns. So that's the way to specify that no matter what, no matter what size of a screen I'm looking at. No matter what device is looking at it, I'm always gonna have three columns. So this is how you specify that? No matter what, you're going to keep those columns as is. Then the next lesson. We're gonna look deeper into the grid system and work more with what's available within the grid system. Because there's a bunch of different scenarios and one of them that we've already looked at whenever we're combining two different types of column break points thing, we saw that their behavior actually changes. So we have to accommodate for that when we're building out. So we're gonna look at that in the upcoming lesson. 5. 10 Working with the Grid: Let's take a second look at the grid system, and we're gonna look at it in even more detail. So previously we had looked at how the grid system works, and we saw that there is essentially three main components of the grid system. There's three different classes that I'm using. The 1st 1 is going to be the container, so either the container can be fixed. Store can be fluid, so fluid is essentially full with essentially, if you're using fixed than its center, the sites content in the lines. That s so it's prepares the grid. Essentially rose are the horizontal columns. And make sure that allows you a way to line up all the different columns and contain the columns. So that's where we have this role. And then inside of the role, just like when you're building out tables and HTML, you've got your columns. So building out your roast first and then you're setting out your columns and the way that columns work is there placed within immediately Children of the Rose. So you've always got a role outside of these columns, you're probably wondering, Well, you know, we said it before I said that there was a possible off 12 per roll. So what happens if let's say you go outside of the 12 So whats they have 1/4 1 here and I add this in as four. So what do you think is gonna happen here? Because we're no longer equaling 2 12 And the whole idea with bootstrap is that the classes indicate the number of columns that you'd like Teoh build out with a possible of 12 parole . So if you want. So over here we had done three equal columns because 12 divided by three is four, but now 12 divided by four is going to be three. So if I wanted these to be equal columns, these should be calling excess three. Let's take a look and check out what happens. So what do you think is gonna happen here when we re refresh it? We see that it actually adds the next one in the fall wing role, and that again is because where a max of 12 columns per roll. So whenever we go over that, it by default drops it into a new additional roll below that. So, essentially, this isn't a role, but this is how bootstrap will behave if you take up the full available 12 spaces and let's say you hide one of these will remove it, then it will automatically stock that in place. So even if you go over 12 you have a max of 12. So if you were to do something where you've got a numbering system, if you've got eight and let's see did this one of seven? Well, that first roll is gonna take up the full eight, and then we're gonna go seven. So this one here is actually taking up eight, and then this one's taking up seven, and then we still are able to allocate an additional four. But then we run out of space, and that's what we've essentially got three rows. So I didn't have the borders around there. So maybe I should even update this and have something where we could create a customized class for column. So I just put something like this, and I'm gonna add in these stuffs these air, not boots, drops, styles. But this is for the purposes of this course. So I don't have to keep updating these. I can just have this and we can get a better idea when we visually look at it and we can see that the 1st 1 is taking up. Is taking up eight spaces. The 2nd 1 tries to get seven, but there's not seven left, so it automatically defaults to the next role. And then this one is allowed to because got enough space, and then we've got the next road down there. So column wits are also set in percentages. And that's what we see that when we resize the column with stay the same. So no matter what size of a screen were still only taking up seven here and we're taking up . I keep forgetting what that one was with. That one is 87 and then I should actually rate. This ain't so eight seven, and this is taken up for and this was taken up for. So we have a better idea of how this is working. So going back out to refresh this and we can see how much space each one is allocating. Look at the website and see all of the differences here that we can do with columns. It's over here. It's just specifying that if you do want to customize it. And if you are using a compiler, you can compile your sass files and really customize where the break points are and how things look. You can even set your own custom break points. Eso That's just what this is. This is just documenting that and explaining how to do that. So when we go down here at the bottom, we see that we've got all of these all of these columns and just like our example, we can see that to copy this in, it's going to automatically for demonstration purposes and remember to keep it within the container as well. So going back out here, we can see that as we resize than whenever it hits that breaking point. All those MD's are now going to switch to be separate rules. So once we hit that breaking point, all the M D is hit the breaking point, and they switched to separate Rose. Next step is to take a look at them, and we see that over here they're actually combining separate classes. So we've got a separate class here for access, and we've got separate class for an M. D. This is one of those really neat things about bootstrap is because I can step set up separate classes, so on. And let's say I had this on an M D and this one on MD. I can also add in separate classes Teoh stock it. So I'm gonna change all of these to be threes. And let's say on the big screen on the allergy, I want to take up six. So I'm gonna set all of those 26 So what do you think is gonna happen here when whenever I hit the breaking points and go back out and refresh the screen, take a look at the top one here. So initially, when we load it, we get to see on the bigs on the big screen. We've got essentially the four squares, but we've got to on each roll. But whenever we shrink it down, then hits the next breaking point and it says, Okay, well, I'm within this parameter. I've got this much space to work with, so I'm here to set up because it's on an M. D. It's setting up four separate columns because they're now they're only taking up three, 33 of the available columns where it should be Klay around 24% 2025% of available space because 25% 3 is 25% of 12. And sometimes you do have toe work with a little bit with the mathematics of this and how this works. And then once we go below that break point, then we take up that full with. And this is what we mean by designing for the different devices. And bootstrap makes it really easy. Teoh build out for the different devices. So if you wanna if you're designing your Web site initially for mobile and you want to stock this way But when you get when you make it bigger, you realize, well, you know all those separate rollers doesn't don't really make sense when I've got a bigger screen. So I want to allocate some more spacing to that, or I want to allocate less spacing to that like maybe have a little bit of content. And on the bigger screen, it looks really playing an empty. So instead of taking up that full role, you decide to take up smaller spaces, and it probably would be adjusting at the other way. But this gives you the ability to really customize how your great is laid out. And this is the cornerstone of bootstrap understanding. How this grid works is gonna be the key to understanding how all of your elements get placed and essentially, how your website is gonna look. So it takes. It is very important to go through the grid system practice, check it out and see all the different, really neat things that you can do with the grid system within bootstrap. 6. 11 Bootstrap grid push pull offset: this lesson. We're gonna look at the grid and even more details. So more advanced options when it comes to the grid. So we had looked at how we can work on multiple devices. We could combine various classes together to really customize how our Leo is gonna look depending on where the break points are and what type of device the persons using. So whether it be mobile, tablet or desktop, we can really customize that look and feel. So one of the other things with bootstrap is the way that handles this column wrapping. So, so far, we haven't had ah lot of additional text in there, and I'm gonna add in just some default content in order for us to better see how this wrapping is gonna work. So let's say I've got one here with a lot of content. I have one here with very little content. Wanna go to bootstrapping? If I refresh it here, actually need to get rid of that styling that default height. So I'm going to just comment the height out and going to refresh that so that we're not taking up a default height. So we see here that way that it's actually behaving is that it's reserving all of the spacing for it, but it then it's stacking these ones next to it. So see what it looks like when we shrink it down a little bit and we see here, interestingly enough, it taking up all of this space. But then it's not stacking it below. So what happens if I add in another column? And this is one of the reasons why it's usually best to stay with 12 eso? Let's say I add in another one here, and I'm going to just keep those same parameters and we'll take a look and we'll see. Now I've got a 2nd 1 with a lot of content, so it automatically stocks it in place there. And whenever there's available space, it'll move it into that space, and we also see that off. We've got a lot of content. All it does is just wrap that content just to add in even more functionality and more available options here within bootstrap. We also have the ability to do offsets. We can push and pull the columns and we can move them around to really customize where we want them to fall. So if we've set an offset here, this is automatically gonna bump this one over on the way to do an offset is again within the class here. So we're going to do call, and maybe we'll do the offset on small and offset. So we're just adding in another value here. So instead of the call, sm two, we're gonna offset it by two. So this is going to create a space off to before that column gets placed. So see here that we've got the 12 and then we've got the ability to see this column, which I believe this one was probably built eight. And then we've got So I've got 12 and then we've got whatever with this column is at the moment. So that one Sorry, that 16 So we've got 12 and then this is six. And then we see here as we look down here, we still have the four available to us and then these ones just space in as needed. And this is how you have the ability to move all the columns around. You can also pull them over if you need to. This essentially changes the order of the columns. So what I'm gonna do here is maybe I want to swap this one with this one. And the way to do that, we can pull and we can push. So instead of an offset, I'm going to do push, and I'm gonna push this one over six, I think changed us too large. So when it's large, it's gonna push this 1/6 and quince to coincide with that. I want a pull the other 1/6 so that essentially they're going to swap spots. So it's the difference between pull and push. So pushing it is moving at over. Pulling it is pulling it over. Let's see what this looks like now. So it seemed now we had the ability where we push this one over to this spot, and unfortunately we got a lot of text there, and it's overriding that. So again, you've got to always be aware of the fact that you don't want this might look different on different devices, so always try to work with that value of 12. And as I haven't within this example, that's why we've got all of this overriding happening, and even these ones here, we're swapping it to a six. So that's automatically allowing making a stack those And whenever we get really big and now that we've pushed and pulled it. So we've got some crossover here of what's happening because, of course, we haven't pushed or pulled the other ones, so maybe that might be a good idea if we pulled these ones over and see what that happens now. And, of course, it's always a good idea toe test out your code and see what it looks like before you implement it and tried it on the various sizes. And that's where chrome is really good, because it gives you the ability to really see what it's gonna look like on multiple devices. But essentially, what we've done here. We've pushed this one over, and we've pulled over these three to this site, and we've got available spacing much like we did well. It was reversed, and this is how you can use some more advanced features with the grid system within bootstrap 7. 12 Hide elements in Bootstrap: as we saw in a previous example, sometimes you might want to hide different elements was you adjust the size of the screen so you might not want this one to be visible when we get bigger, where you might want something different a happen. And that's what we have thes responsive utilities such as the hidden. And we have the ability to show and hide certain pieces of content within our HTML cord by applying these classes. So here it's got a really simple chart to show you how they're gonna work. So if you want it hidden on Onley extra small devices, you can use hidden excess small if you want it visible on all the small devices. But we get to the really large devices we want it to hide. We can use this one. This is the one that I'm going to implement within our code. So whenever we get up, Teoh a larger size, I want to simply hide this element and show you what this is gonna look like again. I gotta pull this back it so that I can resize it and we can see that whenever and save that one. And I think I need Teoh. Probably get rid of some of this pushing and pulling cause this isn't gonna look exactly right as needed within the website. Sure why? I've got that twice. So get rid of that as well and get rid of this pushing and pulling. Save it, go back it and will refresh. It will take a look and see what happens. So where, whenever we get to a certain size, whenever we hit that break point will see that this one, with all that text and content, actually disappears as we shrink as we expand the size of available screen on just as indicated here. Whenever we hit this break point on the larger devices, we no longer are going to be able to see that particular element. And there's quite a lot you can do with this hiding and showing, especially if you're actually out putting your devices on multiple multiple options for users. So if you want content to print, if there are certain pieces of content, you don't want a print or just doesn't look like something that you want to output within the printer, you do have the ability to control those as Well, this is again done through the media query. You can also resize your browser or load on on different devices to test the responsiveness utility. So you can see all of this different capabilities here, where we can see that what sizes are available for what? Viewing conditions. Whenever we were to resize this, we could see thought because they applied the different classes. We're going to see that we've got all of this showing and hiding as were re sizing the screen. 8. 14 Bootstrap Tables: Bootstrap has pre built sizing and styling for various HTML elements, so, such as typography is such as headings. So with headings, we know in HTML we've got six different sizes. And with bootstrap, we have some pre built STAIs ing and scaling for these different elements. These different elements sizes and with bootstrap three, we had a default font size of 14. So that means that any of the thoughts coming in would have been 14 now with boots dropped . Four. We have a default font size of 16 picks, but we're not only using picks were using Ari, and this is going to allow for more responsive scaling of the font sizes. So we set a base font size, and we work off of that base font size. So that doesn't matter what size of the screen it is that we use ari EMS in order to better size the fonts accordingly toes, depending on the size, so essentially by default, with each one's on the default screen size, they're going to be about 36 picks. H twos or 30 H threes are 24 it goes down varying from there, so H fours are 18 and then h fives are the actual font size. So going all the way down and then each sixes are slightly under the regular default fought size, the same thing for lists that we do have some updated styling for the lists. So a Norden List ordered lists and D L lists. They have margin top, and it's removed. The margin bottoms of the one R E M and nested lists no longer have a margin bottom, so we can see that here within this example. And also we do have some additional styling on the default margins sizes that we have for lists. We also have the pre formatted text and as well for tables. So we've got some changes here with the tables and, of course, with Bootstrap were already automatically doing some styling for the tables to make them look more presentable. This is a really need function within the tables because we see now within the tables. We also have a caption, and this allows us to add captions to our tables. So let's do a demonstration of a table within bootstrap. Set up a brand new table here and we'll start off with the tea head. So this is the heading for the table and then the t h for table headings. And so this is gonna be the first heading there. So maybe we're going to do something like name and we had some additional table headings there. So company and one more table heading, living in the audience and maybe something like here. So it gives us the table heading, and now we're gonna create some table body, and then we're gonna style these afterwards using bootstrap. This is just typical html. We're setting up our tables, and then we've got our table cells here where we might have some information. So so do ah, name there. And this is a company. And then for a year, we need to have some more information there. And I have actually just copy this eight. So I have to spend too much time typing, and we'll just see how this turns out here. Open up our demo area. We can see that we've got our tables here, but look much like a table now. But now, with the magic of bootstrap, we're gonna be able to change those into tables. So you just go up here at the top here and add in table and the class. And we want to indicate that this is a table and with tables we have some additional options of different classes in tables. So for now, I'm just gonna put table, show you what happens now. So now it defines it as a table and then with the tables, we do have some classes eso going into the bootstrap source files here. If the distribution CSS and it's going to go into this one will just search out table. So by default we have some table styling. But when we go down here, we see that we've got some or table options. So I'm gonna fast forward to some of the other table options and these air. Just the default styling. We could see that we're automatically adding a border, that it's solid. It's D d two or D d. D. We've got a background of transparent. And when we go down here, we can see that we've got some more options for tables as well. So we've got some options for the table. Head for the table body. We've got table sm for small tables. We could do a table bordered, weaken, do a stripe So all of these actually add some additional functionality to the tables. So let's say we want to do table hover. So I want to add in this class into the table. So not only just a table, maybe I want to have a table hover and show you what. This is really neat with bootstrap because you can get all of this really cool functionality. So, typically, if you're building out a table, you might want to add in something like this when they used was hovering over it and it's already pre built in bootstrap. Going back into that source code again, we can see that we do have a lot of options here. We can do a table bordered, so this will give us a border around the table table striped. So this is another neat one. And as we can see here within the CSS, what it's doing is it's doing on the odd rose it's gonna add in colors, table hovers, the one that we looked at. We can also do table success, so this will give us some additional colors into the table, so this allows us to customize the way that we want Our table colors, toe Look s o take a look at going back into our index page there. And I got odd in It's a table striped Although I think the table hover was kind of neat s so we can have that And I believe that we could probably have them together as well. So, you know, I just add in table striped there and we'll just see if this works that so some of the boots dropped functionality you can combined together so we can see here that the hover although with the stripes it's already striped at that zebra color kind of stripes, so we don't initially see that there's been a change. We also have table bordered, so if you want to add a border and I know amounting quite a lot of these, uh, classes here, so some of them might be kind of conflicting and overlapping, but we'll see what it looks like when I refresh it. We see now we've got the border so we can see the actual cells. So it adds a border to all the cells and tables we can do table eso it looked at table hover. We can also add in specific classes to the tables. So if we want to specify that the the class to the table So maybe this role or go down here So maybe we want to highlight a particular role, and we're gonna We're gonna look at just the different options that we have so we can add in a class of danger. So what do you think is gonna happen now whenever I refresh this and said, I do probably need to get rid of some of this preset classes already. So get rid of this table stripped. Sometimes they will overwrite other tables, change this instead of just danger, will change it to table danger. Because I believe again with bootstrap fourth, there's been some updates, so we can no longer call just to that class of danger. We have to specify table danger and we can, of course, update it. And we can so that now we've got this particular role has that class applied to it. We can also attach that class to the entire table, and this will make that entire table read and with bootstraps. So we've got all of these pre built color classes and these air used as you're developing your bootstrap theme, you can customize what each one of these class colors will be. So they've got these built in class colors already. So we've got your table warning. We've got danger eso these air pre built colors, and we're gonna look at this in more detail in upcoming lessons as well. And we can also see that we've got this ability to do on inverse table, responsive and so on. So if we want to do table responsive, we could add that one in as well what the table responsive looks like that it automatically will adjust to the allocated size so whatever, where depending on how much content is available. So if I was to update the content and one of the cells would just show you what this is gonna look like now, and if I refresh it, then it automatically responds to the amount of content that's available within the cell. That's what table responsive does. And of course, we can combine multiple table classes as needed within bootstrap 9. 15 Bootstrap Forms: when it comes to forms. There's been some changes now within boots dropped for. So for Mrs Another really neat thing that you can do with boots drop. This is what a typical four might look like and bootstrap for. And this is what it used to look like in boots. Dropped three. So there are some changes within here s so we're just gonna go ahead and start to work through this form and the form content. So I'm gonna get that rid of that bootstrap three and go back out and refresh it. So there have been changes when it comes to bootstrap and the forms in particular with the way that it handles elements like the field set us is no more borders, the legends and labels. So labels are set to in line block. So that's why they're gonna look different when I refresh it. Pay attention to the labels here. And also there's been some changes, a little bit of styling, changes to the inputs. So these inputs here, as well as text area and select So when I refresh it, we're going to now go into boots. Dropped four sports dropped three bootstrap for we see that there's been some just some changes overall, but how it's being presented and also the text area now is more modified and essentially it's given us the ability to you, uh, not to have to add as many classes in S O. This is a bootstrap three where I was adding in all these columns and specifying how wide I want the label and so on so we don't necessarily even need to do that anymore. Within boots drop four. So I'm going to get rid of some of this column and some of these styling so that they're not getting in the way of what we're looking at when it comes to the actual course content here. So get rid of that one as well. And we still have those control labels as well. So going to refresh this. Take a look at this. So now it's without that all that default styling, and we see here that we're no longer specifying that we want it at a specific height or specific with the different spacing. So this is boots dropped three, and now it's bootstrapped for So we're losing a little bit of indentation, so that's what's new with boots dropped for and swell. And I do have some extra characters. There's got to get rid of that one because that one's is taking up space there. So essentially, what we're doing what we're creating forms in bootstrap where wrapping them with these form groups. So overall we've got our field set and then we've got our legend. So legend will explain what's contained within their and then we can specify either form groups or we could just separate them. I would as paragraphs or dips. Of course, if you're thinking for the grid system, if you want a style your form inherent with the grid system, then you can add in the specified classes as needed. And we can even get rid of some of the form group now as well. So if I wanted Teoh, just specify that this was instead the dips. Mabel just changed, thes and update these two paragraphs get rid of that one as well, and this will really simplify what we're doing here within the within the content here of the HTML there used field sets or we can use thes form groups or dibs to really break apart that content as needed. So do have quite a lot of styling here, so I'm going to remove some of it. So I don't really need to focus in too much on all this extra content in excess content. And that should be a paragraph close. And keep that one. I get rid of this check box, So take a look at now and we'll see what it looks like now. Now it's a more simplified format, a simplified view of our content, And now, in order to t build this out So I'm gonna bring those form groups back in, and I'm gonna break it apart by gives. So again, there's different ways that you can group the various pieces that you want to use within your HTML. So I'm gonna bring that one back in as well and keep this one as form groups. It's better it again. It depends on what you want it to look like, how you want the spacing to be presented. So it's not really gonna change because they're still going to be formed groups, and it's still laid out in that same type of format straight forward structure, where I've got my form group. I've got a label for the input field and then I've got that input field. Same thing, label input, field label, input field. And then I've got some excess here, so I'm going to get rid of that as well and clean it up a little bit. Eso with the forms We do have some options so we can do different form classes, so I just need to go up at the top. So currently I'm just using a form horizontal, but I can change this to be in line if I want. Take a look at that and see what update change on that is going to be. So now we see that all of the form elements are now in line. Eso they're going to be in line with the rest of the content there, so they're just falling in line, depending on what space is available for it. Eso horizontal form was the one that we were looking at, and essentially that aligns the labels and form controls horizontally. Eso with the changes with boots dropped four vs boots dropped three, so there are some changes when it comes to the grids and the control labels, so bootstrap form uses form control labels, whereas Bootstrap three uses control label. Let's go back into our our code and update it now to be bootstrap before so form control labels form control, label and form control label. So So there are some changes and essentially this falls more in line with the classes. And when we go back into the bootstrap, CSS will take a look at what these are doing. We've got our form control here. Eso these air. The form controls all the styling for the form controls. We see that we've got the ability to do small, large as well as we can update sizes on the form controls. And here we've got a different form. Controls weaken, do success, warning and danger. So we do have the ability to add in this additional styling into it on. And then here we see that we've got a brain. You one word. Scott has success form control label. They're going to take a look at this as well. And we see that form control label is now being used. And we've also got form control, feedback on success and so on. So quite a few more options here. I wanna increase or decrease the size of an input eso I can update those inputs to be larger, and it's going to go over to this input here, and I'm going to update the class of it. And where's this form control? And now I'm gonna update it to be for control. And they're gonna make a large, and I'm gonna change this back to four to be horizontal. Let's go take a look at that. So now I'm gonna have a larger area for the emails than the default s. So this is how you can control those. And you can also go with small as well, if you need to. Also have I text areas where if we've got validation and so on, so we've got the ability to apply those on. This is when we're working with dynamic return content. So if we wanted Teoh, apply some help text. So let's see, we wanted to have a little bit of help text under this email or maybe under this password. So we want to add in a separate span here and normally would give it an I d so cold text or something like that. So let's, uh and we're gonna look at the classes, so the classes is gonna be text commuted. This is the password. So show you what this is gonna look like. So just underneath the passwords, you have the ability to kind of do this faded text, snow and bootstrapped. For on this is some helper information. You can also update update your return. So validation and feedback icons and so on update my bootstrap. So let's say this one here for the input email whenever it's a success, I can add in default form control there. And these were the ones that we were just looking at in the CSS, where we can update success or something like that on this will apply again default styling . And this is really good when you're working with dynamic like Jake, where even front end code and you have the ability to add and remove classes as needed. So it makes a really nice effect for users as they're coming in, and you can add and remove these classes as needed. So something went wrong there. So I'm gonna take a look back at that source code. I forgot I still need toe add in for the control group, so it's got the house to be able to utilize the success go out. We see that we've got this check box here. It's green, the labels green. And that's because we've applied on additional class here, so you wouldn't necessarily need to update this dynamically. You could add on the parent the parent element you can add the has success and so on or you could add, has has danger if it didn't go right on down, this would apply to any of the classes here that have the danger in it, which we don't have, so it's not gonna ply. So we see that this is now that it's not filled out properly, so we have the danger. In the next lesson, we're gonna look mawr in more detail about danger, success and other styling options, and these air gonna be really evident when we start looking at the different buttons and what's available with bootstrap buttons. So that's coming up in the next settle. Lessons 10. 16 Bootstrap Buttons: One of the things that Bootstrap is most famous for are the bootstrap buttons, and Bootstrap comes with six pre defined button styles and with boots dropped. Four. We've got the introduction of secondary and we've been dropped the button default. So essentially it's gonna be the same thing. And bootstrap three is the same color scheme, eyes for the default. But second year, I guess, makes a lot more sense. And this is the presentation of the way the different buttons get. Lead it. So I could just simply copy this in. And I have access to all of these styles, and we've been looking through a little bit in the previous lessons. How success We've got danger warning info. And we noticed that there's particular colors that have been attached to each one of these classes. And this is the really neat thing about boots. Drop is because you do have this default color scheme which really out of the box makes a lot of sense. That danger would be red. Warning is yellow successes green primary, maybe blue eso these air very useful color elements for the buttons, and it's really easy to implement. These s so I'm just gonna go ahead and create my own custom button. So I'm gonna just move up here to the top and in order to create a button. So we've got it here within bootstrap. We see that we've got a whole bunch of button types, but buttons can actually be applied to any type of element. So even if I have a div and I wanted to act as a button, I can give it a class of BTM, so it's going to make it into a button, and then I just need to pick the color that I want to use. So maybe at first I just want to do primary or something like that. So this button is gonna be primary close off the div. This is my new button, and it's just really that easy to start creating content and bootstrap. So when I refresh it, we see that I've got my brand, you button hovering over it and it's already pre defined, so it's got all of that information ready to go. So with buttons, we actually also have the ability to do some more with these buttons now in boots dropped for we've got the ability to do outlines and outlines air really, really neat because they give us the ability to set up a button anywhere and add in outline . So this is another class besides thes regular, typical classes where we just simply do the dash outline and we'll go back out here and refresh it. We see that now we've got essentially, the colors are inverted, so blue is for the text and for the border, and then the outside of it is still going to be that default blue color for primary and with buttons. We also do have the option to set sizes. So we, if we want to make this button really big, always to do is add in another class. And just like what we've done with previous updates and boots drop, we can see it's just so easy. So that's actually not the right one. So button And if want to make it large, which is to something like button allergy for large now, Bootstrap previously and Bootstrapped three had an extra small eso that's been changed, that we don't have extra small anymore, but I mean probably wasn't being utilized very much, so they probably decided just to drop that. And the thing with Bootstrap four is there's been a lot of updates that have been really smart updates focused on things that are important and being utilized a lot within building and that draught stuff that hasn't been used as much. We also have the ability to go full across available spacing eso, just like when we looked at the button builder. We can change this to button block, and now when I go back, you it into my court and refresh it. We see that now we're taking up that full available block. We can also disable buttons as well. So we've got the ability to the to the disabled of it. And it's really easy to build stuff with bootstrap. So here we've got the full weight with button. And of course we have this. If we have our grid, then this would only take up the full width that's available within that Gridley out in the next lesson, we're gonna be looking at additional boots, drop functionality. We're gonna look at images and how to work with images in Bootstrap. So let's all coming up in the next set of lessons 11. 17 Button Grouping with Bootstrap: When working with bootstrap buttons, we have the ability to group buttons so we can add apparent around or a rocker around a set of buttons. So I've got these set of buttons here, and I'm gonna sit this one to be class and it's called Button Group and I'll give it a rule . So that's that said the cloths and rule and the rule of this button group is going to be Teoh grouped the buttons. There's a group option there, and I'm gonna maybe just apply it to all of them. So save that and we'll go to and check the sit and see what happens. So you see that we've lost quite a bit of spacing there because now they're all grouped together and probably look better if I get rid of the button block here. So this is causing that button to take up that entire space, and we see that now we've got all of the buttons grouped together. We also have the ability to change it vertically, and it's just so easy with bootstraps. So if I want to change it to vertical, I could just do it like this. Refresh it and see now all of her buttons are grouped vertically. We can also change the different grouping capabilities so I can add in something that looks more like a toolbar navigation bar. If I wanted to eso if I wanted to add another div to wrap that one in class Bt and toolbar . Andi, copy this one. Bring out down there and let's just check out what happens now when I got a toolbar, we don't immediately see a lot of difference, but if I've got multiple button groups, then it'll look much different. So let's just try that and you get that button group because it doesn't really look that much on grouping when it's grouped vertically. So see what this happens now. So now again, we're making it look more like like tool bars, where we're actually grouping them together in separate sections and groups. So we've got that little bit of a space there so you can kind of see that that what it's done is it's pulled all these buttons together and all of these buttons together. And where we've grouped him, it's made a separation, so it acts as two separate tool bars, and that's so we can build out a lot of really cool things with buttons. When it comes to bootstrap 12. 19 Working with Images in Bootstrap: in this lesson. We're gonna look at what you can do with images when it comes to boots drop and one of my favorite sites to get images when I'm actually just building a website is Lauren pixel dot com s. So they have a variety of different images. You can set different sizes, these air, all placeholder images and very useful when you're building out your website and you don't have any images on hands. So if I want to add in that image, that's all I have to do. And this is basically a 400 by 200 image. Now, with bootstrap, we have the ability to make images responsive. So depending on how much size we have available to that image, we can make it responsive. So let's add in some of our grid here and make this a little bit more like bootstrap, where you set up a role and I'm gonna add in another div. Give it a class and it's gonna be a column. It's gonna be MD six and Sandy Dash six, and this is where we're gonna have our first image, and maybe you're gonna have a 2nd 1 Exactly the same. So let's take a look at our source code our website and see what this looks like. So now we've got both of these images just being displayed, so there are actually being displayed at full size. So what happens if this image is no longer 600? But maybe it's 800. Remember? Again, we don't have that much space to work with. So I'm gonna make this maybe 400 and make this about 500 something like that. Now we're gonna see what happens when we're trying to take up even more space. We see that it's actually automatically being resized s. Oh, this one is keeping its dimensions and its re sizing by default within the grit. Eso We also have the option Teoh add in images such as fluid images so we can do where the max with is 100. And that applies Teoh to the scale that's available to us. We can also round images eso we can add in various classes to those images. So just show you how this is gonna work to just add in that class. And if I want to make this image rounded, I can do that if I want to make this image so I am G. I can do thumbnail type style so I could do that as well. Take a look and see what's happened now. So see that now this image is more of a thumbnail style. We see the corners of this one are rounded. And what if the image was just really small? And so what that happened. What happens now? So we have the ability to stretch the image if we want, so we can make it fluid so rounded. But we're also going to make a image fluid. Do not go and show what happens now. The reason this is re sizing Teoh here is because it's taking up 100% of that image. So I think, by default were fluid anyway, once where within that container, but just to show you again, even when we make it bigger when I resize, it would keep the dimensions the same. But bootstrap is the one that's making this adjustment to this image size as we're moving it a lot, so we also have the ability to float images so it can float them over to the left and to the right. So I should make this one smaller s so that we can see when we're pulling the image on and we can so we can pull it over to just like what we were doing with the grid system so we can pull it over, pull and then we need to specify at what breaking point. We want to pull it and maybe I want to pull it to the rate and this one. I want to pull it and I'm gonna do on excess. So I always want to have it. And I'm gonna pull this one to the left to take a look. And now we'll see what happens when I resize the screen. So you see there as we're re sizing, we're pulling over to the right and to the left, as indicated so you can see a little bit of movement there as we're moving the images around. If we had them within that scene, this will probably be more effective If I place them within that same div. I show you how this is gonna look. So now these air within that same div So one is being pulled to the right this one's being pulled to the right, and this one's being pulled to the left, and we see that the pull to the right only works on anything above MD. And then by default, it pulls to the left. We're also have the ability to do a center, So if we don't want it pulled either way, maybe I want to just center this one Aiken, centre, block it. See that And now we see the image has been centered, and, of course, we can combine styles as needed within bootstrap and with Bootstrap four. It's important to note that they did have this update here on the different breaking points . Eso previously and Bootstrapped three would have just been doing something pull left. But now we have the ability to specify when we're pulling left and right, depending on what the break point is, 13. 21 Bootstrap JumboTron: one of the need things with bootstrapping. We've already looked at this a little bit, is the Jumbotron. And essentially, this is just a way to draw attention to some content within your Web page. So I'm gonna just transform some of this and remove some of this coding and update this toolbar to be a Jumbotron. So we've already looked at Jumbotron. We saw what it does that it adds in like typically, you'd have on each one tag for maybe a title or something. And then you have a paragraph, and here you would have content to read and so on so he'd have something typically like this for a Jumbotron. And let's just check out how this looks within our Web page and we see that it adds in the default Jumbotron and take a look at that court again. So again, I missed that over there. So jump boat Jumbotron. Let's go back and refresh it and we see that it adds in default styling around there. So one of the things with that's new to boots dropped four is ability to do a fluid jumbotron. So we have now we have Jumbotron and we have Jumbotron fluid. So this is separate Jumbotron because we still want to bring in all of that class information that we had for Jumbotron. But we want to extend it to be fluid. Let's take a look at that and probably won't look much different because the fluid essentially takes up the full spacing. It's adding in, um, full spacing for that jumble Tron area and missed up again. So just looking at that thinking, it doesn't look exactly right. Now notice when I refresh it that the corners are going to be gone and that it's taking up a little bit more space, it's removed out some of that padding that was there so little bit of difference. And essentially again, Jumbotron fluid takes up that full available space without the rounded corners. 14. 22 Applying Labels to Content in Bootstrap: with bootstrap. We have the ability to apply some really cool styling when it comes to labels. Let's say you've got some content, but you want to add in an additional label here, so that's would typically be done with the SPAN labels. You want to be in line with the rest of your content, and I'm just gonna add in the span here, give it a class, and I'm going to give it a class of label and I'm gonna add in. So we do it also have the ability to specify the type of label that we want apply so I can do something like the label and primary. So if I want to have a bluish colored label and again this is going back to all the different color options that we have with bootstrap. So So maybe I want to really highlight to read this content or something, so let's refresh that. Take a look and we see it. It kind of looks a little bit like the buttons, but it allows us to add thes thes labels into the classes. And with bootstrap four, they've introduced the ability to do labels as pills and pills is just going around that label a little bit more so we could do label pill and what this is going to do this gonna transform that label into uphill mike formats. It just rounds it a little bit. And then, of course, with the labels, we have all the same color options as we did with the buttons. So if we want to do red and of course, this is only by default and boots drop. If you've updated the red colors, the danger colors, then you're going to get something different. But by default, it's gonna be read and so on. So quite a lot of options here and always keeping in mind that you have those six different options that we did with the buttons for color informations. We've got the primary, which is blue by default. Secondary Green is success in full warning and danger, and it's really good to get familiar with these six different pre defined color schemes because you're going to be using them as you can see throughout, when you're designing with boots, drop and you're going to continuously have options to style it in any one of these six pre defined colors 15. 23 creating alerts in Bootstrap: So as we're thinking of all the six pre defined colors, we can also use these colors and other elements as well, so we can use them or other classes as well. And another one that we can use that's really need is the ability to do alerts in alerts are just kind of a wrapped blocks normally be adding them dynamically. So if something went wrong, or if you wanted to send a message over to the user and display it within your code, you'd add in on alert. So this would typically be done through dynamic code like you wouldn't really have an alert by default. But this is just illustrate all the options you have for alerts. So with alerts, you have the options for success and quotes. There s so we're just gonna try roll and, of course, role alert because that's the type of alert that we want to say and won't do something like it worked. Let's check the suit and our demo area, and we see that we've got this kind of alert button and eso again. You'd have this if you want to send a quick message highlighted message over the user and with alerts, you have options to do info. So info is bluish color. You have the warning and danger out sold. So I'm gonna go through them. And it's staying with that same color scheme that we've had before that we've been working with before when we use those six different ones, but with alerts, you only have the four options. You don't have the secondary and you don't have. You don't have the primary, so you don't have primary and secondary. But you have success info, warning and danger. When you're doing alerts, you also have the ability to change your link color eso. Whenever there's a new alert link, we can update that as well. So if I've got ah hyper Lincoln here and we cannot some styling to there so we just do a class and this one is gonna be alert link, and that's gonna tell boots dropped that this is going to be a link, and we wanna we wanna do that coloring of this link. So click here, go back, you and refresh it. And now we've got this link and it's colored to match with the rest of the parent alert for alerts. You might want to make them dismissible, or you won't want them to disappear when there's a button to click. So that's where we can add in alert and at the cloths dismissible. And we can also make a fading effective who want as well so we could do feed in and at all of these classes in here. So this will essentially add in ability to you feed that in and now we just need to add a button or some weight. Something to click that can dismiss the alert. So I just add in a PSA regular button here type. It's a regular button. Gonna give it a class. So class, it's gonna be a close button and what's gonna do. It's gonna data dismiss the current alert, and then maybe we'll just have an X here or something like that, or clothes or something like that to indicate that this is what's gonna happen when this but particular button is clicked. So I could see we've got the clothes there. Whenever it gets clicked, we close off the button where you could have an X if we wanted to, as well 16. 24 Introduction to using Cards in Bootstrap 4: If you're familiar with bootstrap three, then you might be familiar with Wells and panels. So in boots drop for those are gone. But we've got something even better. We got a brand new component cards, and this is gonna be a really flexible container. It's going to give us options for headers footers and allow us to create a variety of content within the card. So it's taken over for those less utilized components in boots drop. So in order to create a card. So I got to do it in a div as well. And it's important to note that you can add the's classes to anyone of your elements. You don't necessarily need to just do it always and dips. You can work with various different elements and have thes these capabilities. So with the cards, we've got some options for images. So for wanted to add in an image at the top, we've got that option. We've got different capabilities for content types so we can do images, and then we've got the blocks for cards as well. So typically, if you just had some content here for your card, you'd started with another Div. I'm gonna create for it. And I'm gonna call this one card block and then within this block of code, I'm gonna set up a title So this one's gonna be an H two, and I'm gonna give it a class of card title, and then maybe I just have some content there. And so this is the first card block. And maybe if I wanted to have an image, I could do an image now and data data source for the image. I'm gonna go back Teoh, Loren Pixel to pick up on image. So I'm gonna just pick one of these as a source for an image, and I gonna set another card block. Of course, you could add in as many card blocks as needed. So depending on how you want your your content toe, look within these cards and then here, maybe you might not wanna formatted within the same way you just got up bunch of text and so on. So and also maybe want to have a hyper link, and we're gonna create a class of card link. So take a look and we'll see how this turns it. So let's go over into our example here we see that we've got this really nicely formatted card. We can also update it in multiple ways. Let's go back in here and so we can do if want to do. We can do that main container as a card block and see how that's gonna look. So what essentially that's gonna do? That's some additional formatting to that that particular card. And also, if I wanted to add in different lists, I could do that as well. It's a lot of different options with how we conform out it. If I want to move my image, I can move my image up as well. And I just get rid of this and just keep it as a source and and I'm gonna also I'm gonna create a class here of card image top and should that looks like So now we've got our image there that's coming in over there on the top there, I can take this place that somewhere else, a swell place at the top. I can get rid of the card, the various options here when you're working with the cards and all depending and you see it, it just really nicely formats it in a nice presentable manner with the padding already involved in the text and also updating the image, placing it within that proper sectioning when it comes to the images. Eso it's all a matter of how you want toe position things and just going to pre define it within that class is so. We've also got on option here for so we might have some card text as well. That's another option. Maybe I want to change this into a diff so it breaks out the different blocks of content s I've got my card text already looked at card title on and it's all just a matter of how it's going to get formatted and the way that it's gonna look and refresh it again and again . We've got just slightly different variations in the way it's being styled. We can also do some alignment with the text if we wanted to, so we can align text, various formats and this is just something within text itself. So if we ever want to pull some text over, So maybe this text here I want or I want to pull over this whole card block over. I can pull the text and another new thing with bootstrap force. We have the ability to again had these break points for the text. So if I want this text to be centered on a medium sized screen, I can add that in as well. Just take a look and we'll show you how this is gonna work. So our text now is centered for screens larger than medium, and we see that it pulls over to the left there whenever we shrink it down. We also have the option for headers to really style out these cards. So no, it's getting quite kind of long here with all the different capabilities that we have with the cards. But we do have that option for adding header. And again, this is just gonna add in more styling options, essentially for your cards. As you build the mood, you can see it's really, really flexible with what you can do so we can do card header. We get at multiple classes as well. Eso this is another option. So just put header. We also have the option to do foot or if we wanted to do the same thing as the header. We can just do card footer if we wanted to. So I'm gonna just copy this and maybe do a card footer and update the content in there. Go back it and refresh it to see that we've got our footer or header. So it's adding in this default styling around it as well. We can also do what we had looked at before. So if you want to do some muted text, eso may be in the footer we wanted to do text muted. So all this is doing is this is making it a little bit less standing out, so it's gonna fade it in to the rest of it a little bit more so you can see it's that muted color. So it's not really popping out as much as before, and also we have the ability to do captions within the images as well. So we've got that option here within the images. Really neat one. When it comes to cards, you can do an image overly so if I want to overly this content over that image. So this block here I'm going to do image overly and CEO. This was gonna look so take it. Take notice of the text here and how it actually moves on top of the image. So this gives you this capability of kind of throwing some content over the image by default. You can also invert the text of the content as well, so you could do like a card in verse. So let's do that one as well. So we've got quite a few things happening here. Card in verse. And of course, you probably wouldn't be using all of this stuff together. But this is just a illustration of what we can do with the card. So by default it's inverting the color. And, of course, we'd have Teoh customize some kind of thought that it would be visible some. Maybe we go into our styling and record too card, and we'd add a custom background color and still something like dark blue. So this is just regular styling. This is at sight of bootstrap, and this is also one of the reasons why I usually keep this stuff style sheet handy. Eso that if we do need to make some updates to it, we can do it really easily. You can see that obviously, over here, we might want to get rid of the header and footer because this is by default. It's it's disappearing and it's being faded in there. So some of them you'd use and some of them you wouldn't necessarily use together eso also going into the cards. So we've got a lot of different card options here that we've used. So we've used that card block. We've also got the ability to do a block quote and swell for it. So if we had a block quote and this again, this is new two html five severe familiar with HTML five probably used block coat before, so card and bootstrap has a special styling for block quotes. So block quote and then show you how this is gonna look. And, of course, there. We've got just some text there as well. So it's ah, highlighted and evident stands out a little bit more. Lastly, when it comes to cards, we can also group cards. So here we've got card. And what if we had three different cards? You get rid of that inverse there have the ability to group cards together. It is another really neat thing with bootstrap for because they've really thought of a lot of different challenges that way face whenever we're developing websites and one of them is always how we group content together because, of course, content when it's group together looks a lot more presentable. It looks a lot better than if we've got it spread out just going out that lost. If there and now we've got three different cards and of course we do still still need to make some updates to the styling would have to make these images fluid as well, So quite a few updates still need to be done to that. So if I went to the image so that resize is those images to better fit and then of course we might not want to be pushing the text on top. We might want to get rid of header footer and so on says quite a few things that we might want to do when it comes to building these oats. So I want to actually maybe get rid off this where I'm doing the card overly and it's got changes sparked card block and so that styles at a little bit more presentable. There the next lesson. We're gonna look at cards and a little bit more detail because this is one of those key brand you ella classes that are available within boots dropped for. And it's important to understand all of the different capabilities that you do have now with working with cards. So we've got a little bit more on cards to finish up in the next lesson. 17. 25 Working with Cards in Bootstrap: It has been quite a lot of stuff that we bullet been looking at in the previous lesson when it came to cards. Build out some more functionality when it comes to cards and get rid of this background color of blue and show you some really neat things that we can do with cards. When it comes to boots, drop and I'm gonna get rid of this thes ones as well, because it's not really fitting in well, with the card design and ex probably shouldn't have wrapped up within there anyway. So let's take a look at this. Refresh it now and we see that we've got the three cards that we've built out here s so we do have some additional options when it comes to cards. So typically with cards, we saw that typically weaken put in card titles. We can use headers if we want. We don't have to. We can do text and so on. We can add those headers and footers in the cards, and that gives gives us that little bit off highlighted content there. So I'm gonna get maybe get rid of the the footer there, get rid of the header so I have some variation. Eso this one will have a header. This will have a footer and I'm going to get rid of that image over late, and I'm gonna get rid of the image entirely. So there got some different variations of it. I can also remove that padding from it, because by default, we've got padding within the card as well. So we can we can take that out if we need it to. So we've got just that we've been working with. So I'm going to get rid of this one because we do card, image top It actually runs it flush with the top of available contents. They don't generally wanna have the headings there. You see that? We're still in verse there, so I'm gonna get rid of that in verse as well. Get rid of that card in verse. That card in verse there so we can actually see our content and our text. So we've got something here typical off the heading footing. We see that our image over here so we'd have to make that fluid in order for it toe line properly. And of course, when it comes to text So we do have some options that we looked at here. So we had done just the default centering of the text. Someone want to make some changes to that as well s. We've got our text and D center. We can also pull right, left justified and so on. Eso just going into my text over here. Maybe if I want to add in text MD no rough and noticed that with Bootstrap for we're always setting those break points in there as well. We also have a really need ability to do that. The color, the contextual color to the cards. So if this card if I want to make this card card danger or something like that, we'll see that now that particular card should go read. It should take the danger colors that are associated with it. We also have card decks. So these air similar to card groups, eso working the similar type way as the card group. But we're using another container outside of it s so I'm going to just update this to be card. So it's called Card Deck and the container for that is called Kardec rapper. So I'm gonna update it probably won't see much of a different cause. There is a slight difference to this. Essentially, the difference between decks and groups are that Dex aren't attached eso the cards inside of the deck. They're essentially they're not attached to each other. So there are just some spacing differences. And really, there's just some subtle, slight differences, so they're not gonna push them in line and get rid of that space. And that was in between there. And another really cool thing that we now have with cards is the ability to do card caught card columns. And this allows us to the cards in a better four months. I'm gonna get rid of this deck rapper, and it's called card columns. So I'm gonna just update this one to be card columns. And the idea is that we have multiple cards in there and that they stack appropriate appropriately within those columns. So I'm gonna add in some additional cards now. So, class, So I'm gonna make some really simple ones here with maybe just a little bit of content here inside of it. So give the first card walk just to divide up the different content and then I'm gonna do another Devyn here. So a lot of lives, But this isn't This is unavoidable. If you want a structure it properly, you really need to work with the dibs and have the dibs and spans really space at your content accordingly. So this is going to be a current title because we do want break everything apart into different blocks. So title and then we're gonna have our card text. So that's going to give us just a really basic card there. So it's and I'm gonna add maybe a couple card blocks within this card. So you see what this looks like now? So see that what's happened now because I've added an additional cards they're automatically stacking in this mason retyped fashion, which is really neat because a lot of times when you're creating content, you want it to be presented in this really nice made similar type fashion. So it doesn't matter how many I add in, especially when you're adding them in dynamically. You see now they really align really well, and that's what card columns does. So this by far is probably one of my favorite features With the cards is that it's stacks properly and it stacks itself within this May surgery type fashion. And then, of course, we still have all those options where if I want Teoh make this card card primary, so I'm gonna update some of these colors. So it looks really nice and need s o warning and so on. So now when I refresh it, so should have some different colors here and there. And then you see how really nice it looks with the headings and when you're structuring it with the images in there and everything is presented in a really nice fashion when it comes to the cards. So quite a lot with the cards, but well worth taking a look out and working with the code to see what you can do Teoh in regards to working with the Kurds. And again, this is really new to bootstrap for eso take advantage of it and utilize it because it really does help with the development process. And it's also when you're pulling out content dynamically and toe have its stack like this by default is just amazing. And it really simplifies a lot of the work that you're doing with Web development 18. 27 Nav classes in Bootstrap: one thing that every website needs is a navigation bar so that you have the ability to navigate to other pages within your website. So within this lesson, we're gonna look at how to create navigation bars. And the really neat thing about bootstrap is it gives you the ability right out of the box to create these navigation bars. So typically with Web development, we might be creating a new ordered list. And once your list items boat and every website needs a contact page, so contact and maybe I have some products to sell or something like that. So this is just a really typical lead page here. Eso these might might be hyperlinks as well. So you're not just update Thies to be hyperlinks, and I'm not gonna set them up to go anywhere right now, but just for demonstration purposes. So we've got this a Norden list and we want to turn this magically into a navigation bar with our bootstrap so all we have to do So we just got it regular on ordered list here. Eso going into the UN ordered list element and class update it to now and then we still have to make some updates to the various items so you could see that rate away. It removes some of that formatting there so that it understands that these list items are actually not gonna be on a Norden list. It's gonna be a navigation bar. So by default, it just stocks it like this. And there's really not that much that's that's available right now. But we do have the ability to continue to update those those links as well. Need to specify that we've got nabbed items and now have links in boots dropped for eso net . Bootstrap three never used these before, but in this case, we do need to specify that it's gonna be a knave item and another link. So we need to add to the list items a class of now item and in here we need to out of class of love. And this is so bootstrap understands what these are intended, what these elements are intended for. And I think it right out of right away was just adding that nav class. It did actually make some really nice updates to the code. So see what now it looks like so not a whole lot different. But now we're more more inclined. Teoh for bootstrapped Understand what the uses of these are so not Not a change there, really. But as we still continue to build out this menu So if I change this toe in line, it's gonna look more like a navigation menu. So typically you're gonna have navigation menus in line horizontally. You might have various tabs or something like that so we can set up a knave tabs as well. Instead of Nav, I can do love tabs and see that this is going to transform all of these items. And that's why it's important that we do line those up initially. Eso that bootstrap understands what each one of these classes are designed and supposed to dio. So you got to keep that or should be knave tops, not math tubs. That's why that wasn't working up. So see that we've got thes navigation tabs and let's say one of them was active or something like that, so all we would have to do is add an active class to it. So maybe if this one is active and this would typically be done dynamically so we see that it does this kind of bevel around it that we can see that this is the active one. We also have the ability to do now pills. So these are more button type of navigation bars, navigation items. So see that the active one it gets that that active value there. We can also add in different options here, a swell for drop downs and so on within our navigation menu. Quite a lot of options when it comes to building up a navigation menu. And in the next lesson where you take this one step further and build out a typical now bar that's used in boots drop. So it's coming up in the next lesson. 19. 29 Create a navbar with Bootstrap and customize it: So let's transform the code that we had looked at previously where we had created a knave out oven on ordered list navigation bar. And we're gonna take this one step further and actually create a real navigation bars. We're gonna use the each team of five element knave and we're gonna play a class to this. And the class is now Blart and this is gonna wrap around that the rest of the navigation bar. And we're just gonna change this to Nav Bar and said it as the navigation of the knave bar . Let's take a look and see what has changed. So we refresh it. We see that it looks very similar. Essentially, it's created this navigation bar for us to use within bootstrap. Let's take another look at that code and see what else we can do. So we do have a lot of different options for the knave bar from what we can do within the knave bar. So we've got the UN ordered lists that we're going to be using by default, So I've already set all of those up. We got an active one as well and so on. And now we need to add some color into the snack bar. So typically with bootstrap three when we had a few options for colors so we could do with , ah, light color. We could do with the dark color, but with boots dropped. Four. We've got some more options. So I am a started by just doing a default. Now bar and sitting up to the late color and just sitting background feed it. We'll see what this does now. So when I refresh it, we see that we actually get this knave bar and we've got our links and and so one. And if we wanted to add in some branding or something like that, So let's take some branding there for a website. You can see we've got that branding there that's being attached there. I need to put a class there around that. So this sometimes you'd have it as a hyperlink, maybe to the home page or something like that. So class equals now bar for Rand and bootstraps gonna know what to do with this. So I'm gonna set this up as branding there and save that. And now when we refresh it, it's gonna b'more in Ah branded part of the drop of the now for we can also we see that we've got our active one. There is set to be I highlighted there. We also have the ability to pull them eso just as what we were looking at earlier in the cards we can pull to the left, we can pull to the right. So if I wanted this to be pulled over to the right so I can do pull MD and right and we go back out and refresh this, it's gonna pull this content over to the rate is just really easy to work with these navigation bars. So just this week did the light. We can do a dark and we can invert the background and so on. So we need to still invert the background, because so instead of faded, we're just gonna do background in verse. And a lot of that the classes just really makes sense. When you're working with these with these, these different boots, drop classes, lights, just the typical ones, so we can set different backgrounds. So instead of background, we can set us primary, so we have the ability to apply it to the navigation bar. We can apply it to wherever we want it and as well we can do custom colors now as well if we wanted to. So we were not limited within bootstrap. And that was one of the things with boots. Drop with sport. That's three that we always used to always have. Teoh. If we wanted something different, we want a different navigation bar color. We'd always have to apply that. So now we just need to worry about navigation, dark or light. And that's gonna take care of styling the CSS for us. And we can just go into our CSS and adding of background color, so picking whatever color we want. So let's say if I wanted this quarrel color now, I can go back out, refresh it, and we see that I've got the core of color, and if I want it black text, I can fix that as well. And also, I do have some more options with the nav bar as well, so I also have the ability to fix it to the top. I can fix it to the bottom s. So this is another new thing that's really neat with bootstrap that we now have the ability to figure out where we want our nav bar to sit. So previously it was always a challenge. Teoh, if want to have it sticky at the bottom or something like that s it want to have a really neat, non typical design? It's always a challenge. But with this new version of bootstrap just this easy. So I could just move my navigation bar to the bottom and vice Versi I could do it to the top. A swell. It's not sure that was a word, but we can move it to the top as well, and this is going to stick it the top. So no need now to worry about how to make it sticky and so on. So the next lesson we're gonna build out how to make it collapsible s. So this is also taking care of and built in within bootstrap. So right now, by default, we, even though the rest of the bootstrap content is responsive, it's not as responsive as we need it to be. So we ultimately want this to stock, and we want to have a pop open menu when we select our menu items within a navigation bar, so that's going to be coming up in the next lesson showing you how to build out that navigation bar. 20. 30 Add collapse function to navbar: One of the great things about bootstrap is they really have thought of everything, especially when it comes to navigation bars. So typically, when you have a navigation bar and your re sizing on different devices, maybe when you hit a certain break point, you wanna have a collapsible content menus of something else that pops up here, maybe in the right or left hand corner that you can toggle and open up all of the menu. So and this is really easy toe add in. So we're going to just take that navigation bar that we created in the last lesson, and we're gonna add in, ah, button in order to toggle the content. So this is actually going to go within the nav bar itself and all we're gonna do, we're gonna simply add in button and give it a class and call it knave bar toddler, and we believe it as a type button. And this is the important part that data toggle. So what it's gonna do when it toggles it. So we wanted to collapse, and then we need to set a target. So data target is where we set up the I. D of the collapsible content. So and then we're going to give all of this content here that we want to collapse. We're going to give it an I. D. So this is where we can specify the i d that we want to make it collapsible by, So I'm just going to give it. I got a call it main menu and just close that off. And in here is where we set our icon for the collapsible content. And then we need to have a Nikon Sinus going to use this character here, and we'll just take a look at it and see what this looks like now. So you see that we get this icon for the collapsible content does not yet hooked up yet, But it is. It is the icon that we wanted. And we want this to show up whenever we get to a certain size, and we want to be able to hide it. That menu once we hit that size a separate div for that collapsible content. So maybe if we only want to collapse that content below the main nab our brand, Maybe we want to keep that and we'll just pull this over to the left afterwards. Eso here, we're going to set up a day if we're going to give it an I d. Of mean menu. So to coincide with the target data there and put this at the end here. And so this will indicate what part of the content we actually want to collapse. And we're also going to give it a class, and the class for this one should be collapse. So again, it coincides with this button and check this out now and we'll see what happens. So now whenever we click it, we see that we've got this menu popping up and were able to collapse that menu. So ideally, what we want to do is we wanted to toggle depending on the size of the screen. Ultimately make this responsive. So I mean, we could do it several different ways so we can keep it as this and just have it always as a toggle menu so we can toggle it open and close it, and there's various uses for that as well. But ultimately, we do wanna have this collapsible, responsive menu, and I'm gonna be showing you have to do that in the upcoming lesson. 21. 31 Create a responsive Navbar: in the previous lesson, we had showed you how to build a navigation bar. And then the last lesson showed you how you can make this collapsible and respond to click on this button so we could hide it and show it, and we attached all of that functionality. Now we want to make it responsive. So the way to make this responsive and bootstrap has this covered as well. So it's got this really easy classes again that give us the capability to hide this bar. So all we have to do is do hidden and this is what we had looked out earlier. So anything small and up, it's gonna hide this button that makes that gives us the ability to collapse. And then over here, always to do is out in another class and make this now bar how gullible excess. So that will only show up and make it that we can toggle it when it's X s. So anything above excess this isn't gonna show up when we shrink it down small that we're gonna have the ability to you toggle this So it's check this out and see how this works it now. So refreshing it have that toggle bar. But as we shrink it down, we see that we get that toggle bar, and we do have the ability to now to toggle our menu and see it once again and as well hide it. So this will work in Mobile. And now we've made our navigation bar responsive. And of course, there's different things that you can do now with the navigation bar so you could change the way that it's being laid out as well as the different properties. By just updating and adding different classes into the navigation bar. Add one more thing to this and let's pull this over to the right. So we have looked at this before in the code, and if in this course where we want to pull over a certain item over to the right hand side and we actually want to only place it whenever a break point is an excess, so because we're only showing it when it's excess. So we've setting a break point excess and we're pulling it over to the right when we hit that breaking point. Now, of course, we can always do it. We can set this up in a number of different ways. But usually you're going to see this type of format where you've got your navigation break point over here on the right hand side, and then you click it. You see, the toggle menu is one of the things still we need to take care of here because these really aren't aligning that great. And I mean, it does look flying whenever we've pulled it out here and we've got a full screen, whatever. Shrink it down here and click it, then we ultimately we wanna have this may be a line horizontally and add separate roles for each one of these navigation items. So in this case, if we do want to make some updates to it, we have to update some customization to our styling in order to make it stack horizontally . And we're going to use the media query and we're gonna set Max with. So this is gonna be on small screens, which is 34 PM and then within here is where we need to float the stock them over to the left hand side and we just selected with the classes in order Do that stacking and we want to select all the nav bars now and now items So all of the knave items and we want to remove any floating to it. So I'm gonna turn it into float none. And we want to move over that margin left. So see what changes this implements to take a quick look at that. And now, whenever we so we don't have quite the changes that we need quite yet says a few other styles that we have to add in So one for the now bar and for also for another bar now. And we need to set that float to be none and also gonna do important. So now we'll see if that's made any difference. So still not yet. And still, one more thing. We need to update for it in order to make it work properly within a styling so set up now bar and then select the class collapse in and also select out nav bar collapsing. And we got to clear both of those. So we just need to do a clear both. And now let's check out and see if that's done anything different. And now we see that we are aligning it to the next available line. So it's not. It's not exactly messing up in there that it's stacking them, and we've created some additional spacing there, but 100% exactly what we wanted to do. And there is an error here when I'm looking at the CSS and see that nav bar knob is actually the class that I want to access. So its nav bar have. So we need to look at that one there. And so this is the actual class that we want access. So there is a little bit of a misspelling there. It's gonna update that Save that and refresh it. And now we should have our typical what you might have expected from Boots dropped three. Where we've got this drop down menu and it's it's a horizontal menu, and it's taking up the full with. So this again is more mobile friendly. And of course, we can update our colors here as well to make it maybe a little bit more compatible with what we're trying to do. So I take this dark blue color, and so the orange color will go back out and refresh it so that stand, say, with a little bit more. So the next set of lessons, we're going to continue to build out this website and starting with our first navigation bar, and then we're gonna build it some more structure into the website using bootstrap. So it's coming up in the next set of lessons. 22. 32 Setting up breadcrumbs in Bootstrap: another really useful component that's available in boots. Drop our bread crumbs now, breadcrumbs. You'll be able to create similar to the way that we did the navigation bar where we create ordered lists and we create a bunch of list items. And from here is where we can start to build out our breadcrumbs. Eso All we need to do is specify that the class is bread from on the parent, the ordered list. So take a look at this now and we're going to see what it's gonna look like. And we probably have to move this down now because we've got our main navigation bar there . So we need to start our content slightly lower because we're not able to see it because the navigation bars taking that over. So if I was actually to remove the navigation bar, I'm gonna bring that back. But just to remove that, we see that this is where we've got our bread crumbs so we don't want that navigation bar to hover over our content. So I need to take care of that and move everything down. We're gonna have to jump back into our CSS and make an update here to the styling. And as I said, it's really good toe have this CSS styling so we can do have the ability to make some updates. Teoh the styling in order to comedy. Some of our customization is here in Bootstrap. So the first thing I want to do is add some just some default padding at the top. Somebody would go something like 60 picks, adding it to the top. And also I want to add it to I want to maybe cut it down or move it down whenever we hit the smaller sizes. So maybe here we can do body padding top, and we can make some adjustments to that Eso instead of padding top 60 made weekend with patting top 4 30 So some of this you have to kind of try out and see how this works suit. So going back into here and I've got my nav bar backs are gonna see that and refresh it. And now it's gonna look mawr compatible, more like a breadcrumb, and we can continue to build out and work on our website here. Eso Now we've got this bread crumb class and we can continue to add additional bread clams in. So our main first part of a breadcrumb would be our home page, and then we could build out the links to the home page. A lot of the stuff to you'd probably be doing dynamically as the Web page gets built out, but it's always gets good to know that bootstrap has you covered. It has all of this capabilities all ready to go. So I'm going to just get rid of that one and add in another item here within the list. So this one would be close, close, active. And maybe we've moved in and we're looking at some of the products, so this would be products. So let's take a look and see how this looks. So now we've got our breadcrumbs set up and we can see how we can begin to navigate back to our home page after the breadcrumbs. So we're going to continue to build at this website eso coming up in the next lesson and look at some page nation page a nation eso. This is another really useful feature and bootstrap because oftentimes styling for this can get fairly complex and boots drop again. Has a really easy way to get this out and done, so we're gonna look at that in the coming lesson. 23. 34 Pagination with Bootstrap: So let's take a look at adding some additional styling. One update I did want to make Teoh are CSS is to change nav bar dash fixed dash top to be the dark color blue instead of just now. Because I want actually reuse nav as a tag here in order to create the Page Nation because I think it works really well as the container within nav. And then we're gonna create on a non ordered lists there. So that was a way to make that unique and really, Eisley, that our navigation bar because we don't want apply this background color to this part of our code. So we need to set up the class pagination and then within here we set up all of the different list items and then they're going to get a class off page item. These again, are these default classes that are already preset within bootstrap, and they give us the ability to really easily add these in as needed and utilize them within our court. That's creating a hyperlink here, and I'm going to give this one a Kloss, and it's gonna be page link. And so maybe if we had one and create a bunch of these as well. So maybe this one is, too. This one is three this oneness for this one's five. So you probably would want to make this dynamic when you're building out your code, so refreshing it. We see that we've got this ability to add the's page nations in, and we can also add in the first part there. So if we wanted to do something like this some, sometimes you'll see that less than sign. Sometimes you see the greater than sign at the end and so on. So all depending on how you want it to set up, I'm gonna refresh it. And we see that now. We've got a really nice, proper looking page index there, so it's all going to the same page. But now we've got a more formatted look. So next lesson. Continue to build this out and add additional, really useful components that are pre built in boots. Drop onto our Web page 24. 35 Adding Modals to your website: this lesson. We're gonna build out our website on a little bit better. Eso We've typically got our menu up here, so it's all responsive. Everything's responsive and we do need to fix that. So let's update this, and we might not necessarily need to do padding 60. Try that ate into Patten's 50 and see how that looks in mobile. So does look a little bit better. And so it is more functional. So maybe we might even want to hide the breadcrumbs when we shrink to a smaller screen. So this is all up to you. However, you're designing your Web site. One of the thing I did want to add in so usually the page nation I want to put at the bottom eso want odd in another def here. And I wanna have border promotional cut Taina, def. So I'm gonna use that jumbotron that we had looked up earlier. So Jumbo Tron and I play some content in here, so this is a really good place to get people's attention, so welcome. Joined now or something. So we have certain promotional messages there, and maybe here we've got a little bit of content for now. to win big or something like that. So we've got this type of format on our website. Maybe we're trying to sell something s Oh, this is a really good way to get attention. And this is a great place to add in a motile or pop up window or something that people can click and taken action. So a great place to add that call to action And the really good thing about mortals or bootstrap is that you can really add these models really easily and bootstrap. So, you know, I just show you how we can add a mortal and and essentially, this is javascript, and all we need to do is set up a button where we want this motile to take place. So I'm gonna add in, Ah, button and type is gonna be button and class. So this we're going to go back to what we had looked at earlier and maybe just keep it as a primary button and then still, within the attributes of button, we're gonna do button toggle and want to toggle the motile and just like the navigation bar , we have to add in a data target and this will allow bootstrap in order to target a specific piece of content that we want to act as a motile. So we're going to give it an I. D. I just got a call it my motile and whenever this gets clicked, well, bad some sign up there or something like that. So let's go back out to our Web page. Refresh that, and we see it got the sign up, but it's not doing anything yet. So this is where we can add in that motel content and the motor content doesn't actually have to sit within the rest of the Web page. It can act on its own because it's gonna have its own positioning done, be a bootstrap. So we're going to give it our I. D. So my motel is our default. I d. That we're calling to it, give it a class of motile and maybe wanted to fade the action that we want to take. And we have to specify its role, so its role is gonna be dialogue. And then within here is where we're actually going to set up that motile dia glogg so active class. And this is where we can have our sign up form or any number of different actions we can we might wanna have here. So I'm gonna just put a police holder there, show you how this is gonna look now, so we still we don't have it functioning perfectly yet. We see we got the sign up form shows up there. But it's not exactly as we need it, cause it's still not performing properly. So it's something to make a few adjustments to the code rock this dialogue in another defined a lots of dips that were going through. And this is actually not rate to be mortal dialogue there. So that was a misspelling there. And within this class, we're gonna add this one as mortal content and see how this turns out house when I refresh it and click this button. So now it's starting to look more like a mortal, but it's still missing the close buttons and still missing a few other things here. So it's missing like a header and some additional information. So this is going to be another day if that we're gonna be outing and give this one class of motile better. So see that this is going to do now, so refreshing it. So she makes it look a little bit more like a motile. We see that's formatted properly there as well. And I'm gonna actually place another rapper around here. So going to do class schools, motile body. And we do have to specify all these because we do see that when we're not specifying it properly, it doesn't actually, it's styled properly. Eso just refresh that and now it should start looking a little bit more like a motile. And, of course, we need to add in a footer as well. So one more def to complete our mortal. And there's a whole bunch of customization is that you can do with it as well. It's a motile footer and then within the footer. This is where I want to add in a button to actually to close the motile, because you do want to give users the ability to close it so they can open it, and you also want them to be able to close it. So I'm going to give it a class of button, and this is just again these default buttons. Eso maybe we can do something like warning or something like that. So it's a red button and one were a tribute to their so data dismiss. And we want to close down the motel and maybe just do done or something like that. So let's take a look now and we'll see how this is gonna work. So refreshing this and we've added in this footer here. So we've got a nicely formatted model and we can continue to build on this s O. Now, whenever the users done with the message. So maybe this is an additional marketing message, a call to action or something like that. So what are the users? Complete it. They can just click done and close that off and continue with the website. So the next lesson we're gonna do some mawr G query functionality that's gonna be available within bootstrap and, of course, for motels toe work. If I was to actually get rid of the JavaScript library, you can see that the mortal isn't in a function. It's not gonna fire off because it does rely on that JavaScript library in order to fire off this additional functionality. So next lesson, we're gonna build out a carousel which is another really cool feature that's available within boots. Drop right out of the box that's coming up in the next lesson. 25. 37 Carousel setup in Bootstrap: in this lesson. We're gonna look at boots, drop for carousel. So there has been some changes with bootstrap carousel. Now, instead of just item, we're identifying it as carousel item from bootstrap three. So that's one of the major changes here when it comes to care cells and the rest of the code should be fairly consistent with what we've seen before in care cells. So I'm gonna go ahead and start building out just a really basic carousel in bootstrap eso . The first thing that we need to do is we need to identify that we're going to set up a caress else we need a container for. It s I'm gonna do that just under the Jumbotron here and I'm gonna do def. And this is gonna work within that same type of format as it previously did when it comes to the carousel. So we've got carousel inner, and we've got the carousel indicators and all of the different carousel functionality that's available. So the first thing we want to do is give it an I d. So I'm gonna just call it my carousel and class. So this is our main container for the carousel I'm gonna call this one, or this one needs to be called care of cell to keep trying to add in an extra l there or an extra s. So Carousel Slide and Dida right, equals care. So this is setting up that initial container for the carousel, and now we're just going to set up the inner carousel content. So Kloss and this is gonna be care Carousel in a And now, with boots dropped, they've really tied in the class names, and they've made it more logical and easier to toe work with, because they just make a lot more sense now. So the role is gonna be a list box. This is where we're gonna list all of those items within the carousel and to create an item within the carousel. So this is div Class and Care Carousel item. So whatever the starting one is, that's the active one as well. So you could throw in that active class there, and then we need to add in some images, So I'm gonna pop on over to Laura, um, pixel, and I'm gonna add in some images here just some default images for my active items and maybe I'm gonna have another one here and want to make them a little bit difference. I've got ability for sports cats. So gonna change these up a little bit, hoping that this theory Earl right there. So, cats, I was check this out and see how this looks so far on her website. So we refresh it. We don't really exactly have that carousel effect quite yet. Eso It's still need to add some additional functionality and here in order to create the care sell out of this, let's continue to build this out. Going Doc Teoh are are a source code here. So just making sure that I've got all of the correct spellings. Here s Oh, this is inner. This role here is a list box, these air, the active items and we're also gonna create the carousel indicators. So those air those indicators that are just below that helps you navigate through the care . So this is gonna be done with an ordered list. So these are caught care, so indicators and then these air just gonna be the list items are gonna be data, and we're sitting up those data targets again, so we need to specify that we're targeting that my carousel. So my carousel is the target, and then we just need to specify the slight that we're going after that. We want it to navigate to so data slide dash to and then we specify the slights in order that we wanna try to select them from. And again, we're simples went to class active and close up that list item and then create one more there. So the same target data slide is too. And we're gonna get rid of this class active because we're not going to need it anymore. So let's take a look at this and see how this is starting to look now. So we do have those They did pop up there, but it looks like we are still having some issues with the set up of it. Let's go back into the source code and sort this out. Why? It's not showing up properly. He's one of the things that I just realized here is that I've got to active carousel items . So once we removed that, this should fix up some of the issues that we're having there, and we're just gonna add in another item there and data slide to to and let's go back it. Lauren picks. So see what other options we have here Some. Maybe we just do a city for that one so that we do have all different images there. So it's going to our Web coat and refresh it, and we can see that now. We do have our carousel items, so those aren't hooked up yet, so still have to add some additional work. But it is starting to look more and more like a carousel, and we see that it's automatically scrolling eso. This is typical of a carousel, so probably want to keep this type of functionality. So let's go back into our source code and take a look and sort of why our navigation buttons are not clicking through. So we're doing data slide to zero. We've identified the carousel as well and just say it. Make sure that it's spelt properly, so the data target is the care cell there up our styling and one of the things we do have. The carousel indicators are there, but we actually can't see them. They're ah, they're light colored, so we do need to make them darker in here to be able to see them so I can add in different styling for those I believe that was carousel indicators. There s o add some styling to that parent class and maybe we just want to add a background color or something that us we can be able to better differing sheet those buttons back out here. And now we're gonna be able to see that we do see them, that they are now more visible. And of course, we probably want to do something different there. So we want to maybe try to look, to invert those instead into our boots, drops styling, and we're gonna isolate out, uh, to the list items. And this is where we're gonna set that background color to ally. And we should also set one for that active class. So we might want to set for active. We might want to set a different color. So save that and we'll go back out here and we'll see if it looks a little bit better. So now we've just got these kind of these buttons here, the indicators and now we can finish off by building out the rest of the navigation here where we've got those left and right navigators for the carousel items. So we're gonna just do that just below here and build that out as separate classes. So this is gonna be a Kloss and left side and bootstraps gonna be smart enough to know what we want and where we want to position themselves. We left and right are built in default classes, so it knows what we need to do with that. We need to identify the my care. So that's according Teoh the I. D. So we're gonna link it to there and then the role for this is gonna be a button and we're gonna do data slide and we're gonna slide it over to the previous slide. That should be data slide. And this will allow us to once this this link, it's clicked. Then it will move it over to the previous slide. And this is where we can add in some icons. Eso we do have span Kloss and we can do icon previous. It should be icon previous, and this will add in that icon there and then we're gonna also do one for the other side. So this is gonna be opposites. It's gonna be right. It's going to control. And the data side is gonna be to next, and our icon is gonna be next step of previous. So it's saved that and check the city and see how this works so that we see we've got our ability to navigate those through weaken, move through all the different carousel items And one other thing that I do want to still add in. I want to update these image classes, and I want to update those to be fluid is gonna be I am G fluid and at that same class to all of these items so that they take across full with that's available to them. So I'm gonna update the CSS and go in here and select that particular class. And that was the carousel item. So it's caress, Oh, item. And I want to select all the images and make them a with off 100%. And that way they're gonna take up that full available with That's in the carousel. So that makes our carousel nascent big and really nice and functional there. So it looks really Mason presented here. And of course, this is gonna be responsive as well. So as we shrink down, that carousel will as well shrink down. 26. 38 Update Bootstrap website: we're gonna need to add in some dummy text now in order to finish off our website and really make it completely bootstrapped friendly. Eso I do need some dummy text and also, I'm gonna continue to style out some Maura additional pieces of content here that we're gonna be utilizing eso. First of all, we want to divide up our website via sections. So we've got our mean div That's our container class. So this is gonna be wrapping around that entire piece of content and we've got a navigation bar. So what I want to do is set up a separate section here and this is gonna be my main content or whatever we want to call it is going to give it an I. D. So in case I do need to identify it and I want to break this apart from the rest of the the content that I have, So bring that into there and save that and I might want to even break apart these into additional sections as well. Eso This is something that again it's it depends on what? Your preferences, How you want to break apart all the different section pieces of your website eso for now. I'm going to just leave it as dibs here, and I'm gonna add in another div here which could just as easily be a section. And this is gonna be Quanis. So I'm gonna add in some rows of content. So is that what we've looked at before with the rose? And within this role, I'm gonna add in two dips. So one is gonna have a class of Cole s um nine. So this is gonna be where my main content is gonna set, and then the other def is gonna have a class off coal sm three. And then this is where some side content considered. And as we re size our page, then we're gonna make this this this stuff stack when we get on the small screen. So now I need to get some content and I like to use blind text generator. It's just really easy to use that we can add some text here and add a few paragraphs. Maybe increase the number of words there on display those paragraph tags so they can have that paragraph text go back into my code and in a dump. This into here and I'm gonna generate maybe a few less words and cut down the number of paragraphs there. So just have the one paragraph of text, because this is gonna be a smaller container, and I'm gonna show you all the really cool things you can do with your text. And Bootstrap is now We've got some text down here and we can add some additional styling to it s so we do have the ability to do some text alignment eso we see by default. It's all justified text. So we can also, um, we can make some updates to that if we want, so we can have the text left, right center, as we've looked at before, also depending on the size. So over the breaking points are So if I wanted to add another class in here and I want to do text and I only want this to maybe two center what's s M? So I'm gonna add in that at some center there, so it'll look slightly different whenever I resize it. I can also transform my text. So let's say at another paragraph here. And so I'm just gonna right upper case and I can do transformation of the text. This is all within boots drop so I could do like text and I can capitalize it. Or maybe I want to just change all of this to upper case. I'll take a look at this now and show you the transformations are being done so we could see that we bootstrapped takes care of up upper casing it. We also have all of that font weights and all of this has been changed into classes. Eso if I wanted Teoh out of span here and I want odd. Maybe I want a bold out this text so I can do font Wait, so I don't have to go into CSS. And the whole idea is that you want to really save that time of traveling in and out of that CSS file and with bootstrap that makes it really easy to add styling so I could add in bold to it, so refreshing again and check it that it's bold now lights adding in bold Aiken do colors as well called colors and background colors. Eso just gonna update some of this text here. So maybe at another span here, I'm just adding in these randomly just to demonstrate all the really neat things that could be done. So going back Teoh are color scheme eso We've got access to all of that, uh, color capabilities that's available within bootstrap. So if I want this to be warning text us, this is going to turn slightly orange s We have that warning text that we can make that we can also add in backgrounds. So if I wanted to have so going to do another span here and I'm gonna do class and much like what we've been we've already been looking at quite a bit of this before where we consent the background classes. So this is just thes thes. Different classes and utilities within boots drop utility classes that at all of this really cool functionality. So you see here were able to highlight text and and so on. So we also have the ability to add in difference different floats so we can float on eso. We saw that we can pull left and we can pull right, but we also now we have the ability to go responsive with polls. Eso if I wanted Teoh if I had a little bit of content there and might want to pull it to the right or to the left. I could do that within the classes, and I can specify when it happens so I can pull when it's sm, and I can pull this over to the rate I'm just trying to make it so it looks a little bit different. And of course, we could also center content as well within boots. Bootstrap. We can also make eye content invisible, so I know we're not gonna be able to see this. But if I do class and if I just do invisible that will hide that class there, let's take a look and guess invisible we won't be able to see. But we can see that there's that space there, and so that makes it hidden. Eso difference between hidden and display. None within styling is that when we do, hidden was still reserving that space, so I guess we can kind of see that that is available within our styling. It is quite a bit to play with with bootstrap, and this is a really good starting template that you can start off with and work with. the source code and create your own versions of boots dropped for. So I do encourage you to take a look around and see what's available and really get a feel for how easy it is to build websites using bootstrap. And a lot of that styling is already done for you, and all they have to do is call to the specific classes that you want to utilize within your code. And it's just that easy to bring in all this amazing functionality within boots drop.