Bootstrap Migrating from previous versions | Laurence Svekis | Skillshare

Bootstrap Migrating from previous versions

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (1h 36m)
    • 1. Bootstrap34

      1:36
    • 2. 1 Bootstrap migration introduction

      4:18
    • 3. 2 Bootstrap Migration Course Setup and Global differences

      3:56
    • 4. 4 Grid System Differences between Bootstrap 3 and Bootstrap 4

      12:18
    • 5. 5 Offset Differences

      2:56
    • 6. 7 Bootstrap Tables Changes

      5:44
    • 7. 9 Responsive Images Changes

      4:49
    • 8. 10 Image border options

      4:36
    • 9. 12 Thumbnails Wells Panels vs Cards

      6:53
    • 10. 14 Nav Differences

      6:26
    • 11. 16 Navbar differences

      9:48
    • 12. 17 Navbar options hiding

      7:28
    • 13. 19 navbar comparison

      9:11
    • 14. 20 How to update Bootstrap 3 Navbar to Bootstrap 4 Navbar

      7:52
    • 15. 21 Favorite components comparison

      5:02
    • 16. 22 Course Conclusion

      3:10

About This Class

Guide to understanding upcoming change with Bootstrap 4 and how to upgrade Bootstrap 3

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.  Bootstrap provides the ability to rapidly create modern websites that are fully responsive.

With the announcement of Bootstrap 4 many websites potentially will need to be updated.  In addition building current Bootstrap sites should be made compatible with Bootstrap 4.  Many students have asked me what they need to do in order to get ready for the new version of Bootstrap.  This course covers what you need to know for migrating and creating Bootstrap 4 ready websites.

  • Explore whats new with Bootstrap 4
  • See comparison between Bootstrap 3 vs Bootstrap 4 code for the most popular and commonly used classes.
  • Find out whats changed and what to expect
  • Learn about the difference and the new way of thinking about Bootstrap 4 web development
  • We show you whats changed, whats been improved and whats new
  • Images and responsive images have changed
  • Tables have new classes for even more
  • Wells, panels and Thumbnails are gone replaced with Cards see how they compare
  • Navs and navbars find out why Bootstrap 4 is better and more colorful
  • Watch how to transform a navbar coded in Bootstrap 3 to Bootstrap 4

Using Bootstrap has never been easier and it just makes sense.  I'm here to help you learn how to use Bootstrap and ready to answer any questions you may have.

Are you ready for Bootstrap 4, join the course and learn about it.

Transcripts

1. Bootstrap34: Bootstrap is the most popular HTML, CSS and JavaScript framework in the world for building Responsive Mobile first projects on the Web. Bootstrap provides stability to rapidly create modern websites that are fully responsive. With announcement of bootstrap four, many websites potentially will need to be updated. In addition, building current bootstrap sites should be made compatible with bootstrap for many students of asked what they could do to prepare for bootstrap for and how they can make their websites compatible with boots dropped. Four. In this course, I show you how how to explore what's new with Bootstrap for see comparisons between Bootstrap three and bootstrap for code for the most popular and commonly used classes. Find out what's changed and what you can expect to learn more about the difference in the way New Way of Thinking about bootstrapped. For Web development, we show you what's changed. What's been improved in what's new. Images and responsive images have changed. Tables have new classes for even more functionality. Wells, panels, thumbnails. They're all gone, replaced with carts. We show you how to compare and build out brand new components within bootstrap knobs and now bars. Find out why bootstrap four is better and even more colorful. Watch how to transform a knave bar coded in bootstrap three to bootstrap four to be bored, strapped for ready. Using bootstrap has never been easier and just makes sense. I'm here to help you learn how you too can use bootstrap and ready to answer any questions you may have. Are you ready to learn more about bootstrap for joined now and start learning about bootstrap for 2. 1 Bootstrap migration introduction: welcome to our migration course. Migrating from boots dropped three to bootstrap four. So this course is designed to outline the differences between the two versions of boots drop and to get you ready to in prepared for the newer version and to show you how you can update your source code in order to make it functional for boots dropped. Four. My name is Lawrence, and I'm gonna be instructor for this course, and I'm so excited to have the opportunity to present this course to you today. So my background is within Web development, have been a Web developer for 18 years, and I've built a lot of applications with boots drop. I really enjoy working with boots drop. And I think it really just does make the website design and development process. Ah, lot quicker. I add in the bootstrap library at every chance I get. And I really utilize a lot of that built in functionality within bootstrap. So the way that this course is structured, we're gonna take it step by step and show you some of the most major changes of the more popular components within bootstrap and obviously between boots dropped three and boots dropped four. There are gonna be differences, and we can see them being displayed out here on the left hand side where we've got boots dropped three. And we've got similar source code in Bootstrap four. So essentially, this is an updated version to make it bootstrapped for comparative compatible. And immediately, we do see that there are some differences, especially the way that it handles the sizing of the web page. So depending on how much real estate we've got here in the Web page, we get it sized differently. So the good news is that a lot of the built in functional that we really love with bootstrap is kept within boots, dropped four. So there isn't a really need to worry about that. You're going to be missing certain functionality. And when you migrate to boots, drop for it's just not gonna be there. Something that maybe you've gotten used to using. Some of the components are gone, such as panels, and that we've got here on the left hand side here. So we've got panels, we've got thumbnails. We've got wells as well. So thumbnails and wells. So this is gone. But bootstrap has actually supplied us this something even better and those air carts. So this is an example of the same or similar type of content within a card. When we also look at images, there's definitely a difference of images. There's difference between the navigation bars and how we present those navigation bars tables. So we're gonna be covering all of this and a whole lot more within the course. Some of the other major changes are how the grid structure is actually set up and displayed . So these are some of them, or major changes between bootstrap and not to worry, because the grid structure is still intact but has been made even better. And also some of our favorite components, such as mortals. They're all still available within bootstrap for so we don't have to worry about it, but it is displayed slightly different. So it's important to be aware of the fact that the styling with bootstrap for will be presented different or slightly different than what we see within Bootstrapped three. And within the course, I'm gonna show you what the differences are. We're gonna take a look at the source code between the two, and we're gonna do a comparison, and I'm gonna show you and highlight the different classes. So the classes that have been a removed and the classes that we need to add in, or the classes that we need to make it updates to in order to make it compatible with the newer version of Bootstrap. So all of this source code is also included as we walk you through the migration process between bootstrap three and Boots dropped four and as well with bootstrap for we're also gonna have a lot of additional options and boots drop for. So this is one of the really nice things. But Bootstrapped four is because they've made it a lot smarter, and we have more control as Web developers when it comes to sizing within the grid system and colors. So those are the main changes and advantages to switch into bootstrap for, because you get more flexibility and more control over your Web design projects. So I'm gonna show you how to do all of this in the upcoming lessons. When you're ready, ready? Let's begin creating some amazing Web pages with bootstrap 3. 2 Bootstrap Migration Course Setup and Global differences: within this lesson. I want to illustrate what we're gonna be doing within this course. So essentially, I've gone over to the current and got in the current version of bootstrap three, which is 3.37 downloaded. It gets set it up on my computer, and I've also gone to boots, dropped four and got in the current version of Bootstrap for and immediately you're going to see that there is a difference between the basic files that were getting with bootstrap . Three between boots dropped four. So we see that we've got CSS. We've got fonts and Js for bootstrap three. But when we open up that folder, what we downloaded with boots dropped four. We've missing the fonts, and that's because the glitch cons have been removed for bootstrap for so these air no longer available, and they're no longer within that download file. Also, I've So it's basically set up an index file wearing in a link it to bootstrap three and have set up another index file we're gonna link it to Bootstrap for so this will give us the ability to better illustrate what the differences are between the two. So essentially also I've got open here on the left hand side, the bootstrap, three CSS files. So the unmodified version and on the right hand side, I've got the boots dropped four version for comparison. So now what we need to do is linked to these files. I've already got some text within here, so I've got a typical hello world, and we're going to see some differences between the two outputs. So let's let's hook up the links to that and show you what the differences are within the browser. So linking over to the CSS files, essentially, the path is going to be the same because they're both on my local machine, So you're not going to see much of a difference. Here s so we're linking out and the source file is actually gonna look exactly the same. But now it's when we go to the browser. So I've got bootstrap three running over here, and I've got boots dropped for running over here and immediately we do see a difference within the fought size because in bootstrap four, the default font size is 16 and bootstrap three. The default plot size is 14 eso That's one of the immediate differences that you could notice between the two different versions. And that's something to take into consideration because this could potentially be a fairly large styling change. If the thought size is larger than obviously, your taxes got take up more space on the screen and so on. So you got to be aware that there are differences within the fought size, as well as the way that the primary units are being handled within the bootstrap versions. So when we look at Bootstrap, three were handling the primary CSS file is going to be picks, so we see that a lot of the file sizes or the sizes that we're using our picks based and with bootstrap four, we're going to be using R. E M. So there's a difference in the units for the CSS that we're gonna be utilizing, so they might not be as evident when you're looking at the source code. But there is a slight difference. And as we know with the RTM units, they're going to be better off for different view ports and and different different sizing when we come to different screen sizes, so it's essentially made it more flexible as well as we've got line height. That's added in Esso. That's another thing to be aware of that when it comes to Bootstrap four, there is gonna be a line height difference between the text as well. So that's that's some of the major difference is that you're going to find and you need to take into consideration when you're switching versions. In the next lesson, we're gonna look at the grid system and the different changes for the grid system that have been implemented between the two versions. That's coming up in the next lesson. 4. 4 Grid System Differences between Bootstrap 3 and Bootstrap 4: in this lesson. We want to look at the grid system differences, and this is really huge because bootstrap is all about the grid system. So we want to be able to isolate out and pick out what the differences are within the grid system when it comes to migrating from bootstrap three to bootstrap for and some of the major differences. And luckily, there's not a lot of actual syntax differences. So one of the main difference is is that we've got a brand you tear added in. So with bootstrap with bootstrap three, we've got four tiers available to us. So we've got I'm gonna have basically build out of grid here and show you what the differences are and as well, I'm going to do the same thing over here for Bootstrap, for so we do have another tier that's been added in with bootstrap four. So that's the excelled here, which allows us tohave for extra large screen sizes as well. This there's been adjustments on where the breaking points par, so we go over to the boots dropped three. We can see that there is a difference between the way that it's handling those grid those grid values and the media values, but just opened up the browser over Teoh, where the grid system so we can actually see what the breaking points. And there's our brand you tear that's been added in so anything for screens that are actually larger than 1200. We've got an option here, and this is a really good option because a lot of times now that, uh even though before we were looking at small screens, there's a lot of devices that are actually rendering out content on really large screens as well. So we need to be able to accommodate for that. And as we get better and better technology, the screen sizes grow in the pixel sizes increase as well. So going and looking at what the differences are so immediately we see that we've got only the four tiers there, and I'm gonna try toe resize this so we can do a better comparison between the two so you can see that we do have some differences within the breaking points as well. And although the extra small eso we've got a breaking point here of really small size so 5 76 picks and below is where we've got the excess size. But over here on the bootstrap three, we've got a breaking point here off 7 68 for the small size. So this is gonna be a definite difference when it comes to how it's gonna be output. So not necessarily on the small sizes. They're not necessarily going to be the same between the two devices and as well when we look at the different sizes here. So the medium break point is where this thing s m break point used to be. So this has changed us well, and we see that the main container withs are different as well. So we've got essentially added in different container sizes on both ends, whereas the medium now is 7 20 whereas before it was 9 70 it's gonna been bumped down from the 9 60 value. So again, you're gonna have a whole different look and feel when it comes to your website went the way that it's gonna look when you output that content. So let's create some grids and take a closer look at this within the browser output. And also before we do that, I also wanted to add in that the way that the call of wits. So the good thing about it is we've stayed with the 12 columns. So if you designed your website with 12 columns, you're still ready to go when you migrate to Bootstrap. For although you're calling, breaking points are going to be different, and that's the main take away from the difference between the grid sizes. But when it comes to the actual withs that we're using, we're also going to be so the gutter widths air the same, which is good news, but I the way that it's handling the wits is going to be slightly different, because what Boots dropped? Four. It's also taken into consideration full with 100% with whereas boots stopped. Three. We did have some different limitations there, so it will also look slightly different within the columns as well. So I've also now I've copied in some rules here with a bunch of break points years. We've got excess break points, MD and so on. So now we can do a comparison here between the two values actually going to get rid of some of this commenting here because it's actually not going to be necessary for what we're trying to look at. So the exact same source code in Boots dropped three and bootstrap for Let's see how it compares. So now when I go out to my Web page, I can see that there is a difference here that the way that we're out putting that content and let's try to shrink it down a little bit and maybe a better way to do the shrinking down is through the Google Consul here, where we can make an adjustment to how actual with that we're expecting. So let's make this responsive, and we can actually specify here within the deaf tools what slides we want to make our output so immediately. The one of the things here that I'm actually missing is the View port settings. So I do need to add those in in order for it to become, to be able to display within the desktop. So I'm gonna go ahead and add not information in here within the head. Let's jump into here and I'm gonna do a quick update so that we can actually see it scaling within the browser output eso going back into here when I refresh it. So now we can actually see the scaling happening and so on. So this one, we're going to do the same thing here, so I'm going to refresh it, and I'm gonna do that same inspect here s so that we can set the different sizes. So now we've got them essentially at the same size. And if we shrink it down so if we shrink it down to 5 12 we see that everything is still the same and we only really get that breaking point there at the to 30. So the good news is that the default columns, although that the some of the sizing has changed, so that output is going to be relatively similar. Eso that's one of the good things about now with the new grid system is that they haven't really changed a lot, So you're not gonna lose a complete structural change. But you do need to be mindful of the fact that the breaking points are different and so on now. The big difference is where we look at that screen sought the different breaking points here. So with MD so about it, a bunch of MD call MD ones here, and I've added them within bootstrap three and boots dropped four. So now when we go out to our browser and if we refresh the code eso now, I'm gonna set at a certain breaking point. So we know that with bootstrap, three are breaking Point was at 9 92 where we would change that size. So maybe it's trying 9 70 there, and we'll do this one at 9 70 as well. And I've also said it to be view size of 60%. So the 9 70 is actually 60% of that s so that we can get a better look at it and see it on the screen. So there is an immediate difference here between these. Call the medium size ones because the breaking points are different and your website could potentially look different if you're looking at different sizes. So as we shrink this down and we hit that previously that sm breaking point, then we see that they actually do stack up. So there is a big difference in the way that this content gets presented between the two versions. And we also see that as we shrink it down. So once we hit our breaking point here, we've got essentially that seem. Look, So at 7 53 it's gonna look the same for Rmd size. But if we go larger than that, so if we go out toe something like a soon as we hit this breaking point past 9 70 or the 9 90 to Breaking Point, which was previously the Max for the medium sized devices, we get a completely different look and feel. But then, at a certain point as well, we're still looking the same. So bottom line is, it depends on what sizes you were looking at and utilising and how you're presenting that content on your Web page. And then, of course, with bootstrapped, for we do have that ability to add in that other value of excel for the even larger screen sizes. So there's one other thing that I did want to note as well. Eso. We still have the ability to do these fluid containers and the regular containers, so typically, when you're designing your Web site, you can either pick between a regular container size or fluid container size. So that actually hasn't changed between the boots drop versions. So that's that's good news as well, because that's one of the things that we really don't want to change s. So I'm gonna just update this. I'm gonna have one container and one fluid container. And then what I'm gonna do is I'm gonna copy out that source code as well for both of them . Between the two of them. Eso Originally we were looking at regular container size. So I've added in one container one fluid containers so we can actually see the difference on how it gets output. And I'm going to use the exact same code and bootstrap three and quickly go out and show you what the differences are so immediately. There shouldn't be a whole lot of difference there between the containers. Although we see within the bootstrap, the boots dropped four version are actual gutter sizes are different and this is also to accommodate the larger screen sizes. So another thing to be aware of that the fluid containers air stayed the same to take up full with. But we've got some gutters here within the regular container size that are adjustable as well. So now we've got 9 50 and we see that it's relatively the same. But there are some subtle differences, especially when we add in these breaking points, and we see the differences of how these various container sizes get handled. And there's another thing that if you're looking at this and you're thinking, well, why did r MD eight shift down to here? And that's because we've already moved on to the next size. So our MD's here are still taking up the full eighth, and here we're doing four. But what's happening is that we're actually shifting down between the different column widths, and we're also keeping in mind this while that we've added in this one pick border so that we can actually see where each one of these each one of these containers, which one of these each one of these ones is ending out. So if I was to do a quick update to the code, so I'm just going to jump back in here instead of nd eight. Let's update this, Sm because I don't believe we have any SMMEs. So I'm gonna update it toe sm, do the same thing here on the right hand side, save and save and now when we go out and refresh it, we see that we're back to that same format. But over here, which still looks the same because again our breaking point is going to be different. So the breaking point is going to come at 9 70 over here at that rate, were already on to the excess Xs sizes because we've hit that breaking point. So always keep it in mind that depending on which sizes you're using, it may look different depending on the size. And one other thing that I wanted to note as well is the offsets. So the offsets as well are handled differently within bootstrap for as they are within bootstrap three. So we're gonna quickly look at that in the upcoming lesson. How we can handle offsets of the grid system. 5. 5 Offset Differences: if you're offsetting your columns within bootstrap and you're migrating to bootstrap, for there is a difference between the syntax of the classes. So I just want to note that previously when we offset it, So if we offset it by four, we specify seal L to say That's a column we do MD for the size we specify offset that we want to offset. And then we says That's by the amount of columns that we want upto offset now with bootstrap, for they've simplified that they've removed out the seal l and they just allows us to offset it by MD for so they've simplified that syntax. So if we want to offset it and also keeping in mind that MD break point are, then D break points are different between the two versions as well. Eso no, we covered that in quite a lot of detail in the last lesson. So I just want to really quickly note that there is a difference between the offsets. So if I'm, for instance, if I am offsetting, So I'm gonna remove at one of these columns here, and I'm gonna offset it by m d four and do the same thing here and notice that we do need to specify that were offsetting. So the syntax is different. S we specify offset first and then the site, the break point and then the size. So we do kind of a different order here, and we do offset nd dash for So if you're using any offsets, make sure that you do make those adjustments. So now let's take a look out our grid within our browser here, and we see that we've got that offset here and we're not. So I just need to readjust the size here so that we can see the offset. No need to refresh it a swell. And I should have just the size here because I forgot I was within that responsive you. So we see that when we hit that break point. So at 8 28 we've got a break point of their of the offset, but we don't see that offset quite yet. Here within the bootstrap free three version, maybe make this a little bit bigger. So it's more visible. And as we adjust the size, eventually we're going to see are offset, happen and take place because we've got that offset set at the M D size. So once we get to the larger size that we see that offset taking place. So again, keeping in mind that the offsets air different as well as the breaking points for the grid , the grid sizes. So the next lesson we're gonna look at what the difference between tables is between the two versions, So that's coming up. 6. 7 Bootstrap Tables Changes: in this lesson. We want to do a quick overview of the differences between bootstrap three and boots dropped for when it comes to tables. And the really good news is that with bootstrap, for we just got more functionality with the tables, and we've got stuff that we can now do with tables that we couldn't do in bootstrapped three eso. We still have a lot of the same options where we can do table striped and so on. So let's take a look at this and I'll show you what some of the differences are so I can take this source code and I can place it within my container here, over on my bootstrap three version. So save that and just going to make this look a little bit better there, and I'm going to copy the same content over into my boots. Dropped four version, and we'll take a look at it within our browsers. So let's open up the browsers and refresh bootstrap three, and we see we've got a table eso nicely formatted striped as well, and we've got the same thing in bootstrap four. So I should make it the same size s so that we can actually better do a better comparison here. So maybe it make it 9 60 Do this one at 9 60 as well, and we see relatively the same I would put. Although we see there's there is some differentiation between how much spacing we're doing . Eso this again comes back to the line height and how much padding we've got on top in the bottom. But other than that, relatively the same type of output, we do see that we've got a slight darkening of the borders as well. So this is what the good news is when it comes to tables and with bootstrap four, we've got some or added classes for tables. Eso You can see that whenever we go into the source code here and we can we can look through all the different table options eso we've got relatively that's the same options there and with tables we can also add in. So I know there's ah, table in verse, so maybe I can search for that as well. Eso we've got table inverse So this is one of the classes that got added and we don't have this this particular class within our bootstrap three. So let's add that into our source code. And I see what that looks like. That's a really need function, because this gives us the ability. Teoh inverse the table eso going into boots dropped four. We get to inverse the colors of the table s. So that's a really nice effect. And, of course, bootstrap three. We didn't have that that capability. So a lot of the same functionality still is there. We've got the ability to control the table. So if we want to, we can inverse the table. And we've also got ability to inverse the head information. So going into class here, I can inverse the table had and this is a really makes option that we can inverse the table head. So actually going to just copy that head class and place that into over here s O that will give us stability to inverse the table head. So now when we go out here, we've got this ability to inverse it. And of course, our whole table is inverse, so we don't actually see that difference. But if I was to remove that and refresh it, we can see that that table head is inverted. So that was another option that came open with boots dropped four eso. One of the changes is the way that So when we look at the comparison between the two, we see we've got all of that same ability to do that Hover stripes rose as well. So all of this is there. We can also do the borders and so on. So this is all the same type of functionality. So I've got this hover. We've got the hover over here so they do looks like slightly different. But the idea is the same thing that we can accomplish the same functionality. There is a difference between the table sizes. So when you're using the condensed tables, this is something that's new as well. So a lot a lot of people will use the different condensed options. But it is important, understand that now we've got table sm and in previous bootstrapped three, we had table condensed, so slight difference. But this is just a way to make a more compact table, cutting out the cell padding and half so same functionality between table condensed and table sm. Same result here within that We've also got the same contextual classes, so this gives us the ability to add in different colors here. Eso previously what we were doing and again we had classes, active success, warning, danger. But now we can do more table specific so you can do it specific on the rollers. We can do it on the cells as well, and this gives us the ability to do on the same type of functionality. But the syntax has changed there as well. So that's another important thing to note. If we wanted to set the default background classes, we've got an option to do BG primary and so on. And this gives us the ability to set those default background colors so essentially to summarize the differences in tables. Boots dropped three to bootstrap, for We got more functionality, and there is typically there's not a lot of updates that you need to do with the tables 7. 9 Responsive Images Changes: in this lesson. I want to look at how we handle images and the differences between bootstrapped three and boots dropped for. So there was a major change with images. And this is how we essentially handle the responsiveness of an image. So previously with bootstrap three, we would utilize I m g Responsive. So that's actually changed. And the classes? I am G fluid. So if you are migrating, you do have to do a complete finding, replace change, responsive to fluid. And this would give you the ability to do to get back that responsive image capability. So I'm gonna show you how this is gonna look. And I was gonna play out within our source code here. So going back into here and now we see this this class and essentially it's going to do the same functionality. But they've they've changed the way that we're out putting that image capability. So there's also a few other things that have changed with images so typically with images. And if we're especially surrounding some text around the image and so on. So I've got a bunch of text around it, so I'm gonna just put some dummy text in here. And if I had the same thing over here and actually said I should actually put even more text. So let's go over to dummy text generator so that what we can get a nice big sampling of text that's available. And I'm gonna basically copy and paste this and I'm gonna paste all of that same information that seemed text information so that the paragraph tags. So now we've got a whole bunch of text and we've got images in between there or images there as well. So maybe put some of that content before as well. So So let's go into our browser, take a look at that and when we refresh it. So we've got our image there and let's say we so we see there is actually an immediate difference, and one of them is that the size of the text as well and the way that it's handling it. But we also see that the text is placed mawr in line within the bootstrap uh, four version that it is within the bootstrap three. So it's trying to center this text and so on, and as we see than ever, we adjust it then we finally get back to different sizing. So it doesn't really know exactly what to do with this image, and it just trying to adjust it, depending on what the scribe size of our screen is. So with bootstrap three, if I haven't image, I can add in class. So if I wanted to pull it over, I could do a pull right, and this gives me the ability to pull the image over to the right. So with bootstrap four, we've got a big change here as well. And when we pull images, we need to specify the break point where we want this image to pull. So if I wanted to always pull over to the right, we can do an excess right? And now let's go back to our Web page and refresh it and refresh this one. And actually, instead of pulling to the right because pulling is for content, we've got the ability to float access to the right. So now, saving both of these going out here. We see that now that image is pulled over to the right hand side and for for bootstrap, three as well were pulled over the right hand side. So this is a major change because having the different break points can really make a big difference in how you're out putting that content. So it is better having that breaking point and pulling it over to the right. So now we see that when we specify MD, if we're smaller than MD, then it just defaults to whatever the default is. But once we get larger than MD than it actually pulls it over to the rate so big difference and it's given us actually more control with boots drop for. So it is a really positive change, but unfortunately there's quite a bit of change within the syntax s. So this is something Teoh really look over when you are made migrating, especially when it comes to images. And there's actually also some additional changes when it comes to images. So previously with bootstrap with bootstrap three, we could do image rounded. We could do image thumbnail, so we still have some of those options with boots dropped four. But we've lost quite a bit of that rounded and not circle option, and this has actually been moved off of just images and it's been actually placed within the regular styling capabilities within classes, So show you how to set those up as well and show you that in the upcoming lesson. 8. 10 Image border options: In the previous lesson, we had looked at some of the differences between images. When it comes to Bootstrap three and bootstrapped for one of the most popular formats for images, one of most popular classes was thumbnails. And the good news is that thumbnails? I am G thumbnail I m g thumbnail ISP old school still both relevant for both versions. But we do see that we don't have the ability to do circles and so on. So I'm gonna show you that there is a way to do that. But we have to format it differently. So first of all, let's create some more images here so you can get a better idea of what we can do with these images. And I'm going to get rid of this. Pull over to the right so that we can have a complete comparison of the images in the source code s No, we've got image thumbnail and please this within that container as well. So this image thumbnail will work on both. And now if we want to get that rounded effect, I'll show you how to do that. So, first of all, let's go back out into our browser. So it's going to save both of those go into their bootstrap three, and we see we've got all images there bootstrapped for when we refresh it and the thumbnail is the same. So with boots dropped three, we had the ability to do an image circle. We had been ability to do image rounded. So let's add those classes in as well. So I m g rounded. And now these classes have actually disappeared with boots dropped for. But there is actually a way to do that, and we have to specify a natural border radius on this gives us a little bit more flexibility so we can do things like if we want to do a circle, we do rounded circle. If we want to do image rounded, we just do round it because this is our border classes. So there are differences there, and they're not. I am g specific anymore, whereas thes ones were all I m g specific. So now we see we get that effect there, and when I go back out here and if I refresh it so we've got the same capabilities, although the syntax is gonna be different, and with bootstrap for one of the really cool things is that we've actually got some additional options when it comes to rounded borders so we can specify rounded top. We can specify rounded right, we can specify rounded left and can you guess what the last one is around it? Bottom. So we can actually be more specific now with the classes that were adding and bootstrap for and we have the ability to specify rounded the border radius depending on the different ones that we won't apply. So not all cases we want apply complete border radius. We can specify light, right, left up and down or bottom and top. And the take away from this lesson is the really good news is that there wasn't a whole lot of change where there wasn't any change with the AMG thumbnail, which is the most most used one. But unfortunately, one of other things that's commonly used is the AMG, the responsive images. So there was definitely a change there with that as well. So I am g responsive. Uh, so what? We had a change and I should actually update these toe I m g fluid because when I copied and pasted it. I was still looking at what was available in bootstrap three. So that is no longer compatible with bootstrap for and because our images were small enough , we actually didn't see any difference there because they were just taking up that full with . But we would have seen some a difference there if we actually resized. It s so if we went and we shrunk it all the way down now that they're going to be responsive as well. So in the next lesson, we're gonna look at one of the really big changes that took place with bootstrap for And this has to do with how we handle panels, thumbnails and wells and so on. So with bootstrap three, we had several different options with bootstrap. Four were introduced to carts. So that's coming up in the next lesson. And this is a really, really big change because a lot of us were using wells and panels in our previous bootstrapped three builds 9. 12 Thumbnails Wells Panels vs Cards: previously with Bootstrap three. We had panels and we had wells. So essentially we would use panels and wells to differentiate blocks of code and content. We would utilize it. So we see that when we create a well, we've got some default styling we add in a class of well. And for wells, we had options of doing a large, well, small well so essentially would add some additional potting around our our div eso some content of code and actually being able to break apart some of this content and also similarly to Wells. We used the panels, so that's over here. And we saw that with panels. They gave us a little bit more added functionality that we didn't actually get within the wells so we could do a default. Panel looked relatively similar to a well, but we also had options here where we could do panel body so we could include some additional content. We could do panel headings, panel titles, so this gave us and panel footers. So this gave us a flexibility on dividing up and structuring our panels and unique formats where we could really be able to isolate it. What we want for the heading and have it presented as a heading. So with cards this has given us. So panels and wells have been dropped within boots dropped four, so they're no longer supported. But we got something you in place and what we got new in place. And it's actually also replacing thumbnails as well. Eso thumbnails as we can see, way had this ability the same thing where we'd have these customized content sections. Eso similar again to what we're doing with Wells and so on. So probably one of the most common uses were the panels, and the most comparable to the cards are the panels. And so now we've got one unit that can handle all of that. So panels, wells and thumbnails on. Now we have a brand new component with a similar functionality, and we can see here similar to the panels. We have the ability to break up that content. So we specify that this is a card, just as we did before. We specify a panel and we've got card block card title. So it does seem a lot very similar to what we used to be able to do with our panels with panel titles. We have panel body, So we've got different content types that are available to us on. One of the really interesting things is we've got the ability to add in images. So typically with the thumbnails, we would add in Ah, thumbnail. We have some content under there so we can see that there has been a combination of all of these put together where we've got ability to add in an image. We've got a block here where we can contain a title and some text, and we see that it can break that apart. And then we've got another card block. Here's another piece of set of content contained content. So we break it up in a number of different containers, and this really helps out with how we can build these different card blocks. The idea now with card blocks is we can really split off how we structure our content. So what I'm going to do now is I'm just gonna copy and paste this in, and we can look at the similarities as well as the differences between the various components. So in bootstrap four, we've got a card block and the one that's the most similar were the panels, so we can see that now we've got the panels within bootstrap three. So even though I know it's not exactly the same thing, but this is comparable in with what we're doing. Eso we see here that we initiate the panel by doing a panel here. We initiate the card by doing a card. So we could theoretically, we could remove out that default as well. Now, let's go take a look at our panel, see what it looks like. So that's our panel. This is our card. Eso The presentation is quite a bit neater as well. Right away for that, we notice within the card. Oh, and we see there are some immediate differences. So when it came to the panels, we see that what happens here if I remove out that default, we just get a white background. So that's not actually differentiating our code. We don't see a much of a difference here within that structure, but within our bootstrapped four, we have a much smarter layout of the cards. So we see that a title is always a title. We've got a cart subtitle text muted, and we've got these card blocks. So these air the same things as what we're doing here with the panel defaults. But we've got the ability to separate it into separate separate blocks all contained within one card as opposed to the panel. We have to create multiple panels in order to create that break between the content. So that's a big difference is well, and we also got all of these specific classes here so we can specify that we've got text. So this is similar to what we were doing originally with the body of the content. We also have these card links eso these air for more specific links within the card. So you see that even if I remove this so this one isn't gonna have a link, this one is. And now you can see that, really? Not a lot of difference. But there is some difference in the padding and some styling options in there as well. So I gotta just update this and add in an image. So we did get this ability to set up an ad in an image. So I'm gonna out in a police, hold it image and go back out to our card and reefs. Refresh it. So essentially, cards give us a component toe. Lay out some content really nicely, and I find that when working with these cards, it's really a good idea to kind of set a default look and feel of the way that you want to present your card information, and then you can reuse it within your website. So using that same structure that we've set up here, where we've got a title, we've got our blocks. We can separate the blocks we can add in some images and so on. So really nice way to present our content. And it's actually taken over the panels and the wells and thumbnails from Bootstrap three. It's a big major change. 10. 14 Nav Differences: important for every website is navigation is we need to provide ability for users to navigate and actually Seymour content and have that content presented in a meaningful fashion and with boots dropped. Three. We saw that we were had ability to create navigation and navigation under on one ordered list with a bunch of list items, and we could use thes as navigation items. And we have the same option here in Bootstrap for But we've actually taken it one step further where we're specifying those knave items were also specifying now of links and so on. So this is adding additional additional styling to it. So if I was to just take this and copy over that same information, go over to bootstrap four and we refresh it and if I go bootstrap three and refresh it, we see that the nav itself is actually applying some styling here. So just making sure that I have refreshed it, we see that just by adding that nav class were already applying some styling between the two and on the left hand side with bootstrap three, we've got some spacing, and so one, and then with the boots, dropped four we do still have all of that. Uh, that spacing. So everything is coming out within that same type of format, but we have some defaults basing. So the similarities between the nabs we can also do have pills which is still available, and actually, the same thing is available for bootstrap for eso. Now, whenever I saved these, go back into the source code. Refresh it. So there we've got our now pills, and here we've got naff pills, but we actually don't see anything happening with those pill values. And that's because bootstrap four is looking for property for mounted naps. So even though we can do something similar here within the code, we need to still keep all of those knob items. So now when I switch it to now of pills, say that now pills and see that now, when I refresh it, we get that same look and feel that we had earlier with bootstrap three. Keeping in mind that we have to add in these extra classes to be more specific, which items actually fall into the navigation that the navigation element, as well as if we've got some links to be specific with those because now that we specify those boots drop actually knows how to handle those eso. It is looking for the specific classes in order to differentiate the different items, and this also gives us the ability. If we want to use something outside of on a nor did list, we can update the different tags and still have that same functionality. So this is one of the benefits with boots dropped for over bootstrap three. Because with Bootstrap three, we were pretty much tied to just using a new ordered list bootstrapped, for We've got some more flexibility with that. So let's go take a look at some of the other changes. And with bootstrap four there, really, this wasn't a whole lot you could do with naps. So you had your option to do now tabs. So see what that looks like. We'll update enough pills so now of pills stayed the same, but we had the option to do enough tabs, which makes it more in a tab format, and that's about it. We didn't really have a whole lot that we could do. We could justify the navigation so we can pull it over. We can also disable links so we could do a disabled here. So I'm gonna show you the same thing on the right hand sides. We've got a class of disabled added that in So now that link is disabled. So even if we were to go on it and try to click it, we see that this link individually is actually disabled. So let's do the same type of format for and have for Bootstrap for So I saw that by default whenever we create our nav. So if we had a bunch of knave links by default, it would show up in line here, and we had ability over here with boots dropped for tax rate dropped the an ordered list on the list items. So if we have enough, all the items contained within the knob are considered to be all that now. Links are considered to be in line with in this type of format, because typically with navigation, you're going to keep it within that same line of code, I should say, same line of output. We also have the ability to create in line so I can update this. And instead of naff pills, I can update this to be in line. And now let's go take a look and see what our output looks like. Eso we've got a similar type of output to the bootstrap three, but we still don't have that ability where we've got the tabs. And this is where we need to add in now. Tabs so similar to what we did in boots dropped three. The good news is naff tops is still there. So not any changes. If you're using pills or you're using nav tabs still looks the same, although we've got some added functionality of boots dropped for styling is slightly different because the fought sizes air bigger. But overall, we get this disabled here that actually gets colored as disabled, that we're not able to access it and so on. So with bootstrap, for we actually got some or more ability, we've also got ability to do now stacked. So if we wanna have stock it vertically instead of horizontally, we have that same capability here so we can do enough stocked and show you what that's gonna look like we've got are not stacked. And typically you wouldn't be using the tabs there to stock it because that doesn't really look that great. So you would be using a knob stacked and you probably be using the nuff pills for the stocking. Eso just making sure a swell that we've got each one of these as links and salon. So not a lot of differences between the NAVs eso we just got added some added functionality and slightly different styling. So the next lesson we're gonna look at navigation bars and this is one of those crucial things when it comes to bootstrap, A lot of people are looking at bootstrap and using those navigation bars within boots drop . And one of the downfalls has always been that we're been limited to colors and has been not Everybody wants to go with these default colors and so on. So this is why Boots dropped four has made some really nice improvements to the knave bar. So that's coming up in the next lesson. 11. 16 Navbar differences: in this lesson, we're going to be exploring the differences between the nav bars for bootstrap three and boots dropped four. So here I've got a sample off bootstrap forces. I've got three now bars, same source code for each library, except it's being displayed differently. So we see that there is some dramatic differences between the two, the three different types of not bars and between the two versions of Bootstrap. Now, this is really unfortunate because now bars are in almost every bootstrap website were using the nav bar. So it's really important to understand the differences and how you can accommodate for those. And we also see that there is a difference between when we re size it. So with the bootstrap four version we've got, we don't always necessarily have an automatic, that automatic hamburger icon when we respond when we re size it so it's not automatically built him to be responsive of a nav bar, whereas typically for boots dropped 31 of the best features of it is that it always gives us really nice, seamless transition into a responsively out where we've got a breaking point and we can set when we get that breaking point of that navigation bar. So let's open up our source code and take a closer look. So, as I did say, the first navigation bar is a really basic navigation bar, and this is a bootstrap four version of a navigation bar. And that's where we see we've got some added functionality here, where we've got nabbed, bar faded and so on. So we do have some additional options within Knave bar. So we have the ability to also set light and dark and updating the light and dark when we also have what's called a background functionality as well. So the BG so we can update it to be primary and so on. So we can really easily update the way that air navigation bar colors and also in in relation to this. We can also set the color. So if we wanted to specify a color as a color style and so on within Bootstrap, for this is something that's really easy to to be specific with eso. A number of other things that we've brought in within the newer version of Bootstrap is we also have this ability to do kind of a background faded. And when we look at our boots dropped three. We don't have that option. So there's a lot of options for background colors and in similar to what we're being able to output. So this says we were able to do the background primary. We can also do dark and going back into the bootstrap four. We see what happens now is all of the text colors flip over. So whenever we do dark as their source code, then that means that essentially, that the nav bar is a dark color and that we wanna have light text. And the opposite of that is, if we do light. So if the not bar is a light color than the text will be dark so it can toggle back and forth between the two values. So everything else here, within the nav bar, we've got what we typically have with bootstrap three is we have these nab our defaults. Eso that's that's been removed now, with now with our new version of bootstrap, we don't need to specify that were being really specific with the knob are being nab our default. We also had several options here within now bar, originally where we would have a class and we would have a container within their eso that us well has been removed out of the typical nab our. So we don't have that container option anymore and we go right into the button and so the button is actually differentiated. So previously we had knave bar header class. So we had all of these excess classes within our now bar that we don't need any more. Within the new version of bootstrap eso number of options that we can also do with the bootstrap. So is there's been several other changes as well. When we look at the forms so we have to specify and bootstrap three, we have to specify now bar form. But in Bootstrap, four were no longer being specific that this is the form that we want attach it to, and we can automatically build out a form as we would any other forum. We do a form in line and also the floats that we looked at earlier. So we have the ability of floated to the right here. We've got nav bar left and now bar right. That's from the previous version of bootstrap. So quite a lot of changes here to go over. What I'm gonna try to do is actually gonna build out and make thes two navigation bars a lot s'more similar. And as we can see, we had this excess here that I'm going to simply remove down. So now, looking at the knave bar. So I'm gonna create some spacing in there because this is the default one that we would typically work with with bootstrap three. And then this would be a default, one that we could typically work with with boots dropped for so immediately. We see one thing that there's quite a lot less code that we're actually having to rate to achieve that same functionalities. Let's just leave thes and maybe even get rid of the rest of these options here. So this one isn't is the bootstrap four code, But this isn't the responsive code and also down here, So this is the bootstrap for court, and it obviously doesn't work in bootstrap three. So we just get rid of that, and I'm gonna do the same thing here for all this excess code. Eso just removing that and just cleaning that up a little bit. So now let's go back out to the browser and do a better comparison of our two navigation bars so immediately we can see that we've got a lot of similarities. We can output in the same way. When we re size, we can get that That icon there for the navigation dropped down. It formats it slightly differently so we can take care of that within the styling us. Well, so let's get back into our code and see what? What the differences are between the two navigation bars. So left hand side, we've got our typical navigation bar for bootstrap three and right hand side is our typical navigation bar for the bootstrap for ah, and we're gonna actually make them similar in in output. So notice as well that so. One of the things that we did mention is that the forms are different. How we're out putting the form content is different. We're pushing it over to the left here, so I'm gonna update that to be to the right hand side so that we actually are pretty much out putting the exact same for mount as we've got over here and maybe I'm gonna update this to, say brand as well. Instead of Nav Bar S O. That would be typical of where we've got our output there and notices Well, that this is still sitting in the header and it's still called nab our brand. So this is still the same format, but also notice one thing here that this is within that collapsible content. And if we want to keep it outside of the collapsible content, we could move it outside. And now when we refresh it. So now we've got the brand sitting there. We've got this brand outside of our collapsible content and that we should have the same type of functionality here happening. Eso next. What we need to do is move this icon over to the right hand side s. Oh, this is contained within this button s so we have the ability to move the button around. So I'm going to just create some spacing between there and so on. So previously with bootstrap, we had to add in all these spans in order to get that icon. And now, with bootstrap with the new version of bootstrap, we don't We don't have to specify all these icon bars anymore and so on. It's all done by default within this button. So taking a closer look at button, we see that this button, we essentially, we see that we don't have to have any kind of content within the button. And if we did put if we did put some content in here, I'll show you how that's going to show up as well. So now when I put some content in there, it actually runs over our default icon because this is once again built in, and it really does save us a lot of trouble now with bootstrap for as were before Gustav three, we had to keep continuously coming up with these icons for the bars. But bootstrap has simplified it. And now that we know that this is a knave bar toddler, that's all we need to do in order to add all of that added functionality. So we can also get rid of the area expanded in the area controls because these are just simply added in for accessibility so that screen readers can better understand what the contents of it, so that for purposes of the comparison, I'm gonna actually remove that it. So we don't have as much content sitting in there, and we can take a closer look at exactly what the attributes are and exactly what we're looking at. So in the next lesson, we're gonna take a closer look at and making a comparison between the different values here that we have here on the left hand side, as opposed to the right hand side. So it's coming up in the next lesson. Closer Look at the NAB are really essential part of bootstrap. 12. 17 Navbar options hiding: in this lesson. I want to continue to work on our now bar and do a really good comparison because it's really important to understand what the differences are between the two knave bars. So we notice stop within the bootstrap three. So we're using these container, fluid, header, nav bar header and so on. So we don't actually need thes within the code, although it is always a good idea to include those to help with formatting. But now, whenever we go back out to the page and we reloaded, we see their slight adjustments within the CSS. But there's not much of a difference. Everything still works the same, and it actually looks fairly similar to what we're actually getting within our nav bar. Here s oh, this is something this similar type functionality and we see that we've also got the home here, so I'm gonna actually get rid of the home so again that we're doing something similar. So we've gotten off bar item active s, so I'm gonna just simply get rid of that within that now bar and this is all to make it look very similar so that we can do really good comparison. So by default what we see with a naff bar, we need to specify that this is a novel bar and the type enough or we want is a nab our default over here within bootstrapped three. So we've kept that nab or class, so this still has stayed the same. But we've got some different parameters here that we can do for the default color. So if we were to remove it the default here and also maybe this color scheme here we see that what happens now is this relates to the color scheme of our bootstrap. So we see that a 10 to the date. If we're specifying a naff bar, then it's actually gonna look the same. And those added classes were simply for styling and different colors. So now we know that with bootstrap, for we've got a different weight, add in colors and actually this is a much better way because it's more advanced. Gives us a whole lot more options. Eso going down to the button. So we're still specifying that we're creating a button we're looking at nav bar toggle eso . We've got the same thing here now Bar toggle So the differences in the classes are that I'm gonna actually remove the button and put it on this side so that it's very similar to what we've got over here on the right hand side. Eso we've got a class that's called Collapsed. So if I was to remove this class it from bootstrap three, let me show you what's gonna happen. And we got to resize it, and we don't really see that much of a big difference. We see that we can still collapse it and so on because we removed that header. Now that header did that was containing it were actually updating. And we're putting it over to the right. So this is what I said that when we're working with bootstrap three, we typically would have a header. But now, if you want to convert our bootstrap three to bootstrap four code, then we would have to remove out all of that information to make it similar and also in line with what we see in Bootstrap for s a refreshing this again now and we see that we've got similar type of functionality. One thing that we do notice here initially is that our icon here is on the right hand side , and over here it's pulled directly in over to our brand information, and that's because we haven't specified where we want a line. That particular element that was one of the major changes with Bootstrap four is our ability to align and specifying, actually when we're going to do that alignment. So for this one, we wanted to actually pull it over. So this is where we would do pull, and we would specify the size when we want to make the breaking point when we want to make this adjustment. But specify the breaking point and the parameter that you want to put in so right or left or none. So actually pull isn't gonna work with in this instance. So let's try float. So now we're gonna float over this button to the right hand side where, as over here, floating over to the right is a default. So now let's go take a look at our source code. So now things were looking Maurin line. It's actually looking Ah, a lot more similar. So we've got this collapsed button and we can see that now. Our menus air starting to look very, very similar, and creating them in a similar fashion is one of the keys to really being able to understand what the differences are. So the button and we've got the ability to add in this brand. Ah, lot of times you might not see that brand, or you might add it in again, depending on how you structure your content within boots, drop eso next. Let's come to the collapsible part. So we see that within the attributes of the button that we've got type is buttons, not just HTML, and we've got data collapse. So over here is when we're specifying what's happening with the data and this has stayed the same. So data collapse. You don't have to worry about updating that and as well, we don't have to worry about the target. So we could theoretically rename this one, rename that one and rename that I d here so that it's actually going to be in line with what we're looking at in the other in the other parameters there. So that brings it more similar fashion. We can update it, and we can see that everything is still working, even though the output is not ideally the same. Not exactly the same. And this is something that we also need to work on when we're out putting our boots strapped for that, we've got some alignment. There s o adding in this brand. This is something that we could potentially hide on the smaller screens and so on, so that we might not need to have it there on with bootstrap, for we also have this ability to hide certain pieces. So if we wanted to show it and this is actually what's happening over here for the boots drop toggle button. So we see that we don't have to specify that. What breaking point? We want to hide the button, but within bootstrap four. Because this is more centered around all these media queries in these breaking points, we need to specify that we're gonna hide it. Eso opposite to that. If we want to hide the brand on the smaller screens, we could do something like sm down or something like that. And that would actually we could do an M D down. And that would actually hide that brand button there or that brand content so that it doesn't actually interfere with our output of our menu icon. So that's one of the options that we can do with Bootstrap, for that was quite a bit harder with Bootstrap three, because we didn't have as much functionality here with the different media sizes. So now that we've covered off how the navigation button works, the differences between that now we can look at the actual content of that collapsible content on the menu content. So in the next lesson, we're gonna take a look. A closer look at the knave bar content and how it relates to the now of the bootstrap for version, So that's coming up in the next lesson. 13. 19 navbar comparison: So this lesson we're going to continue to compare the navigation bars from bootstrap three navigation bar to bootstrap for navigation bar. And we're gonna look at the differences between the navigation bars and how they function when we resize the screens. So the next element that we're gonna look at is the dibs. So this is the main container of content. So you move it down to be lying 37 in line with what we have here on the right hand side eso The next one is that we see that we've got a new ordered list. So we've got the same thing happening here. One thing to note that we had now bar collapsed. And now we have nav bar Ta Global and notice again that we've got not size value in there. So we need to make sure that we're specifying at what size we want this to take place. So if we were to change it to something like excess now show you what happens when we're excess. So we see that we've got excess size for the talk, a ble menu. So I should refresh that and we see that what's happening now is that this menu is showing up alongside with that content there on the left. So it's not really ideal and it's by default. Whenever we're shrinking it down. It's already stocking eso. It's not really functioning the way that we wanted. So we definitely got to make sure that we're specifying the rate breaking point. And a good rule of thumb is that if we're hiding it LG and up, then we want to make a ta global at M d S O. If we're making it hiding at at M D and up, that would may want to make a ta global at S m so one size below that, because basically what This is, how what's happening here is if it's LG and up, then it will hide it and hear if it's MD, which is just before allergy, basically, it means that we want to make it ta global at that point. So next we've got a bunch of list items here and within these list items, so I want to actually make this exactly the same. So there's not a whole lot of difference here again. The important thing to know it, just like what we looked at within the knave items themselves is that we're actually specifying so this is typical to any now than bootstrap for where we've got a list item and we need to specify that the first link is a knave item. The classes, a knave link, and so on and in boots dropped three. We didn't have to do that, so it looked a lot simpler and bootstrap three. But because we're not being specific, we didn't have to worry about all the specifics of those values. So that was another difference there that we can see immediately with between the two versions. So another difference when we do our drop down. So coming over to the drop down option here, we see that we've got a number of values here within the drop down. And I want to actually make this more in line and we see that we've got a drop down here and we've got a menu and so on, and we've got a bunch of items in the menu. Whereas with boots dropped, three were actually listing out all the items within that dropped down. We see that when it comes to boots dropped four. We've got more specific information here. So we've got our dropped down toggle there. So we got the same thing happening here, dropped down, toggle and then on the right hand side. So let's take a closer look. And we've got a listed items here and whereas over here we've got a class of drop down items, so we're using an actual drop down menu, and that's also changed because now we need to specify what dropped down items, whereas before we could just get away with just having some simple links there, and I'm going to remove it so that we actually have the exact same content within the drop down. And we can take a closer look at this, the hyperlink element for the drop down some of the attributes that are contained within their. So let's make some more updates. So we know that we've got a knave link here, and this is inherent with bootstrap for where we need to specify within the class what the functionality of that is going to be. And then we've kept dropped down toggle. So that's good news. The hyperlink. So this should actually be we can keep this the same as well, so you don't have to worry about changing that hyperlink. So also, I'm just doing some reform outing here and one of the things we noticed. We can change that hyperlink. And we can also get rid of this idea because we don't necessarily need it labeled. We can remove out this area controls eso these again these air just simply for they're not providing any functionality. But it's just making it that it's more readable. And also, I believe we could remove out that rule as well. So now this is making it very similar. The only real difference here between the two now is that we've actually got a drop down value here. So we've got that knave link and then over here, we're specifying that we've got and I can also get rid of this as well to really simplify things. So over on the left hand side and the right hand side So this is relatively the same but bootstrap, for we do need to splice be specific with the nav link values. I'm just gonna hide this menu so we have a little bit more space to play with, and so I can take a better comparison there. So lying 42 So that Line 42 or we specified 43 is the drop down I link. So essentially, this is the hyperlink that you click to initiate the drop down menu. The drop down menus are different again because over here we're using on a nordeste for the drop down menu. But over here, because bootstrap fours give us more flexibility, we specify a drop down item, and it actually treats it the same way as it would a list. So again, more flexibility of the different elements that we can use and notices well that we could really simplify it by not having to add in that a nordle ist and being able to create those drop downs with that same type of effect. So going back into our code. So we see that that's one of the big difference is the way that we can handle drop down items and now items. So next let's look at the form field and with the form field, there's been quite a lot of changes as well. Looking at the class bootstrapped for dropped the naff bar form, so that's meaningless class and we just need to specify what type of form and how we want the form toe look like. So we've got our form in line and the form group is something that we could add as well if we wanted to, or we can keep out. So this is HTML five. So this is not relevant actually, to what's happening within our CSS and the rest of this input here is the same. So we can literally take all of this content in the middle here, and we can copy it over and we can get that same look and feel. So let's go docket into our source code. And now we see that we've got the same look and feel. So essentially now, our menus are a lot more similar. So I'm going to refresh that we should also get rid of the brand there because we have no way of hiding it within the bootstrap three. So I'm gonna just drop that out of there and refresh it. So now when we do our drop down there, we do our drop down here and keeping in mind that some of the sizes might be different, that we see that with Bootstrap for the form because we specified that this is a form within the knave bar with a nen line form, we get a lot more, Ah, lot more built in styling that's built into the form functionality. So let's make these large and we see that in fact, we do have a very similar type of output. So essentially, those are what toe look for between the forms and this is a breakdown in a summary of what the differences are. So I'm gonna include all of these source code within the next lesson. But so you can take a closer look and see exactly what the changes are and do in really nice comparison between the two types of nav bars. And ultimately we see that, obviously, depending on how complex your navigation bar is at the end of the day, we we can really get a lot of the similar type output between the two of them. And there are some certain key classes that need to be updated in order to present our content properly. Eso that's being changes that we need to make within our navigation bar 14. 20 How to update Bootstrap 3 Navbar to Bootstrap 4 Navbar: in this lesson. I want to provide an update to nab our from bootstrap three and actually transform it into bootstrap for now, bar because I know that in the past couple lessons, we've gone over quite a lot of details. So what I've done is I've copied and pasted code that actually works in Bootstrap here within bootstrap three. So if we're to copy this out, and so if we take all of this code and I wanted to keep in all of that, that we've got there below for the javascript functionality, So if I was to copy that over and bring it into bootstrap three and refresh it, we see that we've got a really nice bootstrap three navigation bar, but it doesn't work quite a swell within bootstrap for So let's update that code and make it more boots drop for compatible. So we saw that we actually dropped the knave bar default, and we need to add in the nav bar. So we had an option to specify the color scheme for the nab our and also the background color. So let's just do a default of back primary go back out into our code and right away we see that now we've got something that looks like a navigation bar. Eso We still need to add in some additional functionality here because it's still isn't displaying all of the right information and so on. So this isn't exactly working quite yet, So let's gonna make this even smaller so we can take a closer look at the snack bar source code. So we saw that we updated that, and we've got our nav bar toggle button. Here s so this is another thing that we need to transform because we need to be able to hide it and also floated over to the right hand side. So I'm gonna add in hidden and specify what my breaking point is, where I want it to hide. So hidden m d and also update it to be hidden MD down or actually, this should be hidden elegy up because we're hiding it for anything that's above MD. We also wanted to float it over to the right hand side because by default it's floating over to the left. S o need to make sure that we add that in as well. So the data type the type is button, so that's fine. They data toggle is collapsed, so that's correct as well. And the dig a target is correct as well. Eso another thing here that wait notice. So maybe let's up. Let's take a look at that and will refresh it now. So you see that now it's floated over to the right hand side, But still, it's not ideal. It's not about putting properly. So let's go back into our code and make a few other adjustments and updates. And with bootstrap four, we no longer need to include all of these spans here and this icon bar and so on. We can really simplify the way that we're out putting that HTM that that output and you see that it actually doesn't really make a difference on how that's being displayed because we're still displaying the button within that same format. So now bar collapse is from boots drop three. So now we want to make it boots dropped for compatible. So we've got something different here. Another brain you class, which is called nav bar ta global, and we need to specify that the size that where we want it to toggle So again, remember to keep it in line with what you've got the button class. And to specify that this is the naff bar Ta global. And also make sure that the I. D. S are in line so the targets are in line. So that's all you need to do toe link those together. And now when we refresh it. So save that and go and refresh it. We see we still don't get that menu information. So even if I resize it large now, we've got something happening here. But it's not really ideal were not getting all of the full effects that we're looking for within our nav bar. So we need to continue to build a some additional functionality here and add and update some of our classes. So next thing that we're looking at is the nav bar and we've got all of these items here listed. So this is typical for bootstrap for where we're not actually changing these classes, but now actually requires some class items here for the list items. So instead of just being active, I want to be really specific here and specify that this is now a class with Ah, name of knave item so that bootstrap can understand that this is related to the navigation bar and also within the hyperlink we need to add in nav class. So we need to do that in order to make it understand that this is now part of our navigation bar. So you see that now we've got that link showing up and it's still not working well, because we still got some classes that we don't need, and we've got some classes that we need to add in. So let's continue to add in additional classes here, so need to specify now item here and as well. Within that drop down, make sure that we add in the knave item and we need to add those classes into the hyperlinks here. So that bootstrap as well understands that the purpose of these is that it's a navigation link. So now that we've added all of those and we've been more specific, let's also take a look at our drop down menu. So another thing that was missing here within the drop down menu is that we need to specify classes for these lit for these items, and we don't necessarily need to make them as list items so we can change the parent container instead of on a new ordered list, and we'll change it into a diff. So we just have a default container. We can get rid of the list items, and we can be specific here, where we've got dropped out menu items and updating. This is going to make a big difference on how it's being presented, so that now that Bootstrap understands that these air now drop down menu items and we're expecting a drop down format. So now we've got all of this functionality here. And whenever we re size to a larger size, we see that we're getting that right. Icons. Whenever we click the menu here, it's opening up. So it's starting to look more and more as we had expected, Teoh within our within our now bootstrap four format. So some of the other things that we need to take care of as well is updating the way that the forms air handled. So now we don't have never bar for many more, and we don't have never bar right, so Bootstrap doesn't know yet what we're expecting to do with the form. So we need to specify that this form is an in line for him, and now we want to float it over to the right hand side on the algae algae screen size points. So now, whenever we re size it. So now we're getting something that looks more and more like our navigation menu, and we might also want to make an adjustment that the blue class it's fairly dark. So we want to specify that the color is dark, so that's actually more visible. Now we have what looks more like the navigation bar and one finishing touch here under button instead of nav bar toggle. It's now bar Toddler, and that's what's gonna give us that default icon here, that this is a knob bar toddler. And now we've got everything set and we've successfully transformed of Boots dropped three navigation menu into a bootstrap for navigation menu 15. 21 Favorite components comparison: in this lesson, we're gonna compare some of the popular classes that are available in Bootstrap three, as opposed to Bootstrap for so we've got the exact same source code on the left hand side of Got bootstrap three. And on the right hand side, I've got boots dropped for. So what we see here, right at the top here is a jumbotron. So this is one of our favorite classes. In order, add in something that we wanted to highlight it some content, and we see that it's presented slightly differently. So typically, when we're creating our jumbotrons, I'm going to just show you the source code here, so exact same score scored on both sides. We specify that we've got the Jumbotron and each one, and we see that the each one sizes are inherently different. So this actually doesn't have anything. We're leading to what the actual Jumbotron is doing. It's just relating to how boots drop is updating the styling of it. So if you're looking toe, have a specific styling within the jumbotron, just make sure that you're aware that it does present slightly differently. The colors are slightly different, but also that the each one Sizing is different in Bootstrap for so another really common feature that's available in bootstrapping that everybody loves to use. Our models and models are these little pop up alert windows that we can send information and communicate stuff back and forth between us and our Web users. And the good news is that mortals haven't changed, although they look a little bit better in my opinion. Anyway, I and the present those buttons better when boots dropped four. There's really no difference in the source code. So that's the really good news about it. Is that all of this functionality you don't have to worry about when you're converting to Bootstrap for because this is already gonna be, it's just gonna look slightly different. And if you're really into the look, then you'd have to make some adjustments toe how Boots dropped. Four is presenting that content so all of that functionality is still up and running. I did want to make one important note with boots dropped. Four. Is that besides adding in the J Query Library, which we've done on both ends and boots, dropped three and adding in the bootstrap Cdn library, JavaScript library. I've done that here in Bootstrap four. I've got one other file that I'm adding in and this is tether file, and this essentially acts as an in between. Between the boots drop in the G query, providing some additional functionality. So some of the components that require G query may not function properly within bootstrapped for if you don't include the tether. But generally they should all function, but there are some that might have some limited functionality. So do add that tether in and make sure that you're linking out to that source file as well . So you get all of the functionality. And if you don't include the tether than currently what boots drop will do, it'll throw an error in your consul and you will see that you need to add that tether in. So that's at the moment. Now with this, the current boots drop. JavaScript Library eso. Now let's look at so the motile controls so we see that everything is the same. Motels are working the same way, which is great and another common component. And boots drop our care cells. So you see that we've got the same coat on the left, same coat on there, right? But unfortunately, they're not actually displaying the same way. So this one. Although we've got all of these buttons here and all of this, we're not actually seeing that these air actual items that are available for us within the carousel. And that's because there's been a change within the naming convention of the classes in the carousel. So we have to be more specific. So not only are the items, they're actually Claire Carousel items, so we have to make sure that each and every one of these has instead of item, they're updated to care, sell items, save that, and then when you refresh it, it should just to refresh it again, because there's we got a week for a second for that, the file to load. And now we've got all of our functionality and a carousel looks just like it did before, and we've got all of that functionality. So this is an important thing to note and also note as well that with Bootstrap four, we've gotten rid of the's glitch corns. So that's why they're not showing up now within bootstrap, For even though the area is still clickable, we don't have those cliff cons because with Bootstrap, for they have dropped that. So you could take a look and see what other glitch cons you can utilize within their place . So I'm gonna just put these, uh, these square brackets have got something that is in place there. But of course you want to look for some kind of cliff con. That would be something similar to what's being presented here in bootstrap three eso. That's major changes. But it's not too bad with some of these favorite components and bootstrapped. 16. 22 Course Conclusion: in the previous lessons, we've gone through quite a lot of the changes and the major. Most of the major changes that you're gonna be able to notice between Bootstrap three and bootstrap for some of the more obvious ones are that the cliff cons are gone and some people were using those and other people were reverting over to other libraries, such as fought awesome eso. This is one of the reasons that they got removed out because simply there's a lot of other solutions and options for it. So not having to maintain this Cliff Con Library is really beneficial for moving forward with Bootstrap. It's mixing a lot more streamlined as well. So another thing with Bootstrap three and Bootstrap four is that we saw that we've got a lot more control when we're designing our layouts. We've got more control over different sized screens and what we want output depending on the screen. And of course, there's quite a lot of other small changes that might not be as evident. Eso again, depending on which components you're using. Most often, there's definitely some styling and output changes, so they are gonna look different, but overall they should function between the two styles of bootstrap, and the best thing to do when you are doing an upgrade is to access the connect the boots dropped four library on and then put your source code in there. So swap the library's from 3 to 4. Check it out, see what it outputs, eyes and then make the adjustments as needed. So go through it visually, see what you need to update, go to the updates and make those changes. So the main things are that which we've covered previously are the nav bar in the NAB's, as well as things like the way that the content gets output and the grid. So those are the two crucial factors in your Web website structure to make sure that those air functioning properly. And if you are using components like the carousel, I just make sure that there's some subtle changes that you need to do on. Make sure that you make those updates per component within bootstrap, and if you are using wells or panels or thumbnails, then you're going to be really out of luck because you're switching over over to the cards . So that's a really major change. But hopefully this is not something that you're using very often within your Web page. And if you are, then take a look at cards and see what kind of updates you could do with those. So take a look at the new options within bootstrap for And in my opinion, it's been quite a great step forward with website design giving us a lot more flexibility, and especially when it comes to things like the different utilities and color and layouts. We've got a whole lot more now that we can do with boots. Drop for that. We could do with bootstrap three. So keeping all of this in mind, it's definitely worth making that update and updating your code to be boots dropped for compatible. So go over to get boots. Drop dot com, check it out for yourself and see what you can make happen with. Bootstrap for