Bootstrap 4 Quick Website Bootstrap Components 2020 Course | Laurence Svekis | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Bootstrap 4 Quick Website Bootstrap Components 2020 Course

teacher avatar Laurence Svekis, Web technology Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

37 Lessons (3h 54m)
    • 1. 0 Bootstrap 4 Introduction

    • 2. 1 Getting to Know Bootstrap

    • 3. 2 Setup CSS and JS files

    • 4. 3 Bootstrap Versions

    • 5. 4 Bootstrap 4 Grid Overview

    • 6. 5 How to add Classes Bootstrap

    • 7. 6 Images within Bootstrap

    • 8. 7 Bootstrap Components Alert

    • 9. 8 Bootstrap Components Badges

    • 10. 9 Bootstrap Components Breadcrumbs

    • 11. 10 Bootstrap Components Buttons

    • 12. 11 Bootstrap Components Cards

    • 13. 12 Bootstrap Components Carousel

    • 14. 13 Bootstrap Components Collapse

    • 15. 14 Bootstrap Components DropDown

    • 16. 15 Bootstrap Components Forms

    • 17. 16 Bootstrap Components JumboTron

    • 18. 17 Bootstrap Components Lists

    • 19. 18 Bootstrap Components Modal

    • 20. 19 Bootstrap Nav

    • 21. 20 Bootstrap NavBar Code

    • 22. 21 Bootstrap ScrollSpy

    • 23. 22 Bootstrap Pagination

    • 24. 23 Bootstrap ToolTips and PopOver

    • 25. 24 Bootstrap Spinners

    • 26. 25 Bootstrap Componets Conclusion

    • 27. 26 WebSite with Bootstrap Setup

    • 28. 27 WebSite Add a NavBar

    • 29. 28 Social Icons for WebSite

    • 30. 29 CSS Styles For Sections

    • 31. 30 About Page Card Component

    • 32. 31 Bootstrap Grid in Action

    • 33. 32 How to Add a SlideShow

    • 34. 33 Bootstrap Contact Form

    • 35. 34 WebPage Footer Setup

    • 36. 35 Smooth Scroll and ScrollSpy

    • 37. 36 Final Website Overview

  • --
  • 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.





About This Class

Bootstrap 4 for rapid website development - fundamentals of Bootstrap 4 websites, applying components create web pages

Do you want to build a full responsive website quickly ? Bootstrap is perfect for that. 

Bootstrap is the most popular frontend framework

- which lets you with just a few classes in your HTML elements do some incredible things

- you can create a webpage and then quickly apply styling

- construct amazing looking websites that work across different screen sizes seamlessly. 

Bootstrap is a powerful library or what is know as framework that can help you design websites faster and easier.

It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and a whole lot more.

Its enjoyed by web developers of all levels, as it allows the easy build of attractive website designs in minutes.  All you need is basic HTML and a little CSS and you can easily get started with Bootstrap

Check out bootstrap and see all the amazing websites you can build.

This is a prebuilt CSS file - ready for you to apply CSS classes and create your website.

Course covers the basics of Bootstrap - how to setup a website with Bootstrap quickly and easily in minutes.  Go from wireframe to real website applying classes and attribute to HTML elements.  Knowing the options will allow you to quickly build websites with Bootstrap.

Please note this course will first walk through a quick website creation with Bootstrap and then demo with examples the core Bootstrap components that can be applied to create websites with Bootstrap.

-----HTML and Basic CSS understanding is required-----

Course covers commonly used components and various components that can be used to create quick website designs.

Source Code is included, Example of how to build a website using a wire frame make it come to life with Bootstrap, sample code and lessons on Bootstrap 4 components.

Create your website in 4 easy steps

  • Setup HTML template typical structure for a website

  • Build the Grid with Bootstrap

  • Add components to showcase the required content

  • Make adjustments with colors and other utilities.

Covers everything you need to get started with Bootstrap 4

  • Bootstrap 4 Layout Quick HTML page structure

  • Use of popular Bootstrap 4 Components

  • Bootstrap 4 Alerts

  • Bootstrap 4 Badges

  • Using Breadcrumb from Bootstrap 4

  • Cool Bootstrap 4 Buttons

  • Explore Bootstrap 4 Cards

  • Carousel creation of amazing slideshows Bootstrap 4

  • Collapse content accordion and more Bootstrap 4

  • Dropdowns with Bootstrap 4

  • Bootstrap 4 Forms formatting with Input groups

  • Jumbotron to make your content stand out Bootstrap 4

  • List groups grouping content in lists Bootstrap 4

  • Wow Bootstrap 4 Modals

  • Responsive collapsing Nav and Navbars Bootstrap 4

  • Pagination with Bootstrap 4

  • Easy Bootstrap 4 Popovers

  • Progress bar and more Bootstrap 4

  • Scrollspy to active navbar Bootstrap 4

  • Spinners for Bootstrap 4

  • Bootstrap 4 Toasts

  • Adding Bootstrap 4 Tooltips

Bootstrap 4 framework - rapid website development - select and add classes to build your website.

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Fast friendly support is always available to help you learn more.

You have nothing to lose, create your website with Bootstrap 4 Today!!!!


Meet Your Teacher

Teacher Profile Image

Laurence Svekis

Web technology Instructor


Web Design and Web Development Course Author - Teaching over 700,000 students Globally both in person and online.   

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990,... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
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.

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.


1. 0 Bootstrap 4 Introduction: hi and welcome to our bootstrap introduction course where we're going to be building out a website project from scratch using bootstrap. And if you've never used boots dropped before, you're gonna be amazed at how easy it is to construct websites quickly and easily. And these websites are all fully responsive. As you're going to see an upcoming lessons, there's a number of amazing components that you can really easily add to your project. My name is Lawrence. I'm gonna be instructor for this course. I come to you with many years of Web developer experience. And using bootstrap is one of my favorite front end frameworks to develop websites really quickly and rapidly and that are fully responsive. Takes all of the tweaking of styling out of the picture and allows you to focus on the design of the site and out of the box. There's some really amazing things you can do with bootstrap. There's a guy be a step by step course, introducing you to how boots drop works, the concepts of bootstrap and why you should be using bootstrap in order to create websites . So I'm gonna be walking you through some of those in the upcoming lessons. We're also gonna be developing a website from scratch as we progress through the lessons and I show you more and more about bootstrap. This is an example of the website that we are going to be creating and notice that it's got a number of bootstrap components and silly structured website fully functional. It can also be adjusted and fully responsive. So the navigation bar as we shrink it down, it collapses and we can click and un collapse, that the coating is going to be done on the left hand side and the editor, and on the right hand side, I'll have the window open, that you can view the adjustments and how it's being presented within the content. And what effect adding the various classes is gonna have on the project that you don't need to know. CSS JavaScript. You do need to know HTML. So you do need to have some basic understanding of HTML and start during the content of your HTML elements and how to apply attributes because mainly with bootstrap it supplying the right classes. And then, of course, there are some attributes that needed to be applied in order to introduce the JavaScript functionality. I'm gonna walk you through how to get boots drop how to get set up with bootstrap, creating a basic bootstrap template, and then how you can apply some customized styling if you wish to your website project. Also the different compatibility for bootstrap and why we use bootstrap. It's a lot of good reasons why we use bootstrap. I'm also gonna be encouraging you throughout the lessons to try out some of the code and to challenge yourself and write the code. And then I'll show you walk through the exercise in the latter part of the lessons he. There's a lot of really cool classes that you can add that update the typography, visibility and, of course, images and how images air handled and even tables and then Scott, these components that are customized that help you lay out content in a nicely formatted fashion. You can use lists, which we commonly do in website development, how you can group those together and display them nascent neatly and then, of course, the navigation bar. So often times developers air just looking for a bootstrap in order to use navigation bar because it makes the knave bar responsiveness really easy where you can collapse the navigation bar and still have access to all of the links and then adding in various colors . So making your website nice and colorful really stand out and with some stunning colors, and then you can, of course, update thes default color schemes really easily, and that updates the whole look and feel of your website. If you have any questions or comments, I'm always happy to help within the Q and a section of the course, and I always love to hear from you. Let's get started. 2. 1 Getting to Know Bootstrap: Hey, what if I told you there was a way to create websites really quickly by linking to a style library in a JavaScript library? And then you can bring the power of those libraries into your projects to develop your website. Just by applying different classes to your elements on the page, you can make them look completely different. Well, this is bootstrap, and this is what bootstrapped does. It's a front end framework, so that means that it's based on HTML, CSS and JavaScript. It's an open source, and it's the most popular front end framework. On line today is a responsive grid type system that has a lot of pre built components that you can easily bring into your projects, saving you a lot of time from styling and also applying the JavaScript in order to produce that type of functionality. This is rapid website development where you could build fast responsive sites all using bootstrap, so using the different components in bootstrap, you could bring a lot of power quickly and easily to your projects. They've got a number of examples of the main website is get bootstrap dot com, and if you click the examples button. You can check out some of the really cool things that you can do with bootstrap by adding in components and these air. Also, some of them are commonly used Web development and design components that you might be using, and it's all already done with bootstrap. And in order to bring bootstrap into your project, there's a number of ways to do that. So if you're using the terminal, you can do an install. If you've got the node package manager, there's also the boots dropped CD ends. So what CD ends are their content delivery networks. So these are libraries that you can link to so that you can add the source files to your project directly without having to download them. So if you want to bring the CSS in and there is also JavaScript libraries, it is based on J Query the JavaScript. So some of the functionality is based on JavaScript for the components. So if you do need to make use of the components, you need to bring in first the J Coury Library than the Popper Library and then, lastly, the bootstrap Js library. So, in order to get bootstrap onto your Web project. You can copy the CSS link and then also the JavaScript and J query links. And, of course, there's more information available if you explore the docks. There's also a number of icons for bootstrap, so this gives you the option to bring ah, whole library of icons that you can utilize within your Web pages. So going over to explore the documentation and give you an overview of how to set that up and this is designed within a grid like format. So for now, when gonna hit the getting started, and once again it's got the cdn for the C. S s library, so you can copy the CSS library and then bring it into your project. So just put it within the head off your project. And there's also an option to download the CSS file directly on your computer. And then, of course, you could link to it, just as you would with any other style sheet that you're producing on your system. So now when I go over to the Web page and I refresh it, we noticed already immediately that as I refresh that there are some styling changes now we can bring bootstrap into our project by applying different classes. So I'm gonna It's that a class class of Jumbotron And of course, I am gonna be going through all of these throughout the upcoming lessons it's going. Apply all of the styling directly to that element that have applied the class to the pre defined classes have a Siris of properties and values for each one already in the library, So go ahead and try it It bring the style sheet into your project using the cdn, and then the next lesson. I'll show you how you can download it, and you can also bring the power of bootstrap. Have the library directly on your computer, and then you get access and you can look through the CSS file in order to get more familiar with what's possible with bootstrap and all the various classes available and see what the output is for the styling. Try and you could be ready to move on to the next lesson 3. 2 Setup CSS and JS files: Hey, in this lesson, I'm going to demonstrate how rapidly we can design a website. So we're starting out with an index dot html file. So it's just got a basic HTML structure where we've got a title. I've also added in the meta the View Port eso This will allow it to fit on mobile devices. And because bootstrap is responsive and built mobile first, it's always a good idea to include this meta information as well as the utf eight and the language that you're gonna be using on your Web page. Then I've got ahead section So this is our heading area for the websites have got a div with potentially three different columns off content that we can add within the diff and then a footer area where I've got some copyright information. So taking all of this just regular HTML code, we're going apply bootstrap to it to quickly transform it into a bootstrap website. So there's a number of options that you have with starting with bootstrap so over at the getting started introduction page, it gives you the links to bring the CD ends. And there's also the JavaScript files you can copy these and simply bring them into your project. And that will link to the online libraries of the bootstrap CSS File and the JavaScript, the J Query file, the JavaScript file and also the bootstrap JavaScript file. So the boots the J quarry for those that are familiar with Jake Worry, this is a slim version of J. Corey. So if you are looking to bring Jake weary and develop with Jay Query, then it's advice that you do get the full J. Corey Library because this is a slim, trimmed down version of the J. Coury Library and the M I end within. All of these file names means that it's men ified, and what men ified means is that all of the white space has been removed. But there's also a starter. Templates Seacon Select the starter template, and you can copy this. And this is a great place to start because it has all of the CD ends and all of the JavaScript libraries that you need in order to run Bootstrap. It's already in place, so if you want to dive right in and just without any download right on your system and start working with it. You can do it this way as well. There's also another option, so there's actually a bunch of options. You can get it on, get hub. So this gives you a link to the get hub repository where they've got boots drop and see. It's a super popular to bring boots drop in from get Hub. There's also just different ways that you can, uh, access it using the terminal. So they've got all of the different commands that you can bring bootstrap into your projects. And then also, lastly, of course, there's a way to download the source files, So if you click the download, it's gonna bring you over to the download file, where you can select the type of download that you want. So there's the compiled CSS and Js files, so this is typically the one that you want to use where you can just download the CSS and JavaScript files, and then you can link to those directly from your project. And then, of course, don't forget. You need to upload thes as well onto your website. For them to be able to work properly. There's the whole source files with the S, a S s compiler. Eso If you want to go that route, this is also on option. It was going to download a ton of files and there's gonna be a ton more information here downloaded. And there's also one where we've got pre built examples so you can select those and download via the pre built examples. And, of course, again, boots drops cdn You can bring it in through the node package managers, though, doing an NPM install boot boots drop There's bring it in with yard Ruby composer and just a ton of options to bring it in. So let's download the file, and this is just gonna download CSS folder and A. J s folder. So when you download that within the CSS, you're going to find that you've got the bootstrap grid. You've got all of the bootstrap files, and this is the main one here. The boots drop CSS. So if you are to open this and I'm gonna open it within brackets, they can take a quick look at it. Eso within the bootstrap file, you're going to see all the different classes that we're gonna be using, and the non unified one is the one toe look at if you just want to look at all the different properties and values that are being set because this is the one with where it's nice and neatly laid out where you can see what the H r does were displayed for, and we are gonna be going over what the's classes do and how we're going to bring them into the project. So that's another way to bring bootstrap in and then also within the Js file. If you open up the Js folder so it's gonna download two different folders, and then this is the bootstrap Js file so we can open that as well within brackets, the various JavaScript functions that are built in to boots drop and that provide the components all of the capabilities that they're able to do. So just says she would any other style sheet you can link to it, specifying that this is gonna be a style sheet and then specifying the location of the style sheet. So it's located within the CSS directory and then select the bootstrap CSS file, and that's going to allow you to bring Bootstrap into the project and then also for the JavaScript. So the JavaScript files. They're gonna be a little bit more complicated because you need to specify the source of the files, and they're all located within the JavaScript file. So the 1st 1 that you need to bring in is the J. Corey and then the popper, and then, lastly, the bootstrap Js. So without the other two, it's not gonna work properly for all of the components. So I'm gonna just copy and paste so that we've got a sampling of the CD ends as well as the CD at the direct link for the style sheet. So now that we've bought Bootstrap into the projects, let's save it and go back out to our project and refresh it. So right away we get the bootstrap styling being applied. So now let's go through and add some classes. I'm gonna add in some of the common classes from bootstrap. And, of course, we're gonna be covering these in more detail in the upcoming lessons. I'll also add it to the footer when we refresh. So you can also wrap the parent in a container and then set up a grid with class and rope and then each one of these can function as a column. So you do have some options for column. If you just do seal l to indicate column and put it on all the same level Dibs. What's gonna happen when you go out here? You're gonna have are three column website already built there. There are a few options with the container so you can do a container fluid and that will spread that container all the way across. And this is fully responsive website. So when you do a resize of the space that you have for the website, I'll move this over to the right hand side so that I can shrink and expand the website content and then also if want to align the text and its text center. So what that will do is that will center any text that we have. And we also did this see that we had some larger text size using the display for a class. So going back into the bootstrap CSS, we've got all of the classes listed here so we can see what size display four is. The font weight. The line height display three display to display one. Let's go back in here and refresh it. And now we've got that heading. It looks a lot bigger, lot better, so spreading it out that maybe this is called to call, too, and I'm going to be covering how the grid works in the upcoming lessons. So this assist a brief example of how he can split up the columns into different sizes. Essentially, there's 12 columns across, and the way that the grid works is it structures each one of these to take up the appropriate space. So if we've got eight than that's taking up 66% of the available space, and the rest of the four out of 12 is shared by the other two. So this is taking up 2/3 and the other two are just taking up 1/3. So they end up being 1/6 of the available spacing for that parent element role, and basing it off of 12 makes it really easy to divide the columns. To try it out, bring Bootstrap into the project, apply some of the classes that we've covered, and you can also go through the CSS and check it the different classes that are available and apply. Some of them and I were walking you through them as we go through the upcoming lessons. 4. 3 Bootstrap Versions: this lesson, we're gonna be covering the bootstrap versions. So you might have noticed that currently were using version 4.5 and before that was 4.44 point three and all of the way down. So there have been four major version updates with boots drop. Originally, Bootstraps started it with obviously version one, and it went all the way to 1.4. Then it was updated to two, and there was all the way through. And then with three, that's where some of the major releases and the release changes were done. So going between two and three was a major update and as well. Going between three and four has been a major update as well. So the upcoming lessons there gonna be a combination of the new version and on the bootstrap site itself. So if you go to Doc's for it slash versions, you can select and switch to any of the versions that you want. All of the documentation is still updated and still online, and you can also switch through the different versions by selecting here at the top right hand corner on the website, and that will allow you to go through the different versions that are available for boots. Drop also if you go to the home. If you go to get bootstrap, this is always gonna bring you to the most current version. So if you are looking for previous versions of Bootstrap and if you are looking for a particular themes, some of them will be using older versions of Bootstrap as well. So just keep that in mind that the version is important. For the most part, a lot of the components are the same for the major version changes from 3 to 4. Then there's gonna be a huge difference between the components and how they function. So if you do find that your code is not working exactly the same as the code that's being displayed, check the version and make sure that you are using the same version that we are using within the lesson. In many of the upcoming lessons, we are going to be using either 4.44 point five as those are the most current versions. As of the time when we are creating this lessons and there will be updates if there are some major changes for the components and the classes within the components. And also, if you are looking for themes or templates online as well, pay attention to the version numbers because they will differ. And there's a lot of different versions of bootstrap that have been covered over the past few years. 5. 4 Bootstrap 4 Grid Overview: Now, before you create any website, it's always a good idea to do a wire frame. First, there's a number of tools online. Actually, there's tons of tools online, and you could also do it within a free hand on a piece of paper. So whatever works for you when you're designing your Web site. And this is also why it's important to note and understand all of the options with the various components in bootstrap. So you draw out your wire frame first, depending on how you want your website toe look and the draw. I always the one that I'm looking at right now, so you can just simply create different layouts for websites and create that, and then you can move the various components around. This is a great tool, and this is one that I used quite often in order to plan out the way that I want my website toe look and be able to also present it. So there's also various colors that you can add in, and you can really style your website really nicely. There's also different buttons, containers, forms, graphs and so on, and in the upcoming lessons I want to illustrate all of the amazing things that are available with bootstrap. So it is important to have an understanding of what's possible and then create your wire frame around all of the different possibilities. So at the very heart of it, bootstrap is the grid, and the grid is what provides the core layout for bootstrap is number of ways to create various, easily different columns as well as arose. And these all get divided by a main container where you've got the container class. So either container fluid or just container and container will give you the gutters on the side, on the left and on the right hand side, whereas container fluid will go full with and then within the container you can add in rows . You can add in as many rose as you want and think of it like a table like a grid when you're designing your website. So everything is already within a grid format, and when you do your wire frame, you can easily layout and see how many columns you're gonna need. So, for instance, this one is going to need three columns, so this one is 50% 25 25. So you could really easily do a three column design there. This one is two columns. So this column is probably about 80% where 75% and then this is 25%. And then back down here below. There's three columns. So this one is probably 25 50 and also 25. So this can give you your basic structure off your website. So let's create this structure using the bootstrap grid and a number of rows. And also there are three rows here. So open up the editor, and I'm going to just create this within the main section because every website is gonna need a navigation in the main. I'm gonna provide a class of container, and this is in order to contain the grid and create a bunch of dips. And these dibs are going to break up the role so we'll have first rope, and then another div inside of it nested in there. And this can be for the columns. And the first road did have three columns. So it's create all of those three columns. So right now they're going to be equal with, and then, of course, of bootstrap. You can adjust that. So we're creating the basic structure. First, the 2nd 1 had two columns, and then the 3rd 1 once again had three columns and going back into the wire frame design. So we had ah website name and we had a number of sections of content. So this first column it had the name and then these sections had some content in them and then going into the wire frame once again. So we had a big section of content. Grab that content and this one had a title. But we're not gonna worry about that for now. Eso this one again. This was too mean sections for the website, and the 1st 1 had just a ton of content. That's a little bit too much for our example. And then here we had a new ordered list and a bunch of list items within, and I'll just add in a couple lists there, and we can transform them two buttons afterwards and then one last time. Let's go into the example once again and copy this text. And we are We have the two buttons here. We have an image here, and we have another list here, So this one might not even be a list. It just might be a couple buttons and some text underneath. We could always adjust that with bootstrap. It's really easy to do so in the last one we haven't image. So this create an image placeholder there, bunch of text. And then we also have a new ordered list and several list items included. Now we do want to adjust the columns of our website. I can make this smaller, so I'm gonna shrink the screen size so that we can get a better sense of how the content is being presented. So we need to shift these over and with the bootstrap grid. There is a number of ways to do that. So we just use the call and the call on the break point. This is only gonna break, and this is gonna provide even columns. So none of our examples needed that. We need to have used the 12 column structure, which is available in bootstrap, and then we can also set various break points. So there's extra small, small, medium, large, extra large and usually by default. I like to have the break points on Call Dash MD. That's because this is kind of the area where I can get enough content. And this also really depends on amount of content that you're providing within the sections . Because if you set the break point to be smaller than depending on how much content you have, you might not want it to stock where it might not. So it might be something that doesn't need to stock quite yet. So that's dependent on content is how you an output that the different prefixes in the different break points. So here's another example of the equal with for the auto columns. And again we do need to have special column widths. And this is more of kind of like what we're looking for where we've got one of three two of 33 of three and the middle one is twice as wide as either the sights, and that's using the call Dash six and then just down below. There's an example where the call dash five so you can have these, and these ones are always going to be that with, so they're going to be a straight column with it doesn't matter where you resize it, There's gonna be no brought break points, so they're not going to stock at any point. So that's the big difference there. If you add in the break point, it's gonna stack. So let's add in the break points and we're going to do the MD break points on our columns. We've got the 1st 1 here where we're gonna MD and this one is going to be twice as wide as the others and M D Dash three and M D Dash three. So see what it looks like. So now we've got that first structure. Let's do the same thing for the next role where we've got MD and maybe this is M M D Dash eight. You might not want you would not want to set the break points. So get up to you depending on the content, do MD dash for so that provides that type of structure for the website, and I'm gonna make these sides smaller so you can see these ones are the same with, and that one is the same width as well. And this was just a random default example. Of course, you probably want to spend a little bit more time creating your examples. So this one is M D three and I should update this one to be three as well. And then this could be night so that the with stays the same in the middle. Here is MD six, and I do have a lot of content. So we might want to keep this one static and we might not want it to stock it'll. So how about we do that for the last part there? And that's another thing that you need to decide when you are designed your website where you want it to break. So now we see the way that it's gonna stock, so these ones are already stocking. These ones are stocking. And what I mean by stacking is that watch where the buttons go. They go underneath that other div. But this one will always stay the same with the three column designs. So doesn't matter where we shrink the page down to. It's always gonna have the three column to move on to the next lesson, go over to draw I o or get a piece of paper, sketch out a quick website design, and then produce that using the grid system in bootstrap and coming up, we're gonna make a few other minor adjustments and tweaks to this website to be able to present it just as we see it here. Within this example, that's still to come in the next lesson. 6. 5 How to add Classes Bootstrap: So once we've set up the basics of the website structure and we did that with Bootstrap. Now we can apply some various classes, and this one is gonna this one. We've already done where we've got the website name, and then this one has ah heading section there. So it's not just the paragraph that it's got and apply a class so I can apply an H for class to it, and it's just got the section one and then content underneath that I'll make some space there. I will also do the Section two and apply some spacing underneath and take a quick peek back at the diagram. So it's Section one, Section two and then with section, and we've got a search with an input field so we can copy the section one content into the next section area. And so we've got that as section one and then below that. So let's use the same format and apply search to it. And then, just below that, we need an input field, and it's not gonna be exactly what we're doing to have got our search, and you can go to the bootstrapped site and always look at the different components so that input field is within the form and see within the form. We've got the different form groups. I only have the one field, so we don't necessarily need to have a form group. But we can add that in. Of course I was needed eso Let's do a quick one here and bring it back down. And I'm just gonna do a quick update of this one so that we wrapping it within the form input field and that we have the search all the way across. And we don't need a label for it because in our example, there's no label. And then also there's no help test text either, so you can get rid of that. So there's our search input field and again, looking at our example, so looks very similar. And, of course, they're using the placeholder name and these air just HTML. So it's got nothing really to do with boots, drop animal type in a search and refresh. So there's our search, so ready to move on to the next part. And this was just a simple paragraph and it had a title, so we used the same structure that we were using earlier with the titles and will give them the H four. So you might also want to change that up again, depending again on what? Your designers Title one. And then we had a bunch of content contained within that next section. So all of this was the contents and there was quite a bit of content contained there. So that gives us very similar output and that this one does look like it had a little bit more spacing. So we can add in spacing and these air the minor adjustments that you can do with boots drop when you go into utilities and adding in the various spacing so you can add margins padding with the classes. So you selective. It's a margins or padding that you want to use. Top bottom left, right X. Why that I typically just use the top bottom left, right. If you don't include these and I will just do the full way around, and then the size of the padding that you want to do so this one to me looks probably like a margin bottom, So that would be M B and dash. Whatever the size. We want to put slits to MB, Dash 4-3 and going into the title. It's a margin margin. Bottom Dash four. See that moved the content down a little bit and then also within the example. So going back to the example, we have a couple of buttons, and then we have some text underneath. So it's go down to where we created those and we did them as on ordered lists that you could also do this as a grid as well. So those air couple options that you have and the structure would be the same where you'd have kind of one on top of the other, with the A, Norden lists and the list items. There's a number of options here that you can do where you've got the list group, so I'm gonna turn this into a list group. So that one was just more just as a placeholder and get rid of a couple of the list items because to me it looks like there's only about three, and I'm gonna select the text from there, and then these ones would just be buttons. So give them even a diff or they could actually be buttons. How about we stick with just button and inside it will save button one and then we'll copy what we do within button one, and we'll just duplicate it to the other list item. So let's add in a class and buttons air really easy. It's the Bt end class in Bootstrap. They're going back into the bootstrap website, so under buttons, you can also select colors of buttons, which is really cool. So the first thing is indicating that it's a button and the next just selecting out the different colors that you want. So I'm gonna keep it agree, So use button secondary as the colored class for the button and refresh. So we've got our button one and oops, I did put in the wrong spot. So let's copy this, and we are going to need the list item for that part down there as well go up. And this was the list that I was trying to trying to update. You could also do this as a Siris of Rose. Is there no always a number of ways to accomplish this? So it's you create the button, you can duplicate it and bring it into the next button. So we've got the two buttons and then we've got some text underneath. We also might want to center the content, and that's another option that we have with boots drop, we can do text center. We can also do all of the different alignments of the text. Eso that's one class we could add in and that relatively looks something similar to what we have. So we just leave it at that and we'll move on to the next section. This is the last part where we've got an image. We've got some content again and a title and other title. And what looks to me like another list s we're gonna take care of that in the upcoming lesson. So go ahead and add in the styling into your bootstrap website with what you're designers, and I know we're going rather quickly, so most the time you would take a little bit more time with the various classes and make sure exactly what you've drawn out. But in this case, this was just a quick wire frame, and this is an introduction to how to use the bootstrap classes 7. 6 Images within Bootstrap: this lesson. We're gonna look at images with bootstrap pan, just different ways of styling, those images making them responsive. We need an image down here at the bottom, so just beside to the left of it, we've got an image I'm using. Placeholder dot com services. A nice place to get some images if you need. In that image is exactly the same height and width, so the dimensions are identical. And when just post him image like that, you're going to see that it doesn't fit quite exactly. And obviously it's not responsive. So we want this image to be nice and responsive and fit into that spot, Mace and neatly. Let's go back into the bootstrap website and within. So they do have an option to make images responsive, and that's contained under content images. And all you have to do is add the class of image fluid to your image, and it will make it responses. Watch what happens when I add this class, and you see that it automatically slots it in into the appropriate role. Call them there, and then there's also a bunch of other options for images. We're not going to be taking a look at those because this is kind of all we need really needed for the image. We just needed to have an image there. Next. Let's look at the columns and add in the title for this part, and we already have a title. So I'm gonna just copy and paste that and we're using the H force for the title. You might want to use something different, of course, and then also want to wrap it, wrapped the content within a paragraph and go back and see that it's a title to so trying to make it look as much like this as possible. Also, there's some spacing underneath the title to so we can add in a margin bottom and do merchant bottom of five. It looks like there's quite a bit of spacing. We could also do a margin top on the next element. So for the paragraph, we could do a margin top for that one as well. So just do it quick save and there's our chunk of content on a get rid of some of this, but we did have a little bit too much there, so going back into what the layout was also notices well, that there is padding between the different rows, so we need to add in some padding for the Rose as well. So we could do We're emergen top off four and allowed that in for all of the roads because we have some consistency on that styling. So going back down and this part looks correct. So the last part was just the list item. So it has also a title so we can use the same title format before the list group. And this one doesn't have quite as much spacing. So it's cut that down and we'll type it out as Title three and then structuring the content that's contained in there. So these are all the same. They just contain some development default text for the development. So we've got the title three. The list group and all of these list items are the same, and I gotta just clean up a bootstrap eso. Let's refresh and see what our website looks like. And, of course, probably some minor tweaks adjustments that still need to be made. Let's zoom in. We see we roughly got the same structure and layout as was presented within the example that we created. And that's how you can use bootstrap Teoh, create websites really rapidly and quickly. And of course, it's important to understand all the different available components and how to use the utilities in order to make adjustments to where the positioning of the various assets are within the elements. And we're gonna be going over these as we go through the upcoming lessons. 8. 7 Bootstrap Components Alert: this lesson. We're gonna be looking at bootstrap alerts. They provide us a way to provide a message to users, and these really stand out and they're nice and colorful. So they're using the default bootstrap colors, Primary secondary success, danger, warning info. And there's also light and dark. And there's various ways, so you can also update the link color inside as well, and also update additional content. You can add the horizontal rule, so to break up some of the content if you've got quite a bit and in order to make them dismissible, you do need to have JavaScript, and the JavaScript will allow you to click the alert and close the alert. Let's try that within our code. And I've just cleared out most of the content that we work on. In the earlier lessons, I've still linked to the bootstrap CSS as well as the JavaScript, because for most of the components, you are gonna need to have the JavaScript. We're going to rate the main code contained within this main container element. And this is where we're gonna try all the different alerts and all the wonderful things we can do with bootstrap. So creating a diff first in this div is gonna be what the alert is going to be sitting with him and then applying a class to make an alert so soon as I apply the alert class to it. It already applies some styling to it, where it kind of bumped it in and moved it over, and there isn't any color yet to it. So let's set up the alert as primary alert, and we just put more content. And as we saw, you could do the horizontal rules and whatever. And if you do need to have different colors, so looking at the bootstrap color scheme, so if you had something that maybe was approved, you might want green. There's also the danger there's warning. So these called these classes. They're going to come up over and over again. The's class names for the different default colors. There's info as well, and you would choose whatever the appropriate one is that you want to use. There's also an option to update the link color. So let's say, for instance, we had ah hyperlink for the hello world, and we want to link out to something or other within the message. We get updates and we could set this as a plus link. And that's alert link. Actually, the classes alert link, so this alert link will be in line with the colors of the parent. If I update this to danger, that will change slightly as well. And that's what we can do with alerts is we can update these. You can also have a heading for an alert, which is also another need option. So if we had an H three, and just to make sure that the user knows that this is an alert and apply a class of alert heading so that stays within the alert style. So it's got a default for that where it's applying some default styling to that if want to make it dismissible. That means that we need to add a button in order to close it and adding in the close button at the bottom. A swell will allow the user to be able to click that to provide a close. So let's do a class select in that class of clothes and also adding in the data, dismiss, attribute and indicating that the attribute is an alert and then within the but in itself going to create a span and we'll add in the times symbol within the span of the button. So now whenever the user clicks that they're gonna be able to close it. Let's try it outs and refresh. So there's our alert, and there's the button in order to close. So when the user selects the button, that's going to disappear, the alert from the screen. So try that one more time and close, and it's gonna close the button on the screen. 9. 8 Bootstrap Components Badges: badges and boots drop. Allow us a way to do counts label and also apply attention to specific numbers and this number of a different examples. We can also use the default colors. So the primary secondary success stager warning in fault, light and dark. So all of that corresponds. You can also have them as pills. So pills air slightly more round. They've got the border radius being applied border radius property from CSS. They can also be within a link format. So the links actually gonna look the same way as the regular badges and this number of options had to present this content. So let's try that out in we're you just using the content contained within the mean container and build out all the different options for badges, so badges are typically within additional content. So if you have a class of H four and then some content and maybe over here we want to have a distinguished part of the content, see that in a span and then within the span, you could specify the content number. So to turn that into a badge and we see that it takes the full H four because that's part of the parent. And let's add in a class, and the class that we're adding in is a badge so right away when we add in badge, there is some styling that's being applied to that element, and now we can specify the color of the badge. So let's use badge warning. And there's all those default color options for the bootstrap, so warning always is yellow on the default. You can also do a badge light as well. So light, dark, and this will update depending on what the surrounding content is so light. And then there's also Dirk, so that will have it as a dark background in light text. And there are some stylings. Well, there's one styling option for them, and you could change it to badge pill, which will apply the border radius to it, so that will round it. And this is something that keep in mind, depending on what size of a number. So when I only had just the one number, it was completely round. So why not want that effect? And this is all dependent on how you want to output in what you want to look like. It So I got a copy and paste this and we'll have a few different examples of the badge. So maybe this one is badge success, and this one might not be a pill. This will just be a regular badge success. And that's how the differences off the layouts so you can use thes as needed within your Web pages. 10. 9 Bootstrap Components Breadcrumbs: breadcrumbs in bootstrap as well Azzan websites. They provide us away back of navigational hierarchy. So you'll see these, typically at the top of the page, where you've got your navigation. And if you've gone in several folders deep, you might see something with the bootstrap breadcrumbs being presented. All the different folders that you are in so you'd be in home and then home is parent to library and libraries, parent to data and then within data. You might have some additional options as well, and the breadcrumbs are done within an a nordeste in providing within the navigation. You can also do separators within the BET breadcrumbs so you can do this kind of quote separator, and that provides all the different options for separating the breadcrumbs. So this is a relatively easy one. It would be just a quick lesson on how to use those and how to implement it. So let's set up for breadcrumb, and it'll be three layers deep, so contained within the knave, and you should also always include the area labels. I'm not gonna do that within this lesson, but adding in the area labels air good for accessibility, so that main container is the bread from class and that's an ordered list. And then within the ordered list, you're gonna have a set of list items, and each one of these list items can have a class of breadcrumb item. And then these air usually typically hyperlinks. So this would allow that user to easily navigate back to whatever page that came from. Let's do home as well. Maybe this is main, and this could be multiple levels deep, depending on how complex your website is. Of course, in the last one, we're just gonna ply active to it so that we know that this is the active breadcrumb. So it's still breadcrumb item, but it's got the active class to it and also add in the area label and give this a label of breadcrumb because this is part of the navigation, so it should be included 11. 10 Bootstrap Components Buttons: Hey, welcome back. This lesson is going to be a fun one because it's buttons and buttons air. Also colorful in bootstrap. They allow us a way to provide user interaction and really entice the user to click these nice and colorful buttons. So buttons by default. Whenever you hover over them, they get this kind of active state so it does look like that you can take action. You can click thumb. That's really nice thing about buttons. And I've always thought that bootstrapped his really nice buttons. So there are options within buttons and buttons can be applied to any different element. So they've got them inputs, buttons, hyperlinks as well, and you can do it to devise. You could do it to spans. To do. You could do it to any element. Apply the button class with the boots dropped. Four. We've also got the outline buttons. So these air kind of that reversed option where the buttons themselves, they're colored in with the light font. Well, this is just a white button with the colored in part whenever you hover over it. So these air really more appealing because you can see that there's some type of action that needs to be taken. Whatever you hover over these, there's also button size is so large buttons, small buttons, block level buttons. If you want your button to go all the way across, you can do that. There's also different active states that you can set on the button, so adding in the active class will by default already add in an active state to the button and generally with the buttons. The active state is the one where you're clicking on it, so whenever you hover over the active ones, you don't see any difference. And there's also disabled buttons, So that's a disabled state. So various states that are available with the buttons there's also nice buttons they can do with your forms. If you got some checked boxes, radio buttons and these are just a nicer way to present the radio buttons that are on and off. That's another really good option to use buttons within the form, and they take a completely Duke different look and feel. Let's try out some of the buttons in our editor. So going into the editor, we're gonna be containing everything within that main class, just as we have in the earlier lessons and creating some hyperlinks that air buttons and then also applying the class. So class of Bt end buttons. Everyone always wants to press buttons, so when you applied Bt and class to it, it already has a little bit of styling. But the real styling comes in when you apply the colored class to it. So if you do a button primary, it pops out and it's blue, and there's all the typical colors that you'd expect. So the warning is there the danger. They also have the light, the dark, so those ones are all available for buttons. And these are all of the nice options for buttons. There's also waste to have the outline, as we saw with the outline, that provides another cool way to add button so just could be duplicating these instead of button B t N Dash. Whatever that color value is, there's another dash in there between, and that one is just outline so that provides that outlined format. And you can really easily update your buttons with this outline format, so instead make some updates to them and update the way that they look and feel on your website. There's also the button sizes, so if you wanted these two, you can combine the various button values so Button L G. Is for large buttons. And then there's also for the small buttons. There's the button sm option, which shrinks the buttons down to a smaller size and with the still the same behaviors. There's also button block and that will just turn it into ah block, which means that it's going all the way across the available space so it takes the full with. You could also do a button large and a blood in block if you want it really super massive buttons make them large and then also update any of the other classes that we have. And then also adding in active, I'm gonna just duplicate this and add active to put in a They're so active. That's the same as whenever we've hovered over it. It's going to provide that same color when you add in active. There's also the disabled option so you can update the states so disabled, and that will make the button so that it's not clickable. So when you re hover over, nothing's gonna happen you don't have the little hand that's typical for buttons. Now let's look at radio buttons and these air great for forms. So if you've got a form where you've got a button group that you want a group together, this is a great place to to use buttons as well, to have really nice for type effects and allowed the radio button so that we can see the difference. So type radio options. So maybe this one is the active one. There's also label, So if you wanna apply a label to, it could add a label around the button, so that just moves it up slightly. And that's just regular HTML, so we don't have any of the bootstrap quite yet. And as you can see, the buttons air rather small there. And obviously they're not all going to say the same thing that are not going to see active . So update the's just to be one, too. Yeah, rather small, not very appealing, not very clickable in a form and not great for mobile either. So Bootstrap does provide us a way to update the buttons, so using the button group and button group toggle provides us the toggle option and when you need to have an attributes. So this is the data toggle, and we need to specify that these air, button and save and now within the label. This is where you apply the button class. So whatever button class you want to apply to it, and the 1st 1 is the active one. And with radio buttons, it's important that you do include that active part because that's the only way that the user is gonna be able to distinguish which button is actually clicked. And so by default. If you have an active one, then you want to make sure that user knows that it's clicked. You don't have to start with an active once. You don't have to have out as a default. And generally this looks best if you keep them all the same color classes. And now when you click thes, you see the active one is gonna update you want to. You can update to the different default colors, although it doesn't look as appealing. If you have different colors, just keep that in mind, but it is an option, and you can always apply any class at any point within your elements, using bootstrap 12. 11 Bootstrap Components Cards: cards and bootstrap provide us Ah, great way to combine content together in a particular container. They used to be called panels and the older forms of bootstraps. And now, with the new form of Bootstrap, it replaced the panels and wells and thumbnails all for this card structure that's new with boots dropped. Four. So in order to bring a card, you have a number of options. You can have images on top titles, the card body content, and they help you create and duplicate. And they're perfect for content that you might be repeating different types of templates within, such as products. We've got product images. You've got a title of the project product. Some information about the product and purchase link, as they do have a nice formatting for the images. You don't have to apply in the additional image styles. It just gets brought in with the card image top. You can also include the list groups within the cards, and they provide a nice, handy container for the list groups, and you can Mitch mix and match the various content types to create the cards that you need in order to output the content. The way you need it. So with headers and footers to distinguish the top head area from the body and so much more . There's also variations with the sizing, and they're probably one of those most flexible components within bootstrap and combining it with the other classes that are available. You can align to various text alignments as needed, and also adding in navigation into the cards to display it within a navigation type format . You could also have image over Lee's so having the image in the background of the card and content on top, and providing this with the typical bootstrap background colors and text colors provides you almost endless possibilities. The cards can also be laid out horizontally, where you've got the image to the left, the court title and the card content on the right hand side. And you can use the typical background colors and text colors in the utilities to update the appearance of the cards. There's also options for the various borders of the cards, and you can also group cards together in a card group. And if you want to use the card decks and setting them of equal width and height so that they're not attached to one another. And there laid out in more than a grid like format that's also available within the card deck. There's the card group, which groups them all together without the spacing. And there's also a grid option for the cards as well, which is similar to what we saw with the boots regular bootstrap grid. And this could be applied within the cards where you've got the boots drop of grid classes applied within the card structure by using the rows and columns toe output, the card content. So yes, quite a bit to go over with cards, let's get started. So start by creating a div, giving it a class of card and then within the card, create a nested div, and this one is gonna be card body. And this is where the contents of the card are going to be contained so they could be contained within a paragraph. If you want to add some other styling to it, you can also add in titles. So let's give this one a class of card title and also H three and all space started so that we have our card content as a title before Matt. And of course, you can add in buttons and mix and match the various bootstrap classes together to get the layout that you want. And the way that I usually create cards is I'll create the basic card structure and then I'll copy and paste it to have additional card elements. So either using the boots, drop grid or the card grid. There's also options for the links to have it as a card linked. That's going to provide more structure with how it's gonna be output. And then within the card body, you can have content as card text and images can also be added in. So I'm gonna add the image above the card body just as an image, and we'll do the source, and I'm going to use the same sources we had before with the placeholder image. And let's apply the class because that image just doesn't look great like that. So Kharj image, top class and with Bootstrap to illustrate this a little bit better weaken set default wits . So we've got a number of default wits that we can use, and this way you can see what the card image class is going to do more, and it keeps the dimensions of the image instead of stretching it out and you don't want to , just you can have more than one card body. You might have a requirement to have two different card bodies, so you can do that as well and also have ah, card header. Notice that it's slightly dark grade there, as this is what a default header might look like. And you might also want to make this bigger. So looking at the various options that you have with the different styling in bootstrap, there's also an option for card footer as well, and that will also update the background color. So it's slightly off. And if you did have cards, I'm going to get rid of the card body there. My difficult way of using card says that I'd create my default template for the card, and if I want to be able to reuse it, that I create a grid in bootstrap and I just simply copy and duplicate the content and then duplicated as many times as necessary, also going to get rid of the 50 white so that presents the content in tonight's format and notices well that it's all responsive because we're using the bootstrap grid and you can have images and multiple spots within the card. It doesn't always have to sip their the top wherever you place the image. You could also do it just before the footer as well. So it's another option. So wherever you put the image tag, that's where the image is gonna go. And typically you will see them near to the top of the element. You could also have an image overly as well. Let's create that and give it a class of card. I m g overly and what this does is this creates text on top of the image, and I'll just take the header off. So we just got the text on top is by default. It takes whatever the size of the card is, and it positions the image overly on top of the card as a whole. That's why you got to be careful when you have the header that you didn't wanna have text on top of the header, so text on top hat text doesn't look great. So that's how you can overlay text on top of your image. And then, of course, use the text white to indicate whatever color of text you want. And that's again within the utilities of Bootstrap and then the card as a whole. You can always update the background colors, using the utilities to make them stand out and make them different and again applying text . Wait, if the need is there and I'm gonna just do background dark, you can also set border colors, so border. So if you wanted a green border and you can see there's a slate border around, the content could get rid of the dark. We could just see that green border there. You have options to set the different border colors. There's also options for the card group That's just a rapper Element was the class of card group, and then you would place all of your cards within the card group element, and that would group all of the cards. So just select the card and place them within the car group. I'm gonna get rid of that default with, and for now, we're just going to do two different cards within the car group, and you could do as many as you want. I'll make this bigger so that we can see there is a difference between the card group and the grid structure, so the grid automatically has. The spacing between the card group doesn't have any spacing between, but it's also a nice way to lay out the card structure. And you can always update the card Group two card deck if you do want to have that spacing in between. So it looks a lot similar to what we saw with the grid. And again, it's an option to use whichever one makes the most sense to you. And if you add in another card into it, it will literally look just like the grid below. The structure will literally look very similar, so the card group is the one that looks different than the grid. So if you want to have a different type of effect grouping a bunch of cards together than use the card group as the card grid, you might as well just use the bootstrap grid. But again, it's up to you how you wanna structure. There's also card columns, so if you're using the different a bunch of cards together, that might not necessarily have the same dimensions, and I'm gonna update some of this. You could see it takes on more of a Mason type format where it groups them together as needed. But it also is smart enough to know how to structure. It sits in a more readable format that's taking into consideration the various heights, and that's card call. Um, so it's a lot different than the card group, whereas the group would automatically just group it as columns. And the card columns is the one that structures that better in a more presentable format. So it comes to cards quite a lot of options, different ways to output the content. And overall, it's a nice way to percent content that you're grouping together within containers that you can vary as needed. With the Darius Bootstrap classes 13. 12 Bootstrap Components Carousel: this. Listen, we're gonna look at the bootstrap carousel, so this is a way to do a slide show and that can cycle through images. You can also have text on top of the images, so the number of ways to present the slide show you can also add in various controls to move to the next slides. The users of your website can move manual to the next slide. There's also indicators you can add in both indicators as well as the controls. So those air multiple options that you can have within the slide and that allows the user to interact with the content and move to whatever slide they want to look at. You can also add in captions on top of the image. That's a nice effect to find out more information. There's a cross fade options is different types of feeding that we can do as well. You can customize the intervals, so by default it's set to one second, but you can update the whatever the milliseconds air going to be. So this case that data interval is 10,000 milliseconds, so that's a 12th interval so you can customize the various intervals as needed. And that can be done with JavaScript setting the interval as well as you can do it within the attribute, calling it data interval. So just like the other components that was seen within bootstrap, you don't actually have to go into the JavaScript code. You can handle all of those updates just out putting them and updating the attributes for the element. So let's start by creating a diff, and you need to have an i D. In order to identify it, I'm gonna call it Slide one, give it a class of care, care ourselves so the classes carousel slide, and you do need to add in on a tribute. And that's called data right and identify it as a carousel so that the JavaScript knows how to identify it and how to handle the content contained within. That's our initial carousel and then inside of the carousel. So there's B'more dips to wrap the content, and then this first class is gonna be the carousel inner. And that's just carousel dash inner. And this is where all the inside content is going to sit for the caress ALS and create another div to have all of the different carousel items, these air all having the class of carousel item, and the 1st 1 is gonna have the active class so that we can identify whatever the 1st 1 is going to be. And then here you would place an image with the source. I'm gonna use the same place older image. So it's our place. Older image. And then you have to make the image responsive and set a with for the image. And you can do that with boots. Drop where we can set a width of 100 and said it to D Block, which will turn it into a block format for the image. And with these types of sliders and care cells, you should have fairly similar dimensions for the images of the wise, they just won't look right. Eso this one. I've updated to be 500 by 300 and then adding in some additional images and updating the images so that they actually say something different, so that could be second. That could be third and so on. So we see that they are actually rotating the different images, and this is happening on a default interval of every second. I mean refresh and actually placed them all active, So let me remove the active part of it. So the active is the default first image, and then the intervals of the images will rotate. The image is now to second, and then through the next interval, it's gonna update it to the third image. And that's so you can move through the intervals. And a lot of times when you've got people coming in to interact with your content, they might. They might not want to wait till the content updates, and that's where you can add in other controls. So you might want the Chevron's on the left and the right side so the user can move and navigate through them. So set these up as hyperlinks, and they have to identify to whatever you give your mean parent I d as gonna move this down a bit so we can see it. So that's where the hashes going. That's where the hyperlink is gonna be. Go and set the rule as button and a data slide attribute is gonna be the previous role, and then the other one is gonna be the next and then Lastly, let's out in a class, and the class that we're adding in is care, carousel control and previous. This is that previous control, and we also need an icon for that. So we need a way to identify. If you already have some type of icon that you want to use, you can add that in as well. And Bootstrap does come with an icon that you can use so applying the span class and it's ah rather long class. So it's carousel control previous icon. So that adds in the icon there that we can see and I'll duplicate it and will do the same thing for the next. So the H ref is still to the seem. The slide is the data slide is going to be next. The carousel control class is also going to be next, and the icon is also going to be next. So that way, now the user coming in can control the slides. There's also the indicators at the bottom so you can use both or you could use either one and we can represent those as an ordered list. So adding in the list items and then going to add the class and the class for the Indicators is care or sell dash in carousel indicators. As soon as I added that we get that 1st 1 popping up there and then we need to specify the attributes so the data target is going to be equal to the main parent. So that is slide one. So identify the main parent, and then what's slide we want to go to. So this is zero based, like a raise, so slide and whatever slide we want to slide to whenever it gets clicked. And we can copy this over to three times because we've got three separate slides there, so update where it's sliding to when it gets clicked. And then we also want to have a class of active for the default for the 1st 1 so that we have an indication of which one is the active one, and that will correspond with the carousel item that's active. You can also add in caption, and that's just text on top. So have that within a diff and then whatever text you want, whatever structure you want, maybe you want a little bit larger, so there's our text coming in and we want to move this on top of the image. And as we saw it's it's still down to the bottom there. So we need to add in the right class for that. And the class is care. A cell caption we had in the Carousel caption, and we go to the 1st 1 Now we've got this as a caption. Remember the some images coming from the image itself, So that's not actually text there. That's coming from the placeholder dot com image, so it's so you can add that text on top, and then you can apply some styling to the text and move it around as necessary and as needed. There are a lot of options for the care cells, and this is a NAWF use component within many websites. 14. 13 Bootstrap Components Collapse: this. Listen, we're gonna be looking at collapse. So collapses what is typically used for Accordions. If you want to hide some content and show different content, this number of options, we can toggle the elements. You can only show one element if you want, and you can have different targets and that will close and open, depending on what content you want to present. There's a number of options on what we're hiding and what we're showing, and typically this type of thing is used as Accordions. So where you've got header area, you click the header that opens up the rest of the content but closes the already opened part of the accordion. And you can see this as the courting example here to giving a class of an accordion and then structuring it with the right classes and attributes in order to make the functionality. And just like with everything else, there's options with the JavaScript, where you can select the collapse object. And whenever there's a collapse event, you can run some cold whenever that collapse happens. So it's always there at the bottom of every component, the different options, how to integrate it with JavaScript So let's bring this into the project, and we're gonna be working still with that still mean container and was in the main container. We're going to create our collapse object, so creating an accordion type object. We need a trigger on event to trigger. So I'm going to use the hyperlink and clicking the hyperlink will open and show the additional content. Let's give it a button and button primary, or that should actually say toggle content, says you click it. It will show in height additional content, and then you need to content. So creating a div and let's give this one a class off collapse, and you also need an I D. So that you can identify it from the data attributes of the button. All right, so there's some content and notice that because it's got a class of collapse, it's not gonna be visible, and collapse will automatically hide the content unless we do show and that will show the class. So we've seen those classes before, so that was showed a content and you might have a lot of content. So we want to do is want to be able to click the button and hide and show the content. So the, uh, it's gonna link to whatever the I d is for the class that's hidden. So it's paste that and still not doing anything yet because we still need to update the attributes accordingly. And we need to provide the different data toggle attributes. So already given it a class, and it's looking for data toggle, and this is gonna be the attribute that's gonna provide the collapse functionality. So when you add that now it's gonna hide and show the content, you can have multiple buttons that high even show the content. As long as they're linking to that same element, they can both have the same effect, so you can have as many buttons as you want that are hiding and showing the content there contained within the collapse. You can also have multiple targets as well, and that means that we need to add some more elements and we're going to do three. And right now we're still targeting that 1st 1 But let's add in a button that's gonna target all of them, so it's gonna open and close all of the and within the collapse, let's give it a class of multi collapse. And this is how we're gonna identify the elements that we want to collapse. So it's going to be done through the class, not through the i. D. And the data target is gonna be this multi collapse class, and I'm gonna update this to be the danger. So that will open and close all of them and then the data tart target. We can specify the data target as well, so that should be that should be specified as data target and equal that to the class multi collapse. And I'm mostly gonna add the data targets to the other one. I didn't add them in. They're still working, but it's always best to add in that the target that we actually want to target It just helps the JavaScript run the cord more smoothly so these ones will open and close just the main one. And then the toggle content will toggle all of them with the multi collapse class. So that opens up all three. And these just toggle the 1st 1 that we're identifying as the target. Let's go down a bit and we're going to create an accordion, accordion, Zehr great way to present content to users and compact certain content. If you have a lot of content that you're displaying and the concept is that it's got a head area, I'm gonna hide this stuff here. It's got a head area and then just below it's got some content that might open up. A good structure to use is to use the cards in order to create the various pieces of content that are collapsing so each card would have a header on Lee. The header is divisible visible by default, and then clicking the header will open up the rest of the content. So let's create a diff and give it a class. So this is gonna be the card header and give it a value of one. So clicking this one will open up the content below, and the content below is just contained within a diff. And that's the main def that's gonna hold all of the content and then within their let's create other card body. And this is the content that we want hidden by default, so clicking one will open up the hidden content, so we need to apply the classes accordingly. to that so that we can hide and show the content and we might want to have more than just the card body. So that's why we wrapped it with another class. And as soon as we add collapse that will hide that content because then Bootstrap knows that this is content that needs to be hidden, and I'm gonna add it in the header toggle. So just as we saw before, we need to identify that this is we need to provide attributes that this is data toggle collapse. And that's the effect that this element is gonna have in the attributes. And then data Target is gonna target wherever we're trying to open and collapse the content . So this is where we need to have an I. D. And I give it called one So data target seal. L won it. We didn t identify it with the hash. Now, when we click the parent, it opens and closes. And if you want a group it together as one complete accordion, let's give the total parent I d. Of accordion and call it a c c mean And then within this collapse, we identify the data parent and this will allow all of the cards to work together. So the parent for this one is a C. C. Mean. And now we can take the cards and we can duplicate the format so that we can have multiple collapsible items and then just update the I DS. And now they're all gonna work together. Where if you open one, it's gonna open that one, and it's gonna close the other ones. So any given time, you're only gonna have one open and do a quick refresh. And I'm gonna add some potting here. Margin top five. So there is some spacing between where we're targeting the content there and where we've got the accordion that we created. And so whatever content you create within the main parent that collapse parent with the I d . You can have as much content as you want added here, and there's also the option to have the accordion open. So if you want, when it loads, maybe you want the 1st 1 to show you can have that one open and the toggle is going to still work the same way. The idea is still the same that you can come in and you can toggle it. But in this case, when the page loads, this one is open because we've added the class of show. 15. 14 Bootstrap Components DropDown: There's gonna be a quick lesson on drop downs and drop downs. Provide us an option. Teoh. Provide more information on the drop down to providing a menu. And if we've got a button where we've got possible alternative actions and we were presented to the user, that's what drop downs can do. And of course, you can use the different button colors to make your things come more toe life. There's also the button split where you can have the splitter in the merits. That's the drop down divider. So adding that class and there's also the sizing, So the same with the buttons. Still the same sizing, so that Bt en large Bt and Smalls to have the different sizing your seven option and so dropped down you could drop up. This isn't very used very often, but there are some cases where you might want to present the content this way. If depending on how your layout is, you could also adopt to the right drop to the left and again, I don't see these being used very often, but of course it is an option within the menu. You can have it all opened so that there's no drop down. You can also set one too active set, 12 disabled and then also customize the alignment. And there's a responsive alignment as well. So left, aligned on large screens. So again, this is another option. There's quite a few with the drop downs, but mainly what we're gonna be looking at is just a basic drop down and then applying some colors and also adding in the divider for those. So let's open the editor and we'll check out what we can do with the drop downs. So first we need to create apparent element, and that's just gonna be a diff Give it a class and the class is dropped down, and then the contents within here is what's going to get dropped down. So typically you'd have, ah, button or something like that to create the drop down action. So this is something that the user takes an action, and it's kind of similar to what we thought of when we were doing the accordion. So do Primary Button. It's a primary button color, more options, and then we'll add in the attributes. So the tape is button and the I D is gonna be D D one and the data toggle attributes is gonna indicate that it's a drop down. Now it's ready to attach the drop down action. And that's where we've got a div with the contents that we have for the drop down. Give this one a list of drop down menu so that the content contained within it is going to be associated us the drop down menu. And then here you can have a number of hyperlinks that are going to number different sites and have the action of drop down item and this world created as a drop down item. It's no When you click this, it's gonna open up the different items, and I didn't have any content in there, So this would be website one. Close, open, close. We can have a bunch of items if we want. As long as everything is contained within the parent, drop down bootstraps going to know what to do with these. There is also options to add in the divider, so if you've got quite a bit that you're doing within the drop down, you can always add in these dividers and drop down. It's called a class of drop down divider. You don't have to have any content within this element as this is a default. Just a styling addition and then with these use, have the same options as we saw with the buttons where you've got the large buttons, that small buttons, you can have all the different button colors as well, and that's how you can set up a drop down and typically done within a navigation menu. 16. 15 Bootstrap Components Forms: this list. So we're gonna be looking at forms and input groups with bootstrap classes and almost every website. You're going to need some type of form, some type of input for users to add information. And bootstrap provides a nice way to output that content to present it to the user so you can do everything you can with HTML. Typically, HTML forms, and there's the bootstrap styling that goes along with it. So makes a form inputs more readable, where it's got the border around it and some nice styling. You can also update kind of have that read on Lee Effect for the text on the input fields and disable the input of the field. There's the password field, so these are all just typical what you would see within HTML. There's also the check boxes and Reto bought buttons. We saw just different ways to present the radio buttons earlier when we were looking at the button groups. That was a nice way that we can style the radio buttons, and then overall, it's just trying to keep everything within the same structure. So here's something where you might typically have for a user to sign in and some information, and this is done within the grid structure. So it's done within the form roll and then using the same columns that we had. So 12 column structure in using six and six and then this one is just a full column structure, and this again is using the full column, so there's no indication that we're breaking any of the rose. It's just taken the whole form group that's available for it. There's also ways to do the horizontal form, so this is again using the bootstrap grid structure, and we're applying the classes accordingly to make the grid structure and having the labels on the left hand side. So they're taking up two columns and whereas the input is taking up 10 and this is gonna break on S M. So it will stock on the really small screens that you don't wanna have too much space taken up with the label, and you might want to have the email or the label on top of the input field. That's what those ones are. The options. There's also how to have big labeling column auto sizing, and there's really a time of stuff that you can do with forms with input groups gives you the option to combine content together as an input group, so they allow you to have texts. Button boot button groups and on either side have these textual inputs. So that's what you see here, where it's an input group, so it's an input, but it's got some text that's attached to it, so it looks like it's still within the one input. But the text is attached in this kind of agree area, and that's where we've got the input group. I see. Create an input group and pretend it and add in whatever text you want. Textual content. You want characters and then have the whole input, and that way it will display it this nice and neatly within the one element. There's also the different sizing and multiple inputs and everything really have sizing. There's button add ons and button drop downs. We did look a button and drop downs in the last one, so there's that drop down menu that we saw last time and then the input fields having these input groups. This one has pretended content, but it's also got upended content to the group. So let's at the end. So pre penned is at the start happened. Is that the end? You can use both. You can have multiple items appended as well. So see and build out a typical billing form that you might have on your website. So we're gonna do it using the bootstrap grid structure and start with the main container. Let's create the form, and that's just gonna be inside the main container. And then within here we're gonna use variations of Rose. You also have an option for the former role for the grid. And the difference is that the standard grid overrides the default column. Gunners on git provides a little bit of a tighter output and more compact Leo. It's and that's the form role class. So they can you be used interchangeably. So setting up a div and giving it a class of roe and also show you what the difference between the form role is gonna be. And that means that we've got class off, call him and then within the column. This is where we can start adding the inputs. We also want toe probably have a title for our input for and I'll give this one a class of display. Dash three. That's nice and big, and we'll call it building in full. And within this role, I will ask the users name, So give you a label and we'll call it for name. So I just asked for the user's name. It could be also first name or last name, so we'll call it F name. So the first name of the user and we'll do the same one for the last name. So creating an input type is gonna be text class is form control. And that adds the bootstrap styling to the form I D. Is gonna just be f name. So the first name and then will do one l name for the last name, and that's gonna break on the medium science. And I try that with the last name as, well, an update. Now when we shrink it down, we'll see that it's stacks once it gets to the smaller screens. And that's probably what ideally, what we want, because we don't want to cram too many columns because this is important for the user to be able to fill out this information. There's also the form role and also do one for the road so you could see that there is a slight difference in some of the spacing is not a whole lot just a little bit of difference between the row in the formal as it in dense and creates additional gutter columns. So it depends on which one you want to use. We can use the form role and they are also interchangeable and they work the same way. So the concept is always going to be the same. So next one, we might want just full with where we're asking for a user name and this is gonna be another input. And we also have a label for this one. So just copy that from the above. And this is the user name and type text and also update the I D to be user name. And we'll do this one as an input groups so that we have something different and will provide a div to wrap around it and a class of input group and make sure that the input is inside of this parent container. And then whatever you want to pre penned, attach the input group pre penned class, and this will pretend the contents in front of the input field. And we're going to just do the at symbol and add in a span with a class of input. Group text was This is a text item that were adding in the input group and that should actually be class. So that adds that symbol inside of the input group. Also, let's add in our check out button so I could be at the very bottom and this will be class B TN BT end. So have a green button en btm, LG and B T en bloc. So it goes all the way across so their users can't miss the Spartan, and this will be to submit the information also to make it look nice. You'll often find the horizontal rule and then some classes attached to it and a lot in a margin bottom of five for the HR and also going to do that under the billing information and let's do one more group of inputs. This could be a world because we have multiple inputs, will have some drop downs here and give this one a class of column M d and we'll do five and then add in the label and four. So maybe this could be for country and then select drop down class and these ones have a class of custom. Select. And then we might have some options to choose various countries in the drop down. And let's do another drop down, and this one will do the state, and we'll update the select information to be state. So again, it's still custom Select, and the I d is state and the i d for this one is gonna be country, so that matches the label. And then, lastly, we might have another input field for the zip code. So around that up and close that off that three and apply a label to that four zip, and that's gonna require the ZIP code. And this is just a regular input. And in order to get the bootstrap styling, don't forget. We need to add the class of form control in order to get the styling on the input, and that's going to make it the same size as the drop downs as the other inputs. And some of these you might want to add some padding the margin top for so there's some spacing between it. It's all depends on how you want to customize and when you shrink it down, whenever you're building the form, I always do suggest that you try it on the different side screens just to make sure that the form of stacking as you intended to be. 17. 16 Bootstrap Components JumboTron: Welcome to the Jumbotron. This lesson is going to be about how we can create a Jumbotron and adding this component onto our Web pages. This is a common way to have some content that really stands out to highlight some content . And it's a hero unit style content. So number a few different options. And really, it is just having a parent rapper called Jumbotron. And then this is just regular bootstrap stuff within. There's also a Jumbotron fluid and that occupies the entire horizontal space of the parent . There's not a whole lot of difference. That depends on how you're using it and where you're using it. A number of differences that you're going to see. Let's go back into our project and we're gonna add in a jumbotron so creating a diff that's going to contain a bunch of elements. And then these are gonna be what's going to be contained within the Jumbotron. So the Jumbotron is gonna have a default background kind of agree area. It's also got some padding around it. Let's create another div here, and I'm gonna add a class of display three. So this is something that you might typically encounter in a Jumbotron and will center the text so text is centered. Or maybe you want to do the text centered on the entire Jumbotron. So it's up to you again. However you want to display it. There's also maybe you wanna have a paragraph with a class of text muted. So this could be like subtitle more in full. Whatever. That's a typical Jumbotron. A lot of times you might also find buttons in there. There's more information for the users, and I'll show you the difference between the fluid one. So there was an option for Jumbotron fluid, and in this case, because it's taken up the full container, we don't really see my name. Much of a difference here between the Jumbotron fluid and just the regular Jumbotron. We'll get rid of the text center in order to see the difference, and the fluid is just taking up the full width bits because we had the text centered, so we didn't see a difference. But there is some padding here by default on the regular Jumbotron, and the fluid doesn't have that padding. So it's just taking up that full available space that's available within the parent. That's what the difference there is. 18. 17 Bootstrap Components Lists: this lesson, we're gonna be looking at list groups, and what list groups do is they allow us to contain a series of content that belongs together. So, just as we would with each to Mel lists same idea. And it just applies the boots. Drop styling, using the risk group class for the main container and then for the list items. It's the list group item so that provides that bootstrap styling. You can also update and add the active class and just says we've seen before. The active class will highlight that particular element that has the active applied to it. There's also an option to disable it. You can also add in the links, so there's what's called the list group item action and that creates this hover effect Wherever you hover over it. It darkens slightly, so it provides a clickable link area that's active whenever the users hovering over it. There's a number of options, and you can also list your group. You can do a list group horizontal as well. And then there's various sizes for the list groups that you can add in and to really customize the way you want your list being displayed. So I'm just gonna be using the main container, and I'm going to give this container a particular with. So we create another element. And with inside here, as normally, you don't have the list going all the way across, So this will give it a width of 50%. So using the bootstrap utility class of W dash, whatever percentage you wanna go across, this is how you can contain a list and most the time. If you do have a list, you're not gonna have it going all the way across anyway. So it's create the A Norden list and add in the list group class. So this will indicate that we want the boots drop, styling applied, and then the list items and each one of the list items would have a list dash group stash item class. So that will turn it into a list item. And then you might have some content here. So whatever you've got contained within the list group, so that's the list group and displays it as ah list. You can also update this toe on ordered list or ordered list, so it actually doesn't matter because the bootstrap is taken care of, the way it's being styled. This can also be a div wrapped with a bunch of dips in sight and still going to display it the same way, so it doesn't actually have to be list items. But for consistency sake, and especially when you're looking through your source code, it makes a lot more sense when you grouping content structurally within your bootstrap as a list when you're using the list group. So it just makes sense to do it as a list group, although you don't have to. So let's update this and add in the active class to it and you can see it defaults it. So it's the blue highlight. By default, I'm gonna duplicate, thes and add in the links as well. So go all the Web sites all the way up to 78 so that should give us a good sampling of a number of different list items. So we wanted to add in ah hyperlink. So let's add in hyperlink here and then the content of this link will contain the website for so by default had already has some styling being applied to it with just bootstrap in general. So we do see that this is a hyperlink. But it would be nice if if we go over the hyperlink and it updates so we can update this as a list group item action and that will create the hover effect you don't even have to. You can do it as a list group item action as well, and this can apply to ones that aren't links. But typically you would use this type of class for links. So let's take that and will apply it to the hyperlink eso this creates that has a list group item. And if you just want the action on it, you need to also have the list group item within it so you can do it this way where you take the list group and apply it to the parent. And that way it will highlight just as the other one, just below it highlights whenever the users hovering over it. So you also have the option to disable these What? May I got a duplicate thes with number six, so that would do have the list group item actions number seven, so you don't apply it to the hyperlink you could list them out as hyperlinks. So again, it doesn't have to be list items, so you could have them as just hyperlinks and apply the list group list group item action to that hyperlink and that will list out the hyperlink within that list format. There's also options so we can do a disabled option, so that kind of gray's it out. Whenever you hover over it, there's gonna be nothing that's gonna happen on Website five. You can also apply the list group colors, so these air the item default colors. So just as we've seen before, there's danger. There's Primary Secondary on there's a whole bunch of the typical ones that you'd expect, and let's also create ah, horizontal list. So just below our regular list group, you can also create a horizontal list. And as mentioned, it doesn't necessarily even have to be a list. You can do it as an a nordeste or list item. I got to do it them as dips toe have a little bit of variety, so set this up as a list group, and then I'll create the list items as gives supply it class, so anything you apply the styling, too. And if we want to change it to be horizontal, that's adding in into the parent where we specify list group, and that will make the list group horizontal. So that way we can see each one of the list group items. Now they're horizontal, and it's a Z Z. Is that just applying this horizontal class? And I could do that to the main this group that we were working on before as well, and that will just turn them horizontal. And there's also different sizing options for the horizontal. And as we saw in this example, so we can do a dash, sm dash MD So the different break points that we can resize and we can turn it horizontal on. So what we do horizontal MD And whenever we shrink it under the break point, then it's going to stock. So it's not gonna be horizontal anymore. And whenever we're above the break point, then there are gonna be horizontal listed. So that's how you can control how they get laid out and presented to the user. Within the Web page. 19. 18 Bootstrap Components Modal: this lesson. We're gonna be looking at the bootstrap motile, and that's one of my favorite boots. Dropped components. I use it all the time. I don't like the way that alerts look, and Moto's provide us a nice, easy, clean way to communicate with the users. So it's a little bit better than alerts, and the users usually have to take CYP I've of action to either close it, Uh oh, are there's additional form information or something that gets submitted. So this is just information boxes that pop up, and they're relatively easy to set up. An idea for the motel's is that usually there's a button or an event to launch the model. You can launch the motives using JavaScript as well. So there's an option down here with the bottom where you can select the mortal and you can toggle the view of the motile, so showing the mortal hiding the motile. And there's also different ways different types of motives. So there's are extra large motile. There's a large motile, and then there's the small motile. And then there's the in between, which is the regular mortal, and these air all again adjusted via classes really easy to set up, and as I said, it provides a great way to communicate with your users to provide them some additional information about what's happening within your website. So in order to set up a motel so usually what first thing I like to do is I like to create a way to trigger the motile. So we just do a typical button and you can do it in any number of ways. And even with JavaScript, you can trigger mortals to pop up, and this is just a regular button button and we'll have a success button for this, and I'll just say, Click me and that will open up the mortal. And we do need to apply some attributes in order to yet the mortal functionality. So this is data toggle, and the data toggle is gonna be for a mortal and then the other and, of course, most important one. So these targets are the most important way to connect it because, of course, you can have more than one motile and connect it via the I D. So use the hash and the idea that you're going to use in order to connect it to the motel. So the bootstrap knows what you're trying to show and what elements should be showing up. And then, typically with the motels themselves, you might have them at the bottom of the page. I gotta add in the motile right down here, way at the bottom. So first will give it an I. D. So out of the main content. So make sure that the I d matches with what you're trying to open, and we also have to give it a class. So a class of motile so that boots Trump knows this is a mortal. So when I create that and because it's got a class of mortal, it's not going to show up. If I remove it, then it does show up. So make sure it has a class of mortal and that will hide the pop up motile. And so now when you click it, you're going to see the pop up mortal. But it's not really formatted grade, and there's doesn't seem to be any way to close it. Eso This is something that we need to take care of, and that's why it's important that you include all of these options within the model so you can get it to run just by having the I d and the class of motile. But as we saw, it doesn't look great and there are some additional options that we can add in. We can even add in how it's supposed to act so with the feed and how it's gonna show up. So let's add in the additional classes, so we'll create a class to wrap the content and this is called motile dialogue. So we're going to wrap the motile pop up content with that, so it's looking a little bit better. At least it's center now, but we still don't have a way to close the motor, so we do definitely need a way to close the motel. So we've got the motile dialogue so the content contained within here. So this is essentially where we've got the motile content and that's the next class that we need to apply is the motile dash content, and this will indicate that this is part of the content of the motel. I'll just slightly and then that. So now we've got mawr of what looks like a model, and we can actually click off it into the great out area and close the motel, so it's looking a little bit better. But of course, always better to apply all of the styling, and you can add in headers as well. So that's contained within the motile content and give it a class of motile dash header show you what that looks like. So we click that we got the little header section, more structure to the motel. And then we've got the motile content, and there's also the mortal body as well. So this is where we would typically place the content. So I give this one a class off motile body, and we've got several layers for the motel at the end. So it goes all the way down, so there's a bunch of classes within other classes, so everything is within content, and then everything within the content there's a header. There's a body option, and that's the mean kind of area for the model was starting to look better and better, and this is also responsive in the size it will always track to the middle. So it's the really nice thing about motels they really present well for users and to provide that information. So the other thing that we want to add in is one away to close the mortal. And we can put that within the motile header, and this could just be a button. And there's some styling that bootstrap allocates for it. So type, button and class, and the class is close. This is creating a close object and data dismiss and what we want to miss dismiss is the motile and will do. Ah, span. You can put an X here if you want, or you could use the and times which looks a little bit better and has had to refresh it there. So there's the clothes. So this is what users would typically be expecting. They need a way to close the motile that's popping up. So once they've read the message, the action that they want to take you can also have multiple ways to close. The motel SI can also have a button within the mortal, so it may just copy this button and we'll make it look different, so it's gonna be within the mortal body, and this is just providing the users another way to close eso give it a class and it's not gonna be class close to be a class button and then button whatever we want to give it color and we'll get rid of the close and we'll just say close. We got to see it again. So there's are close button, so this will take the same action where it's gonna close it. So anything that's saying that Data dismissed motile, it will dismiss the motile, and that's going to apply to whatever mortal it's in. So if you have a few mortals and I'll give this one motile too, so that we have two different models and give up, create recreate the button and I like this 1 to 2, and this could be a warning and refresh so that opens that motile that one opens that motile. You can't have two at the same time, but they are. That's how you can have multiple models and a lot of cases you will have multiple models. There's also with JavaScript so you can for those of you that want to script it, and often times I do script with the mortals because there's some added functionality that's good toe. Have within the motels. So if you do have some type of script where you've got another event listener and its listing for event and you want to close the motile, you can always select the motile object with J coury and whatever the motile I d is and using the hash for the I d. And then there's ah, method called motile and you can toggle the motel or you could close it, you could hide it or you could show the Moto. So by default, if you wanted to load the page and show the motel, it would automatically show in the motel. Also, toggle will show it because it's hidden. So if we load the page, it's gonna show in the motel. And this is how you can control the motile using bootstrap action. There's also a way to have an event listener for the mortal, So I'm gonna put it on the other motile So motile to is gonna have the event listener on it and on, and this is the selection of the class. So it's Bs. Motile is the class and we can have ah console message and run whatever cold we want to run so just say hello. So this is just an example for those of you that are interested in the JavaScript. A query that what's gonna happen now with Motile too? And whenever I close it, I was gonna refresh the page. So whenever we open up number two because remember, this code is sitting on motile too. And I click close Whenever you close the motile, we can run some code. We could also do it on open says number of options with the JavaScript However you want to run the mortal s So if you have something else that you want to happen whatever the users finished with the motile, you can run the code within here within this script tags. 20. 19 Bootstrap Nav: this lesson. We're gonna look at the knave component so novel. Oftentimes it's associated with the navigation bar, but you can also use other navigation within your page and such as here. There's an example of another list here, and they've got a bunch of links, so these typically might not be the main navigation bar. You might have another navigation bar at the top of the page, and you've got some additional navigation that's included in your page. And you can accomplish this with nab. And there's another really interesting. When you can do with knaves, you can do it horizontal. You can do it vertical and the nice one is with the tabs. This is a really nice effect where you have a number of different tabs, and you can also combine this with what we learned with the accordion and have the ability to hide and show various pages, depending on which one is selected. So if you do something like home profile contact, this is all self contained, and it's loading the content accordingly. So just as we saw with the Cordy in, you can do the knave typically, just as you do the accordion and you could include this on your page to provide additional information for users. And then we're also going to look at the navigation bar, which is coming up in the next lesson. And this is war of a common use for navigation. So this lesson we're going to run through quickly what the other possibilities with knave is, and then eventually we're gonna transform the naff bar ist into the main navigation bar. And there's a lot more options as well for that one because that one is obviously more commonly used in just the naff and then create a bunch of list items and these will eventually become our navigation tabs. And so these typically for a navigation, you're gonna have hyperlinks. So they're gonna linked to particular page or something within the content as an anchor. And this one could by default, be the active one and then just duplicate that we need to add in the classes for it to have the navigation effect otherwise is just regular HTML to transform this into a naff. And so right away, we see that it takes the horizontal format where it converts it to enough and then within the list items we can add in a class of nav dash item, and this will transform them into navigation items and now items. And we don't see a whole lot of change quite yet. There's also the class of nav link so naff dash link, and I'll sit this one to be active. And then I didn't the nav class to the other list item. And also add in the class for this hyperlink and remove out active. So starting to structure mawr like a navigation bar. And then typically you'd have more than just two links. Suit probably have three or even four links for the navigation bar, and I'll just number them so that we can have distinguished between them. You can also set the links suggests as we saw in the last lesson, you can have disabled links, so that could be applied to any link. You could make them disabled, and usually they're going to get this greed out muted color to them. So what? The naff? There's number of styling options, so there's now pills, so they turn it into a pill format. You can also do now fill, so that fills the available space that you have for the navigation. So even if we adjust so even if we just on the size, it's still always gonna fill the available content. So this one's got four of them, so it's taking the available content that's there. You can also do that now have tabs. So that's always a really nice, neat effect and creating another container for that. Let's give it a class of knave and I'm gonna turn these into the nav tabs. Eso create a few hyperlinks, so you don't have to have mean containers for these. Either weaken directly apply that classes right to the hyperlinks. So this will just be a regular hyperlink and they're gonna add in a class. And the class is of course, it's gonna be nav item because we don't have any parent now items. So just by applying that it's gonna transform it slightly. And then also we wanted to add in the now link because these air links so you can combine the classes that saves you the trouble of having the one that's wrapping it again. It's up to you how you wanna handle that. And so these could be linking two pages let me add in a few more, and this will be linking to about this. One will be linking to Contact Savella about element with the idea of contact and will add those in after and let's transform them into naff pills. So save as now pills. And also I like the effective going the knave, Phil. So all the way across. So we'll add those in as well. And then just below this parent class, we cannot ended if and give it a class of tab content, as this is where the content is going to sit, that's going to be tabbed through. I'll bring this up a bit. So this is where we can add in the various pages and number of dips that will actually hold the content to the 1st 1 It's gonna have a class of tab pain, and then you can attach how it's gonna be handled so we can fade. We can show you can also set it as active, so active will open it, and I can also have ah, different background colors so set background of primary and we need to provide the I D. So this one is just gonna be I d home to match with that first hyperlink there, the first anchor and then I'll add in some content here and make it really big. So display dosh for so home page. Let's create a few other ones s. We also had one that was linking to about and I'll update the color as well. So warning. And I'm going to remove the show and the active and this is the about peach. Oh, and we do have to add in one. Were attributes here for the data toggle for it to actually work. That's the important one. That's why it's not working. We need Teoh. Add that in as an attribute, and that will give us the ability to treat these as tabs. That will toggle the data. No, Ive got home. We've got about Let's add in that last one and this one was the contact and that, of course, you can put us much content as you want down here below. I will make that one the danger so safe. So now we do all of these taps and we can see how we can navigate through them and how they change and I'll update Thies to be have tabs. That was the other option. So these air being displayed in a tab format is gonna cut that tabbing option, and I'm gonna add in a margin top of five so that this content is distinct from the content above. And of course, you can customize the styling and you could add more content as needed into each one of the top pains. So coming up next, we're going to look at the now far, so it's gonna be very similar to what we've covered. There's gonna be flotsam or structure of changes and more attributes that we need to add in and these are gonna be the one set can collapse. So it's got that collapsible menu that you typically find within the navigation bars. So you can see that within the main bootstrap a swell that when it collapses, it's gonna collapse down to this collapsible menu and you can set different break points as well. So we're gonna check that out enough coming lesson 21. 20 Bootstrap NavBar Code: this lessons go be about the bootstrap nav bar, and almost every website is gonna need a navigation bar typically within. The header helps with the navigation branding and providing users some way to go through the website and see all of the content. There's a number of options, and this is going to function very similar to what we saw with now. But it's got a few more options as the knave bar, because this is typical use for the knave bars to sit at the top. So there's ways to position it and you also might have some more options, such as the forms and the inputs. And all of this, of course, is available just via the classes. The color schemes are also another option that we have when it comes to the now bar, and this is also something. This is also something that we've seen before, where we can set the background colors. But in this case we have a specific class for the knave bar, dark or in the knob or light, and this will indicate how the text is handled and depending on what your background is. So you set the background to whatever you want. You can also style a background to any specific color, and then you use the nav bar lighter than AP art. Dark in orderto handle the colors of the text on top, so it's a really nice effect. There's also the different ways to expand, so the different breaking points on LG and so on. So where it's going to break when you're shrinking your page down. So, typically, usually I use the M D. But of course you can use other ones as needed, the different breaking points. So there's S M M, D L G Excel, and that's where when the pair persons shrinking the page down where it's gonna break, there's the default one. So this is just the regular default nav bar with the light in the background color. It's a simple is that to have a navigation bar, but you, if you want it fixed to the top, you can also apply. Fix top class. You can fix it to the bottom. Some websites have it at the bottom as well. And then there's sticky top. So this is an interesting one, and this one isn't always available across all the browsers so if you are to use that, make sure that you do check it. And this is an interesting one, because once it hits where you've indicated the navigation bar, it's going to stick to the top. So if you keep it at the top of your HTML code is going to stick to the top of the HTML cord as you navigate down. If you have it in the middle of your HTML code, only when you hit that part it's going to stick to the top and I'll show you what I mean, as we go through this lesson, let's open up that editor and we already have the knave from before, and we can start fresh with a new navigation bar or we can just create a brand new one. We can update the content contained within it, so I'm gonna do a little bit of both. We're going to create a brand new knave class and give it now bar as the class, and I'm gonna set the now far too light. And then the background can also be late. That's our navigation bar, and of course you're gonna have some items within the navigation bar so I can copy those over. And I'm going to get rid of some of this the Navajo item and the knave Lincare going to come back because that's gonna be used within the Nath bar as well. But for now, we're going to remove them, so we have a clean sleep. But just keep in mind that we could easily transform the knave into the nav bar and then we still have the same content down there. I'm gonna get rid of that and we don't aren't putting it within the main container. You can also put it in the main container. You could have fluid container. It depends on how you want your navigation bar handled. So we did say we want to do a transformation and really it's similar, but we're using nav bar a lot of the times. So just to avoid the confusion, we're gonna place the content in and we still need the list items for the content. So we'll drop in a few more hyperlinks and then as we add the styling, this is gonna take it shape and it's gonna look more like a navigation bar. And then, of course, we also still have those options where we could go fixed top. And for this I'm gonna add a custom style to this of height 2000 picks. So this will allow us to scroll down so you can see that it sticks to the top. And although it doesn't look like a navigation bar, you can upload. We supply those classes to any element and it will still take the stack. You can do fixed bottom as well. So if you want it sitting at the bottom of the page eso Even as I scroll, you can see my school bar slightly here. The side and we fixed the bottom. We fix the top and so on. And then there's also the sticky top, and that one will look at a little bit more detail at the end of this lesson. So let's create our navigation bar, and we've got now far we've got some colors to it. And maybe you want to do background primary, and I'm gonna update now bar to be dark so that we can see the content. Teoh, put it back up to the top. So let's take care of our own ordered list where we've got the content and updates now far enough. So as soon as we apply that, that takes care of quite a bit of the styling, and we still have it as typical hyperlinks. That's why we can't see the content quite yet. Eso if we update this to have item And this is where we've seen the knave items before, where we saw it in the last lesson where they're referred to as now items. And this is the same thing for the navigation more and these are also have links still, So there is a lot of consistency in these classes because, really, the nav bar is just only slightly different than the regular now. And I'm gonna update this to be late and copy the structure of the list items over so still doesn't look much like a navigation bar. And that's because we want to make this to be toggle. And we wanna wrap all of the content that we want to collapse in a parent class and this is naff bar collapse. And this is where the collapsible content is gonna go. So anything within here is part of the collapse. And so we do need to add a few different attributes where we've got the knave bar and let's added now, bar expand and we're wanna have the break point. So you have a MD so that automatically aligns it horizontally. So it is starting to look more like a navigation bar, and this is now four collapse, and it's also got underclass of collapse. And you also need tohave an I d or some way to identify this element. So I'm just gonna call it now one, as this is how we're gonna identify what were collapsing. So let's see what happens when we collapse it and it disappears because we haven't added in our collapse button yet. Eso we do need to have a button that's gonna show up when the collapse happens. So button. And this has a class of naff bar toddler and give it a type of button and the data toddler data toggle is going to be collapsed, and we also, most importantly, need that data target. So the target is always important because this is going to indicate what we want to collapse. So just add in the hash for the I. D. S and identify the element that's gonna be doing the collapse. And for now, just keeping X in there so it see what happens. So we collapse it. I click it. There's our navigation menu again. So it's collapsible and bootstrap already has a default class in order to have the Tata Glor icon. So you could just create an empty elements and provide a class of nav bar toddler I climbed . It's a rather long one, but it will provide that toddler icons so that you typically see you can also collapse it at different points. So if I want to collapse it on sm, that's gonna collapse it on a smaller screen. If I wanted it collapsed on the larger screen. So there, right away it's already collapsed. And I'm gonna actually change this to nab our dark. And I'm gonna like thes two home about and contact. So these could be sections on one page and add that into the main container. So given an I D. Of home, then I'll just use the display four to output the word home. So we have a title there and then paragraph, and I'm also gonna apply a style height of 1000 picks and then we'll duplicate thes sections for the other. So we had a boat and we'll update the text. Contained within is well, and I'm also gonna just I'll update this toe empty so it's not collapsed, so we click. One would click to would Click three. So it's bringing us to the pages and also notices, well, that it's slightly off. And whenever we've got the fixed top, there's always going to be some spacing issues. There s O in orderto handle that we can add in a class into the section. Cause was will use bootstrap to apply some additional styling. And if you do padding top Dash five, that will provide the perfect amount of padding for the section to be just below the navigation bar. And I'm gonna add that in all three of them and save. So now when I click home, I get to the home boat contact, and it's automatically scrolling itself down and the reason the contact is still down is that the height of it? If the height of it was 1500 then the contact would be all the way up because it's where the scroll bar ends and that's why it was sticking up a little bit there. So also, if we want to add in another naff bar and let's say within the home section, we've got another now bar and this is gonna be class of nav bar and this is this one will make sticky for the naff bar just to show you how the sticky works and sticky top and we'll set a background color of danger. And there's also branding class that you can add in for your navigation bar. So just put sticky content there. So refresh the navigation bar, the sticky content. And we also have to move this one because the stickies actually going to go underneath the fixed top because that one's on top. So now when we scroll down and we get to the sticky content, watch out stays at the top. And as I continue scrolling once that entire section is gone, it's going to disappear, and it's back whenever we're scrolling back to it. So it's how sticky works, and it will go underneath the main Nath bar if you have a fixed to the tops. That's why we're not able to see it once fixed to the top. That's if you want to use this sticky and also keep in mind once again that not all browsers, they're going to support it. 22. 21 Bootstrap ScrollSpy: this lesson. We're gonna apply the scroll spy. We need some of the content from the last one. I'm gonna move this up to the top and we had a bunch of links here. I can also update the content of these links because they were moving to particular sections on the page and that was home about and contact. And what we want to do with Scroll Spy is a just which one is active. So whatever content were scrolled upon, we want the navigation bar to indicate that, and we do that with Scroll Spy. And now we need to specify the content that we want to spy on. So whenever there's scroll happening on this piece of content and we're gonna use the body so we're spying on the body and looking for the event of scroll toe happen and then data target is going to specify where we're getting the information. So what? We're targeting and what's being updated whenever the school is happening. So we're taking the knave one as the target because that's where our navigation bar is. And then there's data offset. So this just offsets where the data starts. That So let's see what happens. And now, as we scroll through the different sections, you can see that it lights up there at the top. So all we did is connected. The enough one Teoh actual navigation. And the rest is just being done through the scroll Spy, where we're listening for the navigation bar to hit these particular anchors. And as they hit the anchors, it's gonna ply the active class to the various elements. Used to see that as well. When you go into the navigation bar, make this a little bit smaller and I'll open up the an ordered list and we see that contact has active what I scroll up, the active goes to about and I scroll up right to the top. The this one gets the active home gets the active so you see where the active class is moving through the elements, and that's automatically done with the scroll Spy 23. 22 Bootstrap Pagination: if you have multiple pages of content that Bootstrap provides a nice sweet toe, have indicators for Siris of that related content. So going through number different paid strings. If you have a bunch of pages, there's previous next and all the numbers in between. So essentially it's a nice way to group those together those links together and provide that capability. So we're just gonna be doing a quick lesson on this as this is an option and there's really nothing dynamic about it. This is all hard coded, but if you do are loading a bunch of pages of content, you can also keep the structure and load this dynamically. So it's creates our pagination on the page and going into our website, we can create a new ordered list, and you can use any element just as we've seen before. So duck, she doesn't matter which element you use. They're all going to be able to handle this of creating the pagination because again it just plying classes and the classes do all of the styling element for the element. So the mean parent classes pagination and then each one of the elements that air nested inside So in this case, the list items is page item and I'll shrink this down and then wrapped within here. You might typically have a page link, and these would typically be hyperlinks with the class off page link that would say, previous actually going to duplicate this one. And this would be one and so on. So as many as you need to 345 and go all the way, and then the last one would typically be next to. So if there was additional pages there, if you had, ah, lot listed, you might want to do next or something like that so that users can move through the pages. And then you had code this with JavaScript to load additional pages as the user click through the various links. 24. 23 Bootstrap ToolTips and PopOver: were you wondering why you need the Popper library that's included with bootstrap, where you've got that within your code? Well, this is for the pop overs as well as the tool tips, so they're very similar in nature. And these provide a way to kind of cover over something with the tool tips and provide additional information, and that's contained within the tool tip itself. So the title and this is the content that gets displayed within the tool tip. You can place them to the top, right bottom left, and those are the options that you have. The styling is typical with boots. Dropsy can do the various button classes for the main button, and then the tool tip just sits on top within the attributes of the element, so you can add it to any element the tool tips and typically they would be used for buttons and the same thing for the pop overs. So the bought pop overs are more something that you might use for additional content, and when you click it, it has more a little bit more structure than the tool tip where you've got the pop over, you get the same choices, and this is also contained within the attributes. So there literally very similar, and all of the information that you've got within the pop up is gonna be contained within here. You can also add in titles, so there's got an option for title, and then the data content is the same. So just do a quick run through of how these work. And then, of course, with the JavaScript, you can also do some customizing of what happens when it gets clicked and so on. So if you need that additional coding option with JavaScript that's there as well, with the pop ups in the tool tips. So going into our code, create some buttons and then we'll apply the tool tips to these buttons. So just regular type of button and applying a class. And again, you could do this to any element that you want. So it doesn't have to be buttons, but primarily they are used on buttons, and it will just say Click me for the button and let's add in the attributes so that tributes is where the magic happens that you've got your data container, and the data toggle is going to be a pop over so nothing happens yet because we haven't specified any content. Now we also have to equal that to pop over. So no content yet. And this is where we get the content. So we've got data content, isn't here is what's gonna be displayed in the pop pop over. And you are also going to need to use within the script tags in order to enable it. So there is the function in order to enable the pop over. You could enable it to all of the data toggle whichever one's equal, pop over and apply the method of pop over. Or you can specify a particular element and apply the pop over just to that element. So either one s. So now when you click it, it's gonna enable the pop over and that we can duplicate it and also apply a class of margin top five to move that down and I'll put this one at the top. So the 2nd 1 has the pop over at the top. Let me just say that and a lot in some line breaks. So does show up on the top and do a refresh the bottom top, and they click it again to close it. And it's gonna work that very similar to what we do with the tool tips. We have to enable the tool tips as well. So if one enable all of the elements with the tool tip the data toddler toggle tool tip attribute that we can enable that I and do something very similar to what we've got with the pop over, where we've got data toggle is gonna be tool tip instead of pop over, we also have the data placement. And then instead of data content, it's just gonna be titled. And we can get rid of the data content for the body. So the last one will be a tool to you can see when you hover over. That's the tool tip and these ones you have to click. So the pop overs you have to click the tool tip. You could just hover over and you get that tool tip showing on 25. 24 Bootstrap Spinners: this lesson, we're gonna look at the Progress Bar and spinners, so these air components that you might be able to utilize that provide some animations and really some cool effects for users. So come cool visuals, especially if you have a dashboard. These will come in really useful. And, of course, you do need to have something to measure for the progress bars. You can make different colored ones striped ones, combinations of progress bars, animated progress bars. So these show really well for it users a zealous spinners. So these air useful to hide and show when you're ever you're loading content. So whenever the content has finished loaded than you would hide the spinner and otherwise you would show the spinner. So it's just a default that is sitting within bootstrap, and in most cases, sometimes you need to use it. Sometimes it's just good to have it. There a few case you do need to use it. There's also the different colors, and these air just text colors, so it's nothing different than regular text, and these air treated just as text. There's also glowing and growing spinners, so these ones grow bigger. Eso that's another option within the spinner grow, and you need to supply it to the element, the parent element for the content inside, let's do a refresh. Get rid of the content that was there, and we'll walk you through some of the options that you can have with the progress bars, and that's gonna be a relatively quick lesson. So just meth specify it as progress, and that's the parent class. And then the content inside is could be the where the Progress Bar is. And this is where you can apply the attributes to how long you want your progress bar to be . So the main classes Progress Bar and then specifying the style you could specify with with 25%. And that's why it has to sit within, because this is a separate element and you got to treat it as such. And that's where you get the different width of 25% within the Progress Bar. And you could also indicate 25% if you want as well. So it's all self contained, and you, if you do want to create additional ones than go and creates, so to create additional ones, you just copy and paste. So you do you need to have the parent and then the Progress Bar Insight. So there are some options for styling the Progress Bar Seacon do a background of success background styling so that would produce a green one and noticed this well, that there's no spacing. So if you do want to add spacing than you could do margin top five have spacing between them. There's also an option. If you wanna make them wider, you could apply the styling of height for the Progress Bar and that you would apply to the parent. And this isn't bootstrap. It's just regular styling that you'd apply the height just lets you did the with and whatever number of picks you want it. If you want 20 picks, if you want it 50 picks that will make it whiter so you get a height of 50 picks. And if you want to have multiple bars, you can do that as well where you could have multiple growers. So maybe this one is background primary, and that one is gonna be background success, and you could just stock the bars. So every 25% you add, it will stack the other bars, and they don't have to be equal as well. So whatever you want to make them, you can make them. There's also an option for having a progress bar striped. Let me copy some of this silver, and this one will turn striped so we'll keep it big and you can mix and match the various properties that makes a striped progress bar. You can also animate it, so it's another really cool one that's actually one of my favorite wants to do to an immediate. So I'm gonna change the color of this. We have some different colors and progress bar instead of progress Bar striped or you can include the striped as well, and you could do add in the Progress Bar. Animated gives a slight animation to the Progress Bar and the spinners themselves. They're going to be really straightforward because they're just one element that you're applying that Class two. So the class is spinner, the classes spinner border, and that's gonna create the class by default. And then, if you want the different colors than whatever color you want the spinner to be, then you to supply the different tax colors to it so you can see the spinners air there. There's also, instead of spinner border, you can do spinner growth. That's another different type of effect for the spinner, and you have all the same color options. A swell for them. If you want to center, align the spinner. You can create another element to wrap around it and using the text center class that can center align the spinner. So just rap the rap the spinner with the Central Line and Tech Center and that will center the text. There's also options for the different size, and the size is based on width and height. So if you update the width and height of the parent, it's gonna update the height of the spinner so style and equal that, too, with whatever you want your with to be. Let's do three R E m. And also to, ah, height of three r e m. And save that that's gonna make bigger spinners. Oh, promise the three there. So it looked a little bit weird there. Did you make it as biggest you want and notice this? Well, if they're not matching that, it kind of is this oval shape. So these are just some of the options that you could have for visuals within bootstrap 26. 25 Bootstrap Componets Conclusion: take what you've learned and you've witnessed most of the commonly used components and bootstrap and how you can apply them into your project, even go over to draw I o or take a piece of paper and sketch out a website and create that website from scratch using the various components that you used. So really challenge yourself and see what you can accomplish with boots. Drop start from a blank webpage and then build out at in. The components designed the grid first. So it's always the first step when you are creating your website to design the grid. So how it's laid out, How many columns How many rows you're going to need for your basic website structure and then go to Bootstrap for the various components that we've covered throughout the earlier lessons and how they can fit in In order to accomplish the styling for the various website design elements that you need, We've covered quite a bit of functionality, and there is really a lot of stuff that you can do and then once you've got your core components in and you've got some of the styling in, you can make adjustments going into the bootstrap utilities, where you can update spacing, sizing and, of course, all the different colors that are available in bootstrap and then really find, too, in the look and feel of the website in order to complete the complete website design using boots drop And as we've seen for the most part, you can accomplish everything with just some attributes that are added into the elements as well. As, of course, the various boots dropped classes that provide the styling. And if you do need to Adam customize styling, you can always do it within the style. Tags directly within your file, or you can link out to your own style sheet. So if you do want to customize the way that some of the content is being displayed, and bootstrap might not have the option for you, you can do that by applying the style tags as well. If you go over to the Boots Drop website, there's a lot of documentation, and it's well, there's an example button. So if you select the examples, this would give you some of the commonly used types of styling that you need for building websites. So, such as a sign in sticky footer, sticky footer nav bar. And then there's also some basic framework, so you can take the basic starter template and select the source code for it on a browser you can right click anywhere or within the deaf tools you can select from the right hand side menu under more tools. And from there you can select the deaf tools and that will open up the code editor. Seek and inspect the code from that Web page, so I usually just do a view page source and selecting the page source to have the page source open. You can select the HTML, and it also includes all of the classes within the attributes to do a quick copy and paste . And that will be the quick way to get started in used the templates that they have on the website. And don't forget, we also have some customized styling, so we'll add that in as well in order to get the exact copy of what we see within the example, Web page select the starter template styling and noticed that they do have the padding at the top because from our nap bar, it's covering over the top content, so they do have some customized styling. So don't forget to include that as well. If you are looking on the website for some of the examples and starter templates, So now that I've set that up and I refresh it, it moves the content down so that we can see the main content area. We've got our nav bar, and if we shrink it, it shrinks nice and neatly so fully responsive and ready. So try it the code and also try out the various components available on the bootstrap site in order to get more familiar with what you can do with bootstrap. 27. 26 WebSite with Bootstrap Setup: in this lesson, where are going to be setting up the basic structure for the Web page that we're building? And that's going to be a single page website where it's going to scroll down to the various sections of the site. So have opened up the editor on the left hand side. This is going to be brackets that I'm using available of brackets Io. And this is the editor that I'm gonna be using for the upcoming lessons as well. I've got on the right hand side, the browser window open. I'm using chrome, and it's opened up on the right hand side. I've done the life preview in brackets, and that's where I've opened up the Web page. So this is just a blank index dot html page, and we're ready to add in all of the bootstrap structure and HTML structure, so you can always go over to bootstrap, get bootstrap dot com, click get started, and this will give you the links to the Cdn for the styling as well as for the JavaScript. It gives you some more information and this Wallace a nice starter template. So this is usually where I like to start and grab the starter template, go back into brackets and paste the starter template. So this gives you the basic structure for your Web page and update the title makes some fine tuning as needed. And of course, you can get rid of the commenting and the hello world. We're not gonna be needing that, but you are gonna need to have the Jake worry. And we're also going to be using some customized hickory toe have a smooth scroll. So eventually we are going to update the unified Slim J. Corey Library to the full gene quarry library. So going into the body, we want to add in the basic structure for a website. So we are going to need to have a navigation bar. We're also gonna have a header area, and then we've got our main container where all of our content is going to go. And then lastly, we're gonna set up a footer and the footer is going to be obviously for the footer content . Let's set up all of the basic elements that we need. And within the main section, I'm gonna add in a number of different sections, so just have one will create one as a template. And then we got a duplicate this for the other sections will have five sections for this project and the navigation. Whenever you click any of the knave bars, it's gonna go directly to the sections that are indicated within the hyperlink. And within the HTML structure, we're gonna have multiple sections that we're gonna be using. And they are all going to get linked from the main navigation bar. So it's set those up so each one of these pages is gonna have to have an I d. And because this is a single page website were going to do that and within the sections and as well, we're going to do that within the header. So the header is the 1st 1 that we're gonna look at and going into the header create a div . Given an I. D. So that it can be identified and this is gonna be the location where the hyperlink is gonna take you to. I'm going to give it an I d of splash. So all the contents contained within Splash are going to be what is going to make up that mean header area and as well. We're going to create another div inside, and this is gonna be our main container. And I'm gonna use container fluid so each one of these sections or pages are gonna have their own set of containers and then structure within their. And this is gonna be typically the grid structure that we're going to be using from bootstrap, which is allow us to create some type of structure and grid for the content contained. So let's do one more div. And within this stiff setting up I A class and that's going to be a class of column dash MD eight and we're gonna center this column and this is where all of our mean content is going to go. And for now, we'll just type in welcome content and then going into the main area. So this is gonna be where all of our main content is going to go for the site and going into main, set up a class and going under the container class. So all of the sections are going to be slightly indented and have gutters on the site because this is going to be in container, whereas this is container fluid. And then we're now we're gonna work on the individual sections. We want tohave five different pages. So one is splash. We've already done that one. The next one is just gonna be a section so contents contained within that section to give the section and I d and whatever you want to make those different pages, I could have an about page and as well there's gonna be projects and contact and whatever other pages that you want to display here, you can have as many as you want because this is this gonna be all related to the navigation bar. How many items you want? A place is dependent on the navigation bar, and I also want to add in that class of text center. So this will center all of the text contained within these sections. You may or may not one apply the centering of the text. So this is a bootstrap class that's gonna center all of the text that's contained within also gonna have an h two and this is just going to see what this section is. So call it about us, and the reason I'm using H two is more for s e o purposes as we're gonna be applying a bootstrap class and the bootstrap class is going to be displayed Dash three. So it's gonna make it nice and big and really stand out. And then just below that, the h two you can add in all of your content and we'll have another class, another div. And this could have a class of rope. And then within the rule, one more class and this one is gonna be the columns M d eight and I usually prefer to use the MD break points and then one last one. We're just gonna add in some content. So this a paragraph with some Laura Ipsen content. So it looks like we are good with that type of structure for the about us. Let's create the other sections. And we can do this by simply copying and pasting those sections. So we did have the about section and another about section, and we're going to create four of these and then we can update the contents of those sections. So we've got our first about area, and then this one obviously can't be called a boat, So give this one a separate I D and the I d is really important because this is how we're gonna select the derrick various sections and this is gonna be a listing of the projects contained within that section. So all of the different projects can be listed out here. And I'm gonna get rid of this place holder, and we're gonna do do customized one for that one. There's also the company information. So maybe the story of how the company came to be. So instead of about, I'll call this one story and our story, and I'll also customize the contents contained in this section and then lastly, we're gonna have one called contact Contact us and as well, same thing will customize the contents came contained within their. So it looks like we're ready to continue with our website. So as long as you have been able to set up the different pages that you want for your project, you can use the same pages that I'm using in this demonstration and next, we're going to set up the navigation bar and apply some more styling to bring our project toe life. So it's still to come in the next lessons 28. 27 WebSite Add a NavBar: this lesson is going to be a fun one, because we're going to be creating the navigation bar. So this is the core of most websites that you've got a navigation bar to help navigate your users through the content and navigation in bootstrap is excellent because it give prides you, ah, fully responsive navigation bar. And there's a lot of options when it comes to the navigation bar. I'm just over at the bootstrap website gives you more information, but the navigation bar so you can set different collapse points. So that's got S M M D L G Excel, and these will collapse the navigation bar to the men ified bar that little hamburger icon bar at various points. You also have full structure. You've also got the Nice nab, our toddler icon that comes with boots. Drop now and then. You can create your section to have as much navigation this plot as you want. You also can set up navigation on left side and on the right side. There's a lot of options when it comes to navigation, also including the input fields as well. Within the navigation bar, there's a ton of different examples you can also have header text, logo, text branding, text, and there's various color schemes that are available so the typical boots drop background colors as well as you can set the navigation bar, which will automatically update the colors of the tax contained within it. And the one that we're also using is gonna be the sticky top. And what sticky Top is going to do is it's gonna stick the navigation bar to the top, and this is the one that we want because it's a single page website, so we don't want users to always have to go to the top of the page to scroll themselves up . We want it just to stick at the top. So this is the one that we're going to be adding in. And then there's the responsive behaviours where the nab our expanded the different break points the toddler option to toggle the bar. And then there's also the option here, where they're demonstrating how you can have content on the left and content on the right hand side within the navigation bar, with a ton of different code examples. And that's an example of how it's gonna look like once collapsed with the collapsed content and the toggle icon as well. So shrink back down there a peach, and I'm gonna go into where we have the placeholder. For now, I got a place that default sticky top navigation bar So there's obviously nothing in the navigation bar yet. But if we are scrolling the page and I have to make this page smaller and you see that it's staying at the top, no matter where you stroll to, it's always going to stay at the top. So we're ready to add content to the navigation bar and also do some styling to it. So if you don't like the default look of the background light, you can update it to any one of the default primaries. So we've got. And also, if you switch the naff bar light to now bar dark, you're going to see that the text color changes, so make this a little bit bigger and we can get rid of some of the content that's contained in here because we're gonna be building our own structure for the navigation bar. So once we've set up the navigation tags, give it a class of knave bar And that's going to indicate to the browser that this is a navigation bar that we want to use and apply the appropriate classes. There is one thing that I do want to know about the sticky top, and there is a difference between fixed top and sticky taught. That sticky top does use position sticky, which isn't supported by every browser. Up until that support is there, I would suggest to use the fixed top class instead so that you get full cross browsers support. So let's make a quick update to fixed top, and it's going to do the same thing where it's gonna specify, and the only difference is that it moves the content down. So if we're using fixed top, we're gonna have to make an adjustment to the content. So watch what happens when I do update this to be the fixed top. We hide the first part of the content the navigation bar sticks on top of it, so that's the disadvantage of having fixed top over the sticky top. Whereas a sticky top is what it's designed for to push the content down slightly, that option is available on sun available across all browsers quite yet. So keep that in mind and update it to fix top, and we're ready to continue to build the navigation bar. So typical navigation, Boris, we've got the UN ordered list. And then we've got all of our items that we have in the navigation bar as list items. And there are classes for the navigation item. So now item. And there's also classes for the navigation item links, so create a hyperlink. And this is where we need to hyperlink to the various tags that we indicated in the sections below. So this could be home page and going to the splash, which was that first header section that we had. Let's also add in classes here, so they do have default classes for links called knave link class. And I'm gonna update this to nab or light. You could just duplicate the list item for the other pages that you have with other sections, so specifying whatever the name of the section is to correspond to where the anchor is going out. So we also had the vote area, we had projects, and I'm just going to double check just to make sure that it is projects, not project. There was also the story i d. And then lastly, the contact. And we need to also apply a class to the UN ordered lists to the wrapper off the list items , and this will indicate And as soon as I apply the class to it, it's gonna be now bar naff is the class, and right away you see that now they look like navigation items. So there's the drop down for the navigation items. As soon as you apply that, there's also some automatic that we want to move right automatically. So always put it to the right. So that's some styling within bootstrap. Now we want to indicate that this is gonna be collapsible content. So let's create another rapper for that, and that's going to wrap all of the content that you want to collapse in the navigation bar . So I'm going to wrap it with a div and give this one a class, and the class is gonna be now bar collapse class and then also add in the collapse class to it. So it's gonna happen is it's gonna collapse the content. But we haven't specified at what break point we want to collapse the content. So that's where we need to go back up to the naff and specify the NAB our expand. And I'm gonna use it on sm to expand on the S M. So it's already taking shape that we've got a navigation bar and we do have the collapse, but the collapse isn't showing. And this is where we need to specify the I DS and collapse the content using the bootstrap collapse format. And this requires a button in order to have the collapse take place. And this is the knave bar toddler class tight button and data caught Tuggle. So you have to add in a bunch of attributes in order for the collapse to take place. And by the way, you also need to have your JavaScript, Torri J Query libraries included, and we need to specify the data target. So this is probably one of the most single, most important attributes here because we want to be able to select the navigation bar. I'm gonna just call this knave one as the target, and we have to given I d of now of one to the main rapper. So that did that we created to go down to the DIV. Give it an I D. And this has to correspond with the I D that you want on your collapse bar and then within the But you can have any type of character that you want, and in this case, Bootstrap does provide a default toddler icon that can be used. And this is just a class of default toddler icon, and it doesn't have to contain anything cause by default. Bootstrap will add that in and before we try it, this has to be have a hash in order to identify it as an I D. So it's refresh, and we're ready to try the Mugler. Now. When we shrink it down to the smaller size, we get the button to toggle it. You can also update this toe, have different break points for the Togo bar to appear. That's the medium size. My preference is to keep it at the SM, but you can have any break point that you want for the bar. So coming up next, we're gonna also introduce some items that we can add to the navigation bar on the right hand side. So typically you might see social media icons and I'll show you how to bring those into your project coming up. We're going to use fought awesome for that. 29. 28 Social Icons for WebSite: Hey, welcome back in this. Listen, we're going to get social, so we want to add in some social icons into our navigation bar at the top so that the users have an option to see our social media sites. So going into bootstrap by default, there's not a whole lot. They used to have geoglyphs. They don't have the cliffs anymore. But they do have really good connection with fought awesome and font Awesome. If you've never used font awesome, it truly is awesome. I'm using gonna be using the font awesome 4.7 icon reference they have in a cheat sheet at 4.7 ford slash cheat sheet. And this is or you can see all of the amazing, awesome thoughts that you can have all these little gifts that you can have. And of course, they do have the social media, and pretty much any type of lift that you want to use is typically available that for awesome, So I have to do is apply the CSS class, and that will bring the icon into your project. Or you could use the Unicode to his number different options to do that. So all you have to do in order to bring this into your project is either download the style sheet or linked to it through the Cdn, so I'm gonna simply link to it through the Cdn, So bootstrap cdn dot com for slash font Awesome has makes Cdn for that, and they do have options for the different versions of font. Awesome. I prefer to use 4.7, because for me, it's one of these here one Steve's. But there are different versions, and some of the syntax might be different. So just keep that in mind when you are looking at front awesome that this particular lesson I'm using 4.7 point zero so there might be different versions and the syntax would change slightly. But if you are using 4.7, then it's going to use all of the same ones, and it's all available on the cheat sheet. So let's go over to the Cdn, and we're gonna bring it in with the HTML Cdn. There's number of ways to bring this into your project, so going into where we've got all of our style libraries just paste that, and that's all you have to do to bring it into the project. So next we're ready to add another bar to our top bar, and this is we're gonna have our social icons. So just outside, but within the collapse area, because we do want this part to collapse us. Well, we're gonna create another one ordered list, and this is gonna be strictly for the two thoughts that we're using and we're going to use the Twitter and Facebook. So it was probably two of the most popular once. So setting it up, just as we did before, where we've got the class and now have item class for the list item, and then the hyperlink can go up to wherever the link for the social media is going to be. So whatever that link is gonna be and setting it, giving it a class of knave link. So that gets the knave link class styling applied to it. And then inside This is where the fun awesome comes in. So you can go over to the cheat sheet and go down to where we find Twitter and cause there are so many. Usually I have to do a quick search. S O. C. We've got a number of options for the Twitter one. So f a square and they have the FAA Twitter. I like to use the square ones, but again, this was up to you. So in order to add that in to you could do a tag of I apply a class. And this is where the fun awesome class comes in and then close eye off and go back into the project. And, of course, we have to update the a Norden list and give it a class of now bar now and then for the fun . Awesome. We have to also apply a class of F A for fun. Awesome. And now we've got the Twitter icon there available for this hyperlink, and we can duplicate that. And we're also going to do the one for Facebook. So include the F E class to indicate that it's a font. Awesome. So it gets that styling added to it, and then the shortcut for this one is going to be Facebook square and safe. And that applies the Facebook link within a navigation bar. And because we've added into the collapse, we see it's being applied within the collapse as well, and just as we've moved right auto for this one, I'm gonna move left auto for this one. So it's always pulled over to the left hand to the left hand side, and that one's pulled to the rate. So that's it. How that's how you can add fought awesome to your project. So if you do need the social icons, or if you do want to make use of any one of the other icons, and we're going to use some more of them as we progress to the upcoming lessons, so do check out, find awesome for on awesome experience of different icons that you can use in your project . 30. 29 CSS Styles For Sections: as nice, says Bootstrap is it can't always do everything. So we need to have some custom styling, and especially for the single page websites. You do need to apply some custom styling in order to account for the different section size that you want to use, as well as for the navigation bar that it's covering part of the content at the top. So I'm gonna create some spacers as well a supply, some default styling to the body, to the header and also as 100% so set the height to be 100% of available height. So some default styling there because this is a full page website and then creating the spacer, and this is what we can use at the top of the page. I'll give it a height of 10 picks and a width. So these air kind of like spacer bars, and they're also visually appealing because that can give the user that's using the website , an indication that these are actually different sections. I was gonna make a black line, and of course you can style the colors as needed, and I'm gonna ply ah, margin for the talk and bottom off 40 and then left and right is zero and then do a display block to make sure that takes the full with. So it's the spacer and adding in these spacers, I'm gonna add them in between the sections or at the top of the sections. So where we have the about that's adding in these types of spacer breaks and then go down and apply the same thing just above each one of the H twos. So there is consistency in the design that separates out the content. And we also need another type of spacer that we can have to move the content down because of the navigation bar. And this is just going to be a blank one and give it a height of 50 and display block. And this is the space of that I'm gonna use to move the main splash page area down there mean welcome content because we can't see it. It's being hidden with underneath the navigation bar, setting up a div class spacer, and I just realized I called them both spacers. So I called that one space or two and space or two. So wherever we need that spacing that extra spacing. We can add that in as needed, and that's just doing that 50 block of space. So now we can see that the content and we might even want to adjust it slightly. Maybe that should be a 60 block of space moving the content down and also want to do ah, 100% for the splash, so want that to take up a full percentage. It's also select the splash element with the idea of Splash. I use an image from placeholder dot com. So if you don't have any images handy and if you need some place over content, placeholder dot com provide you some good images. You can set the different sizes, the dimensions. You can also add in some text, specify some custom colors. There's a lot of options here. This is one of my places that I use in order to set background images and just general overall place older images. So it's add that background to this elements of Earl, and then I'm just gonna pace in the background image and will specify no repeat and center the image, center it and have that fixed so it doesn't change and also for the background size. I'm going to use cover so it's fully across and as well so it will work across browsers, so Web kit, background size, mas background, size and cover. So they all get cover on that. And now let's go down to where we have the splash content. So it's contained within the header that we can update that contents off. This added in a diff, and I'm going apply a class so this class is going to give it a role and specify the height of 100 will wrap the content inside of it. So we've got quite a few dibs happening there and also on H one for this content. And let's use the display for for the largest size and each one tags. So going into boots drop, they have some options for the various sizing severe to use the H 100 which is 100% available with then they also have in line block in order to set that as ah block. So if you don't have any content contained in there, you can automatically select all of that. So let's take the in line block and we also need to make some much of other adjustments as well, where we have the HTML to be full. There's also positioning that we can do. There's various positioning options, there's spacing and there's a bunch of different layout options that we have available to us. So if you want to add in padding or margin, that's also possible. So we select the property. Either it's patting emergent, and then we can select the sides so we can do top bottom left, right X, why and then blank for all four sides of the element and then the number of sizes. So there's a scale of 0 to 5. You can also do auto and as well they do have some examples. So we do use some of these spacing classes in order to provide spacing within the page content. So going back into the website where we've got each 100 I have paced the D line in line block and also going up to here where we've got the body. We also need to specify that the HTML so that will produce it at 100%. So going back down, I wanna center the content on the splash page. So we've got our splash. We've got the container fluids that's going all the way across, and we want to use justify content center so it's within the contact positioning. So if you go back into the website and you can always search the various classes so it's got justify content, it's under flex and give you more information about how that works. So if there's ever a class that you need to search up, the easiest way is just go to search and provide a search for that. And what this will do is this will center that content because we're using the Flex Justify Content center. We don't need the in line block for the spacing of that element. So once we removed that, we'll see that the content does get centered, and you also might want to add some additional another each to their kind of like as a subtitle for your content, and then apply PT so padding top and will do just a little bit of patting, patting top, and you can type in whatever content that is necessary for the page. And of course, you won't have something that says image here in the background as this is coming from the placeholder, you probably have something nice and bright in that stands out. You also keep in mind that your text you don't wanna have you won't have a nice contrast from your text to the content, and maybe it will even make this bigger to display one. So if you're using a dark background that make sure your text is a light color and if you're using a light colored background that you can keep your text as a dark color. And now, whenever we click the links, we get brought to the other pages so you can go back to home and about US Project's story contact. So there's no more scrolling. That's why it's not screwing down because we don't have any content. That means that we have to add some content in that's coming up next. As we continue to build this project, 31. 30 About Page Card Component: there's gonna be a quick lesson. We're going to be looking at the about us section, so this isn't gonna be 100% like the home, and you can, of course, if you do need to adjust to be 100% you can add that into the styling to give it a height of 100%. But because we've got a specific amount of content and we might not necessarily want this to be 100% where he's gonna leave it as is and let the content dictate how much height this particular element gets, we're also going to do the same thing that we did here, where we're adding in the height 100 justify content center into the elements already be thinking, Oh well, it does look centered. And that's because we've got the call Dash MD Dash eight. And if I make the screen a little bit wider, we see that it is in fact only taking up eight columns of with, and there's four that are empty, so it's not exactly centered. And when on the larger screens and that's where we could use the Flex, justify Content center in order to center the content. And of course, if you want to add in another column off four column column, then you could have added that in this Well, so maybe if you wanted to have an image there, so that is another option. And again, depending on how you wanna handle this, you can treat it in a few different ways because the about us is taking up the full width, and then we've got the various columns. So how about we do that as well that we're gonna add in another column under just past it, And this one is going to be four, and this one can contain an image, and this image is gonna be fully responsive. And we're going to just use an image from the placeholder dot calm and take the same image that we're using in the background of the splash. And, of course, you probably already have images that you might want to use and adding in the image and then the source for the image and set the source as the placeholder path, or whatever the path to your image is going to be. And then for the image itself. Wanna add in the classes for image dosh fluid to make it Reese ice and fluid. It's now we have an about section that's Centre Alliance of the content is center aligned, and this is fully responsive. So as the container gets smaller, it will stack. So once the break point under the midsize break point is underneath that it will stack the rose. And if we go larger, it'll just have the different various columns. And this is all contained under the about US section. I also want to add additional content underneath about us, so you want to add additional spacing. So going back to where we had looked at with spacing, we want to add spacing below. And you could do that with utilities and under spacing and selecting to add a margin below margin bottom and then specifying the margin that we want to add. So we're gonna add a margin bottom and a margin of five for margin bottom. So margin bottom five underneath about us and we could try variations for to see what it looks like and then for consistency, we're going to do the same thing for the additional content. Also to the text alignment, so there is obviously an option to text the line. So let's align the text left as this is a paragraph. So we don't necessarily want it to be center aligned for this example. So we also wanted to add in some cards below, So this is gonna take the full roll, call him. So adding in another rope and then within this role, going back, Teoh the bootstrap components we're gonna add in a few carts. So basic structure of a cart is what we define as a class of a card, and we're gonna be creating a card deck. So number of cards together presenting the content from the cards, we're gonna have an image on top a title and then some content about the card. And this is what's a card deck where we can automatically group the cards together, and we can include the card footers, the card headers, the car titles and, of course, the card body and as well as images within the card deck. There's also option to do grids for the cards, So that's another way that you can present the cards where you can just use the typical grid format that we've been using from boots drop, and this also allows you to accomplish the same thing. But in this lesson, we want to try the card deck. So I'm gonna take the card deck, and I'm going to copy that source code over into the project and save it. It will make some tweaks and adjustments to the way the card deck is being output. And also shrink this down a bit so that we can see the full size of how the car deck is gonna look. We're gonna add in a class of margin top five. So we got some spacing between the card deck and the rest of the content in the about section, and we also want to add in some images. So let's go ahead and paste some more placeholder images into the card deck. So there we've got our image there, and of course, you can update detects to be whatever you want it to be. And then within the card body, you can also add in a card header if you want, and then this part here at the bottom, where we've got the card text. So I'm going to remove that and I'm going to replace that with a button. So using a div applying a classical buttons that could be added with bootstrap. So going back into the bootstrap documentation. And let's make this bigger. So under buttons and buttons air really easy to add. So typically they do use the button tag, but you can use any tag that you want, and this will still indicate, because this is styling and styling that's being applied so that it's taking any form that we want. So I'm actually going to use the outline buttons of success and copy that in that has mentioned these can be did is they don't have to be buttons, especially if you're doing you're quoting with JavaScript. It doesn't really matter what's accomplishing the button action, so you can use any element and it's gonna look the same way, and I'll update the text here as well as with the card title. So maybe this is a silver plan adding in on icon from the font. Awesome. This is a great place to include those icons. This is just a computer desktop, and I'll make this a little bit bigger, and of course you can adjust these as needed. So now that you've created one card and this is all contained within the card deck, we can duplicate that format and overwrite the other cards so that they all have the same structure. And that's one of the things that you do want with this type of action that you do want the ability to have the same type of structure for all of your cards. And of course, the images would be changing so you can update some of the colors, and this is what done within the placeholder image. So these could be really easily updated. And also we can update this to be just so it is different. And let's update the text on the buttons to be by now and update the background color for this one this well and update the plan to be gold. And we're gonna update this one as well and a buy now button and safe. So there's our about section so we can start whenever the page loads and then click about, and that will bring us down to the boat section. So coming up next we're gonna look at the projects, are story and then create a form in order for the contact us 32. 31 Bootstrap Grid in Action: We're going to copy some of the format that we used in the last lesson about the about me section, and we're going to do the same thing for the projects area. So this is where we can showcase the number of projects. Maybe that we've worked on have a type of a gallery, and in this case, So the last one we used card. So we used the card grid. And this time we're going to use just the regular bootstrap grid. We're gonna have a number of rows and columns, and it put some visuals under the Projects area and for the A boat. We did make some adjustments where we added in the margin bottom so that there is some space between what the section or at the page is called and identified as and what the content below. Also, click it just to make sure that when you do click it, it is right at the top, and there's no overlap with the navigation bar. As we saw that that sometimes happens, and that's what we added in the spacer. So just get make sure that those are all in place, and if you find that you don't have that in place, then look, to make sure you're adding in the proper spacers and structure. So we've added and quite a few things. So I'm gonna temporarily copy and then we'll write the stuff over just below. So we've got the A boat and the text is centered. So the more important thing is that everything looks the same. So I could just paste this and update the about US two projects. And then also don't forget if you are copying and pasting than update the I D. Otherwise it's not gonna work. So just make sure that things are still going to the rate section, and that is still going to the projects. And the reason that it's not at the top is that there's no more room to scroll. So there's nothing to scroll the projects up to the top, and that's until we we add some contents. We're gonna add content in the footer. There's going to contact us our story. So what? Next time, when we do have content there, it will scroll to the top, just like that about works and the homework's. The projects will work the same way, so That means that we need to add some content. So going into the projects and we did want to structure it with the number of rows and then within each one of these rollers, we're gonna have our dibs to divide up the content and then have a column and will force it to MD for you could also just use call if you want them always toe have this grid structure so again depends on the content that you're presenting. And then with inside of each one of these columns, you might want to have an image and I get a source for the image. Use that same place. Soldier will make some updates and adjustments. That does look slightly different. And of course, if you already have the images that just use the images that you have also adding in that class of fluid because this is just a regular image. Other ones already were structured because they were within the card format, so we didn't have to add the image fluid and always with the images, you should have the old text as well. So just out of police holder for the old text. So now we've got an image and update some of the colors of this image. This is just a hex value. Just picking them at random. No particular pattern to that. And then underneath the image we can add in ah product. So I'm gonna wrap the image in a diff and this is good if eventually we want to add some type of classes to that that we can do that. And essentially, it's just giving us the block of content when were structuring with the diff. Also wanna have h three so class of H three. Because I want to have the bootstrap H three classes. So this could be product one. And then, just as we did with the cards, once we determine what we want, the first product call them to look like that. We could just duplicate that, and then this would potentially have some info about the product, and they're not gonna put product one. So it's going to make it easier for me to copy and paste it. So now that once we're happy with the way that it looks and remember with bootstrap that we can have up to 12 columns on a typical grid So that means that we can do 123 and that will take full with across and it will stack once we hit less than the and the break point. So it's something else to consider that if we don't want it stacking like that, then we might also just want to use the call so that it's always within the grid format. So let's update that actually to call so that it doesn't matter how small we shrink it. We're always gonna have it stacked as the three, and this is really working. Essentially, just like the grid was working. It looks the same. Let's update thes product numbers so that there is some distinction between them. So this is actually that's product three. That's product to L updates some or random colors. That's too similar and say that. So now we've got the three different products, and you can also change the what's being displayed with the placeholder where the equal sign is just text and it doesn't look like you could do a hash. So I just do the product names to some of the stuff, obviously doesn't always work well, and this is just placeholder content. So typically you would have some real content that you want to use. And we probably don't just have three products. We might have six. So that's two rows of three in each column, and you might also have additional. Maybe you have eight. Let's do it for eight and we'll update it. And then we'll duplicated across. So it gives it a yellow color and, like teal kind of color. So selecting that entire roll, all I'm doing for the projects, I'm just duplicating it. So we have another role and then making the updates to these products. So this one is five, 67 and eight. And then let's also update the corresponding values and save. And then we should also update the colors just that that there are some differences and what's being output. I know some of them look fairly similar, and there we go. So let's see what this looks like on the larger sighs. Refresh it, make sure you see it and then now when we go to about when we go to projects so that it is being shown here at the top, you might also have some additional information or maybe even have 12 or so on. So this is fairly flexible and how the content gets presented so you can take advantage of the grid and present content. You might also have some additional information. So so info about the product. This might be a little bit longer, and the advantage of using the cards is that the structure is a little bit nicer, so it's more self contained, whereas here you'd have to add in than you've had in the borders and so on. So depending on how you want output, your content there is a big difference between using the cards and using just the grid. It's up to you how you want to present the content on your project. So coming up next, we're gonna update the our story where we're gonna use somewhere components, go back into the boots drop website, and in this time, we're going to use one of my favorites, which is the carousel. So that allows us to slide images and have multiple images that the user can slide. So that's coming up next in this. We're gonna include in the next section 33. 32 How to Add a SlideShow: this lesson, we're gonna be continued to build out our project. And we did the about. We've got the whole and we've got the projects. Next we want to set up the our story. So this is a section on the website where we could include some information and additional information. Maybe some pictures and images of the company that's being presented on the site and we are going to be using the carousel is a slideshow component, which allows us to cycle through elements, so images, slides of text just like a carousel. There's some great examples on the website and self and important thing here Is that the carousel? So these air, based on the attributes, it's gonna also require javascript for this component. So we need to specify the class of Carousel slide. The data rightist carousel, giving it an I. D and the I D will help identify it when were used in the carousel controls and then within the carousel itself. It's got the carousel inner and a bunch of different carousel items. There's also the active one, so that's the starting point, and these are within a block with with of 100. That's providing a full with of the images. So in case the image itself isn't taking up the full with, you can adjust it using that class. There's also an option to add indicators, so indicators are these things here at the bottom that we can add in, and this allows you to go from slide to slide so you can even jump through different slides . And those indicator controls also require the i. D in the data target. And then we need to specify which slide with order of index. And this is a rebased, so it starts at zero. So the 1st 1 is zero, then 12 and so on, and that's how you can add in the slides. There's also a bunch of cool options like captions that you can add in, and this you could added on top of the text. So that makes a really nice effect. Is also cross fade and a bunch of different ways to set the carousel. You can adjust the carousel intervals, so by default there is an interval of that's already preset, so the default for the interval is 5000 so it's five seconds interval. You can adjust that say, suggesting the data interval. And here it date. Inderal is 10,000. That's 10 seconds, and these air in milliseconds. So 2000 is two seconds and so on. So let's build this part out on our project. So going down to where we have the section our story. And once again we want to keep the format the same that we had within the projects and within about. So I'm gonna do a quick copy and paste just to make sure that our section is the same type of structure. Because this type of thing it's it's really important that we do get the structure the same . And for the most part, I think that we already had it. But let's copy and paste it anyway. And I think the only thing that we were making different was we were adding in the margin at the bottom. So let's update our story and also be mindful of the I. D. You do need that I d to touch to that anchor ideas in the navigation bar, so make sure that that one is always in place and we're going to need some images because that's going to be just a image beast carousel. So I'm gonna use the placeholder content in order for the images. And of course, if you already have images that you want to use, you could use those instead and we might not want the carousel to go fully across. So we'll divide up the carousel into spacing of eight, and then we'll have some content on the site. So let's set up that structure first, using the classes where you have the role and setting up a column of M D eight and also another one for some additional texts or carousel will go in the larger one, and we'll have some additional text in the m d for. And I just have a place soldier right now for the text so ready to create start constructing the carousel and we need a mean differ that and northen i d to give this one an idea of how you want identify the carousel. So of course you can have multiple cara cells, and the way that they're gonna be finding each other is with the I d. So I'm gonna give it a carousel off. I d. And I spoke carousel wrong there and we do need to apply those boots, drop classes of carousel and slight, and then it also needs the attributes of data. Right? So that's the attribute. And the data ride is a carousel so that this bootstrap nose and the browser knows to ply the carousel functionality. And again, this is done in javascript. So that's what we're going to make sure that we do have that available, that we do have the JavaScript libraries attached. And I miss spelt that once again. So it seems to be having trouble spelling Carousel says car O U S E. L is the way to smoke carousel, so you do have to spell them properly. Otherwise it's not gonna pick up the rate styling and the attributes. That's their mean carousel container. So that did. There is the main carousel container, and next we're going to do the inner part of the carousel. So this is where the contents of the carousel are gonna take place. So this is carousel inner class to indicate that this is where the inner contents of the carousel are going to be housed and within the inner, we've got the dibs and these air the actual slights that we have within the carousel. And these are all carousel items and usually the 1st 1 we set toe active. That's the default that it's going to start on. And then whatever is contained within here is gonna be how what gets output And we are gonna place an image in there with a source, and then the source is gonna be going over to the placeholder. So just copy that, and we'll make some adjustments by that, an object that to be hello. And this image is gonna have a class. So D Block is gonna create a block object from this a block element. And if we said it two with 100 where take up 100% of the available space and this is gonna be keeping the dimensions so we might want not want to have. So we want to make maybe set a preset height of this and with these carousel is you do wanna have images with the same dimensions. So this is one thing to keep in mind when you are selecting the images, so usually they look way better if they're more wide than they are tall. That's why I just did that to 500 by 300. And with police older, it's a lot easier with regular images that's going a little bit more difficult to to handle . That's our content for the first item, and you can add additional content as needed. But we're just gonna have images in there and copy it. Don't forget to remove the active and these air ologists carousel items and put some different text into it and color it slightly different and will leave the class when we refresh. And by default, it's every five seconds. It's gonna change, and we don't have the indicators yet. We're gonna add those. Of course, that's our next carousel item. It's a little bit hard to tell, So there it just went to the next next slide. So grab the next carousel item and you could add as many items as you want there all carousel items, so there's no wait. There's no distinction that you have to do. I'll just do last one on this. Those air, all of the carousel items conceived that and again. Default is every five seconds, so we can adjust that as needed. So it's add in the carousel indicators, and this is typically done with an ordered bust or on order list doesn't actually really matter, because this styling that's going to overwrite the differences and the class for this one is carousel indicators and that carousel indicators are done with list items. So list items and we need to specify the attributes. So this is the target off what it's targeting, and we had given the whole carousel an I d. Of one. Don't forget to add in the hash to indicate that we're looking by I d. If you've got one by class, then you could do the dot. But it's always better to have ideas because we know what I ds. That there's only the one. And because the 1st 1 is active so that that corresponds, and then there's more data that needs to be added in so data slide to attribute and then equal that to the index value and the class is actually active, and I just put that class in the wrong spot. So let's update the target, the class too active, and you don't have to include anything in the list items. So there's our 1st 1 So whenever we click it, we always go back to the first. You can adjust this and go toe to toe. Doesn't matter. Whatever one it's set to is the one that's going to go to. And usually you do wanna have it in order that the slides air being presented just makes sense. So Carousel one so still the same one. And it just set that to one. Remove the active because this one's not active. So it's a little bit more of agreed out kind of effect to it because it's not active and then duplicate this to whatever number off slights. So this is not automatic that you have to list them and associate them with the number of slights. So if you have three slides, then you should have three of the indicators there. So make sure that that all equals and matches. So one last thing that we wanted to do a swell is toe have the controls so that controls for previous and next. So the user coming in, they have an option to move to the next ones, and we saw there's a number of ways to do that, so these air these controls here on the left hand side. And they do have some carousel icons. So I got I just copy these just to save some trouble. And we always have to make sure that you are rating these properly A soon as I put that it shows up, but they're not hooked up yet. We have to update where we're linking them to. So they have to link to whatever the name of our main object is. And that's gonna be the carousel one element with the idea of Carousel one. And then also just make sure that this one matches to carousel one as well. And that's all you need to get the functionality. So now we can click them and we see that it works. Let's make this bigger and looks like everything is working as expected. And then also, we want to add in some text eso going back into that other def that we have for text. I'm going to copy the Laura Ipsen text that we have from this previous section, and also I could just align it left. You can do any number of things for this area. Eso just got that Laura Ipsen text there within the our story. And then the main part of this lesson was to explore what we can do with the slide show with the carousel. So coming up next is the contact us where we're going to use the form, and that's again available from the bootstrap documentation. So they have a really nice way to present forms that's coming up next. 34. 33 Bootstrap Contact Form: every website should have a way to get a hold off the person that has the website and this is no different where we're gonna be setting up the contact US area of the website. Just a quick refresh and contact us. We haven't touched it yet, and that's what we're going to do in this lesson. We're gonna be looking at what Bootstrap has in the way of form fields, how we can group forms together and how we can make a really nice looking form quickly and easily. So the information that we're gonna be gathering is gonna be the emailed field also having a text area for a message if we want. We can also just keep this as a regular input so we could have a number of inputs and then these can be adjusted as needed. So you can have different types of inputs like the text area that input the email field and so on. We're gonna bring that into the project, so go down to where we have our text or contact us. And again, we want to make sure that the structure is going to be the same as what we saw within the other ones. We've got that our story. And also, we're going to do this one a little bit different because this one isn't gonna be the full with the cross. Where are gonna use the role and column of eight, But we want to justify and we want to center that content. So it's gonna be the big difference here for the contact area. I'll slide this down to make some more space for this particular section. Remember, this is the contact us, and add in the other gives there to close off that section. So we just want a center, the contact form. We don't want to have any additional columns and update this to say contact us. So what? Apply some styling and contact form. Just a placeholder for now. So right now, if I go over here and for this, I have set of background color so I could see where the contact form is gonna sit. So see, it's still pulled over to the left hand side. And that means that we need to adjust some of the styling just as we saw over here, where if we didn't want to go the full with, We could set using the Flex center so that justify center of the column contents. So let's add that in, and that should shift it to the center. That's the same class that we used earlier. And actually this needs to go into the world. So that centered that content. I'm just adding some spacers so we can scroll the contact form up so it's more center for you as we're creating it. We're going to get rid of that after, so that's not part of what we're building. So going into the forms, just as we typically would. So now that our form is nascent centered and probably doing eight is a little bit better, we're gonna have eight columns across, and the content is centered using the justify content center class. I'm also gonna add in a spot that if we are using JavaScript, we can add our success content to and then this could be dynamically populated using JavaScript so I could say maybe thank you or something like that. I'm also going to get rid of the background because we don't need that. So this is actually going to be something that we're going to use with JavaScript if we want. So it's just a placeholder for applying some messages. So once the form gets submitted, we can hide. We can show various classes and then using the four tag set up the form and within the form , we're gonna have some structure with bootstrap to set up a class and using form a group class, it's going to be an input group. So this will group all of the inputs together and we've got the inputs type equals text and give it a name. And we're gonna collect the name of the person and class form control. So give it that bootstrap styling for the form and play soldiers regular html. And this should actually be placeholder. So we've got the form area and we can also use pre penned in order to add. Some were styling to the forms and on the boots trot site. You can see some examples on how the pre penned is being used and we've already got fought . Awesome added in. And the pretend is something like this where you've got this at symbol within the input field. So we've got input. Group pre penned the content that were pre pending and then we've got the whole input group gathered together. So it's the same thing that we want to do for that input group and for our fields where we've got the contact us. So we want to use some of the fought awesome icons in order to odd to the input area. So set up the input group. We already have that whole input group Forum Group Input Group. Together they're using a diff and class and input group. Pre penned is the class that we want to use, and then we need to specify what it is that we want to pretend with so class. And I want to input group text as it's going to treat the thought awesome as text. And then whatever the thought awesome icon is that you want to use already got one that I'm going to use. So I'm gonna simply dropped that one in, and you see that it shows up now on the on the form pretended. That's all you have to do as it's all contained within the input group and then the form input group. And that's how you can add a number of inputs So I'm gonna copy that structure and we'll update them as we go through. So of course we don't wanna ask only name eso. The classes are all the same, and you'll find that with boots drop, there's a lot of repeat. So once you create one kind of chunk of classes and elements that you like, you can reuse it, and this one is going to be for email. So it's gonna be on envelope open, and the name for this one is going to be email, and you could just update that. And this way we can really easily build out of form. So whatever a number of fields we want to ask, that's all available here. And also you might want to ask a subject so we can copy the structure once again, and everything is the same. One update the fought awesome icon, of course. And as you're copying and pasting, just make sure that you are doing it properly, so this can be the subject. So the name is subject and placeholder is subject to make sure you update the attributes accordingly. And then also let's do one where we've got a text area so again structure is always very similar. It's using the same structure of the classes, so you've got input form group Input group as the main container. There's also for the input group pre penned, and this is gonna be a comments will update the input type to text field, but we can also pre penned these as well the text area. So update the tag here to text area and we also need a closing text area. I will update the other attributes as well for text area and for the name it can be message . The class is the seam says still, four of control placeholder works in the text area of the same and with text area, you can specify the number of columns. So if you want to 30 columns, you can also specify the number of rows to make. That bigger is essentially that's our form and then lastly for form, you need a buttons again, using a diff in order to contain the class content and using form group. And there's nothing that's gonna be pretended here, so we don't have to have an input group were just using the form group, and this is an input type. You could also use Ah, button, just a regular button or any element because we're applying the styling as button style. So this is submit and with submit type on a form, it's gonna have some default action to it. And this is all just regular HTML adding in a class so class button and button primary. And also to get the button to go all the way across, you can use button block, so it's an option with buttons and you can update the value to be sent. Those take a look at the form and once we've got all of that content, as we want on the form, we're ready to move on to the next part. This is that 80%. So it 100%. This is what the form is gonna look like. Big sure that it re sizes and scales as you want, and we're ready to move on to the last part where we're gonna be taking care of the footer section of our website that's coming up next 35. 34 WebPage Footer Setup: can this lesson. We are gonna be looking at the footer content and that's the one right at the bottom. We haven't done a whole lot with it, and that's just outside the main section. So I'm gonna take all of these spacers gonna put under footer that will bump up the foot or area and allow us to work on it and also have it kind of mid screen there as we're working on it. And within the footer. Why, No, we haven't done a whole lot with lists yet. Eso this lesson we're gonna look at list groups were gonna list out a number of links in the footer, create the footer area, make it fluid so all the way across. Also add in a background color to match what the navigation bar is and set up the lists for the fluid. Let's get started on that and going into the class for the footer and on a center, the text so adding in text center class will center the text, also setting up the container dosh fluid that will make it all the way across. Background is primary and safe, so we refresh and of course we don't have any content in there yet, so we can add in some content that says Footer, that we can actually see it. Also, let's make the text by default to be white. So there's our footer area and already to continue to build that. So make this smaller. Remember, the footers is going to be under the contact us, and that means that we don't actually have a navigation to it. So contact it's working. Story is working projects about home all working properly. So going into the footer, let's create role and this. So we're going to divide up. So we're going to use the bootstrap grid just like we did in the previous lesson where we set up our role and the row is going to contain a bunch of columns that are gonna hold all of the information that we want in our Footer. So within the footer, we're gonna divide it up by a three column grid, and the first column will be six. So using just the default sizing on it, and then let's set the copyright symbol for it. So Copyright 2020 of 2021 whatever year it is make the copyright, they might have some statement information for the users that are coming to your site. So what could I do a whole lot on that as we did Want to focus on the lists. So the lists are gonna be called him three across, and we're gonna have two of them. So both matching in size. And let's set up the list for that so the list might have a title. So give this a class to do that after my links. That's the title. And there's also some nice ways to transform text. So I'm gonna just change this to uppercase associate gain change to upper case when you apply that class to it and then the list items is going to be all within the UN ordered list. And let's apply a class to the an ordered list so that it applies. The boots drops styling, So this will be a list group class, and I'll make the text dark for this one. So we have some different types of links and the list items, so the list items are all using the list group item class, and that's going to style it with the bootstrap list styling, and this could just be a number of websites, the website one and we might have a bunch of websites that we want to showcase on our website. So in this case, maybe we've got four different websites. So 234 and then you could also update thes two hyperlinks or whatever information. However, you want to present the content. That's the first list. And let's duplicate this this structure, and we'll do it within the second as well. And going into the list groups, you can set the top one as active, so distinguish it from the other items. You could also have disabled items in the list, links and buttons. So how the links and buttons air presented. And this is a really neat one, because this allows you whenever you hover over it, toe have that kind of hovering effect. So instead of list items, you're using list group with hyperlinks, and actually we're gonna change that. We want to use the list a new ordered lists, but we'll look use the list group so that we do have a different way of presenting the list . You can also do it with buttons as well. So hyperlinks buttons doesn't matter. Those just have default actions with HTML. You can also stack it horizontally if you want, so this is more like the navigation bar. There's different colors that you can apply to the lists. So it's also really neat feature with bootstrap. And these are all that typical default functions. Did default colors that you see in boots drop. So whatever. If you change your color scheme, it's gonna change all of the primary colors. Secondary success, danger. And that's the nice thing about boots Drop is that it does have all of that flexibility. So now we see it. We've got this list and I'm gonna get rid of some of this excess here. I don't need an active, so we'll remove that. And then for the entire role margin bottom and I put a margin bottom of four on. It actually changed this to pounding bottom of For that, we have some padding around it, and if we just wanted padding around the whole thing, sometimes that looks better and that's a preference. You could just do a patting of four around the entire object. So now take a look at the project. Make sure you've got the content as needed for your website, and we're gonna wrap this up with a few tweaks and adjustments. So one of the things is, when you do click this. We want the scroll, spy toe work and scroll spies A really neat thing in Bootstrap because it allows us to highlight whichever part of the navigation menu were on. And this is ideal for single page sites. That's a really cool feature and as well as I've got ah J. Corey Tweak that will provide a smooth scroll. So whenever the user clicks projects, it will scroll it down in an animation format, So that's still all yet to come in upcoming lessons. 36. 35 Smooth Scroll and ScrollSpy: you need to have the JavaScript library, and it's ideal for single page websites because it allows us the user to be able to see which section there on that's within the navigation bar. So when you have the navigation bar the top as they scroll down, it will update thes as active. That's a really cool thing about it. It's really easy to odd to your project. So first within your CSS, add in the body position to relative, and if you refresh it, you're not going to see any difference quite yet. They're going down into the body at an attribute data spy and equal that value to be scroll so that this is being applied to the whole body. And if you have the scroll spy in particular sections, then you would do the same thing for the section that you want. Apply the school spy to and then data target, and this is going to be the target of where you've got your navigation and our target doesn't have an idea. So I need to add in an I d for the navigation bar, so give it an I D so that we can identify it as an attribute and we'll just call it Navy Novey and then the data target and make sure you include the hash so it understands it as an I. D. Let's refresh. You see that the school sport. Now, as we scroll through the various elements, it's gonna update the values and is gonna provide it as active. And just to be sure, you can go down to the JavaScript as well and add that in. So I'm gonna add some custom script. So custom script tag is where it can add the javascript of the geek worry. So selecting the Body Scroll spy. So if we don't want to place it within the body as an attribute, we can also do it down here as Na'vi. And this is gonna work the same way. And this if we want to do it that way, we can get rid of the body attributes and remove it save. And now it's still working. So it's working for the JavaScript, so there's two different ways to apply it. I gotta keep both in the project, but he only really do need one, so you could do it with the scroll spy in the JavaScript or you could do it within the body attributes and are scrolling even though it's working, it's not smooth. So now we're gonna apply the JavaScript in order to make it more smooth. Let's clean up the code and apply some JavaScript to make smooth scrolling. And in order to get the smooth scrolling, we are gonna have to do some custom coding using J Query and apply that to the bottom. Within the script tags need to update the J Query Library, so by default it uses the slim version, which is a slimmed down version of Jake Worry. So some of the J. Corey functionality might not be available, and you might have already found that if you are rating Gee query and you find that it's not working within bootstrap, that's because it's got the slim version in The slim version is missing some of the functions that are contained within the full version. So we do need the full version for animation because animation is only contained within the full version does not. When the one that's by default with bootstrap, there's a number of places to get the J. Corey Library see, go to that bakery website downloaded there if you wanted to store it locally, if you want to use a cdn, the one that I usually go to is Google. It's available developers dot google dot com for slash speed for its Pash libraries. And this is one that I prefer to use because I think a lot of websites are using Google s Oh, it does increase the speed, and you don't have to worry about any of maybe some download and library slow down of your website, because if the user already has it cached, then it's gonna load relatively quickly because it's cash within the browser. And that's the nice thing about using CD ends when you are programming and using common shared libraries. So now we're just gonna overwrite the J Query one and you'll find that Bootstrap still works the same because now we've got the full version, so it's just given us some more options, so everything is still running the same way as before. So now, going into the script tags because this is JavaScript and Jake Worry is a JavaScript library. So it's why I referred to it as JavaScript because at the heart of it is JavaScript. But the methods and the structure and some of the code that you write it's gonna be based on what is available in G query. So we need to first use a selector in J coury and the way that we did the selector just like we did the body element on the page. We select the element that we want to work with and number of different ways to select it. So I'm selecting it, using the hash. So that indicates that we're looking for element nav Bar One and not gonna correspond with , of course, the navigation bar. And actually, we've given an idea of Navy, so it's updated down there as well. So Navy is gonna be our knave bar and then looking at the honored A list and the list items that are contained in there and we all on a select specific ones is going to be the ones with the H rough. And the reason that we're being specific here is that we want to make sure that we're Onley selecting the ones that are equal to ah ha hush of we want to make sure we're selecting the ones with the hash on Lee because we don't want all of the hyperlinks in the nav bar to go out to to be activated when we click it so that meaning these ones here, the social icons would We don't have any associate ID scroll with them, and we don't want Thies to get fired off whenever the user makes this selection. That's why we've specified the path to the specific elements, and you have to be really specific here. So once you have selected the element adding an event listener, so the on and we're adding on click event. So that means that the Event listener is gonna fire off every time it's clicked and the structures to have a function in there and within the function. It's passing the event object, so that's contained within the function. And this is basically what is going to get selected and invoked that event object, and we have to prevent the default action as well, and this is just to illustrate just to make sure that we have actually selected it properly . So go into the console and now whenever we click thes, we see that there is an event that's taking place. And whenever we click the those hyperlinks, it's not invoking the function, and that's what we want. This error is an error for the brackets editor. So you're not gonna encounter that if you using another type of editor as well as the warning about the button is part of what's contained within the bootstrap CSS, so that hopefully there's gonna be fixed for that soon, so that won't be appearing anymore. And we're not using any of that styling that's been deputy created anyway. So that is something that you can ignore as well, for now. And there's more information about chrome and some of updates that they're doing. So once we actually link it properly, you're not going to see any errors, and we see the event is being fired off. So what we will also want to do is we want to use the prevent default action, so this is going to prevent any kind of default action. So typically with hyperlinks and HTML, it already knows that this is supposed to link out somewhere so supposed to go somewhere so want to prevent that default action from happening because we want to create the animation with decree that's over removing the default action. Also using Let hash. We're gonna collect a variable using this object. And this is referring to the active element that made the event that triggered the event. And you can console Log that out as well. If you want. You don't have to do all of this console log. You can copy and paste my code and just update the I d of your navigation bar if you want. But this is for those that I really want to understand what's happening here with the coding. It's no when we click. So you were picking up The harsh is about so that's gonna include the content and that's gonna be how we're gonna know where were animating to where we're scrolling too. And this hush if we select it as an element and using the J query structure were selected as the element it's gonna have on offset top value. Is this gonna be a value of where the section starts? How many pixels down on the screen? And this will change depending on the screen size and amount of content within that screen area. So if I make it bigger, and actually, we're not going to the footer they're not able to see. But this could vary, and this is dynamically picked up with the code because we need this value in order to specify to the J query. We wanna anime school, too. And now comes the fun part where we actually make it school. Where makes it happen? So take the HTML and the body tag. So the elements with HTML and body that full and use Anna Meat, which is a J coury function, which performs a custom animation so it automatically applies all that styling in order to perform the animation. So Jake worry is just a quick way to do some really, uh, updates on your CSS, and we want to scroll top. So we need to specify position that we want to scroll to. So if we did something like 300 or something like that, it would always scroll to 300. That's the pixel position, that it's scrolling, too, and this is where we use the value that we got from the Hashi, and we could specify where we want to scroll to. So let's try that again. So now we're scrolling to the right position. I got close the consul, because we're not going to need it anymore. Now it's scrolling to the right spot and see that's nice animated scroll. And so you also do have some options on the scrolling so we can slow it down or we could speed it up. So if we want to take one second to scroll, that's 1000 milliseconds and then the function. Whenever the school is finished, I want to update this window location, see it or is still says contact. And that's because of the hashes that were being applied whenever we clicked the menu here . So we want this to update as well, so that the URL corresponds with where we are on the page. And we could do that with JavaScript, where we select the window object, take the location of the browser window and updated toe hash and equal it to whatever the hash is and the hashes just this value here that's gonna be appearing. At that end, let's see how that works. So you see it and updates to projects. It updates the story at updates to contact, and if you find that scrolling is too slow. You could always speed it up, and if you find it's too fast, you could always slow it down. So whatever your preferences for users, I find that's actually a little bit too fast. And I usually prefer to stay around one second for the scrolling, so it doesn't matter how far it's scrolling. It's always going to take one second to do the scrolling, so actually calculates all of the in between. So that's it. That's how you can add that nice animation effect to your project. You're single page website. Let's try that one more time and check it out. And that last part was just updating that you are else so that it updates accordingly to whatever you're scrolled to. So even if you're scrolling and it's updating the scroll spy, so whatever you click thes, it's gonna update the hash there in the URL. And I didn't want to focus too much on what bakery is and how it works. Eso It's just been a quick overview of the functionality that's relevant to this project, 37. 36 Final Website Overview: this lesson is gonna be a quick overview of all of the content that we've covered earlier and greet Joel on making it through this section. I know we've gone through quite a bit of stuff with bootstrap, and you can always mix and match components and bootstraps. So if you find that some of the stuff on our in the early lessons might not be relevant to how you want to put content, there's a ton of information that get bootstrap dot com. You can go to get started and then under the components. That list said all of these components, and these are all from commonly used components that you might have within the website. And so adding all of these is really easy. They also have all of the sample codes and just different ways to add that in. There's also under the utilities. So if you don't like the colors that I've used, you can update the various colors as well as add in some padding and update how that looks so. The colors are all laid out under the utilities colors, and they've got all of the different default colors and the nice thing about the color scheme and bootstrap is that if you get a different color scheme, it will update the primary secondary success, danger, warning and info. And that's why it's really nice to use the boots drop classes because if you ever changed the colors of your website scheme, it's gonna be really easy to do if you've coded it all with the right classes. So make any adjustments and tweaks that you want. And, of course, you probably want change that place older images because that's rather ugly. But they are just to serve as placeholders for the content that you might potentially be adding on to your project. So make sure that everything is as needed and you're ready to publish your website. And we've gone over the most commonly used components. Applied some customized styling where we had some spacers to take care of the navigation issue that when we're using the fixed top navigation bar, is going to stick it to the tops. It doesn't work exactly as a sticky top does, where the content has pushed down slightly, and that's one of the disadvantages. So some of the browsers still aren't up to date for sticky eso. In the meantime, you can use fix top. And if you are watching this video in a few years, you're able to use this sticky, and you don't have to worry about all of the spacers s. So this is how you would customized and add in different classes that you can use, of course, within the bootstrap and setting up the splash as a background. So there are no default classes and bootstrapping toe handle that, so that so we had to set up the cover and do that separately. So navigation is always key to any website, and because this was a single page website, the boots top navigation bar is perfect because it collapses and users always have access to get to the very sections of the website just by clicking the navigation bar. And that's what we do have. It's sticky at the top. We have our splash area, so this is meant as kind of that place wherever the user lands on your website to have a really nice imagery in the background to get the users excited about your Web content, give a quick introduction to what this website is about than that boat section. And this is where you can highlight some of the content that you have some of the more outstanding things, maybe some products that you sell, services that you sell and so on. This is example of how it can be highlighted and output. We went onto the projects. This is a kind of a showcase area where you can showcase different projects. If you got a portfolio, you can showcase that portfolio here as well, and then the IRS story. So this gave us an opportunity to use the carousel, the sideshow. And this is a really neat component in bootstrapping, another commonly used one, and we saw how easy it is to apply that. And just by using a bunch of images and bootstrap classes, we could structure that slide slider really easily. The contact form. So bootstrap once again provided us a nice, neat way to layout, input fields and text areas to produce a form and, of course, buttons and boots drop always really nice and appealing. We also added the pre penned were using the font awesome icons as we order. He brought them in for the social media, so why not bring them into the rest of your project. And that's one of the nice things about fought. Awesome is, once you start using it, you're going to realize how awesome and how many amazing icons they have so literally can spruce up your website easily with font. Awesome. If you have any questions or comments, I'm always happy to help. But I always love to hear from you. Hope you had fun and hope you've enjoyed creating your Web site.