Build Beautiful Websites Faster and Easier Using Bootstrap 4 | Andrew Whitworth | Skillshare

Build Beautiful Websites Faster and Easier Using Bootstrap 4

Andrew Whitworth, Full Stack Web Developer

Build Beautiful Websites Faster and Easier Using Bootstrap 4

Andrew Whitworth, Full Stack Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
114 Lessons (9h 45m)
    • 1. Course Trailer

      1:14
    • 2. Setup - VS Code/Text Editor

      4:02
    • 3. Setup - Course Files

      4:39
    • 4. Setup - Window Size Tool

      2:02
    • 5. Setup - File Comparisons

      2:29
    • 6. Intro to Bootstrap Playgrounds

      4:22
    • 7. Containers

      4:25
    • 8. Grid - Part 1

      0:51
    • 9. Grid - Part 2

      8:59
    • 10. Grid - Part 3

      7:33
    • 11. Grid Breakpoints - Part 1

      5:38
    • 12. Grid Breakpoints - Part 2

      4:50
    • 13. Grid Breakpoints - Part 3

      7:27
    • 14. Display - Part 1

      5:13
    • 15. Display - Part 2

      7:07
    • 16. Flex - Part 1

      6:53
    • 17. Flex - Part 2

      4:38
    • 18. Flex - Part 3

      10:17
    • 19. Flex - Part 4

      6:41
    • 20. Flex - Part 5

      3:01
    • 21. Flex - Part 6

      4:04
    • 22. Flex - Part 7

      4:37
    • 23. Flex - Part 8

      2:12
    • 24. Typography

      6:33
    • 25. Text Utilities

      5:50
    • 26. Code Styling

      3:40
    • 27. Colors

      6:13
    • 28. Spacing - Part 1

      7:05
    • 29. Spacing - Part 2

      5:51
    • 30. Spacing - Part 3

      4:34
    • 31. Sizing

      5:08
    • 32. Images

      5:02
    • 33. Figures

      2:37
    • 34. Borders

      6:47
    • 35. Tables

      8:54
    • 36. Vertical Align

      1:59
    • 37. Float

      1:35
    • 38. Clearfix

      2:28
    • 39. Screenreaders

      3:05
    • 40. Media Objects

      5:30
    • 41. Alerts

      4:05
    • 42. Badges

      4:03
    • 43. Breadcrumbs

      3:43
    • 44. Buttons - Part 1

      3:12
    • 45. Buttons - Part 2

      5:23
    • 46. Button Group

      4:16
    • 47. Dropdowns - Part 1

      6:04
    • 48. Dropdowns - Part 2

      5:30
    • 49. Dropdowns - Part 3

      2:00
    • 50. Cards - Part 1

      4:35
    • 51. Cards - Part 2

      4:16
    • 52. Cards - Part 3

      4:38
    • 53. Cards - Part 4

      6:05
    • 54. Forms - Part 1

      4:25
    • 55. Forms - Part 2

      5:54
    • 56. Forms - Part 3

      3:19
    • 57. Input Groups

      7:14
    • 58. Navs

      7:10
    • 59. Navbars - Part 1

      7:51
    • 60. Navbars - Part 2

      3:03
    • 61. Position

      3:01
    • 62. Pagination

      3:40
    • 63. Progress Bars

      4:44
    • 64. Carousels

      4:16
    • 65. Collapse

      7:46
    • 66. Tooltips

      1:59
    • 67. Popovers

      3:50
    • 68. Modals

      6:39
    • 69. Scrollspy

      9:35
    • 70. Bootstrap Playgrounds Wrap-up

      0:57
    • 71. Project 1 - Overview

      1:41
    • 72. Project 1 - Overiew v2

      1:41
    • 73. Project 1 - Step 1

      3:40
    • 74. Project 1 - Step 2

      4:25
    • 75. Project 1 - Step 3

      4:43
    • 76. Project 1 - Step 4

      4:33
    • 77. Project 1 - Step 5

      3:23
    • 78. Project 1 - Step 6

      3:16
    • 79. Project 1 - Step 7

      9:42
    • 80. Project 1 - Step 8

      6:02
    • 81. Project 2 - Overview

      1:34
    • 82. Project 2 - Step 1

      7:41
    • 83. Project 2 - Step 2

      6:41
    • 84. Project 2 - Step 3 - Part 1

      3:53
    • 85. Project 2 - Step 3 - Part 2

      4:34
    • 86. Project 2 - Step 4

      5:39
    • 87. Project 2 - Step 5

      7:25
    • 88. Project 2 - Step 6

      6:40
    • 89. Project 2 - Step 7

      4:27
    • 90. Project 3 - Bullseye Overview

      1:54
    • 91. Project 3 - Template - Step 1

      5:32
    • 92. Project 3 - Template - Step 2

      4:22
    • 93. Project 3 - Template - Step 3

      7:06
    • 94. Project 3 - Template - Step 4

      6:55
    • 95. Project 3 - Homepage - Step 1

      6:52
    • 96. Project 3 - Homepage - Step 2

      4:15
    • 97. Project 3 - Homepage - Step 3

      9:41
    • 98. Project 3 - Homepage - Step 4

      7:42
    • 99. Project 3 - Homepage - Step 5

      0:53
    • 100. Project 3 - About Page

      3:13
    • 101. Project 3 - Careers Page

      6:25
    • 102. Project 3 - Contact Page

      9:28
    • 103. Project 3 - Franchising Page

      6:39
    • 104. Project 3 - Locations Page - Part 1

      9:52
    • 105. Project 3 - Locations Page - Part 2

      5:15
    • 106. Project 3 - Rewards Page

      5:34
    • 107. Project 3 - Menu Page - Part 1

      10:48
    • 108. Project 3 - Menu Page - Part 2

      4:26
    • 109. Project 3 - Menu Page - Part 3

      4:59
    • 110. Project 3 - Menu Page - Part 4

      11:22
    • 111. Project 3 - Menu Page - Part 5

      1:33
    • 112. Project 3 - Menu Page - Part 6

      4:51
    • 113. Project 3 - Menu Page - Part 7

      7:19
    • 114. Project 3 - Menu Page - Part 8

      7:30
31 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

2,391

Students

1

Projects

About This Class

**Take this class for free with Skillshare's offer of 2 free months! https://skl.sh/2Gmm85A**

Building beautiful websites can be difficult because you always have to start from scratch. However, with a toolkit or framework like Bootstrap you don't have to start from scratch each time. You simply decide what you want to build, turn on some classes or options and you are ready to go. 

For this course I have built a custom site called the Bootstrap Playgrounds. Here you can quickly and easily learn how to use Bootstrap (version 4.0.0). After you learn Bootstrap you will build a restaurant themed website or a project of your choosing. Check out the project section for more details.

602c7a53

Meet Your Teacher

Teacher Profile Image

Andrew Whitworth

Full Stack Web Developer

Teacher

From an early age I showed an interest in computers and tech gadgets. One day my parents bought the family a computer. From that day forward, you could always find me in front of the computer. Later I learned how to take it apart, put it back together, and upgrade it along the way. When that wasn't enough I learned how to make websites early on. Fast forward 18 years and several college degrees later and you will still find me in front of a computer. Now days I build beautiful websites and programs which inspired me to teach others how to do the same.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Course Trailer: So you want to build a website but you don't know where to start, or maybe you've build a couple of websites before but they didn't look that great. What if I said you could build beautiful websites quickly? Some really smart developers realized there are standard things that make every great website. Things like how a button looks, a navigation menu for mobile sites, or a grid system make a site responsive so that it looks good on all devices. All these things are common elements to make a great website but they require a lot of work to build them for each site. So, those smart developers built a toolkit or a framework. This way you don't have to start from scratch each time you want to build a website. That framework is called Bootstrap. In this course, I will teach you each feature or component of Bootstrap. Now, normally you will have to tirelessly read through the Bootstrap documentation but that's boring and who wants to do that? So I created a special site called The Bootstrap Playground. Here you will learn all of the cool components and features by simply adding a few lines of code. Then, at the end of this course, you will use that knowledge to build a beautiful website. So what are you waiting for? Let's get started. 2. Setup - VS Code/Text Editor: Hey, welcome to the getting started video. One of the first things you're going to need to do is download Visual Studio Code. Now, it is a text editor and it works for both Windows, Mac and even Linux. We're mostly going to be focusing on Mac. That's what I'm running, but all the stuff that I show you will work on Windows, and if you do need some support on Windows, by all means ask me. I use Windows as well. So, download whichever platform you need and I'm on a Mac, I've already done it, but you just click that, download it. It will give you a DMG file. You install it and then drag it to your applications folder and it's that simple. As far as Windows, you download it, you put it on your computer. I would not use the 32-bit version unless you absolutely have to. That's pretty much it. You get it going and you're ready to go. I have mine right here and it's already got the files in it. I'll show you how to do that too in one of the later videos, but this is Visual Studio Code. I've already got some plug-ins and extra things that are really nice to have in Visual Studio Code and they're constantly updating it so your version may be different than my version, but I always try to stay up to date, and if there are any breaking changes, then I'll update the course. Let's see what I have installed. These need to be reloaded. There we go. We have a debugger for Chrome, HTML CSS, IntelliSense, Live Servers, Path Autocomplete, and you don't need the others. Now, in order to get these, I've provided links somewhere around the video and so you've got your download link for downloading Visual Studio Code and here's one of them. We've got HTML CSS support and offers things like class, attribute, completion, and just different things like that, so it's really nice and you just hit Install and you may see a different pop up right here. It's not going to repeat for me because I've already done it, but if it does pop up just hit Cancel. It's just basically going to tell you that, "Hey you need Visual Studio Code in order to install this." 3. Setup - Course Files: In this video, I'm going to show you how to get your files running in Visual Studio Code. So, I already have Visual Studio Code open, you may see a welcome. You can close that, no big deal. We're going to grab the files on my desktop here, it's a course files. Open that and you will see bootstrap playgrounds. You may see some other files in here. This window size, I'll teach about in the next video, but right now we only need bootstrap playgrounds. We're going to take, highlight, hold and drag into Visual Studio Code. There's that welcome, close it, and here are all our files. We have some plugins loading. You should have them installed by now. If not, go back to the previous video. You're going to need to do that because we're about to start the live server. We don't need this anymore, I'm going to move this to the right, and bring in this. I'm going to hit, go live, on the index. We're in playgrounds_start, all the finished files are here. So, this is running right here. Let's hit go live. It's going to start that in this browser over here, close the old one. If you don't have Chrome already running, it will pop up and open to this page. You can close this notification, and here, we have all of our getting started information. So, we have the bootstrap documentation, you just click it, it'll take you straight there, you can download it. You don't really need that. All of the files you need are in the vendor folder for bootstrap and font awesome. So you don't need to really do any setup, these are just helpful links on this first page or this 0_1_index. We have links to the software, but obviously, you probably already downloaded it in order to do all this, but it's still there in case you need it later for another computer. We have the different extensions or plugins for Visual Studio Code. You can click those links if you didn't install any of those, you'll need to do that. Then we have some resources, this is a nice cheat sheet. You come here to this website, takes a little time to load, but once it loads, it's pretty cool. You just start typing in different bootstrap classes and it starts auto filtering to the different classes. This is going to be helpful for you in the future. I don't own this site, it's just a resource I found, feel free to use it. Then we have a REM calculator basically, to allow you to auto calculate what pixels mean in REM. You can put in your own custom value and then hit, calculate, and it'll create the sheet for you. Again, the software, these are in the cloud so, if any time these stopped working, this is your local versions, but you can click your Windows keyboard shortcuts, and I forgot to change that, so that's Mac, I'll change that. So, there you go, I changed that link, this is the Mac one. These are all your Mac shortcuts. So you can come through here, look at them, you can print this off. You also have a local version in case you need it. You can keep it on your iPad, phone, whatever you need, and it'll load as well. But as you can see, it's on our local computer. You also have Windows in the cloud, you can do the same thing with it if you're on Windows. If that version stops working, you can have the local version, and these are all your shortcuts, and that's pretty much it for getting started. The live server is pretty cool. So, you hit go live to go live. You hit this port, stop, and it's going to stop it. So, anything we do now is not going to show up and these are going to start failing when I click them. The only reason this is still here when I went back is because it's loaded in the cache, stored in temporary memory, but you hit that glove and it's that simple. That should be it. If you have any questions, feel free to reach out to me in the comments and I will do my best to support you. 4. Setup - Window Size Tool: Hey, welcome back to this Getting Started video. I got something really cool to show you, it's called Window Size. When you hit Window Size, it'll tell you what size of this window or the browser it currently is, and when you refresh, it goes away. So, if you want to know how to install that, go down here, and click in your course files, click windows_size.txt and drag it into vs code. It'll pull it up right here. I'm going to collapse this so you can see it. You're going to need all of this JavaScript. It's not bad, don't worry. I've used this for a long time. I'm even using it now. All we're going to do is, let me close that, we're going to add a new page. We are in Chrome, obviously. I highly recommend you use Chrome for this entire class. We're going to highlight all of this, copy. We're going to get rid of all of this stuff here. Paste, we're gonna name something memorable, so I'm going to call it Window Size, this time I already have that, so I'm going to call it Tool. Make sure it's on your Bookmarks bar because that's the most convenient place, and hit Save. There we go. It's that simple. It works. Pretty cool. Like I said, I've used it for a long time. It'll help you when we start resizing the browser and getting to different Bootstrap breakpoints and stuff like that. So, I highly encourage you to install that tool. If you need your Bookmarks bar, it's right here. Then Bookmarks, and then Show Bookmarks Bar. That's how you turn it on and that's where it is. If it's at the back, you want to reposition it to the front just so it's convenient for you. That's pretty much it for the window sizing tool. If you need any help, let me know. 5. Setup - File Comparisons: Hey, welcome to this getting started video, and I'm going to show you how to compare files between what we're starting with and what we're finished with. So, at any point, you may have a problem with something that I've showed you, and you're going to need to compare for differences. Well, that can be a tedious process. I've been there. I know what it's like. It sucks. Well, there's a really cool feature in Visual Studio code, and I'm going to show you how to use it. Now, if you don't already have your project files open, go ahead and open Visual Studio code, open your course files, drag it in there, and you'll be good to go, and you'll get all of this. In this, we'll work for any of your projects in the future that we do, same principle applies. I'm going to make this a little bit bigger, and we're going to start with containers in the playgrounds underscore start. So double click that. If you single click it, this is what happens. It has kind of an italic, and when we open the next file, it replaces it. So you'll want to double click. We're going to collapse this. Open the finished version, and then collapse this. So if you look, it says playgrounds start and playgrounds finished. Now, if you need to, you can expand this a little bit and see which one you're looking at, and we're going to click on the first one. We're going to left click, select for compare. Right click on the second one and compare selected. Let's close this. So, we had the start and the finished. Now, if you look, it's going to take you automatically to what is different in on line 162 between this file, the start file and the one on the right, the finished file. You can quickly see what is highlighted as a change. Now, this is really helpful for you because you may be going through the course at any point, and then, you can't replicate what I've created and showed you in the lecture. I encourage you to compare these two files on whatever lectures you're on. Just find the particular file that we're on and then find the finished version of it and do this compare. Now, as you can see, it's tremendously helpful and anywhere you have changes, it will tell you. I hope you love it as much as I have. 6. Intro to Bootstrap Playgrounds: Welcome to the Bootstrap Playground. This is a custom site that I built in order to teach you all the different components and features of Bootstrap 4. I felt like it was better than just reading off a bunch of text, and code, and copying and pasting. That's not going to really teach you anything. So what I wanted to do was find the easiest way for just go in and turn on and off different classes, so that you know what you're doing. I also made it where you have minimal set of work. All the code is pretty much created for you. You just add a few classes and make it change the look. It's really cool. I'm going to show you what we're going to build in the Bootstrap Playground. So we have the Grid and Flexbox, Utilities, Components and Content, JavaScript, and different components. Now, let's look at The Grid. So I have several examples of how The Grid works. You're going to break it down and it's really going to be nice to see what's going on in a different way than you're probably used to being taught. I'm a very visual person and I believe in showing you by example. Now, all you have to do is turn on a few things and magically, you'll have a Bootstrap Grid just like this. We'll also build some Grids with Breakpoints, adapting for response of design and mobile layouts. And then, we have Flexbox, which is really cool. It's something new in Bootstrap 4 and it allows for some different layouts, which are pretty cool so you can do some things like this, and like this, justify content, auto margins, aligning items. So there are some really cool things that you can do and I felt like this is a better way to teach you how it works. Different from you have to dig through the documentation yourself or having to type all of this stuff yourself. Mostly, you just going to go in and turn on a couple of classes and all this stuff will pop in and we'll explain everything so don't feel like you're going to lose out. Let's go back up to the top and I'll show you some other things we're going to look at, so I don't really see anything that is jumping out at me here in the Utilities. They're mostly things like colors, and spacing, and sizing, and those are cool and helpful, but I'm trying to really show you some great things that I think you'll like. So cards are pretty cool and this is something new. You have these cards, different layouts, different looks. There's something really cool at the bottom I'm trying to get to. Next, these Card Columns and that's your masonry grid and it's pretty easy to turn that on. A lot of websites use this. It's pretty cool. It's called Card Columns and I'm going to teach you how to do that. Let's go back to the top real quick. I'm going to fast scroll so you can get there quickly. We got some pretty cool JavaScript things like Carousels. So if you like Sliders and Carousels, get different Sliders and Carousels with indicators, captions, and different things like that. And then, one of my favorites is Scrollspy. That's when you scroll and it automatically highlights stuff for you. It's pretty cool. And these are different navigations that you can have on your actual site. I'll teach you how to do all of that. That's a great quick dive at what we're going to be doing in Bootstrap Playground. Hope you enjoy it. I can't wait to see you there. 7. Containers: In this video we're going to talk about containers. No, no, not that kind of container. Bootstrap containers. So what is a container? Containers are the most basic layout elements in bootstrap and they're used when dealing with the bootstrap grid system. Containers keep everything in the center of the screen with some margins on both sides. A great example of a container is this black box here on the left hand side of the screen. As we resize the browser window, you will see that everything stays in the center of the screen no matter how wide or how small the browser window is and that's a container it contains everything in the center of the screen. So how do we create one? We're in project files 1_1_containers.html. I'm going to collapse the file explorer window and then collapse the navigation, collapse the heading and we will see start here. Scroll down just a little bit more and you'll see on line 162 a div. We're going to add a class of container and then watch on the left hand side when I save. You see it jumped just a little bit. Now it's in a container. Little hard to see. But I'll explain that in just a second. The other thing is you need to make sure you have your live server running. Your live server will allow you to see those instant updates and down here mine's already running, it says port 5500. I'm just going to hit stop and I hit go live and that's how you get it started. I'm going to close this one. That's the old one. Now I'm going to close these notifications and we're back in business. So let me do that again. So pay attention to this line right here. I'm going to remove that. Save and you'll notice it's no longer in a container. I'm going to add that container back and there you go. I think it will be a little bit easier though if added some color. So this is a custom class that I created. It's aw-bg-tan and save. Now you can see the container. It also has a little bit of padding. It is little different than the box above it but that's okay. It has some different properties set to it. They aw is just my initials. The bg is for background and then the color, tan, and then aw-height. Let's give it some height. Another custom class with just a little bit of height on it and that gives you a great example of what the container actually looks like. Now if you want a full width container then you would want the bootstrap class container fluid so line 178. We're going to add a class, a container-fluid and save. Let's also add that background color for tan and then add a little bit of height to better see it and save. Now you'll notice it does have a little bit of padding here at the end and that's just so it's not right up against that browser window and as you resize the browser you'll notice that the container at the top tends to stay towards the middle of the screen whereas the container at the bottom will be full width or 100% of the browser window. Basically those are two different ways to lay out your website. This is great for hero images, the container fluid is and the container at the top is great if you want something more center to the screen or in the middle of the screen rather it just depends on what you are really trying to accomplish. That's pretty much ship for containers. They're really pretty simple and they just give your layouts a more centered look or 100 percent width. 8. Grid - Part 1: In this video, we're going to talk about the bootstrap grid system. So, what is the bootstrap grid? It is a way to build layouts for devices with different screen sizes really quickly. Building websites that change based on the screen size of a device is called a responsive website or responsive design. Now, before bootstrap, making responsive websites was a long and complicated process. You'd have to repeat all these for every website you created. However, now, all that hard work is done for you. With bootstrap forward, the grid has been completely redone. It is traded in floats for flex box, which allows for the grid to not be as rigid. If you don't know what any of that means? Basically it means, it's now easier to use and less complicated. So, let's see it in action. 9. Grid - Part 2: Let's dive into the Bootstrap Grid. We're in project files 1_2_grid.html. So, I'm going to close the file explorer, and then collapse the navigation, and I've already collapsed the heading. Also make sure your live server is running and mine is, and then we're going to scroll down to 161 and we're going to add a class of row, and then we're going to add 'aw-grid', which is a custom class, and we're going to add class of col and save, and another class of col. Those just mean rows and columns. Real simple. Now, I don't like the margin or negative margin that is placed on the row, and it's more prevalent or seen here because you've something else to compare to it. Normally, it's not a big deal. But I'm going to turn that off or hide it by adding mx-0. That's just going to make those negative margins go to zero. I'm also going to add a margin bottom two, and that's just going to push it down a little bit, give it a little margin on the bottom just so that it doesn't crash into the next item. For example two, we're going to do the same thing, and that's a class of row, mx-0, mb-2, and aw-grid. Now, we're also going to add a class of col or column, another class of col, and another class of col. Now, let's talk a little bit about what's going on. In the first example, we have equal widths, and in the second example we have equal widths. However, one is divisible by two or two equal columns, and the bottom one has three equal columns. Now, the nice thing about flex box in bootstrap four, is they've redone the grid so that you can use just col instead of having to specify a number, and we'll get to that. Basically, what that does is it allows you to let it automatically calculate the equal widths or how many columns it's going to be and what spacing it's going to be and all that stuff. It's really nice and it's really handy, especially if you're a beginner and you haven't used bootstrap before. So, let's go onto example three, and let's see another example of it. This one is pretty straightforward. It's going to be a class of row mx-0, mb-2, and I'll save that so you can see this changes aw-grid. Now, a grid doesn't actually work until we have a column in there, it's just the way that I programmed it. So, class col, and I'm just going to copy this for time's sake and paste here, and here, and then save. Again, it's what you would expect it's divisible by four, and you can go all the way up to 12 or more, and when you're doing this, you're basically only limited by space and how much each column is taking up, it will wrap on its own, and you'll see that in a second. Let's go and add that mx-0, mb-2, aw-grid. Then, I'm going to teach a trick real quick. I'm going to highlight this, and it's the class and the quote, and then hit Command D or Control D multiple times, and just keep hitting D, you're holding command or control, you error to the right and then type "col", and save, and then hit escape, and that's a real quick way to add it multiple things or edit multiple things all at once. That's pretty much it for equal column widths, you can let it just auto-calculate, and this is what happens when we reset the browser, it starts wrapping when it really runs out of space and that's nice. Sometimes, you'll want to force it, and we'll get to that in a minute. That's pretty much it. Let's go down to equal widths with a column divider. So, we're on line 209. We are going to add row mx-0, aw-grid, and then we're going to do that trick again. So, highlight and then Command D or control D, and error to the right, we're going to col, and we actually want to take this middle one out, and we're going to save. So, we have four equal columns. But if we want those columns to wrap into two rows, we can do w-100 and save, and that will act as a divider and bump everything to the next line. You don't really use this that often, but it is nice that is there. Now, what about if you just want one column a little bit wider. To do that, we're going to add a row mx-0, and then aw-grid, and to highlight this, and Command D or Control D here to the right, and type col. Now, we have three equal width columns. But if we want to make the middle one a little bit wider, what we can do is add a number behind. So, "-5", and you say, "Hold on. Where did I get the number from?" Well, if you look over here, we have where you can use the automatic or col and no number, or you can use "col-" and a number one through 12, and it'll make it that width. That's how the grid works in Bootstrap three, and that's how it still works. Now, it's just you have that additional feature. If you want to change that, you can change it to anything all the way up to 12. But when you get to 12, it will start wrapping, and that's what just happened there. So, I can realistically go up to say 10 before everything starts wrapping, because all this adds up to 12. It may seem like a lot right now, but we'll get into it, and you'll see a lot more examples going forward. So, it's not really a big deal. Just know that if you want one of them to be a little bit wider, you just change that to anything greater than five. Anything less than four will make it either equal or smaller, just depends on what you want. So, that's column width with one wider, and everything on the sides is just auto calculating for you. Pretty nice. Now, we're going to go to no gutters, and this example is pretty much the same thing. So, we're going to add row, we're going to leave off the mx-0, and you'll see why in a minute, and we'll add that aw-grid, we're going to make these column and -5. So, we've basically got the same example but you'll notice that we have negative margin forcing that row a little bit wider than our black box. We also have some padding here, and we can get rid of both of those by using a class called no gutters. So, we're going to add no gutters and save. So, what that did is it took away that negative margin, which is what we've been using for the mx-0, but it also took away the padding. So, if you're looking at this one, it has a little bit of padding here all the way around, and then this is gone and, so is that negative margin. So, that's no gutters. That's just a quick look at the grid, we're going to go into it in the next video a little bit more. We'll talk about various column sizes and column wrapping. I'll see you there. 10. Grid - Part 3: In this video, we're going to pick up where we left off with the Bootstrap Grid. So, let's talk about various column sizes. Previously, in Bootstrap three, you'd have to specify a column, hyphen, and a number between 1-12. That still works and Bootstrap four, it's just now we have that flex property where we don't have to specify a hyphen and a number, and it will auto-calculate for us. But with various column sizes, sometimes I need or you need to be able to control that. So, we're going to add a row, save, aw-grid. Let's go ahead and go back and add that mx-0 and the mb-2, save. They give me in any order, but this is just the order, I'm trying to be consistent. We're going to add col-4 and col-8. So, add that up, eight and four is 12. If we go to nine and save, then it wraps. So, that's what I mean, but it has to add up to 12, otherwise overwrap to a new line. So, let's go to example two, and we'll get a little more practice with it. We'll add row, mx-0, mb-2, aw-grid, and then we're going to add col and col. That is the flex way or the flexbox way. But if we want to specify, we can do the same thing, the old way, and that's hype six. So, still adds up to the same thing. It's just we're controlling it. So, if we added another one of these, then it would wrap, instead of having it something like this. So, that's why it's important to be able to specify how wide you actually need it. That's just an example. So, let's continue to example three, and we're going to see what happens when we do row, mx-0, mb-2. Now, what happens if we don't specify, but two columns at a smaller width? So, col-4 and col-4. Let's also add that aw-grid, so we can see what's going on. There you go. If we don't specify that other one, it's fine. It will continue to be there and it won't wrap. It's under the 12. It's only eight. You can do all kinds of things with it. It just depends. Now, normally, you may not see these boxes around. I'm just adding these boxes so that you can really get an understanding for what the grid is actually doing. Now, in example four, we're going to see something a little different. We're going to add mb-2 and aw-grid, and save. Now, here we're going to add col-12, and save. If we do the same thing here, col-12, and save. Those are 100 percent of that row. They're all 12. So, as I resize, that's what it looks like. We'll deal with breakpoints in the later video. But let's move on to wrapping for now. So, we're going to add a row, mx-0, mb-2, and aw-grid. Now, we're going to deal with Column Wrapping. So, we're going to have a column of nine and a column of four, and you see how I pushed it to the next line because it's over that total 12 for that row and col-6. So, as you resize, nothing really different, and you'll see why we want to get to breakpoints. Let's move on to example two. We're going to add a row, mx-0, mb-2, and aw-grid. Now, we're going to do a col of seven, a col of six, and a col or a column of five. So, it forced the middle one to the next row. It's 13. So, six and five is 11, and it's under the 12. So, it doesn't wrap. So, that's a little bit of wrapping. You'll get more experience with it later, but I just wanted you to see what's going on. So, we have one last example, and that's the one row. We're going to add row, mx-0, aw-grid, and save. Now, we're going to have a column of two and save, a column of four and save, a column of six and save. So, that's the full 12, and it can be broken up in any way that we won't. It can even be one. All the way across, it would be very tiny, but you could do that. So, just to save time, let's just copy and paste this, and we'll copy and paste it again. Now, what is different between what we've been doing before is that we have one row wrapping all of these columns. It's just showing you that you can have one row to wrap all the columns, instead of having to have a row wrapping each item, which would be something like this here. Say, a div closing this and continuing to have to do that. It's the same thing. So, instead of having to add a bunch of extra code, you can not have that or leave it out. It's really up to you. It will automatically do everything for you. So, that's pretty much the grid. Next, we're going to move into the grid and breakpoints, and you'll see it adapt to different screen sizes. That's what the breakpoints is really about. So, I'll see you there. 11. Grid Breakpoints - Part 1: In this video, we're going to talk about the Bootstrap grid and breakpoints. Now, if you've used Bootstrap grid before, then you're probably already familiar with this. But if you're new, I'll take a second and explain what we're talking about. Breakpoints are basically the sizes of this window, whether it be for mobile devices, extra small, portrait phones, and then SM or small screens would be a phone in a landscape view, a tablet for MD, a laptop for LG or large, and XL for desktops. So, basically, as we resize, we get different breakpoints. Now, you normally don't see these until you have something turned on that's responding to each different breakpoint, and that's pretty much the grid. So, let's dive right in. We're in 1_3_grid_breakpoints.html. So, I'm going to collapse this file explorer, and I'm going to collapse the navigation and the heading container. So, we are now at start here. I'm going to scroll down just a little bit to line 161. We're going to start programming or adding some classes. So, a class of row, mx-0, and mb-2, aw-grid, and then we're going to add a class and a column of 12 and another one of a class and a column of 12. So, we have not specified breakpoint, and you'll see what those are in just a second. It's basically that you can choose SM, MD, LG, XL. We're going to go to example two, and we're going to add an SM. We're going to target small screens and probably in a landscape view, mx-0, mb-2, aw-grid; and we're going to add a class, col-sm-8 and another class of col-sm-4. Now, this is where it gets interesting. So, everything above a small screen, which is right here, it will be a column of eight and a column of four. Now, everything below SM will be a column of 12, will be the equivalent. It's going to change. This may be a little confusing, but it'll make more sense as you get more practice. So, we have, this one is targeting the extra small, this one is targeting everything above small. So, if you don't specify, then it will be only on small and above. We'll see more examples of that in just a second. We'll be adding a row, mx-0, mb-2, and aw-grid. Now, since these are the same, I'm going to highlight all of this and do Command-D or Control-D, arrow to the right, and col-sm-4, and save. Then we're going to go down to example four, and we're going to add a row, mx-0, mb-2, and aw-grid. We're going to highlight again and then do Command-D or Control-D, arrow to the right, and col-sm, and save. So, these are basically the same, but this is the flexbox version where we're not specifying and it's auto-calculating, and then this is the old way which is specifying exactly what we want, which is three columns of four equal parts. So, the difference between the two also comes in when you have something like that. You'll see how it wraps. If we do the same thing down here, then it will just continue to change or flex depending upon what you give it. That is where being able to specify each one matters and then also your breakpoints. Since these are all targeting small screens, everything below a small screen defaults to the col-12 or the full width. So, it's just depending upon what you want. So, let's move on to Horizontally Stacked. 12. Grid Breakpoints - Part 2: So, let's move on to horizontally stacked. Scroll down a little bit and scroll down a little bit. Now, this resizing tool is this right here. So, we'll scroll down a little bit further and we'll get to line 245 and we're going to add a class of row, mx zero, mb two, aw grid, and save. And then we're going to add a col eight and a col four. So, you'll see more of what's going on in a second. But I'm going to add all of these and then we'll go back and talk about them. So right now, we're targeting the extra small screens and above. Next, we're going to target the small screens and above, and you'll kind of see the differences once we start playing around with the resizing of the window. So, we got a row, and then mx zero, mb two, aw grid, and then I'm going to just copy this and type there, col sm, and then escape 8 save and a four save. Then, let's do example three, a row, mx zero mb two, aw grid, and then I'm going to do a col md eight, and a col md four. Let's do example four, then do a row. Mx zero, mb two, aw grid. We're going to do a col lg eight, and a col lg four. So, we're targeting large screens, and right now we're only on a medium size screen. We'll resize that in a minute. But you're starting to see like it's wrapping. We're targeting larger screens. Everything below that's going to wrap horizontally, or be full width. So row, mx zero, mb two, aw grid, and then, we're going to add col xl 8, and then column, or col xl four. So, there we go. There's all of our examples and watch this little resizing tool that I've added or created. Basically, as we resize, you'll see some weird things happening. So, everything for the extra small screens except for the first one. We're targeting a small, a medium, a large, and an extra large. These do not stack horizontally on a small screen. We want them to remain all the way up from extra small or portrait phones all the way up to extra large just as they are. So as I resize this, we're going to stop at each one. There is your small. So, this went from being stacked to horizontal, and then, when we go to a medium size screen, we'll hit another break point and we will have this go horizontal, and then the large will go horizontal, and then the extra large will go horizontal. So they went from vertically stacked to horizontal. Basically, it allows you to target each individual device or screen size. So maybe you need your text to be laid out a little bit different or any of that stuff. But this is just a real quick example to show you what happens at each break point and keep everything consistent. So you can play around with that and you can add multiple classes so you can actually mix and match, and you'll learn more about that in the next video. 13. Grid Breakpoints - Part 3: In this video, we're going to pick up where we left off, in grid and breakpoints. So, let's talk about mixing and matching different breakpoints. So, we're on line 333 or 333. For example one, we're going to add a row, mx-0, mb-2, aw-grid, and then we're going to add a col-4, and a col-sm-6 and save. Now, on the next one, we're going to add a col-8, and a col-sm-6. So, how does this work? We've basically added two classes to one column, and we're now going to see what happens when you do that. You can target different screen sizes, to whatever you want. So, if we go all the way down to an extra small screen, or a portrait phone, you'll see that we have this one kicking in, which is the col-4, and the col-8. Now, once we go up to the small screens, you'll watch it change. So, now were using the col-sm-6, and the col-sm-6. From that point forward, everything is going to remain the same. We're going to continue to be equal. So, let's continue to example two, and we'll get a little more complicated. We'll add row mx-0, mb-2, aw-grid, and then we're going to add a col-md-6, and a col-lg, and then we're going to add a col-md-6, and a col-lg. Then we're going to add a col-md-12, and a col-lg. So, what we are targeting is everything on the medium and above. If we go below that, everything goes basically 12 wide, and that goes all the way down to extra small screens. Now above medium, this is where it's going to get interesting. See, we're specifying we won't, these two split equally, and then we won't one full with, and then when we get to large, we have more room, and we want those to share whatever is left over. So since there are three columns, it's going to be divided by three. It's going to do all that stuff for us with flex box, and that's pretty much it. That's how you design your layouts. You just choose whatever breakpoint looks best, and you can stack them however you want. So I encourage you to play around with these, some people have already used this, but if not again play around. Let's move on to nesting, and this can be tricky. So we're going to have, let's move this back. So, we're on line 394. We're going to add a row. It makes zero, mb-2, aw-grid. Then we're going to have a col-sm-9, and that's your outside container. Then we're going to have some nested items, we going to have another row, and then we're going to stack a couple. So, col-8, and col-sm-6. Then we're going to do the same thing done here, we're going to add a col-4, and a col-sm-6. So,you can actually have multiple levels so say there's something you need that it's going to contain all those elements. Maybe have like a pay chart, so something like that would work here. But really I'm just trying to show how you can nest them within each other, and so you have this one set at targeting a nine. There's nothing beside it so there's not anything that's really going to wrap. Then in here you have a level two, which is a col-8 and a col-4, and then a column for sm, for small screen sizes. So, there's going to be six and equal so it will change. So everything is pretty much the same. It's just nested within another row or another column actually. So, you have your row, your column and then a row within that column. So, kind of weird. Now, we're going to see another example of it. This is going to be a little more complicated. So, we're going to add a row; mx-0,mb-2, aw-grid, and save, then are going to add a column md-4, save. Then the nested col or row, and then col-12, and then col-12. So, that's like a pricing chart here. You could keep on going and I believe everything is the same. So, I'm going to just copy, and paste that, and save, and paste that again, and save. So like I said, this would be like a great lay out for a price chart. So you'd have like maybe, your entry level or starter package, your medium package, and you're more expensive package, or most expensive package. So, that's how you can do it. This is just an example of how you can have things nested. You can play around with that. Now everything's basically 12 wide, and then we go to the four, for the medium screens. So, yeah. These always stay. These nested level 2's are always staying, the 12 and then these are basically changing the outside containers. So, that's pretty much it for the grid and break points. I encourage you to play around with this stuff, and get more familiar with it. You can try your own examples, but this should at least get you started, and I'll see you in the next video. 14. Display - Part 1: In this video, we're going to talk about Display Properties. So, we're in project files 1_4_display.html. I'm going to close this File Explorer to give us a little more room, and I'm going to collapse the navigation and collapse the heading container. So, we are on line 161 for example one. So, you have Display Properties in CSS. What they've done is Bootstrap, the people who made Bootstrap, have simplified that, so you don't have to go into the CSS properties and actually make these. They've done it for you. So, we're going to have a class of bg-primary, and this one is new, you haven't seen the colors yet, we'll, get to that, text-white and then border, just so you can see what's going on, and border-dark. So, that gives it a little border around it. So, a div is a block level element. I'm going to do the same thing again. Class bg-primary, text-white, border, border-dark. So, there you go you have two divs, and they're what's called block level elements, so they take up the full width. There's no wrapping. They wrap with in here and within here, and you can see that here. So, let's move on to example two. We're going to add a class of bg-success, text-white, and border with border-dark. These are going to be d-inline, there you go. Now, if you notice, up here, we need to add mb-3 to give us some spacing in here. Let's copy this for example two and save. Now, these are what's called inline elements. So they wrap. As we resize, they wrapped to the next line and then they eventually break to the next line. So, you have a normal div, is a block level element, and then we have made these divs inline elements. Let's go on to example three, bg-danger, text-white, border, border-dark, and we're going to add d-inline-block. We're going to do the same thing down here. We're just going to copy these classes, save a little time and put it here. Now, this is where it gets interesting. So, we have block level elements. They don't really change. You have inline elements which adapt or more like a paragraph, and then you have these block level elements that are now inline blocks. So, what happens when you go down is they start wrapping, kind of weird. Then when you go up, they bumped to the next line, because they have more space. So, that's an inline block. Now, let's look at bg-success, text-white, border, and border-dark. So, span tags are inline elements. Then, we can make them bg-primary, text-white, border, border-dark and d-block. Now, we can make that a block at level element. So, right there is span is normally an inline element, and that's what I'm trying to show you. But, we can make it a block level element by adding d-block. So, basically, we can make a span look like a div or operate like a div, and then we can have a div act like a span. Then, you can have a d-inline block which is a hybrid between the two, and that's pretty much it. So, that's your Display Properties. In the next video, we're going to go about Display Properties with breakpoints. 15. Display - Part 2: In this video, we're going to talk about Display Properties and Display None. So, let's jump right into the code. We're picking up where we left off. We're on line 203 for example one. So, I'm going to add bg-success, and then text-white, and then d-block. So basically, be converted that span tag to a display block level element kind of like a div normally is. Now, this is where it gets interesting. For a large screen, we're going to add a d-lg-inline and save. So, right now we're on medium-size screens, and when we go to a large screen, we're going to make it an inline block. So, everything above large is going to stay an inline block and everything below that is going to be a block level element. So, it's treated like a div here, or a paragraph tag, and here it's back to its normal properties of a span tag. Pretty simple. That's using display properties with breakpoints. Now, this is one of my favorite and that's the display none. We're going to start on line 218, and we're going to add bg-success text-white d-block, and then d-lg-inline and save. So, this is the same thing as what we had in the previous example, but I'm going to go in between the two and add d-sm- none. What that's going to do is for extra small screens, it's going to show up; and on small screens, it's going to disappear; and then it's going to stay hidden all the way up to large screens and then it'll come back. There it is. So, you have your large, and then your medium, and your small are hidden. You say when will I use this? Well, sometimes you want things only on a small screen, and maybe you've got it a certain layout or whatever the circumstance is. Just know that sometimes you may need things to disappear, and sometimes you need many things to appear on larger screens only. Great example of that is this tool that I created and we're going to recreate it down here. And I call it the resizing tool. It's just a way to get you to better understand what's going on with each breakpoint. So, we're going to start out by adding a class of text-center, center everything, we're going to add mt-4 for margin top four, push it down a little bit. And then we're going to add d-sm-none and we want that to disappear on everything larger than extra small. So, on small screens and above, it's going to be gone as you see there. Next, we want to do that with d-md-none. We don't want it to appear on anything above small, so on md and larger, and then we're going to add d-lg-none and it didn't go anywhere because we're only on md right now, d-xl-none, and so that should take care of some of them. So, they will disappear and on smaller screens, you see that they're all there. So, let's address the small screens. So, this one's fine, but what we need is this one to disappear on d none. So, extra small screens and above, and then we need this one to disappear on small screens and above. Same thing with large, d-none, and then extra large, d-none. Now, as we resize, we have a problem, extra small goes away but nothing comes back all the way up to extra large. How we get them to come back? This is where we go in and we add d-sm-block. So, now when we resize, extra small goes way and small pops in, and let's do that for each one. So, d-md-block because we want that to come back on medium devices or medium-sized devices, and then s-lg-block, and finally d-xl-block. So, let's see what we get. So on extra small, we have just extra small. And then on small screens, we have small. And then we have medium, large, and extra large. That's pretty much how that works. Now, if you wanted to, you can add some color in order to better understand what's going on or visually see it. So, bg-primary and save, and so on extra small screens will have the primary color which is blue. And bg-success. So when we resized to small, it changes to green. Bg-danger for medium. And then large, bg-warning, so that will be yellow. And bg-info when we get to extra large. So, that's a quick way to visually see what breakpoint you're at and that's how I created the resizing tool that you see on all the pages. So, that's it for Display Properties and Display None. 16. Flex - Part 1: In this video, we will be talking about flex properties. Now, we will not talk about flex properties with breakpoints, and the reason is, I feel like some people may not be ready for that yet. But as soon as you are ready, just come here and click with breakpoints and whatever we have talked about, you will see the flex properties with breakpoints. To hide it again or collapse it, just click the link again. So, let's get started. Let's jump into our project files, and we're in 1_5_flex, going to collapse the file explorer window, collapse the navigation, the heading, and we're at line 178. Next, we're going to add a class of aw-highlight, mb-2, p-2, which is a new one, that's just going to have a little padding all the way around, and d-flex. Now, d-flex doesn't really do anything right now. We're just enabling the flex behaviors. You'll see in later examples what d-flex actually does when we have it in conjunction with other classes. Now, here we are using aw-highlight because aw-grid does not work on flexbox containers. So, that is why we have aw-highlight. It's basically the same thing but just named different and works a little different behind the scenes. So, let's move onto example two. We're going to add a class of aw-highlight, mb-2, p-2. In this sum, we're going to add d-inline-flex. Basically, we are enabling the flex properties and making it an inline element instead of a block-level element. Now let's move onto example three. We're going to add a class of aw-highlight, and mb-2, p-2, and d-lg-inline-flex. So, basically, what that's going to do is, on large screens, is going to make an inline item. So, we did do breakpoints a little bit, but we won't have many examples going forward doing that. So, let's move onto Flex Horizontal Direction. We are on line 219. So, we're going to have aw-highlight, mb-2, d-flex, and then we're going to add these. We're going to select all that, Command-D or Control-D, arrow to the right, and type aw-highlight and a little bit of padding. So, now we have three columns inside of a row, and we're going to add flex-row. That's the default property and then next example, we're going to reverse it. So, an example two: aw- highlight, mb-2, d-flex, and then we're going to add or select all this, Command-D or Control-D, arrow to the right, aw-highlight, p-2. We're going to add flex-row-reverse to the container. Now it is not only reversed the order, it has shifted everything to the right, and that is flex-row-reverse. Now, you can also do this if we want to use a row and a column. So, we will use row, aw-highlight, d-flex, and flex-row-reverse, and save. Now we're going to add several things at once. Arrow to the right. So, we will add col or column, aw-highlight, and then p-2 for padding. Now, in order to get rid of that negative margin, we can use mx-0. That's how you can do it with rows and columns if you wanted it to fill up the four with the the row. Now let's move on to Flex Vertical Direction. We are at line 267. We're going to start by adding aw-highlight, then we're going to add mb-2 to push the next example down or get some space for it, d-flex, then we're going to highlight class, the equal sign, and the quote, Command-D or Control-D, arrow to the right, add aw-highlight and p-2, and save. That's similar to the example before, but now we want to change directions. In order to change directions, we can do flex-column, and now it's vertical and it takes up the full width for each row. Now let's move onto example two. Here we will do the same thing. So, aw-highlight, and mb-2, d-flex, and then I'll hold off on that extra class. We'll highlight class, Command-D or Control-D, arrow to the right, aw-highlight, and p-2. Now, in order to do that, we need to add that flex-column. But if we want it to be reversed, we just do flex-column-reverse, and there you go. So, that is Flex Horizontal Direction, Flex Vertical Direction, and enabling flex properties. In the next video, we will talk about Justify Content and Auto Margins. 17. Flex - Part 2: In this video, we're going to pick up where we left off and we're going to talk about Justify Content and Auto Margins. We are on line 303. We're going to start by adding a class of aw-highlight mb-two d-flex and then we're going to add a class for the next two or three, aw-highlight and p-two. Now, let's copy this for time's sake and add it to all of our other examples. You'll see why, in just a second. Okay. So, back to example one on line 303, we are going to add justify-content-start and save. Now, that is the default behavior. So, nothing has changed, but now we're going to add an example two, justify-content and this time end and save. Now, everything is shifted to the right. Now, note these orders are not changing. Whereas, in the previous examples, the orders would change whenever we would do something like that. Next in example three, we're going to add justify-content and this time we're going to choose center and that's going to center all the content. Again, it keeps the order. In example four, we're going to add justify-content-between. What that does, is give equal spacing between the items. In example five, we're going to add justify-content and this time we're going to choose around and save. Now, the difference between justify-content-around and justify-content-between is, note the spacing. There's an equal spacing between each of the items, but there is no space at the end or the beginning. Whereas, around takes the equal amount here, here and here and distributes the space. Now, you may notice that this is double this. So, what it does is it has the equal amount on the left and the right. So, that's the difference between the different justify content properties or classes. Now, let's go to Auto Margins. We're going to add aw-highlight mb-two and d-flex. Then, we're going to select each class. So command E or control D arrow to the right aw-highlight and P-two. Now, lets say we want to have the item on the left remain and the other two items, move to the right or float to the right. We just add mr-auto and that's margin right auto. What it does is it keeps the item on the left there and moves the other two items to the right. Now, let's get to example two, we're going to do the same setup, aw-highlight mb-two and d-flex, save that. Then, we're going to highlight class command E, control D arrow to the right aw-highlight mb-2. Now, let's say we want to do the opposite and leave the left two items on the left and send the right item to the right. We would add, margin-left-auto and there we go. So, that is justify content and auto margins. You may not really see how they are beneficial now, but as you start to do various things with Flex box or different web layouts, they really can come in handy. The next videos, we're going to talk about a align items and again, Auto Margins with align items. 18. Flex - Part 3: In this video we're going to be talking about align items and auto margins. Now, we are picking up where we left off and we're on line 385. So, let's start by adding aw-highlight, and then aw-height is a custom property or class that is going to add some height to it, mb-2 and d-flex. Now, we need that height in order to see what we're going to do or this example to work. So, let's select class, command D or control D, air to the right aw-highlight, p-2. Now, you can see everything stretching. That's the default, but we're going to change that to align-items-start. That's our first example. So, what it's done is it's using flex box to align our items to the upper left hand corner. Now, we can also shift them to the bottom or the end. So, let's do that. We're going to add an example to aw-highlight, aw-height in order to see our example, mb-2 and d-flex. We're going to highlight all of this and then add aw-highlight and p-2. Now, we're going to add align-items-end. It's going to take up just enough space for each item, and then it's going to push them to the bottom. Now, without the height, this is what would happen. You wouldn't really be able to see what it's doing between start and end. So, that's why I've added the height. Let's go to example three. We're going to add aw-highlight, aw-height, mb-2, d-flex, and then we're going to select the classes, air to the right aw-highlight and p-2. Now, we're going to add align-items-center. So, that's centered. Again, you notice that they're only taking up the space that they absolutely need and not going full width. We'll see how to do that in a minute though. Let's go to example four. Now, for some reason, I've left baseline and I'm going to take that out real quick, aw-highlight, aw-height, mb-2, and d-flex. Let's select all of these, command D, control D, aw-highlight and p-2. Now, this time we're going to add align-items-baseline and save. Now, the baseline doesn't look like it's much different from the start or align-items-start. But, what it does is, it actually aligns to the text or the baseline, which is basically the line underneath any text. We don't really have a great example for it here, but that's what it is. So, let's move on to example five, and we're going to do stretch. So, we're going to add aw-highlight, aw-height, mb-2, and d-flex. Now, we're going to highlight all these classes, air to the right, aw-highlight and p-2. Now, for example five, we're going to add align-items-stretch. That's the default. So, you don't actually have to specify it. We could leave it off, and that's what it would be. But, if you want to be clear, you can specify what it is so that you know what's going on. Now, I've got one more thing to show you when it comes to align items. So, let's scroll up. Let's scroll up. We have this section here. We're going to copy it. I'm going to paste right over the commented out section, and then save. We are going to add row, and we're going to highlight this, air to the right col or column, space. Now we have full width items or cells or columns. We're also going to remove the gutters. So, no-gutters. Let's go down and do the same thing for example two, and copy and paste, save. We're going to add a row. Highlight these. Add a column and then again, we're going to add no-gutters and save. Slide down a little bit. Do that for align-items-center, for example three. So, again, we're going to copy this, paste it over the commented out section. We're going to save, then we're going to add a row. Highlight now our columns, and then we're going to add no gutters, no-gutters. I'm going to slide down a little bit. Do that for example four, and paste and save. I'm going to add row, highlight class, column, and then no-gutters. Now, we could have used the mx0, but we don't really need to because we have padding on each item. So, technically, the gutters aren't being removed completely. But, I wanted you to be able to use them and use that class. So, we're going to highlight this one, and then paste over the commented out section, save. Then, we're going to add row, highlight class, add a column. That's a little different. We're going to add no-gutters, and no-gutters is not removing the padding, because we have the padding on each individual cell. So, that's align items. You can see how you can do with rows and with columns or without, and then also how it changes whether it'll be centered, vertical, and however you want, a baseline stretch. So, let's go to auto margins. I'm going to scroll down a little bit. We're going to add a class of aw-highlight, aw-height. This time I'm going to choose tall, and that's because I need a little bit extra. There we go, mb-2 and d-flex. Let's go ahead and add these, aw-highlight, p-2 and save. Now, we're going to do a little something different or just copy and paste for time's sake. Save, okay. Now, we're going to add align-items-start and flex-column and save. Now, we're going to add mb-auto. Margin bottom auto and what's that's going to do is, it's going to keep that item at the top and then bump the other two to the bottom. Similar to the way auto margins works with justify content and pushing things horizontally. Now, let's do that for example two. So, align-items, let's choose end and then flex-column. Now, let's do mt-auto on the last one. That's margin top auto, and what that's going to do is it's going to push everything to the top or push that last one to the bottom. That's it for align items and auto margins. In the next video, we're going to talk about the align itself. 19. Flex - Part 4: In this video, we're going to pick up where we left off, and talk about Align self. We are on align 497. We're going to start by adding aw-highlight, aw-height, mb-2, and d-flex. Now, we're also going to highlight these classes and then add aw-highlight and p-2. Now this is the default behavior for Align self, we haven't added anything. This is just a flex behavior. But, if we want to specify with Align self, we can come in on say the middle one and add Align-self-start, and then what that's going to do, is it's going to take and change it from stretch which is the default to start at the top. Now, let's move onto example two, and we're going to add aw-highlight, aw-height, mb-2, and d-flex. We're also going to add multiple classes to aw-highlight and p-2. Now, this time we're going to add align-self-end, and then it's going to push it to the bottom. So, now we're going to do example three, aw-highlight, aw-height, mb-2, and then d-flex, then we're going add aw-highlight to these, and p-2. This time we're going to add align-self-center. So, as you can see, it's kind of like align items, but slightly different. Let's do example four, aw-highlight, aw-height, mb-2, d-flex. Highlight these classes, aw-highlight, aw-height, and p-2. This time we're going to choose baseline, align-self-baseline, and again it is aligning it with the baseline of the text. Now, this one's going to be a little redundant. We don't have to do anything really, we're going to add these, but, d-flex. Okay, and then let's select these and then aw-height, or highlight and p-2. Now, since stretch is the default, when we add align-stretch or align-self-stretch. There's not going to be much that changes because that's the default. That's what it automatically does unless we specify it. But again, it's good to know, in case you have to override it. Now, before we move on, let's go back up to the top and let's copy all of this, and paste it, and save. Now let's add row and let's highlight all these, and add column, and then let's add no gutters. So, that's what you do if you want it to be 100 percent of the width, otherwise it's going to just take up as much space as the text that it has. Let's do that for example two. We're going to add row, highlight and add column, and then we're going to add no gutters, to get rid of that margin. Now, we have example three, which is align-self and save. We're going to add row, add column, and then no gutters. Let's do example four, and save. I'm going to add row, add column, and then no gutters. Even though this won't change, just so you have it. Let's do example five, well it will change, it will change width wise, and no gutters. So, that's pretty much it for Align self. You can see all the different ways that you can align your different boxes, not even using the grid or with using the rows and columns, and the grid system. So, that's Align self. In the next video, we're going to talk about flex Wrap. 20. Flex - Part 5: In this video, we're going to talk about flex wrap. We're going to pick up where we left off, and we are on line 590. We're going to start by adding a aw-highlight, save, mb-2, d-flex and we're going to add all of these. So, command D or control D, and then aw-highlight, p-two. So, if we want to resize the browser, everything starts to run off. If we want to force that behavior, we can do flex-nowrap. So, it will not wrap ever. It's the default behavior it looks like. So, let's go to example two and we're going to add a aw-highlight, mb-2, d-flex. This time we have a little bit more. So, I'm going to do command D or control D multiple times. Keep pressing D here to the right, aw-highlight, p-2 and then we are going to add flex-wrap and now, everything will wrap. So, as we resize, things will wrap accordingly. So, that's nice. Helps make everything automatic scales based on the text that's in each column or each cell. Now, let's go to example three. We're going to add aw-highlight, mb-2, d-flex. Then, we are going to how all of these, command D and just keep pressing D while holding command or control. Air to the right, aw-highlight, p-2, type flex-wrap and this time let's choose reverse. So, now, everything is going to be reversed and it will flex accordingly. So, it's flexing accordingly like it's supposed to. But, it is the opposite or in reverse of this. So, there's flex-nowrap, flex-wrap and flex-wrap-reverse and that's it for flex wrap. In the next video, we're going to talk about align content. 21. Flex - Part 6: In this video, we're going to talk about align content. We're picking up where we left off on line 678. So, we're going to start by adding aw-highlight and then aw-height. Let's choose tall mb-2 and d-flex. Don't forget that one. Let's go ahead and add flex-wrap and let's select all of these, so command D or control D, keep pressing D and air to the right, aw-highlight, p-2 and there we go. Now, this is the default, but if we won't, we can change it from stretch to align-content-start. Now, everything is aligned to the start, and you say, hold on a second. Have we done something similar to this? Yes, we have done align-items-start. So, I have to change it to items, there is a difference. Notice everything is still aligned to the top of the container, but there is equal spacing in between. So, that's the main difference to keep in mind. So, it just depends on what you won't, but in this case we won't content. So, let's move on. But before we do, let's highlight all of this, copy it, scroll down a little bit on this side, and let's go to example two. Let's paste it, save, saves a ton of time, and let's change this to end. So, align-content-end. Now, if you notice, it didn't actually start here, it just pushed everything down and started at the bottom of the container. So, that's just something to keep in mind, hopefully. So have that saved to your clipboard. So, we're going to paste again and save. Then we're going to change this to center, save again, and now everything is still gathered together but center. Just in case you want to see it, we can change it to items and you'll see the difference. So, that's the difference between content and items is that spacing. Let's move on to example four. We're going to paste. Now, we have between. So align-content-between, and save. Now, we get that spacing but notice there is no spacing at the top. That's the difference between align items. Now, there isn't an align-items-between. So, keep that in mind. So, let's scroll down. We've got a couple more. Let's paste for example five, and save, let's choose around. Now, we get some of that spacing at the top and the bottom. Then if we want align content for number six, and this is going to be the default which is stretch. So, if we didn't have this in here at all, it would be the same thing. But we're specifying we won't stretch. So, that's pretty much it. That's align content and you can see all the different ways you can align your stuff or your content with flex box and flex wrap. In the next video, we're going to talk about flex order, and then more wrap up flex. 22. Flex - Part 7: In this video, we're going to finish off with flex order. We're going to start by adding aw-highlight, and then we're going to add mb-2, and then d-flex. We'll select all of these and add aw-highlight and p-2. Next, we're going to start to add orders. So, let's say we wanted to add order-3. That's going to put the first item in the third position. Now, let's say we wanted to add order-2. Now, the second item is back in the second position. Then, this is obviously going to be order-1 but we can specify. Now, something interesting happens if we would delete order-1 and save, and order-3 and save. Order-2 is currently in the third position. Why is that? Well, that is because it is the only one that is specified. The other two go to the beginning, and then the last one, since it has one, is the highest number, goes to the end. Now, if I was to put order-3 here, then they change because this is a higher number. So, it can get weird and confusing. So sometimes the order doesn't always work out how you would like, so make sure if you can specify each individual one of what order you want it to be. So, we want this one to be one, and then order-3. So, let's move on to another example. Let's go to example two. We're going to add aw-highlight, mb-2, d-flex, and then we won't flex, no wrap. Let's highlight all of these. We're going to go ahead and specify aw-highlight, and then let's make down p-2 and let's just do w-100. That way it'll fill everything up. Let's go in that in order and a hyphen, and save. That way we don't have to type as much. Now, if we make this one a five, it now moves to the end and does that weird trick we talked about. But as we specify, it'll start to move around a little differently, so that when we'll put in the second position and then we'll put this one in the first position. So, you see it's acting weird, not quite how we like, but once we finish, they will be in the positions we want them to all be in. So, let's check it. There are six positions total. The fifth one should be, number one should be in the fifth spot and it is. Then number two should be in the second spot and it is. Then one is in the third spot, or three is in the number one spot, and number four is in the sixth spot, and then number five is in the fourth spot, and number six is in the three spot. So, that is how you do order and changing the order of things. It doesn't change them in the DOM or in the HTML; it just changes them to the user. That can come in handy if, say you want it to be a certain order on a smaller screen or any of that stuff. That's where it really would come in handy, if you needed to change that order per layout or per screen size. So that's pretty much it for our flex box. We'll do a wrap up in the next video, and then that's it for flex. 23. Flex - Part 8: We have covered a lot in regards to Flex box. So, let's recap. To enable Flex Behaviors, simply use d-flex or d-inline-flex. To change Flex Direction Horizontally, use flex-row or flex-row-reverse. To change Flex Direction Vertically, use flex-column or flex-column-reverse. To change the horizontal spacing for Flex items, use justify-content such as justify-content-center. You can also combine justify content and margin right auto or margin left auto to shift items horizontally. Align Items allows you to change the vertical spacing for Flex items using start, end, center, baseline, or stretch. Margin bottom auto and margin top auto also works well with Align Items to shift Flex items vertically. Align Self is very similar to Align Items and easy to confused since there are only one word difference between the two of them. However, one important note is that Align Self only changes one item, whereas Align Items changes all of the nested items. Flex Wrap is a way to control how and when Flex items wrap as well as which direction they wrap. Align Content keeps Flex items in the same order and layout while changing the vertical spacing between rows of Flex items. Last but not least, Flex Order, which is simple to use and allows you to quickly change the order of Flex items without a bunch of work or code. So, that's the recap for Bootstrap Flex. That also concludes this section. 24. Typography: In this video, we're going to talk about typography. So in our project files, we are in two underscore one, underscore typography. Let's close the file explorer. Close the navigation and close the heading. Now scroll down to start here. Now one thing you will notice is, we've already got example one set up. It's basically just an h1 tag, an h2, all the way through h6. And this is more or less here for a reference. I didn't figure I'd make you type it. But, that's basically how we do headings. Now with bootstrap, they have their own typography set for the headings, their own font size, all that stuff. But you can also change a heading, first say a paragraph. So how do we do that? Scroll down the heading. We're going to add a class on number 178. And we're going to use h1. And it will make anything that you need, be an h1 class or tag. Although it is a class, it has the same properties as the h1, HTML tag. So let's do, the second one. Let's add a class, of h2. And, let's do it again for h3 class, h3, in class h4, class h5 and class h6. So, as you can see there it is the same, but there class instead of the heading tag. So now let's move on to the display classes. Now these are a little bit different. We're going to take an H1 tag and we're going to add a class of display 1. Then we are going to add a class of display 2, a class of display 3 and a class of display 4. Now, when would you use something like this? Say you're on a page and you want a really big heading but you're maxed out at the H1 class or the h1 tag. So that's where you can use a display one through four, and have an even bigger heading. Now let's go on to the lead class. We are going to simply add a class of lead. So we have a normal paragraph and then we have a lead class for a paragraph that's maybe leading a group of paragraphs. It's just a typography class that they've added, in order to kind of make it stand out. Let's move on to text muted. We're going to add a class for this paragraph of text muted. It's going to grade out or make it faded. We're going to do the same thing on this small class here. Text muted, and it's faded out as well, or muted. Let's move on to blockquote. So we have a blockquote HTML tag. We're going to add a class of blockquote. And then if you wanted to, you can add MB0. And that would take away any margin on the bottom of the paragraph because the paragraph does have some margin. That one is optional. You don't really notice a change here. Now you will notice a change with blockquote and a footer. So we're going to add blockquote. Save. Then we're going to add blockquote footer, block-quote-footer and save. So you will notice that there is some margin on the bottom of this paragraph above it. So in order to fix that, this is where that margin bottom 0 will come in handy. Next let's talk about the unstyled lists. So right now, they have bullets. And, let's see what we can do with that. We're going to add a class, an example one on line 268 of list unstyled. And there goes the bullets. Now what happens if we have a nested list unstyled?. We still have the nested items having a bullet. So, in example three, I'll show you how to get rid of those by adding list unstyled, and then on the nested items, we'll do list unstyled. So that is how you can unstyle your list, and get rid of the bullets. Now see an inline list. Scroll down a little bit. Now I forgot to remove the list in line. But that is needed. And then we can add list, in line item and save. And then we need to do that a couple more times, inline, item. As you can see they're starting to move to the same line, list, inline, item. So there you go. That's a list inline item. Sometimes that's what you want or that comes in handy. If you're trying to change how things are laid out. And that's pretty much it for typography. 25. Text Utilities: In this video, we're going to talk about Text Utilities. Now we're in project file2_2_text, and you may notice that mine is green and that is simply because I have an error in my CSS, in the file. But that's so we can edit this stuff as we go. So let's going collapse the file explorer window, and then collapse the navigation, and collapse the heading. We're going to scroll down to example two. Example one is already been done for us, it's just a normal paragraph. But in example two, we're going to add text justify. That's going to justify the text, if you've ever used justify in a word processor you know it basically just extends everything and creates like a block on each end. So, everything is kind of spaced throughout the middle and then blocked on the ins'. So, that's the difference between the two. It just depends on what you're going for. Now let's look at text alignment. Here we can change text left which is the default or we can do text center and text right. So, that's how you can manipulate the text and cause it to go from left to center to right, whatever you would like. Next we're going to use text alignment with breakpoints. So, in example one we're going to have text-sm-center. That's pretty cool because on smaller devices, it's going to be on the left. But as we scale and go to larger devices, it's going to be in the center. Now, let's continue with text center, and then let's make text SM left, and then text MD right. So, on extra small screens, it's going to be in the center and then on small screens it's going to be on the left. Then on Medium screens it's going to be on the right and everything above that will stay the same. So, let's move on to the next one and that is text right, for extra small all the way up to large, lets do text LG left and put it back. So, let's go all the way down, and then let's slowly go up, and you'll see our various changes. There we go. So that's pretty much it for that one. Next we're going to do text wrap. This is where the CSS bug or issue is coming in. So, it's AW highlight then text no wrap and nothing will happen. But we're going to add a style with width of eight rem. As you can see with the no wrap turned on, it's going to overflow. Otherwise it would wrap if that wasn't there. So, text no wrap. Pretty simple. Over spills the container. Next we have Text Transform, and this is pretty cool. You can do text lowercase. So, everything will go from whatever it was to lowercase. We can do text upper case and everything is now uppercase or we can do text capitalize. Now it's important to note that it only capitalizes the first letter of each word, and you'll see the limitation of that in just a second. So, text capitalize does not fix anything that is capital in between. It doesn't even mess with any of that. So, that's just something to keep in mind it doesn't change those and you can't combine them. Now let's look at font weight and font italics. So, we're going to have font weight bold, and then we're going to have font weight normal, and then font italic. So, the only time you would use some of these is, if you needed to really change the weight without having to go into the CSS or say it's already bold by a parent container and you want to make it normal then you can use the font weight normal. So, that's pretty much it for Text Utilities. I'll see you in the next video. 26. Code Styling: In this video, we're going to talk about the HTML tag code. So, we are in project file 2_3_code. I'm going to collapse the File Explorer window, collapse the Navigation, and collapse the Heading Container. We're on line 161. Let's start by talking about what is the HTML code tag used for. It's basically used to demonstrate a code block or a piece of HTML or CSS, something that you're trying to show someone, but you want it to look a little bit different so they know it is a code block. One way to do that is simply to wrap the item in code or a code HTML tag. So we're going to write this div here in a code block or code tag and you'll see it changed to a pink. Now, that is the way Bootstrap 4 does it in the final version, but in previous versions it looked a lot closer to this. I actually like this code block better. I feel like it does a better job, but mainly it does a better job on dark backgrounds. Now, the other thing that you can do is you can also include the brackets. Now, unfortunately, you can't just use the brackets or it will turn it into a div. Something like that. That doesn't work. So when I save it, it thinks it's something else. So you can't just use those, you have to do what's called an escape, and you do an escape by adding an ampersand or an and symbol, and then you add the lt for less then, and then a semicolon and save. So that's the first bracket. To do the second bracket, we would do, again, an ampersand or and symbol, and a gt for greater than, and a semicolon, and save. So now we can definitely see that that is a code block or HTML tag. I don't like the pink. I still don't like the pink. But that's the way you do it or that's the way it looks in Bootstrap 4, the final version. Now, we can go on and do this block here, and we can make it scrollable. So to do that, we're going to add pre-scrollable, and save. Now what that does is it turns this pre-block into a scrollable section, and there you go. Now some people may be wondering what the difference between the pre and the code. Basically, we're wrapping the code in pre in order to indent it here, and then the pre-scrollable allows it to be scrollable. Now, unfortunately, it doesn't highlight the HTML like you would think it should, and we still have to escape every character for the brackets, but it would get cumbersome to see all the different colors and stuff like that, so I think that's why they didn't do it, but also they're doing a code block by showing that it's indented. So, it's just a different look. But that's how code and the pre HTML tags work in Bootstrap 4 along with the pre-scrollable class. 27. Colors: In this video, we're going to talk about colors in bootstrap. So we're in project files two, underscore four, underscore colors. I'm going to collapse the file explorer window. Collapse the navigation, and collapse the heading container. Now we are on line 162, and we're going to start by adding some classes to change the text color. Now, normally you'd have to go into CSS and change the colors to whatever you want, and create a custom class. Well, bootstraps done that for you. They have a certain set of colors that they use, and we're about to see those. So let's start with text primary, and that's a blue, and that's their primary color. Then we have a secondary color which is text secondary, and then text success which is a green. Text danger which is a red. Text warning which is a yellow. Text info is a light blue or turquoise. Text light, and that's hard to see, so we're going to add a bg dark which is a background color for dark, and there you can see it. Text dark now it didn't really change anything, it's basically used on light background such as white or anything else, that you need to have a dark text color for. Sometimes you will use it if say the primary containers a different color, so you'll see different use cases like that. Next, we have text muted, and save, and then text white, and save. Let's add a bg dark, and that way we can see it. Now light and white are different, but they are pretty close. Next, we're going to do links and text colors. Normally by default, links are blue in most cases, unless you're overriding it in CSS. Now without any override, they have it set to their primary color, so all links are set to the primary blue color which is a little bit different than the standard blue color that you see in most of the time with links. So that's a bootstrap thing. This time we're going to add text primary which like I said is the primary one, that's what they're using. So no change there text secondary, text success. So nothing really different, I'm just showing you how they work on links. Text danger. Text warning. Text info. Text light, and let's add that bg dark. Then we're going to text dark. Again no change really, well there is a change because it was going from the blue, text muted, and then text white. Since we can't see it let's add that bg dark. Now we're going to look at background colors, and we cannot really covered them above. There's one important thing to note up here as well. There are no linking styles, so when you hover over these, you see it changes color. One thing to keep in mind is for white it doesn't change colors really, so there's no real change, you may see a slight change, but previously or at least now there haven't been with text muted and text white. There's no real apparent change. So just keep those in mind when you're styling your stuff. So, other than the underlined, those two don't really have any styling changes. Something just to keep in mind. All right onto background colors. Let's actually select all of these command here control d, head to the right. Let's add some padding, and then let's add some margin-bottom too, so they are running into each other. Then we'll add text white, and you'll see why in a second. Then bg, and then hyphen, and escape and escape again. Now what that's going to do is have some of that work done for us, now we just add the color primary, and there you go. Let's do secondary success, danger, warning, info, light. Now, let's remove that, and there we go. Dark and white, and let's also remove that text white. So there you go, that is background color, and that is text colors and link colors, all in one. So that's pretty much all the bootstrap colors that you will see throughout, and we'll use. 28. Spacing - Part 1: In this video, we're going to talk about spacing in Bootstrap. Now, we are in project file two, underscore five, underscore spacing. Going to collapse the navigation, or the file explorer, then the navigation, heading container, and we're on line 162. Now, we've already been using the spacing classes, but I'd never really fully introduced them, and that's what we're going to do now so that you can better understand what we're actually doing when we add these spacing classes. So, let's do a little prep work. Let's highlight all of these in example one, Command D or Control D, here to the right, and we're going to add bg primary and text white, and escape. Now, with margin, we're going to add it on all four sides. So, in order to do that, use a class of m-0 will be no margin at all, which is what we already have, and save. Now, to the next one and we're going to add m-1, and save. So, what we're doing is, we're adding space or white space to the outside of this box. Let's continue. We're going to add M2, and it's equal spacing all the way around, and M3, M4, M5, and there we go. Now, to better understand what's really happening, I'm going to inspect this element by right clicking and inspect. Here, you can see we have all of these items right here, I'm going to better do that. Here we go. So, what you can see is, on the outside of each one of these, is this margin. If you know what the box model is, basically, you have your box and then you have padding, and a border and then margin. So, it works basically from the inside out. So, we're on the outside, and we're changing the margin. Now, as you can see, as we move up each time, you'll see the margin around the edge. It's color coordinated, so you can see it matches. You'll see when we get the padding later, it will be green whenever you see the padding. So, that's how the box model works, and that's how margin works. We're just using these classes to add margin all the way around the box. So, let's move on to margin top. In this example, I've already done a lot of setup work for you, so that you won't have to continuously type the same things. But we are going to need to highlight all of these, and add four just for speed purposes, an error to the right, and we're going to just do the margin top. So mt, and then hyphen and then a space, and then hit Escape. That will get us back to the first line. We're going to start with zero and save, that's our default. Then one, it's going to added just at the top, and then two, and then three, and then four, and then five. So, if you wanted to inspect this, you can, but it's just going to be the margin at the top. So, as you can see, there's just margin at the top, and not all the way around, like there was in the previous example. So, that's margin top. Let's move on to margin bottom. This is going to get pretty routine, but I want to go through it just so that you can see. So, we're on line 196. We're going to select all of these, and then add mb, for margin bottom and then hyphen, and space, and then escape to get back to one line, add a zero, add one, add two, a three, a four, and a five. It's just adding the margin at the bottom. We've been using this one in order to push some of our other examples lower, so that they have proper spacing. So, you've seen these before, but now, you should be able to better understand what's going on with them. Again, we're going to do this in the next example. This time, we're going to do margin left. So, we highlight everything, ml hyphen, space, escape and then we're going to add zero, one, two, three, four, and five. Interesting, so now, we're going to do the same thing for margin right. Highlight all of it, and then add mr hyphen, space, escape. Then we're going to add zero, one, two, three, four, and five. So now, we have margin left, margin right, now we're going to do margin left and right at the same time. This one can come in handy if you need to select both the left and the right, which is more common than just one or the other. That's where this one comes in. You don't have to use as many classes. So, error to the right, and mx for the x-axis hyphen, space, escape, zero, one, two, three, four, and five. So, much easier than having specified the left and the right, every time. Now, if you wanted to do just the top and the bottom at the same time, that is where my or the y-axis comes in. So, we're going to select all of these, and then do my, hyphen, escape, zero, one, two, three, four, and five. So again, my or margin y, is going to do the top and the bottom. Now, in the next video, we're going to talk about padding, and will further explore the box model. 29. Spacing - Part 2: In this video, we're going to pick up where we left off. In this time, talk about padding in bootstrap. We are on line 284. Let's jump right in. So, let's go ahead and add some padding for all of these items and let's add p hyphen space and then let's add some margin to the bottom in b hyphen one and space. That way it gives us a little bit of room and separates everything and just clears it up. Let's go ahead and add our zero, our one, our two, three, four and five. Now, here you can see it's a little bit different than the margin. It's adding it to the inside of the box. So, if we inspect this element, you will see now we have padding here. So, let's go down. So, if you can see on the bottom we have the margin. Then, the rest of it is the padding. So, normally it would be green, but we have the blue and it's mixing with the colors. No big deal. But that's how the box model works. So, now you're seeing padding which is on the inside of the box and margin that is on the outside of the box. That's really simple. That's about it. Now, let's move on and let's do padding just for the top. Again, it's going to get repetitive, but I've tried to do a lot of the work for you. So, let's highlight these and we're going to use pt for padding top, and then hyphen, space. Let's add that margin bottom one and space. Let's start by adding zero and then one, two, three, four and five. Now, we're going to do padding for the bottom. I'm going to highlight all of these, and then we're going to add pb for padding bottom. I'm going to add that mb-1 for the margin bottom. Let's go back and add our numbers. Zero, one, two, three, four and five. Now, let's do our padding to the left. Select all of these. Then, pl for padding left, hyphen, mb1, space. I'm going to add zero, one, two, three, four and five. Then, let's do the right. I let all of those. So, it's pr for padding right, hyphen mb, hyphen one. Let's go back and add our numbers. Zero, one, two, three, four and five. Can't really see the padding right and the reason is it's adding it to the inside of this box. So, if we had all the text aligned right, then we could see that. So, what we could do is highlight all of this, and then do text right and save, then you can see it. So, that's a good example. Now, if you want to do the left and the right, then px is what you need. We're going to start by selecting all of them, px for the xaxis, hyphen mb-1 space escape. Do our numbers. Zero, one, two, thee, four and five. Now, again, you can't really see the right side because there is no text over there, but just know that if you add text that was fully expanded or stretching all that far, you would see it on both sides. All right. Now, we're going to use py for padding on the y-axis which is the top and the bottom. Select all of that, air to the right, py hyphen, space mb-1 space, escape. Add our numbers. Zero, one, two, three, four and five. So, that's top and bottom. Now, that's pretty much it. I know it was boring. I'm glad you stuck with me, but that's padding. You'll see some of that more in the future. I haven't really been using it that much so far, but it does come in handy. Now, in the next video, we will talk about margin and break points, and padding and break points. 30. Spacing - Part 3: In this video, we're going to talk about margin, padding, and break points. Now, we're on line 405, and let's go ahead and add in some margin for an extra small screen and that will be m-1 and save. Now, we can mix it with breakpoints and we can use m sm-2, so that's going to be margin all the way around on small screens and above, it's going to be two. Then m md say three and save, and then it's going to scale on everything from medium and above. Let's do m lg four and then m xl five. So, let's take a look at what we've got. So, on extra small screens, it goes to one, on small screens it goes to two, and then on medium screens it goes to three, and then large four, and then extra large five. So, it may not seem very useful right now but when you get into different situations, you will see how having the ability to set at the margin or the padding at different breakpoints will come in handy. Let's go ahead and do example two. So, we're going to add mt one, mt sm two, mt md three, mt lg four, mt xl five. Now, one thing that you can see here is, as we resize the margin on the top isn't really doing what we expected, and part of the reason is because the top one is overwriting some of this, because this is set as the same. So, we can actually turn this off and better see what's going on. Now, we can see that bottom one, it's not being overridden or how we want to call that, and then we can turn it back on. As you can see, it mostly affects the top, but those two are adding together and cancelling each other out or may obviously canceling out the bottom one. So, let's move on to padding and you won't see that on this one because it's the inside of the box. So, we're going to add p one, p two, or p sm two, p md three, p lg four, and p xl five. Let's also add some margin bottom, just so you can see the difference. So, as we resize, you will see the padding change inside the box all the way up to large screens and that's at each breakpoint. So, let's do the last one and that is pt one, pt sm two small screens, pt md three medium screens, pt lg four, and pt xl five. So, that is padding for each break point. All the way up to extra large screens. That's pretty much it for breakpoints, works the same way as you're used to with the grid system but it's just for padding and margins. 31. Sizing: In this video, we're going to talk about the sizing utilities. So we're in project files 2_6_sizing. I'm going to collapse the faile explorer window, collapse the navigation and the heading container, and we are on line 161. Let's start by adding a class of aw-highlight, class p-3 and w-25. Now, what w-25 allows us to do is quickly set the width to 25% for this div. Sometimes this comes in handy because you need to set the width to a certain%age or to a certain size very quickly. Now, let's move on to see how we can set the width to 50%, 75% and 100% in the next examples. Now, let's go ahead and highlight all of this and copy it and paste it just for time's sake, and save. Now, it's going to default to 100% width, but we can change that by overwriting it to w-50 and save, and w-75 and save. Now, this one's going to be 100% but we can specify if we needed to 100%, and that's how you do the width. Now unfortunately, there aren't any other widths that you can add really quickly. You would have to go set your own CSS or styles in line. Now, another one that comes in handy is setting a height. So, let's move to example one for sizing and height. So, on line 175, we're going to add aw-highlight, aw-height, and then let's select all of these and command D or control D here to the right, aw-highlight, and then we want those to be d-inline-block, and we also want those to have a px of three, or padding on the x axis of three, and then we're going to have h-, and hit escape. Now, we're going to set the first one to 25, and then the second one to h-50, h-75, and then h-100. Now, you notice those did not have a height of 100 right out of the gate or by default. So, that's just something to keep in mind. So that is how you use the height classes in bootstrap, but keep in mind in order to set these you have to have a container that is tall enough to hold them or at least notice the size change, such as this outer div right here that is wrapping all of these elements. It has a tall height, so that's what allows it to really show up here. Now, let's move on to max width. Now, I'm going to add.jpg and save. Now you're going to see that this picture or image is flowing out of its container and is really way too large. Now, we could resize the image but if we can't do that or don't want to spend the time to do that, then you can also come in and add mw-100, and save. Now, the max width is set to 100%. Pretty simple, huh? Now, in the next example we're going to use max height on line 202. We're going to start by adding aw-highlight, and then aw-height, and save. Now let's also add aw-highlight, and then aw-height-tall, and then w-25 for a width the 25%. Now it may be hard to tell, but it is actually overflowing the container that it does in, this div right here. It's over flowing, and to show you that, I'm going to turn on bg-danger. See, it is now overflowing, and we won't that height to be a maximum of 100%. So in order to do that, we can use mh-100, max height of 100, and save. That's it. Now, we can actually remove this bg-danger, it's not necessary, but I just wanted you to see more of what was going on because I knew those colors were blending together. That's it for sizing utilities. 32. Images: In this video, we're going to talk about images. So, we're in project file 2_7_images. I'm going to collapse the file explorer window. collapse the navigation and the heading container and we are on line 160. Now, I'm going to start by adding the dot jpg file extension back to the files and as they come in, you will see they are really large. Now, the problem with this is it's really unruly and it's really unattractive. But we can add image-fluid and now it's resized to fit inside the container. Let's do the same thing to the other one, image-fluid. Now, the nice thing about this is it makes them responsive, so they resize as we hit different breakpoints. Perfect. Now another thing that we can do is stick them in a row and then stick them in a column and another column and so there you go. If you wanted to specify, you can even do six and now it's set to six and it will get no larger other than resizing and will wrap. Now, let's move onto example two. So, we're going to add row and let's do col, col and then let's go ahead and add back in the dot jpg and it's again very large, dot jpg. Let's add a different class which is max width 100 and max width 100. Now, as you can see, both examples do the same thing but they have different classes in order to accomplish the same goal and if we took away the row and the columns, it would again have the same thing as what we first seen with a 100% width across the container. Now, if you wanted to, you can add mb-2 and give it some margin and push that stuff down. Now, let's move on to responsive thumbnails. So, we're going to start by adding a row and then a col-6 and a col-6. Let's go ahead and add the dot jpg, dot jpg. And this time, we are going to choose image thumbnail and image thumbnail. Now, this may look very similar to what we have above, however, there is a little bit of a slight border around these and they are a little bit smaller than the ones above and that's most likely so that you can click on these and have them display an image most likely with a thumbnail, you click it and then it shows a larger version. So, that's where responsive thumbnails will really come in handy. Let's move on to align images. We're going to start by adding dot jpg back to these, dot jpg and dot jpg. We're going to add a class of, actually, let's just highlight all of these and add a class of W50. We are going to scroll down, we're going to put some margin on the bottom of each then we're going to add D block and then space and escape. Now, we can add mx-auto and it will automatically center it. We could also add ml-auto which will align it to the right and MR auto which will keep it on the left. And that's how you can align the images as well as resize them or keep them in proportions within their containers for image fluid and image thumbnail. 33. Figures: In this video, we're going to talk about the HTML tag, figure and figure caption. Now, we're in project files two underscore eight, underscore figures. Close that and close that. We are on line 165, and you will see that we have a figure tag and and a figure caption tag. Now, these are new HTML tags in HTML5. Basically, all they are specifying figures and the caption that goes along with them. Now, bootstrap has also added a figure class. So, let's use that now, figure and save. Not much changes there, but let's go ahead and add the figure caption, figure caption. As you can see, there is a change on the left. They're using text muted for the style or the text color and then, they also have a little bit smaller font. Now, we can also add figure image, figure image or IMG, and that will change the figure as well. It will also change the margin on the bottom and make the image a little bit smaller. So, let's do this to the next example, and that's figure and then, let's add that figure image, or IMG and let's add, figure caption and then, we can do text, center. That may be hard to see, but I will resize the browser window in just a second. Let's move on to the next one and we're going to use figure and figure image or IMG and figure caption with text, right. Now, as we resize, you will see that on larger screens, it makes a big difference, or even with less text on smaller screens. So, that is figures, the new HTML tags and the figure classes in bootstrap. 34. Borders: In this video, we are going to talk about borders. Now, we are in project file 2_9_non_borders. I'm going to collapse this, and we're on line 165. Now, let's go ahead and highlight all of this and then command D or control D, arrow to the right, and we're going to start by typing in d-inline-block and save, and then space and we're going to turn on the border and then we're going to use the border class, border-dark and then margin two and padding two. Escape. Now that is how you turn on the border. You have to have border and border-dark, so that one will stay. But in our next example, we're going to see how to remove part of the border. So, border-zero will remove all of it, and then to remove the top, we just type border-top-zero, border-right-zero, border-bottom-zero, and finally border-left-zero and then save. And that's how you can turn on and off the border as well as specify which part of the border you want to turn off, whether it'd be the top, the right, the bottom or the left. Now, in the next example, we're going to look at border color. So, let's scroll down to line 182 and let's go ahead and highlight all of this, and then we're going to add border since we had turned on the border in order for it to work. Then we're going go ahead and add border hyphen and then hit Escape. Now let's save and we're going to start by adding primary and then let's go through and add secondary and then danger, success, warning, info, dark. Now, in order to see the next ones, let's add bg-dark and text light. Then let's highlight all of these, command D, control D, arrow to the right, border, border, escape, light or border white. And that's how you can change the border color. Next, let's look how to change the border radius. So, we're going to scroll down and we are on line 207. Let's start by highlighting all of these and then adding the class of bg-secondary. So, this will allow us to see the rounded class a lot easier. So, we're going to start by adding rounded and save, so that rounds the corners, very similar to the buttons that you'll see later. And then if you just want to round the top, you use rounded hyphen top and then we can round the right side with rounded right and rounded bottom for the bottom, rounded left for the left side, rounded hyphen circle and save. We'll make it a circle and in this case since the text is kind of long it's actually going to make it an oval. And then rounded-zero, which that's already what it is. But if you add another parent class that was controlling that and you wanted one item to not be rounded, that's when that would come in handy. Now, let's see what happens when we use them on some images. So, let's add rounded to the first image and you can see the slight radius change or rounded effect. Let's go to the second one. We're going to add rounded hyphen top, rounded right, rounded bottom, rounded left, rounded circle. Now, that one is an oval. And in order to fix that, we'll show you in the next one. Rounded circle. And then if we add a style to it in line, width, let's choose 115 pixels, semi colon and height of 115 pixels and save, and now we have a perfect circle. However, let's go back and make that center. So d-flex mx-auto and there you go. Now, one last thing to do is kind of obvious, it's not going to do much but it's rounded-zero. So, that is how you turn on and off the borders as well as change the colors and change the border radius. 35. Tables: In this video, we are going to talk about tables. We are in project file 2_10_tables. Collapse all this, and we are on line 160. Now, it's really simple to turn on the table class and that is table, and that's it. Now you have a Bootstrap looking table. Now, it is important to specify for all of these scopes that these are the columns. So you would type col. That helps with screen readers as well. Now, let's do the same for these and let's do command here control-D, and since these are all within the body, they're going to be rows. Now, it doesn't change anything on the front, or what you can see visually, but it does help those screen readers. Let's move onto example two, or table dark rather. All we have to do is add table and then table dark. That's if you want a dark table. Let's go ahead and add the columns for the scope and let's do that for these rows as well. Next, we're going to have the table head options and that is add a table, class, let me scroll up or scroll down rather. Then have a class of thead dark. Now, you can have just the heading set to dark instead of the whole table. Now, on example two, we can set it to table and then have a thead of light. Now we have a light table heading. Next, let's look at table striped. So table, and then table striped. You'll see that every other line is now a different color or striped. Now on example two, we can do table and then table striped, and then table dark. We can have a dark table that is striped. Next we have table bordered. Now we have to add is table and then table bordered. That adds a border all the way around the table and inside the table. Now, on example two, we can see table, table bordered and table dark. So, as you can see even with the dark color, you can still have a light border. Let's look at table hover. Simply add a class of table and table hover. What that does is when you hover over a row it highlights or has a hover effect. Now on example two, we can do the same thing, table hover, then table dark. As you can see, we still have a hover effect on the table dark. In the next example, you can see where we have table small. So, we add table, table small or sm. Now, we have a table that is a little bit smaller as far as size and text. Now, we can also add an example two the same thing, but for table dark. So, table, table sm and table dark. In the next example we will see table responsive. So, add a class of table, table responsive. What that does is it allows it to have a horizontal scroll on smaller screen sizes. As you get to larger screen sizes, it goes away. Now, we can see the full text without it extending outside of the container. Next, we have table responsive with breakpoints; table responsive and then lets add a sm. As you can see, the table is now extended outside of the container. So, it would need to be adjusted but I'm just trying to prove a point that you can do this, and on small screens then it will be responsive. So ideally, you would make it where it is not extending outside of the container on the smaller sizes. So if you really wanted to you can change the break points. Sometimes table responsive is just easier by itself. Now, this is where things are going to get interesting. We have contextual classes. So, let's scroll down and look at contextual classes which are, start with table and save. Then on each one we can have things like table active and then we can have table primary, table secondary, table success, table danger, table warning, table info, table light and table dark. In example two, we can have table and then we can have each cell be a different one. So table active, table primary, table secondary, table success, table danger, table warning, table info, table light, table dark, and then on example three, we can do something a little different that is table and table dark and now we can add different row colors, bg-primary bg-secondary, bg-success, bg-danger bg-warning, and bg-info. That's how to style your tables using the Bootstrap classes. 36. Vertical Align: In this video, we're going to talk about vertical alignment. We are in project file two underscore 11, underscore vertical, underscore align. I'm going to close all this, collapse this and we're on line 165. If you want, you can use options Z, or Alt Z to change whether word rapping is on or off. This may help you since there are a lot of comments for this example and that's just so that you can have definitions out to the side to really see what's going on. That's the only reason they're there. Now, I'll start by adding align, bass line, align top, align middle, align bottom. Now you're seeing very subtle changes but things are about to change in a minute. Align text bottom, there we go. Align text top. So, that is how you do vertical alignment for inline elements. Now let's see what we can do with table sales. So let's scroll down to line 186 and we're going to add AW height, and we're going to use align baseline, align top, align middle, align bottom, align text top, and align text bottom. That is vertical alignment for inline elements and table cells. 37. Float: In this video, we're going to talk about floats. We're in project files 2_12_float. Collapse all of this and we're on line 160. We're going to start by adding float-left. Now, this is the default so you won't see any changes, float-right and float-none. That's how you can turn off the float if you had a parent element that was controlling some floating style that you needed to turn off. Next, let's look at float with breakpoints and we're going to add float-sm-left and float-md-right, and then let's add float-md-right and float-xl-none. Right now everything is on the medium size so it is floating to the right. Now, let's go to the small and everything close to the left, and then for extra large, float's going to be none, and it's going to remove that float class. That's pretty much it for floats. Next, we will talk about a clearfix. 38. Clearfix: In this video, we're going to talk about clearfix. Now, we're in project file 2 underscore 13 underscore clearfix. Now, close this. Collapse all of this, and we're on line 160. Now, let's highlight both of these, and then add button or btn and then btn-secondary. I'm going to float, and then a hyphen, and then escape. I'm going to add left and a right, and now they're floating. So, no matter how we resize, they float. Now, there's a common problem with floating items or elements, and here's a great example. If we add bg-info and save, we don't see it. Why is that? So, let's inspect the element, right click and inspect, and if we look at the parent element, this element right here, the bg-info, we can see it has no height. So, we need to clear and fix these floats or clear these child elements. To do that, we're going to add clearfix. We'll save, and now you can see the blue is there for the background and we have our height back. So, that's a common problem with using floats. Things don't work and you have to reset them, and that's what clearfix is for. Now, in Bootstrap 3, the grid was entirely built with floats and so that was a common problem. Now that we're using flex box, you probably won't use floats as much and you probably won't need the clearfix as much. But if you are curious, here's a great example on w3schools.com and they show you more of what clearfix is and the problems that came about. So, you'd have this element that is outside of its container, and with clearfix, it will put it back in its container, and it shows you some of the CSS that used to be and now is the best modern method. So, that is clearfix and that's your example and I'll see you in the next video. 39. Screenreaders: In this video, we're going to talk about screenreaders. Now, we are in project file 2_14_screenreaders. I'm going to collapse this, and we're on line 162. We're going to start by adding a class of SR only, and that will hide the text and it basically means it's only for screenreaders. You can't see it, an SR only focusable. Those are two classes that allow screenwriters to both read it and focus on it. So, what is a screenreader? A screenreader is a piece of technology that allows a user to better understand the content that is on a website if they have a visual impairment. Sometimes, they don't see the contextual clues that we're used to and so, we have to program websites in order to make sure we support them, and this is one way to do that. So, SR only, hides it from the normal user, but someone with a screenreader can see what's going on. So, I'm going to turn on the screen reading capability for my Mac and you will see what happens with screen reading. You will also see how the different elements interact. Let's dive in now. Voice over on Chrome 2_14_ screenreaders, window, 2_14_screenreaders, HTML content has keyboard focus. Navigation two items, visited, Link, bootstrap Playground, list five items, visited, link, home, collapsed internal, link, JavaScript, end of list, end of navigation heading Level 1 2 items, heading level five, tablet.sr-only-focusable internal, link, skip to main content. So, I finally got this working, and as you can see, there's only one item. Now on that arrow, use the commands, you will see what happens. Internal, link, testing screenwriter only Link. So, as you can see, the screen reader has picked up or detected that text. Now, I'm going to turn it off. VoiceOver off. It's still there and as soon as I clicked in the browser window, it went away because it lost focus. But that's how strain reading technology works and it allows users to get more information from the webpage, that isn't always needed or necessary for every user. Sometimes, you can do it visually but if you have a visual impairment, or your user has a visual impairment, then you need to make sure that you program that in there. That's pretty much it for screenreaders. I encourage you to go play with him and just see how difficult it can be to navigate that way. Just to get what I showed you there, it took me a few minutes to get to the content I actually needed to show you. So, keep that in mind when you're developing your websites. 40. Media Objects: In this video, we're going to talk about Media Objects. We are in project file 3 1, media object. I'm going to close all that and we're on line 162. I have turned off the image. So, we're going to add back the file extension.jpg, and as you can see, it's really large. Now, you will need to resize your images when you're creating your own projects or you can just use a custom class to reduce the size. That's what we're going to do here. AW, profile, hypen, pic. Now, we're going to be building media objects. The best way to think about a media object is just a profile picture and a comment with a heading. So, let's get started. I'm going to add a media class and save. Looks like we need a little margin on the image, so margin right, three. Then, you also need media body for the text and that's it. Now media body looks like it has no effect on the page, but it actually is turning on some classes in the background like flex and stuff like that. So, let's move on to Media Object and Nesting and we're on line 180. We're going to add a media and then mt three to give a little margin on the top. We need some margin to the right, on the image. Then, we need media body. Now, that is a normal comment and we have another normal comment. But this time I've filled in a little extra stuff for you, so all we have to do is turn on media. Now, because everything is nested underneath it, it changes the look on the page. So for nested one, or Nested Comment one, we're going to add media and then this image is actually wrapped in a link. So, we're going to add a class of pr or padding right three and everything else is filled up for us. We're going to add media to this one as well. Then again, we're going to add the padding to the right and then more time. Media and padding to the right. This is a normal comment, it's not nested. Let me scroll up so you can see it. For this one, all we have to do is add media. That's it for our nested media objects. Now, let's move on to Media Alignment. We're going to use align, self, start on the image which is the default, but we can also use align, self, center and then it'll move to the center of the body of the text. Then the last example, example three, we had align, self, end. Then, it'll move to the end of the body of the text. So, those are three different examples for that. Let's move on to Order. We're going to add a class of media and immediately it goes to the right. You may wonder why? That's because the image is underneath the media body, instead of on top. Now, we can also add some margin to the top and then let's add some margin to the left of the image. In that way that text will wrap away from the image. Now, there is another way to do this and an example too. We're going to start by adding media and then we're going to add on the image, order, hyphen, two. That will move the image to the right. Basically, we're changing the order, if you remember that from the flexbox examples. Now, let's add that margin to the left and let's give it a little margin to the top, to bring down that heading. There you go. That's two different ways to order it. Last, let's look at the Media List. We're going to start by adding list, unstyled, to remove the bullets. Then, all we need to do is add media to these and let's make margin my is to four. Spread those out a little bit on both the top and the bottom and then, media and save. Now, one thing to note is we've already added the media body and the margin on the right. So, you're pretty much set. I will bump these in a little bit just for proper HTML styling, and that's it. So, that's Media Objects, Media Lists and Ordering Media Objects. 41. Alerts: In this video, we're going to talk about alerts. We're in project file 3-2-alerts. That claps all of this, and we're on line 162. All we're going to do is we're going to add several classes. So let's highlight all of these, and then add alert, and alert hyphen. So, they kind of moved around on us, and then we're going to change this to primary or add primary. There you go. Now, you have to add alert to turn it on and then alert hyphen in the color in order to tell it what color it is. This one is secondary, success, danger, warning, info, light, which is hard to see, and dark. Now, in the next example, we won't be able to do that, but we're going to start by adding a class of alert. Let's scroll down so you can see what we're doing. Alert-primary, and then we need to add alert-link. It just puts different styling on the link. Let's move on to the next one: alert, alert-secondary, and alert-link; alert, alert-success, and alert-link; alert and alert-danger; and change the alert-link, alert, alert-warning, and alert-link; alert and alert-info, with alert-link; alert, and alert-light, and alert-link; and last, we have alert, alert-dark, and alert-link. There you go. That's alerts with alert-links. Now we have additional content that you can add to an alert. We're going to start by adding alert, alert-success. Then, if you have an h4, you can add alert-heading, and all that does is make sure it inherits the proper heading color. We can also add mb-0 to bring that bottom-up a little bit. Let's look at dismissing. So, we're going to start by adding alert, alert-warning, and alert-dismissible. We're going to add fade and show. Then, we needed change the button to close and give it a data-dismiss of alert. Now you should be able to click it, and it should go away. If not, go back and check your work and make sure you did everything correctly. That's it for alerts. They're pretty simple. 42. Badges: In this video, we're going to talk about badges. We're in project file 3_3 badges. Linked clapps this, and we are on line 162. Let's highlight all of these, using command D or control D. We're going to add a class of badge, which basically turns it on. See it changed the format. Now we want to add a color of badge, secondary, and hit escape. Now because these are headings, and different size settings, that's how we got that look. Now let's move on to nested badges, and you can nest badges within other badges. So we're going to start by adding button. Button primary, and then we want to change this span to be a badge, and a badge light. Basically there would be like a notification that would indicate how many notifications you actually have. Next let's move on to badge colors. So, we're going to add a class of h4, just to make them a little bit bigger so they're easier to see. Then we're going to highlight all of these so we don't have to type as much or type it multiple times. Badge, and then badge hyphen, and escape. Then we are going to add a primary, secondary, success, danger, warning, info, light, and dark. Next we're going to look at pill badges. We're going to add h4 again so you can see them. Let's highlight all of these, add badge, badge hyphen pill, and then badge hyphen, and escape. Now we're going to start by adding primary, secondary, success, danger, warning, info, light, and dark. Next we're going to look at badge links. Let's again add an h4, just so we can see it better. We're going to highlight all of these, add badge, badge hyphen, and these are basically the same thing it's just on links. So, primary, secondary, success, danger, warning, info, light, and dark. Next we're going to do the same thing but with pills or badge pills. Badge, badge pill and badge hyphen, and escape, primary, secondary, success, danger, warning, info, light, and dark, and that's it for badges. 43. Breadcrumbs: In this video, we're going to talk about breadcrumbs. No not that kind of breadcrumb, navigation breadcrumbs. We are in project file three, four breadcrumb. So let's collapse the navigation and the heading container and we're on line 162. Now breadcrumbs are basically for navigation and letting your users know where they are in your website hierarchy and we're going to use an ordered list. You can also use a navigation which we will use next. So, let's start by adding breadcrumb and then we're going to make the list item breadcrumb item and we can also make it active and let's do it in another example let's do it again. Bread crumb, bread crumb item and we can just copy this one and paste it here and then add active. So, as you can see as we move through these examples, you have a couple of different versions of the same thing but it lets your users know exactly where they are in the navigation and they can click any one of these and take them back to either the home, the library, the data we actually still have this so I'm going to paste it and then let's make the last one active since that's probably what we're on. So, that's how you would do it if you were using an ordered list. In the next example let's look how we would do it for navigation. So, we have a navigation with a nested ordered list and then an example two will get to just the links. So let's start by adding breadcrumb. Now that didn't do anything because that is a hidden label for screen readers so let's add it here and this one's going to be breadcrumb item and active. So, again let's add the label our area label for screen readers, add bread crumb for the ordered list. Breadcrumb item, breadcrumb item and active. Breadcrumb, breadcrumb, breadcrumb item and active. Now in the last example or example two, we have a navigation wrapping several links but they're all the same thing. It's just you can do it in the ordered list or just links directly. So we are going to add breadcrumb, breadcrumb item, breadcrumb item, breadcrumb item and breadcrumb item and the last one is a span with active. Now the reason that the last one is a span is because it doesn't need to be clickable. It doesn't need to be a link because that's the page we're already on and that's pretty much it for breadcrumbs. 44. Buttons - Part 1: In this video, we're going to talk about buttons. We're in project file 3_5_buttons. I'm going to collapse all this. We're on example one, on line 163. Now, buttons are really easy to style and I'm going to start by adding several classes, so lets just make it easy on ourselves, and highlight all of them with command D or control D, let's add btn, make them actual bootstrap buttons, btn hyphen, space, mb-2. That's just going to put some margin on the bottom in case they do wrap. Let's go back and add primary, secondary, success, danger, warning, info, light, dark, and link. It's still technically a button, just different styling. Now in the next example, we're going to look at button tags, input tags, and links. Now, you can make a button using several different tags whether it be an anchor tag, a button tag, or an input tag. All you'd have to do is add btn, btn-primary, and then mb-2. That's just optional. So, that's how I add all of these just for speed. We're going to add btn, btn-primary, and margin bottom 2. There you go. They all look the same and you wouldn't know any one of them was different, but they are. They're just a link, a button, and an input. Now, the last three have different types. So, one is a button, one is a type of submit, and one is a type of reset. But other than that, these are all just buttons. Next, we're going to look at button outline. Let's start by highlighting all of these. We're going to add btn, btn-outline, hyphen, and then mb-2. Let's go back and add primary, secondary, success, danger, warning, info, light and dark. Now in the next video, we're going to talk about button sizes, and button toggle states, and check box and radio buttons. 45. Buttons - Part 2: In this video, we're going to pick up where we left off, with buttons and button sizes. So, let's start by highlighting these two classes. Now, we're going to add btn, btn-, and mb-2, and stop. Let's make this one a primary and this one a secondary. So, I'm going to highlight this one and copy it to each one of these, just to save some time in the future. So, there we go. Now, we can start with our example. We have btn-lg and btn-lg. Here, we can add btn-sm and btn-sm. Now, these we want to make btn-lg and btn-block, and btn-lg and btn-block. So, they are large, full-width buttons. Next, we're going to look at active and disabled. So, we're going to start by adding btn, btn-primary, btn-lg, mb-2. Then, I'm going to copy this just for time's sake and change this to secondary. Going to do the same here, change this to secondary, and again, here and here, secondary. Now, the important thing to note after we've done a little setup is that we're going to add active to this one. So, it makes it a little bit darker, active to this one. Next, we're going to add disabled, but outside of the quotes. So, disabled, and again, disabled. Now, for a link or an anchor tag, you have to add a class of disabled and disabled. So, as you can see, we can't click on any of those. Next, we're going to look at button toggle states. So, we're going to add a class of btn, btn-primary. Now, because we have this data toggle class set to button, now, you can toggle the button. So, you can toggle it on and toggle it off. Technically, that's off, that's on. So, there you go. Next, we're going to look at checkbox and radio buttons. So, we're going to start by adding btn-group and btn-group-toggle. We're going to add a data toggle class of buttons. Then, we're going to add a label of btn, btn-secondary. We're going to make this one active. Let's make these btn and btn-secondary. So, that's a checkbox or a bootstrap version of a checkbox, and you can check whichever one. Next, we're going to look at the radio buttons. Let's add d-block and mt-2, and that's just so that this one will wrap to the next line above it. That's why I added that span class. Next, we're going to add btn-group and btn-group-toggle. We're going to make this data toggle buttons, btn, btn-secondary, and active, and then, we're going to add btn and btn-secondary. Now, a radio button, if you're not familiar with it, will only allow you to select one. However, with a checkbox, you can select multiple items at once. So, basically, more than one can apply, and only one can apply. Now, the only real change between these is, this data type or type, which is radio and checkbox, that's what's controlling most of this. It's the only real difference. So, that is bootstrap buttons. 46. Button Group: In this video, we're going to talk about button groups. So, we're in project file 3_6_button group. Close all this and we're on line 160. Now, we have several buttons that are separate, but if we want to make them a button group, we just simply add btn hyphen group. Now, they are one button group or one in the same, but they are still individual buttons so I can come click each one of those. Next, we're going to look at button toolbar, and we have several button groups that we are going to wrap in a button toolbar. So, btn hyphen toolbar, save. Now that puts them all on the same line, but we still need button groups for each of these in order to make them grouped elements. So, there's our first group in btn-group, for our second group. Even though this one's by itself, it can still be in a button group. Let's move onto example two where we have several buttons and an input group. So we're going to start by adding button toolbar. So, now it's on the same line, then we're going to add button group. Now the input group is already set up, but we will learn about those later. We can also add button toolbar to this one and make it a button group which we've already done, but before I had some margin for spacing, now we can use justify-content-between. Now, that will align them at the opposite ends. So, basically they're the same example except for our one's is using margin and the other one's using the justify-content-between. In the next example, we're going to look at sizing. So, we already have these setup and instead of having to set them on each class or button here, we're going to do it to the whole group. So, btn-group-lg. We're going to leave this one the same because that one is an example for the normal one, instead we're going to add here a btn-group-sm for small. Now you have normal, large, and small. Now, in the next example, we're going to look at nested buttons and button groups and drop downs. Now, you may not have seen the drop downs before, but we will introduce them later. So, don't worry too much about those, they're basically these right here. So, if you have several buttons and they are all nested, you can just add btn-group, and now they are all one even though you have these different types of buttons, and drop downs, and split drop downs, which we'll look at later. Next, we have a vertical button group which is pretty interesting and all you have to do is type btn-group, hyphen, vertical, and save. Now that one's vertical. Let's do that for example two, btn-group-vertical, and let's add a little margin to the left. So, what we have here is regular buttons, and then we have button groups or drop downs like this. That's how you can make vertical button groups. That is it for button groups. 47. Dropdowns - Part 1: In this video, we're going to talk about dropdowns. We're in project file 3_7_dropdowns. I'm going to collapse all of this and we are on line 163. We're going to start by adding dropdown and then in B2. Now, we also need a class on this button of btn, btn-secondary, dropdown-toggle. Now, it's still not finished yet. If you look, doesn't quite work yet. We also need a data-toggle of dropdown then we're going to add dropdown-menu which pulled those items into it. We didn't catch that on do it. So those items below are now inside. Let's make it a little prettier. Let's highlight all of these and add dropdown-item. Now, let's look at it and there we go that's our first dropdown. Now, in the next example, we're going to add dropdown in B2 and show. This time we have a link instead of a button. We're going to have btn, btn-secondary, dropdown-toggle. Don't forget to add the data-toggle of dropdown. Dropdown-menu, pull does menu items in. Let's add all of these dropdown-item. The show makes it dark as if it's selected and it's also a link and you have several links within. In the next example, we're going to look at dropdown btn-groups. We are going to make this btn-group. Set a little margin on the bottom. Make this one a btn-group and in B2. So, we have two btn-groups but they're not actually joining together, they're also not wrapped. Now, on example two, we have btn-groups that are joined together or will be joined together with the btn-group because they are wrapped by this btn-group here and we have nested multiple btn-groups and they still function the same way you would think. Now, let's look at split button dropdowns. Now, it may be hard to see with the wrapping on so I'm going to turn the wrapping off a real quick and that's just option or Alt and Z. I'm going to add dropdown-toggle and dropdown-toggle-split. So these two controlled together will make it a dropdown with a split. Let's do the next example, dropdown-toggle and dropdown-toggle-split. So, there you go. Now, I'm going to turn the word wrapping back on. We already have these selected or added and I've made it where all you have to do is find the btn with a hyphen. We're just going to add a color, and this one's going to be success and their success, and here we have info and info. We can actually highlight both of those and do warning and next we have danger. Now, if we want to make them a btn-group. We can do btn-group and if you want you can add some margin to the bottom but now these are btn-groups even though they have four separate buttons technically that split dropdowns. Next, we're going to look at sizing. Here, I've all ready added btn hyphen. So, all you have to do is add lg for large and then with the split button, you have to add it on each button since technically they are two buttons. So, btn-lg on both of those and then in example two, we have a regular button. So, sm and then because these are split buttons, we're going to add sm and sm. Now, the split button is small as well and that's how you do sizing. Now, in the next video, we're going to talk about dropup, dropleft, dropright, and several other cool things. So, I'll see you in the next video. 48. Dropdowns - Part 2: In this video, we're going to pick up where we left off in dropdowns. This time, we're going to use dropup. So, we're going to add on example one on line 496, dropup. If you notice, the arrow changed directions and it drops up instead of dropdown. Now, you may think that on the split level, you have to do something different but you don't. It changes for it as well. Now, the next example, we're going to look at dropleft and dropright. So, we're going to first add dropleft and it drops to the right, simply because we don't have enough room. But as soon as we do, it can drop to the left. Let's make it even larger. There we go. So, that's how it can drop to the left, just depends on what you need. Now, in the next example, with a split button, it's going to get interesting. So, on example two, I'm going to Command and slash or Control and slash and save. Now, look at that, that's the same thing in the previous example but the buttons are on the wrong side. It shouldn't be over there. Well, that's because the placement is on the wrong side, so let's move it and save. But if you notice, there's still something a little off. Look at that line right there, it's not quite right. You actually have to take it and put it outside. So, your dropdown menu has to be to the left and nested, and then the button has to be to the outside. So, that's what's going on here. Again, it won't dropleft because we don't have enough room. There we go. So, that's just something to keep in mind. I wanted to show it to you because I came across that and it can be a little confusing to figure out. It took me some time to play around with it and that's how you do it. Now, we're going to do dropright, dropright. Then, it changes to the right and now with this one, you would think it would be also a problem but because the button is already on the right and in the proper spot, it works just fine. Now, we're a little limited on space, so that's why it was dropping to the left. So, that is dropleft and dropright. Now, let's move onto menu items. So, this is to simply show you how to do the menu items which we've already done but we'll do them again. They can be either links or anchor tags. So, dropdown-item or we can have buttons dropdown-item. Now, I haven't saved yet and I was going to show you what it looks like. So, it looks like some buttons that aren't designed or are styled but come back and save, they look pretty much the same. It's just, one is an anchor tag and the other is a button tag. Now, in the next example, we're going to look at menu alignment. So, here we have a menu that has got some long text and when you click it, it drops to the left instead of to the right, and that's normal. That's actually how it works but because there's so much text here, it doesn't look right and we can fix that. On the dropdown menu, you add dropdown-menu-right. Now, it will be right aligned instead of left aligned. Looks a lot better now, doesn't it? Now, in the next example, we're going to look at menu headers. Right now we have three links but we can change this if you hit Command D or Control D, it will select both of them and we're going to change it to an H6 and save. Now, it's no longer a link, it is a heading. Next, we're going to look at dropdown dividers. We just add a class here of dropdown-divider and before we save, let's look at what we got. So, we just have four links. We save and now we have this divider here. Now, in the next video, we're going to talk about menu forms, and active menu items, and disabled menu items. 49. Dropdowns - Part 3: In this video, we're going to pick up where we left off in dropdowns, and we are on line 692. We're going to go down a little bit, and on 696, we're going to add a class of dropdown-menu. Now, before I save, let's talk about what we're about to do. So we have a nested dropdown and this dropdown has a form. Now, as soon as I hit save, watch what happens. There's nothing in this right here, but we just added that dropdown menu, and save, and it disappeared. Now, all of that is in the dropdown menu. So that's great if you wanted to have your sign in and something like that so that you don't have a huge sign in form on your page. Now, we can see another example, and this time, we're going to add it on the form dropdown-menu. Before we had it wrapping in a div or a div wrapping the form. Now, we can just add it directly to the form and save, and there it went. So, those are your two menu forms. Now, let's look at active menu items and disabled menu items. So let's make this one an active. We're on line 759. So active, and before I save, I'm going to show you what we have, we have nothing. Soon as I save, we'll open it up, and there you go, Active. Now, let's add disabled to the next example, and there you go, Disabled item. That's it for dropdowns. 50. Cards - Part 1: In this video, we're going to talk about cards. So we're in project file 3_8_cards. Going to clops all of this. We're on line 164. Cards are a great way to organize your content. We're going to start by adding a wrapper of card, and then we're going to turn on the image.jpg. Looks really big, as you can see, and distorted, but we're going to add a class of card image top or a card-img-top. There you go. Looks a lot better. Next, we're going to add card-body, card-title, card-text, and button with button primary, and save. Now, that's a great example of cards. In using all the different features, we're going to dive into each one in a minute. But if you want to, you can set a maximum size or a width to 20rem, and save. That's one way you can do it. That's an inline style. Now, next, we're going to move onto card body, and we're going to start breaking down each individual component. In order to create a card, all you really need is a card wrapping class and a card body. There's your card. Next, we're going to look at titles, text, and links on line 201. We're going to start by adding card, card-body, card-title, card-subtitle mb-2 text-muted. Then, for some reason, I left the "t" in there, but it's actually card-text. Then, we're going to highlight both of these because they are card links or card-link. Now, we can also set a width of 20rem, and control the width that way. Now, in the next example, we're going to look at images. So we already have card and our width. Now, we're just going to add card-img-top. We also need to turn on our image by adding the ".jpg " file extension, and there we go. Our text needs to be card-text, and that's it for images. Next, we're going to look at list groups. We're going to start by adding card-mb-3. Now, here we are using an unordered list. We're going to add list-group, list-group-flush. Then, we're going to select all of these and make them list-group-item. So now they look completely different, and in the next example, two, we're going to do the same thing. Now, we're going to have a card-mb-3, and this time we have a heading or a card-header. We still have a list-group, list-group-flush. I'm going to select all of these, and make them list-group-item, and there you go. So you have one with a header and one without. So there's a lot to cards, but those are the basics. In the next video, we're going to dive deeper into cards. 51. Cards - Part 2: In this video, we're picking up where we left off in talking about cards. Now we're on a funny example called the kitchen sink. Basically, all that means is we're about to throw everything into a card that you could possibly throw into it. So, let's get started on line 278 at card, card-img-top. Let's turn on the image.jpg, add card-body, card-title, card-text, list-group, list-group-flush. Highlight all of these. List-group-item, card=body, card-link and that's pretty much it. That's everything about the kitchen sink. Next we're going to look at headers and footers. Simply add card-header and in example two, we're going to add card-header. The differences between the two is we had a div and this one has an H5. In example three, we're going to add card-header and in here, we also have a blockquote with a footer for the blockquote. In example four, we're going to have card-header and card-footer with text-muted. It's basically the last one, just changed the font to text-muted and that's it for headers and footers. Next, we are going to talk about sizing using the grid. We're going to start by adding row, col-sm-6 and col-sm-6. So that's a great way to use the grid and cards in order to get your layout the way you want. Next we're going to look at sizing utilities. We're going to add w-75 to change the width and in example two, we're going to add w-50 to change the width. So those are two different ways you can use the sizing classes to change the width. Now you can also use custom CSS to do that which we've already done but we'll do it again and right here on example one on line 425, we can add a width of 20rem. Now that's how you can do it with custom CSS. Now normally, you would have that in a class in your stylesheet or in a separate stylesheet instead of having it in line but we're just using it as an example so you can actually see the SS or styles that we're creating. In the next example, we're going to look at text alignment. So the first one, we're going to leave as normal and the second one, we're going to make text-center, in the last one, we're going to do text-right. So those are three different ways to align the text. You could actually use text-left but it's there by default so you don't really need it. In the next video, we're going to talk about card navigation and image caps. 52. Cards - Part 3: In this video, we're going to pick up where we left off in talking about cards and navigation. So, we're on line 481 and we're going to start by adding text-center, card-header, then we're going to add a navigation or nav, with nav-tabs, a card-header-tabs, and then each one of these are going to be nav-item. Now, if we want we can also add mb-2 to give a little space below us. Let's move to example two where we're going to do somewhat of the same thing. Start by adding text-center, card-header, nav with nav-pills, card-header-pills. Let's move these in like they're supposed to be. Then, we're going to highlight these, make them nav-item. Select these, add nav-link, and as you can see, they finally changed their style. First one's going to be active and the last one disabled. Next, we're going to look at Image Caps. So, we have card-image-top. Let's add that image, so.jpg. Then, let's change the height inline to height 12.5 rem. Gives it a little better look. Now, let's move on to example two where we'll do something similar, card-img-bottom, let's add.jpg, scroll down a little bit. This time let's do the same thing, height of 12.5 rem. So, there you have card image at the top and card image at the bottom. Next, we're going to look at Image Overlay. All we have to do is change one thing, and that's add a card-img-overlay. So,what that did is basically took the text and overlaid it on top of the image, changed some styling, and that's what that class does. Next, we're going to look at Background Color or Background and Color. We're going to start by adding text-white in bg-primary. Now, for time's sake, we're going to select, include the space and text-white all the way up to the hyphen of bg. Then, we're going to move to example two and paste, and then we're going to add secondary. Let's move on to example three, I'm going to paste. So, text-white-bg-success. Let's move to example four; text-white-bg-danger. Then, example 5, we're going to add text-white with bg-warning. Next, we're going to add text-white, bg-info. Now, in example seven does not need text-white, so we're just going to type bg-light. So it changed just a little. In example eight, we're going to add text-white with a background of dark. So, those are your Backgrounds and Colors. In the next video, we're going to talk about Border Color and Card Groups. 53. Cards - Part 4: In this video, we're going to talk about border color. We're on line 681, and we're going to start by adding border-primary. Now, the interesting thing about cards is you do not have to specify border and then border-primary. You can leave off that extra border. You don't have to actually turn it on. Now, if we come down to line 683, we can add on the card-body, text-primary. It will make just the text in the card the primary color. In the next example, in example two, we're going to add border-primary. Then we're going to go to the end of the line and add text-primary, and it's going to make all of the text the same color, including the heading because it is wrapping all of this. Now, on example three, we're going to add border-secondary, and the card-body, we're going to add text-secondary. In example four, we're going to add border-success. On the card-body, we're going to add text-success. In example five, we're going to add border-danger, and on the card-body we're going to add text-danger. In example six, we're going to add border-warning, and on the card-body we are going to add text-warning. In example seven, we're going to add border-info, and on the card-body, we're going to add text-info. On example eight, we're going to add border-light. In an example nine, we're going to add border-dark, and this one is optional, since the text is already black. We can add text-dark, It does change ever so slightly. That is it for border colors, and text colors. Next, we're going to look at card groups. We're going to add a class, on the primary div of "card-group", and now it's made them a group. Now, let's go ahead and add ".jpg" to these, turn on that image. Now, a card group doesn't have any space in between them. Let's move onto example two, let's go ahead. Now these images, so, ".jpg" to all of these. So, we've got three of them. We're going to again add card group. So personally, the second ones look a little bit better because they have their own footer. Whereas, these do not have their own footer or card footer. So, the text just doesn't line up. It doesn't look as well. I think this looks more uniform, and it's just personal preference. Let's move on to card decks. We're going to start by adding card deck. Now, these have spacing in between. Let's go ahead and now those images, ".jpg", ".jpg", and ".jpg" Let's move to example two. Lets go ahead and add the.jpg to all of these, and ".jpg" Then, we're going to add card-deck. We have a div. We're going to add a card-footer to all of the cards. Now, in the previous example, we just had the paragraphs, we didn't have the card-footer. So, that's card decks, and the difference between card groups, and card decks is the spacing. Now, we can look at card columns, and we have a long list of cards, and they are nested within one div. Simply by adding that wrapping div and card columns, you get a masonry grid, which is really nice, and a lot of websites use this. That's pretty much it for cards. Lot to them, but they can make your site look beautiful, if you use them correctly. 54. Forms - Part 1: In this video, we're going to talk about forms. We're on project file three, nine forms. Close all this. We are on line 162. Now, right now on the left hand side, you can see things don't look very pretty. But real quickly, we can add "form-group", and then we need to add a "class" on this input of form-control, and it's starting to look a little better. Let's add form- group to this one, and form-control. There you go. Looks a lot better. Next, we're going to talk about other form controls. We're on line 193. We're going to add form-group, and form-control. Let's do the same thing on the next div form-group, and then on the select form-control and then again, form-group and on the select form-control, form-group, and on the textarea, form-control. So basically, it works for inputs, selects, textareas, all of those look a lot better with bootstraps form-control. Next, let's look at file input. So here, we're going to add on line to 235, form-control-file. Now, if you don't like that, you can use exampled two, that's custom file. On the input, we're going to add a class of custom-file-input and then custom-file-label. Now, it looks a lot better. Next, let's look at sizing. So, we're going to add a class of form-control, which we're used to. But this time, we're going to add lg and form-control-sm. The first one does the formatting, the second one sets the size. It also works on selects, instead of just inputs, and we can add form-control-lg, and form-control-sm. So, that's for selects and for inputs. In those form control sizing, we'll also work on other types whether it be a select an input, any of those. Next, let's look at readonly. We can add something here for readonly. So, we made this readonly. Next, we're going to look at exampled two change this input to form-control-plaintext, and we could also make it readonly. Basically, meaning, it can't be changed. We can do the same thing in example three, form-control-plaintext and readonly. In the next video, we're going to talk about checkboxes and radio buttons. 55. Forms - Part 2: In this video, we're going to pick up where we left off with forms and talking about checkboxes and radio buttons. So, let's start by adding a class on line 327, a form-check and form-check-input. Now, we also need to add a type of checkbox, and now, it looks like a checkbox. You can also have a label of form-check-label, and that just changed some spacing. Let's continue to add form-check, form-check-input, checkbox, and form-check-label. In example two, we already have a form-check and a form-check-input. We just need to add a type of radio. There you go. Those are our checkboxes and radio buttons. Now, we can also make these disabled by adding disabled, and let's do the same thing up here, disabled. That's checkboxes and radio buttons. Next, let's look at inline, and we're going to add form-check form-check-inline. We're going to copy this to each one, and as I save, you see how it makes it inline instead of more of a list or returned to each line. It's all on one line. Now, we can do the same thing for radio buttons, and we can just paste form-check and form-check-inline, and that's how you can make your radio buttons and checkboxes inline elements. Next, we're going to look at form groups. You've seen these above or before. So, form-group and form-group. Just changes the style or the look of them. Next, let's look at the form grid. We can add row, let's select both of these, and add col. Let's move on to example two. We're going to add form-row and col. So, those are two different ways to do it. Now, if you use form-row, it doesn't have as much spacing in between the two inputs. So, that's something to keep in mind. That's why it's better to use form-row than the traditional row and column, but you can if you would like to. Let's look at more complex form grids. We're going to add form-row, and then, on line 481, we're going to add form-row. So, basically, each form-row has a bunch of nested items. Next, we're going to look at the horizontal form. On line 519, we're going to add row, and on 525, we're going to add row, and then, on 532, we're going to add row. Then, we're going to scroll down a little bit, and on 556, we're going to add row, and on 567, we're going to add row. So, those are basically the horizontal form layouts. Now, we can look at horizontal form label sizing. So, on this label right here, we're going to add a class of col-form-label-sm, and save. Then, here, we're going to add on the input, a class of form-control-sm. Now, in the next example, this is the default or normal. So, we're going to leave it as a reference, and then, on the label, we're going to add col-form-label-lg, and save. Then, on the input, it's going to be form-control-lg. So, that is how you can change the form sizes for horizontal forms. In the next video, we're going to talk about column sizing and column auto. 56. Forms - Part 3: In this video, we're going to pick up where we left off in forms and column sizing. We are on line 618. We're going to start by adding form, row, change it to a row, and then we're going to add col-7, and then we can add col and col, and that's how you can do column sizing. It's just like the grid. It's just they have a little less spacing in between each item. Let's move on to column auto, and on line 642, we're going to add col-auto, and then on 646, col-auto, 655 col-auto, and 663 col-auto. The reason that worked is we already had our form row in place. Now, let's move on to example two. On line 672, we're going to add col-sm-3, and then on line 676, we're going to add col-sm-3. I'm going to remove this line, and then on 685, we're going to add col-auto, and 693 col-auto. That's how you can use column auto as well as use the grid columns to set whatever you would like. Let's move on to the next example which is inline forms, and on 708 we are going to add form-inline. In that quickly, we made an inline form without having to write a bunch of extra CSS. In the next example, we're going to talk about help text, and on line 741, we're going to add form-text and text-muted. In example two, we're also going to add text-muted, and that is what you can do for help text. Now, if we added form-text to this, watch that line right here. When we save, it pushes it down just a little bit, so it's not actually in line, maybe the way we like. We can leave it off, and that's about center. In the next example, we're going to look at disabled forms. Here we're going to add disabled in example one, and disabled on a fieldset, and that will make all of the items nested within that fieldset disabled. Well, that concludes our videos on forms. 57. Input Groups: In this video, we're going to talk about input groups. We're in project file three, 10, input group. I'm going to collapse all of this and we are on line 164. We're going to start by adding a class of input-group and that made it on the same line, now we're going to add input-group-prepend and then on the span, we're going to add input-group-text. Next, we're going to add a form-control on the input and now it is full width as well as styled the bootstrap way. Let's move to example two, we're going to add input-group and then form-control and then we're going to add input-group-append, input-group-text and there we go. So, the difference is, if you want it on the beginning, it is prepend, if you want it on the end it is append. Let's move on to example three; we're going to add input-group, input-group-prepend, and then input-group-text and then form-control. Let's move on to example four; we're going to add input-group, input-group-prepend, input-group-text, form-control, input-group-append and input-group-text. Let's move on to example five; we're going to add input-group, input-group-prepend, input-group-text, form-control. So, those are some basic examples of different input groups. Next let's look at sizing. So on the outer div, we're going to add input-group-sm and save. Example two, we're going to leave, that's going to be the default or the normal size. Let's move to example three; input-group-lg. There you have three different sizes; the normal, the small, and the large. Next let's look at Checkboxes. So, on 255 we're going to have a type of checkbox and then on 264 we're going to have a type of radio. So those are two different types for checkbox and radio addons. Next, let's look at Multiple Inputs input-group-prepend then let's highlight both of these form-control and we need one more thing, input-group-text. Now you wouldn't see this very often but it can be done. Next let's look at Multiple Addons, let's select both of these classes and add input-group-text. So it made two separate addons instead of making it one or in one span tag do the same thing for example two, input-group-text and that's at the end. So, this one's append and this on is prepend. Next let's look at Button Addons and what I have done is I've commented out on line 330 so to uncomment simply type command or control and the slash, let's save and so that's a btn-outline-secondary. I just did it so you wouldn't have to type it. Again Command or Control and slash save, and now it is just a regular btn-secondary. Example three, we actually have two, you can just put your cursor right there, Command or Control and slash, Command or Control and slash, that's how you can add two buttons and those are btn-outline, Command or Control and slash. Let's move on to Buttons with Dropdowns. Here is a dropdown all it is is a button with the drop down menu, so in order to uncomment this one it looks like, have to highlight all of it and then remove it, save. Let's go to the next one and let's highlight it and Command or Control slash. So each one of these has their dropdown features. All I'm really saying is you can put anything within this area and it will either be a button or a dropdown or whatever you would like. Next, let's look at Segmented Buttons, let's remember the comment and so basically these are split buttons or segmented buttons so you have a button and you have a separate dropdown. Let's do the same thing here and Command or Control slash and there you go. So, like I said, you can add anything in between here, whether it would be a button or a drop-down, or a split, or a segmented button. That's it for input groups. 58. Navs: In this video, we're going to talk about Navs. We are in Project file 3_11 Navs. I'm going to close this, collapse this, and we're on line 163. We're going to start by adding a class of Nav. Let's highlight all the allies, and add Nav item. That's how I add all the anchor tags. Nad nav link. We're going to add a class of active and a class of disabled. Now, let's move on to example two and you'll notice it's a lot different. We have an unordered lists here and here we have a nav with just anchor tags, which is a lot easier than having to nest all of that and keep it straight. It looks very cumbersome, there's also a lot of extra classes. So, that's why I like example two. So, we're going to add na. Let's highlight this and add nav link. Let's make the first one active and the last one disabled. Next, we're going to look at horizontal alignment, and all we have to do is add a class of justify-content-center. In an example two, we can add justify-content-end, and that's how we can do horizontal alignment. Now, for vertical alignment, it's a little bit different. Here we're going to add flex column, and let's go to example two and we're going to add flex column and flex MD row. So, on mediums screens, it will go back to flex row instead of flex column. So, basically switching between vertical and horizontal based on the breakpoint. Next, let's look at nav-tabs. All we have to do is add nav-tabs to our navigation. Let's look at nav-pills, and you only have to add nav-pills. Next, let's look at fill and justify. We're going to add nav-fill, and this is with an unordered list. We can also do the same thing in example two with nav-fill, and that's in a navigation. Now, the reason that it is a little bit different as far as the spacing, is because this has a longer text. Now, on example three, you're going to add nav-justified and save. The same thing an example four, nav-justified and save, but this time we're going to add something to each of the anchor tags. We're going to add nav-item, and so that's the difference between example three and example four, we added nav-item which changed the layout. Next, we're going to look at tabs with drop downs, and we're going to start by adding a nav-tabs, and then I've already included a dropdown, so we wouldn't have to program it and I wanted it hidden. So, Command or Control and slash and there we go, and that's what it looks like. Next, we're going to look at pills with dropdowns. Similar situation, but this time we're going to use nav-pills, and then we can deselect all of this or uncomment it and save. Same thing just different look. Next, we're going to look at tabs with JavaScript. So, we're going to click right here on the unordered list and add nav-tabs. Then we need tab content. So, basically what should happen is as you change this, as you click this it will change. But, you also have to add data toggle. So, let's selectt data toggle and add tab, and now it works properly. Now, that's with an unordered list, and in example two, we can do it the other way with a nav and anchor tags. So, we're going to start by adding nav-tabs, and then tab content, and you've seen that pop in and what happened is, is this was actually down further, and that's pills with JavaScript. So, it looked like it came out of nowhere, and we highlight data toggle and tab. Now it works. So, those are two different ways to do it with the nav and the unordered list. Next, let's look at pill's. So we're going to add nav-pills, then we're going to add data toggle of pill and then tab content. Let's scroll down a little bit, and there you go. Same thing different look. Let's go on to example two, instead of adding row, let's go ahead and add nav-pills. I want to show you it looks a little different, then we are going to add pill to data toggle, and then tab content. Next, we're going to add row col-3 and and col-9. So, that's a different look, but it does the same thing. That's it for navs. 59. Navbars - Part 1: In this video, we're going to talk about Navbars. We are in project file 3_12 navbar. So lets collapse this. We're on line 162. We're going to start by adding navbar, navbar expand let's add that lg navbar-light and bg-light. So now we have a collapsible navbar and in a second, we'll expand the window so you can see the browser window. Let's go to example two, and we're going to add navbar, navbar expand, let's make the lg navbar-light and bg-light. So that's what this navbar looks like. Now let's see what happens as we expand. There you go. So on large screens that's what it will look like because it has more space. Let's move on to navbar brand. We're just going to add navbar brand. So, as you can see, the text for the navbar changed. Now we're going to add for example two navbar brand. We can also add mb-0 and h1. So we added the h1 class to give it a different look. Now in example three, we're going to add navbar brand and in example four, we're going to add navbar brand. So those are just giving it basically a different look. If you have an image, it also really helps make it stand out. This should be nested, and there we go. Let's go on to Navbar Active. So for our first item, we're going to make it active but before I save I'll show you what it looks like. Now let's make it active, and it's dark. We can also add disabled. Now if we put disabled here like you would think, it doesn't actually make it disabled. So keep that in mind. Let's look at example two. We're going to add a class of active. This is a little bit different because we're not using an unordered list. We're using the div with navbar, so there you go. It looks the same it's just different in the HTML, and disabled. Let's move on to example three, and we're simply going to add active. Next, we're going to look at Forms. We're going to add form inline. Made it look a lot better. Let's go to example two, slightly different layout, form inline. Same thing, made it look a lot better. Example three, form inline and not much changed for it. I wanted you to see this example, it is laid out a little bit different. Number four, form inline. Next we're going to look at Text or Nav Text. So, navbar text just change the styling and an example two on this band. Let's see what we have first. Almost looks like active so let's make it navbar text, and there we go. Also note it's not clickable. Next we're going to look at color schemes. We're going to start by adding navbar-dark and bg-dark. In example two, we're going to add navbar-dark and bg- primary. Let's highlight this and copy it so we don't have to continue to type it, bg-success. Example four, navbar-dark bg-danger. Example five, navbar-dark which basically makes the text white as you can see, bg-warning. Let's move to example six, navbar-dark bg-info. Example seven, this time we're going to use navbar-light and bg-light. Let's move to example eight. All we need is navbar-light. If you know, here we're using a custom background style. We are doing it inline so that you can see what's actually going on. Next we're going to talk about containers. So if we add a class of container on the outside of the navigation, there will be white space on the outer edges and I'll expand it in a minute so you can see it better. If we add it to the inside, now that we've added a container on this item, when we expand it you'll see for this navbar, it's full width, there's no white space on the ends. For this one, there is white space on the end. So it depends on where you want to put that container. If you put it on the outside, this is what you get, if you put it on the inside, this is what you get. If you don't add one at all, well you get 100 percent width and your navbar stays all the way over to the left. So that's all about placement of the containers. In the next video, we're going to finish up navbars with Navbar Toggler 60. Navbars - Part 2: In this video, we're going to pick up where we left off with Navbar Toggler. So, we are on line 511 and we're going to start by taking off this comment. Use command slash or control slash. Save. We're going to start by adding on this button class of navbar-toggler and you'll see something starting to form. Then, we're going to add navbar-toggler-icon. Now, we have something to click. Now, on example two, we can remove the comment. We can add navbar-toggler and navbar-toggler-icon. Now, the difference between the two is this one has the brand hidden on the smaller size whereas the brand is still visible even once it's collapsed. So, hidden, always visible. Let's go to example three. We're going to turn that off or uncomment, navbar-toggler, navbar-toggler-icon and it looks the same as the first one, but we can simply move the link and they'll switch places. Pretty nice. So, it just depends on how you want your brand, where you want it. If you want it hidden or if you want it on the right or the left. So, let's move on to toggle external content. So, let's start by adding an id. So, NavbarToggleExternalContent. You don't have to make it that long if you don't want to. I'm going to copy this, so we don't have to retype it. For this data-target on the button, add a hashtag or pound sign since we're talking about an id and then paste and save. Before, this wasn't clickable. If you remove this, it doesn't work. So, that's a great example of how you have to have the data-target match the id and that's pretty much it for Navbar Toggler and Toggle External Content. 61. Position: In this video, we're going to talk about Position. We are in Project File three, 13 Position. I'm going to close all this, and we're at line 160. We're going to start by adding fixed top. So now, as we scroll, it stays fixed to the top. These are great for NAB bars. I'm just using this as an example. This also adds some margin to the top and some padding to the top to bump it down. Still stays in the same position and it gives you a rough idea. Now, we can also use fixed bottom on line 175 and now this is fixed to the bottom. Next, we can add sticky top and it's getting a little crowded. So, let's do D-flex, let's make it ML-auto. So, that way it's on the right. Now, as we come down and scroll, as soon as it hits the top, it's going to be sticky. So, those are different ways you can do your navigation's. You can use fixed top, fixed bottom or sticky if you had a navigation, say down here that you wanted to stick. Those are sometimes common these days. Now if you want to see them in action real quick, let's comment this out. Let's go to the top, and on this navbar we can add fixed top. Now you'd have to do some additional work to move this down. That's no problem but I'm just trying to show you that that's what it looks like, probably pretty familiar on most websites. You can also change that to bottom, and then if we had a navbar in the center of the screen we could change it to sticky top. But since it's already at the top, it just stays there. Stick it up is more for if it's in the middle of the screen, like the other examples. That's it for position. 62. Pagination: In this video, we're going to talk about pagination. Now, we are in project file 3_14_pagination. Now, collapse this, and we're on line 165. Now, if you don't know what pagination is, it's simple. It's just your navigation between pages. So, let's start by adding pagination. It's going to change it to horizontal. Then we'll want to select these classes, the "li's." "Page-item." Then, let's just arrow over, and add "page-link." There you go. Previous, Next, whatever page numbers we have. Let's move on to pagination with icons. Let's move that in. Now, here you will see I have a placeholder of a hyphen, and we're going to replace it with ampersand-l-a-q-u-o-semicolon. Save. So, there's your left double arrow. Let's do the same thing down here, and we're going to add ampersand-r-a-q-u-o-semicolon, and save. Now, these bands, don't forget, do not show up. They're screenwriter only, that say previous and next. Next, let's move on to disabled. We can make this disabled. So, the previous button is now disabled. We can also make this one active to indicate what page we're on. Say, we're on page two, and we can do something similar with disabled in example two and active here. These are just slightly different ways of doing the same thing. Next, we're going to look at sizing. On this "ul," we're going to add "pagination-lg." Then, we're going to add, on this "ul," we're going to keep it as it is. Move those in where they're supposed to be. It doesn't affect anything, but it's good practice. Let's also add "pagination-sm" for small. So now we have a large, a normal, and a small. Next, let us look at alignment. We're going to add "justify-content-center," and "justify-content-end." That's how you can realign your navigation on your website. So, that's it for pagination. 63. Progress Bars: In this video, we're going to talk about Progress Bars. We're in project file 3_15_progress_bar. I'm going to collapse all this, and we are on line 161. We're going to start by adding progress. So, there's our bar. Next, we're going to add progress-bar, and it's currently set to zero percent. It's just there as an example. So, let's move on to the next one. We're going to have progress and progress-bar. Now, if we go to style, we can add a width of 25 percent, and there we go. Now, let's go ahead and highlight all of these and then add progress space. Let's go down one and add progress-bar. Now, here's where it gets important. We've done that, but we still need to specify the style of a width. This one is going to be 50 percent. The next one is going to be a width of 75 percent. The last one, a width of 100 percent. Now, we could have used any value, but I was trying to keep it consistent and not have to do a bunch of them. Next, let's look at labels. So, we are on line 186. We're going to add progress, progress-bar. This time, we're going to use a sizing class of w-25, and save. For the label, in between the div, all we have to do is type 25 percent, and now it shows it on the progress bar. Now let's look at height. Now, we already have the progress and progress-bar classes. Now we can add height, 1px or one pixel, really small. Let's make this one a little bigger, height, 20 pixels. Now, if you wanted to, you could also use rim, but that's up to you. Next, let's look at Background Colors. We're going to change these to bg-success, bg-info, bg-warning, and bg-danger, and there you go. Now let's look at Multiple Bars. So, right now, we have one long bar, but it's actually made up of three parts. So, to better show it, we're going to add bg-success and bg-info. Not very commonly used, but it's nice to know you can do it. Next, let's look at Striped Bars. So, we're going to have a class of progress-bar-striped. At the same time, I'm going to copy this and paste it on all of them. There you have striped progress bars. Now, the last one is really cool, and I like it. It's progress-bar-striped, which I guess could have pasted that. But' this is the main part: progress-bar-animated. Now has a nice little animation to make it look like it's moving, and that's it for Progress Bars. 64. Carousels: In this video, we're going to talk about Carousels. Were in project file four one carousel. I'm going to start by collapsing this, and we're on line 165. What we have here is a div wrapping several div classes. So, we're going to start by adding carousel and slide. Then, we're going to add a carousel to data ride, and on line 166, we're going to add carousel inner, and then we're going to select each div and a class and then carousel item. On the first one, we're going to add active. As soon as we did that, it came back and now it's automatically sliding. What we have here is basically divs wrapping images. Then, we have a carousel inner and a carousel with a slide. Let's move to slides with controls. So, we already have it set up and all we have to do here is these links. We have two anchor tags,and we're going to add carousel-control-prev for previous. We also need to give it an icon. So, carousel control prev icon and there just showed up. Next, we're going to add the one for the right. So, carousel control next. Then, we need to add a button. So, carousel control next icon, and there you go. It's that simple. Although, we added to this one early is these two links and the span tags. The sr is for screen reading only. Let's move on to slides with indicators. So, as you can see, we already have the next and previous buttons. The only thing we need do is turn this on, it's a ordered list. We're going to do Command and Slash or Control and Slash if you're on a PC, and you notice we have an ordered list. Now, we're going to add a class of carousel indicators and save. Now, we have this nice little indicator at the bottom to let us know what slide we are on. Next, we're going to look at slides with captions. So, we have some captions down here. We already have our indicators, they're out of place. We want them to actually sit on the slide. In order to do that, we just need to highlight this one right here, Command D or Control D, here to the left, back up a little bit. We're going to add carousel caption. Now, I added d none and d md block. So, basically, on smaller screens, it looks really cluttered to have the text, so I made it disappear on smaller screens. That's what the d none and d md block are doing. That's it for carousels. They're actually pretty easy. 65. Collapse: In this video, we're going to talk about Collapse. We're in project fall four two collapse. Then I'll close all this. We are on line 164. We're going to start by adding a data toggle of collapse, and then we need this id right here, CollapseExample, to be our link and we're going to link using an id, so that's a pound sign or a hashtag and put in the CollapseExample, and save. Now, there's one more thing we need to do before it works and that's at a class of collapse. Now, the first button will allow us to toggle or collapse and show that div block. Now, the second button doesn't work. So, this is a link, now we're going to use a button and it's basically the same way. We have a data toggle of collapse, but this time we need a data target instead of an href. So we're going to copy this in a game we're going to use the hashtag or pound sign and collapse example. Now, when we click it, it works. So, either one of these will toggle that div block, and that's collapse. Pretty simple. Let's move on to multiple targets. We're on line 186 and we're going to start by adding collapse, and then we need our href and it's going to be example one. It's going to be an id, so it needs the hashtag or pound sign and the id. Now, we also need to add collapse class to this. So, the first button works or link that looks like a button. So, it's working. Let's make the second one work and it's going to toggle this. So, it's going to be a data toggle of collapse. Now, we need our data target, which is going to be this one right here, hashtag or pound sign and there we go with our id. We also need to add a class of collapse and now we have both of them working. Now, there's one more case where what if we want to toggle both of them, so how would you do that? We can't add multiple ids, but you can add a class. So, on this one, we're going to add data-toggle of collapse, and on both of these, we're going to add a new class of multi-collapse. We're going to highlight this and paste it down here. So, now both of these have this new class. So, for our data target, we're going to add a period because we're targeting a class and not an id, and then we're going to add multi-collapse. I'm going to delete that and there we go. Now we're targeting this class. So, now, it should work with any of them. It gets interesting when you have one of them already turned off or collapsed. So that is multiple targets. Next, we're going to look at accordion. We're on line 229. We're going to start by adding collapse and then we need our href, which is going to be this id right here. Since it's an id, we need the pound sign or hashtag and the id, and we need to also add collapse. There you go, now it's collapsible. We also need to specify the data-parent which is the id of accordion. Let's move on to the next one. This time, we're going to add a class of collapsed. In the previous one, we didn't have to have that and we're going to have a data-toggle of collapse. Then we need our href, which is this idea right here. Then, we need to make this a class of collapse. We also need data-parent which is the parent element to all of this. That's an id, so we need the pound sign or hashtag and there we go. Now, let"s do the third one. This one's also going to be a class of collapsed and a data-toggle of collapse, and then we need our id for our href and then we need to make this a class of collapse. Don't forget your data-parent of accordion. The reason I copy and paste those is just so that I don't mistype them and then it screws something up and it don't work. So, now, let's look at our accordion and it looks beautiful. Now, if you're curious about what it's doing, we can look and inspect the element. As we toggle this, JavaScript is changing some properties, some classes and it's adding this collapse or removing this collapsed. Then it's also adding show. Now, if we wanted to, we can make this show by default. So, let's go up here, and we simply add to the first one show. So, when someone comes to the page, it's automatically going to be shown or expanded. Next, let's look at custom accordions. We are on line 283. We're going to start by adding a data-toggle of collapse and we need our data-parent, which is this id right here. Then we need our href, which is this id right here. We need a class of collapse. We can also go ahead and add show. Now, let's move onto the next one. So, collapse, and then we need our data-parent, which is this one right here and our href, which is this one right here. We need our class of collapse. There we go. So, this one's already shown, we can toggle it and this one can be toggled as well. So, that's it for collapse, accordions and custom accordions. 66. Tooltips: In this video, we're going to talk about Tooltips. We are in project file 4, 3 Tooltips. I'm going to collapse this and we are on line 162. So, we have a button with a class of button secondary and we need to add a data toggle and a data placement. These are going to be our Tooltips. So, we add tooltip and then the data placement is where we want it to be. So, let's choose top. Now, when I hover, I get a Tooltip on the top. Let's go to the next one. Again, we're going to add a data toggle of Tooltip and then let's place it on the right. Let's do another one, Tooltip in a data placement of bottom, and let's do another one on the left. Another placement to left. Now, one important thing to note about the Tooltip on the left is if it's over here, it will not have enough room for you to see it. So, you'll have to expand it in order to do that. So, that's why I placed it way over here. Now, let's move to example two. We're going to add tooltip just like we have been, but this time we have a new one, and as data-html. We're going to tell it, true. Now, when we hover, we have a Tooltip with italics or emphasis, an underline and bold. So, top, right, bottom, left and with HTM. That's it for Tooltips. 67. Popovers: In this video, we're going to talk about popovers. Now, we're on project file 4_4_popovers. I'm going to collapse this, and we are on line 162. We're going to need to start by adding a data toggle of popover. Then, we also need to add a data placement of top. Let's see what we get. So, there we go. Let's go to the next one. We're going to popover, and we need a data placement, and we're going to add this one as right. There we go. On line 170, we needed data toggle of popover and this time we're going to choose bottom. Next, let's use left. So, popover, and a data placement of left. So, let's see what we got. We got top, right, bottom, and left. Next, let's look at advanced popovers. We're going to need a data toggle of popover and let's see what we got. Now, this one has a title in it. So that's right here, Popover title. Next, we can look at dismissible popovers. So on example one, we're going to need to add popover. This time, we're going to add a data trigger which is focus. So, let's see what we get. When we click out, it now will exit. Let's look at the example two. We're going to need a data toggle of popover, a data placement of top, and a data trigger of click. Let's see what we get. Now, this one you can't close, so you have to close it by clicking again and it's on the top. Let's do the next one. So data toggle of popover, a data placement of right, and a data trigger of hover. So now, if we hover, it's going to the left but that's simply because we don't have enough space. There we go. Put that back. Next, we're going to add popover to this one, a data placement of bottom, and a data trigger of focus. Now, we have it on the bottom, and as soon as I click out, it will close. Now, if you won't, you can combine these and that's example three. So, we have a data toggle of popover, and a data placement of top, and the data trigger of focus and hover. So, now you have hover and you have click. So, you don't really need the focus once you had the hover, but it's nice that if someone wanted to click on it, it stays until they dismiss it. That's it for popovers. They're pretty simple. 68. Modals: In this video, we're going to talk about modals. We're in project file "4_5_modals" Collapse this, and we are on line 172. We're going to start out with a big example of a modal, somewhat complex, and we'll start breaking it down in later examples. So, we're going to start out by adding a data toggle of modal, and we need a data target which is this ID right here, copy that. Since it's an ID, we need a hashtag or pound sign. Next, we need to dig in to the modal itself, that's just the button, and let's start building it. We need modal, and everything just disappeared. Next, we need modal-dialogue, modal-content, and then we have a modal-header, modal-title. Right below it, we have a button that's going to be, close, that's the close button and it needs the data-dismiss, a modal. Next, we need a modal-body, and a modal-footer, and there we go. There's our modals, there's our title, our body, and our footer with a couple of buttons. We can close it, oops, close isn't working. Next, we need a data dismiss of modal. When we launch it, that closes it. This is the close, which is here, so that close button will close it and this will close it and if you want this one to work, you'll need a data dismiss of modal on this button here. Let's move on to modals with long content. We're going to start by adding our data-toggle of modal in our data-target of this ID right here. So, pound or hash tag and then our ID. Next, we need modal and fade. Now, if we were to launch it right now, it doesn't really do anything, it's got all this nasty text, and it doesn't close. So, I saved again in order to get that off the screen and we're going to start by adding modal-dialog, modal-content, and if you're curious, we can click on it and see, now we're starting to get somewhere. Doesn't look pretty formatted yet. Next, we're going to have a modal-header, that's for up here. Make our button, close, with the data-dismiss of modal. Now, we should at least be able to close it, and it works. Next, we're going to need modal-body, and that's just your formatting in the middle, looks a lot better. Now, we need our footer, modal-footer, and we need our data-dismiss for the close button of modal. So, that's long content, and there you go, our button works. Let's move on to modals with tool tips and Popovers. Now, it might be hard to see but it's right here, this data-toggle, and if you don't have word wrap on, it looks something like that, and it's going to wrap all the way out here, but it's on this line. I'm going to turn that back on, so we can see it better. We're going to add a data-toggle. Let's first see what we're actually doing right here. So, we're going to add a data-toggle, we got Popovers, and Tooltips. So, Popover, there we go, and next let's do a data-toggle of Tooltip and another data-toggle of Tooltip, and there we go, we get our Tooltips and our Popovers. Next, let's look at modals with grids. This is what we have right now. Now, I already have a grid in place, it's commented out. I'm going to uncomment it, command and slash or control and slash, and save. You don't have to program all this right now, I've done it for you, just so you can see what it would look like if you had a nested grid in there. There you go, it has all the different sizing, and classes, and placements just as an example to show you what you can do if you still wanted a grid in a modal. Next, we're going to look at modal sizes, and it's hard to find. But right here on the modal-dialog, this one right here on line 354, I'm going to add, modal-lg, and that's a large modal, if you want to expand it a little bit and see, that's what it looks like. Example two, is normal, it's just here for reference, and on 402, we're going to add modal-sm, for small. So, here we are on an extra large screen, we've got a large modal, we have a normal modal, and a small modal, and that's pretty much it for modals. 69. Scrollspy: In this video, we're going to talk about Scrollspy. Now, Scrollspy is one of my favorite things in Bootstrap. I think it's so cool. Now, we are in project files four, six Scrollspy. But I encourage you to go ahead and open up two, three, and four of Scrollspy. You're gonna need these as we progress through this project or these examples because we're going to be jumping to other pages so you can better see what's actually going on instead of getting out of the Bootstrap playground. So, let's dive in. Close this, and here we are, example one Scrollspy. Now, it's actually all set up for you, we just have to add in a couple of things. Basically, we have a nav bar, and we have some content. I do have it where it's scrollable, so it's not taking up as much room, and we'll also have an example page where we jump to in just a second. So, you can go and click that if you want. As you can see, it's just a regular page with the navigation, nothing fancy. We'll get there in a second. I'll just close it for now. So, let's jump into the example. Right here on this ul or unordered list, we're going to add nav-pills. As soon as I turn that on, you see it disappear, and that's pretty cool. What is that? Well, basically we are using the pills navigation, but we need some more information. Down here on line 183, the content that is here on the left, we need to tell it that it's got a data spy of scroll, and as you see, the nav-pills went away. Next, we need to tell it what the data target is. That's going to be the parent element, which is this one right here. We are going to add an hash tag because it's an id or pound sign and save. Now, check out when we scroll. So, right now we're at fat, we move down since we hit this, it moves to the next item in the list, and as soon as we hit the dropdown, one of the dropdown items, it lights up, and there we go. So, what's nice is, when you click it, it takes you straight there, and if you go to one of those, it takes you straight there. So, as you scroll, it's pretty nice. And that's nav-pills, and that's Scrollspy. There's not much to it. Now, let's go actually see this on a full page web site or example. So, here we go. It's a little bit different when we're not in the Bootstrap playground, we're going to go to four_six Scrollspy two, and that's this one right here, this is this page. As soon as we make any changes, if you have your live server running, it will update here. So, we're going to start by adding a dataspy of scroll, and we need this id here. So, what we're doing is we're actually turning the Scrollspy on the body of the whole page, and we're telling it the data target is this example. It's going to update the navigation. So, we need nav-pills right there. Now, when we do it, there you go. So, you can click at any one of those and they'll take you to it. So, there you go. That's it. Now, let's move to the next example, nested nav. A little bit different layout. I'm going to go ahead and close this one since we don't need it, and we're back to the first one. Scroll down a little bit and look for this nested nav. So, we're going to go right here, and as you can see nothing happens when we scroll. So, we're going to start by adding nav-pills, flex-column, and then here we're going to add nav-pills, flex-column, and then down here we need to do the same thing, nav-pills, flex-column. We need to add our data spy of scroll and then we need to tell it our data target which is this right here and save. Now, when we scroll, nice, looks good. Now, like I said, we're going to also do it on an actual page. So, let's jump to that and so up here, we're going to go to four_six Scrollspy three, and this page here as you can see, we got some ugly things going on, not really laid out right. So, first of all we're going to add our data spy to the body of scroll then we need data target which is this id right here. Save. Now we need to style it. I basically turned it on and let's start by styling it right here. Actually right here, nav-pills, flex-column. As you watch on the left it's going to start coming in looking a little better, nav-pill's and flex-column and nav-pills, flex-column, and there we go. Looks a lot better. Now, it is crunched, but that's mostly because of the narrow browser. But as we expand it, it looks really nice. As we scroll down, looks really good, we can go anywhere. Pretty cool. So, that's it for that one. We're going to close it, go back to our examples, we're going to do list group, scroll down until you see list group. We're going to add list group, and as you can see it put it in its list, I'll style these highlight them, and these are all going to be the same. So, list group item, list group item action. Then we also need our Scrollspy or data spy of scroll, and we need this one right here for id for our data target, and there we go. Pretty cool. Now, let's go to our page example, I'm in four_six Scrollspy four, and we're going to start by adding a data spy of scroll, and then we need this idea right here of list example. Then, let's get to work on making it look a lot better, that a class of list group, and then let's select all of these, and that list-group-item and list-group-item-action. We're also going to add a custom class of aw-px. Just make it a little wider so it looks a little better. There we go as we scroll, looks really nice, and we can click anyone we want. And as we resize, you can see looks really nice. That is it for Scrollspy. I hope you enjoyed that one. I really did, and I'll see you in the next video. 70. Bootstrap Playgrounds Wrap-up: Well, congratulations. You have made it. You've reached the end of Bootstrap Playground. I know you thought you'd never make it but you did, and I really commend you on that. You've come a long way. I hope you've learned a lot. We've went through the Grid and Flexbox, Utilities, Content and Components and some cool Javascript. Now, the Bootstrap Playground was meant to be a great learning and teaching environment but also a point of reference, so you can go back and look at it when, you're say working on other projects. I encourage you to do that, also encourage you to go back to anything that maybe you struggled with or don't fully understand, and feel free to reach out and ask any questions that you have. That's why I'm here. If you don't have any questions and you're ready to build some cool stuff, I encourage you to move to the next section. 71. Project 1 - Overview: In this section, we're going to build a portfolio site. So let's have a look at the finished version. I'm going to hit "Go Live," and here you will see our finished project. We have our portfolio picture on the left and some text on the right and information about us or about them. Then some contact, links, as well as, social media links and some portfolio links to your favorite projects. Maybe your top three. Now, this is just a template. But after this project is done, you can take and change it to whatever you would like and make it your own. Now let's see what it looks like on different screen sizes. So, as we resize, everything still looks the same with more of a horizontal layout, and then it goes to a vertical layout all the way down to mobile. Now, this is just a reduced browser window. But on a mobile device, it will look something more like this, and you'll notice that the picture is not taking up the full size of the browser on the phone. But it will still show the person's name, which is a great way to say, "Hey. You got to scroll down." Also, tell you whose site you're on. That's pretty much it for this portfolio project. There's not much to it, but there are some obstacles to overcome so let's jump right in. 72. Project 1 - Overiew v2: In this section, we're going to build a portfolio site. So, let's have a look at the finished version. I'm going to hit go live, and here you will see our finished project. We have our portfolio picture on the left and some text on the right, and information about us or about them, and then some contact links as well as social media links, and some portfolio links to your favorite projects, maybe your top three. Now, this is just a template but after this project is done, you can take and change it to whatever you would like and make it your own. Now, let's see what it looks like on different screen sizes. So, as we resize, everything still looks the same with more of a horizontal layout, and then it goes to a vertical layout all the way down to mobile. Now, this is just a reduced browser window, but on a mobile device, it'll look something more like this. You'll notice that the picture is not taking up the full size of the browser on the phone, but it will still show the person's name, which is a great way to say, hey, you got to scroll down and also tell you whose site you're on. That's pretty much it for this portfolio project. There's not much to it but there are some obstacles to overcome. So, let's jump right in. 73. Project 1 - Step 1: In this video, we're going to get everything set up for our project. So, somewhere around this video, you should be able to download your project files. I have mine right here and you'll see it says portfolio. In there, you'll see it has portfolio_finished and portfolio_start. Just going to drag that in Visual Studio code. Here you will see all of our finished files. There's not much, but it's a great way to compare what we're doing along the way, so that if we have any problems, you can go straight there and just compare your files to the finish files. Now, in portfolio_start, we don't have any CSS, we do have our image, but we need to start by adding our index file. So, make sure you're on the portfolio_start. You're going to add a new file. So, index.html. Let's make this a little bit bigger. We want html 5. So, image sets everything up for us, and we're going to go and save that. This is just our basic structure. Now, we need to go out and we're going to use the BootstrapCDN instead of having to download all of Bootstrap. We're just going to use the CDN version, which means it's just going to pull it from the web every time we need it. So, here's the Bootstrap web site. You can scroll down a little bit and you'll see CSS only and JavaScript, or you can go to download and it will be right here under BootstrapCDN. Now, these are all the Bootstrap versions, these two right here. That's the bootstraps CSS and the Bootstrap Javascript. But they have two dependencies which is jquery and popper.js. So, we're going to copy these, we're going to put them right here. Now, the javascript needs to go at the bottom so we're going to cut that and place it at the bottom. Now, remember those two dependencies, so I'm going to bring this back in. Right here, we're going to copy these. So, copy, we're going to place them above it. Now, they do need to be in this order and that's because bootstrap is using jquery and popper.js. Let's also add our own CSS. So, let's go and create that file. Click on the CSS folder and add styles.css We're going to close that. Here we're going to add a link tag within href of css/styles.css, and auto complete works nicely for us. Change this doc type to my portfolio. There you go.That's pretty much it. We're ready to get started. This is just our basic structure. I'll see you in the next video. 74. Project 1 - Step 2: In this video, we're going to pick up where we left off in building at our portfolio site. So, I'm going to start by adding a class of row. We're going to use Emmet here just to speed things up a little bit. Then I'm going to add a class of col-lg-6*2. As you can see in the Emmet abbreviation, that's what it's going to output when I hit enter. There we go. So, the first one we don't need at the moment, but let's build out the second one. Let's bring this to the right so we can see it live. Now, there's nothing going on right now, but it will be handy, and you can see what's going on in a live update. So, we're going to add a h1 of John Smith, and then we're going to have a span, and in there we're going to put Student.Surfer. and Programmer. Save. Let's add our paragraph tag with some lorem ipsum, so lorem30, and then enter. Fill out some text for us. Let's also add another row and this time, we want col*3 and then let's return, and we want an h3 with a class of text-uppercase. We want it to say Connect, and then we want an unordered list with a class of list-unstyled and then we want li*3 with an anchor tag or a a tag. It's goi