Transcripts
1. Introduction: When building websites or applications, Bootstrap is one of those tools which can really help out not only beginners, but developers of all skill level to get up and running really fast. We've only known a little CSS and HTML. You can really create some amazing looking project just by adding some simple classes to your HTML. Not only will your websites look great, there will also be fully responsive too, meaning there will be optimized for all different screen sizes. Who am I? My name is Chris and I'm a web developer and I've been involved building websites for 20 years. I've also been teaching these skills for over five years and actively involved using Bootstrap since the early versions. Bootstrap is a great tool for beginners who want to hit the ground running, allowing you to build a great looking websites, which are also really customizable. Bootstrap is not just about the look and feel now, we can also add features such as drop-down menus, image carousels, also the ability to show and hide content and so much more, all without needing to know about JavaScript. Throughout this course, you will learn all of the key concepts needed to use Bootstrap. We begin by deciding on your project beam. So we can build something which is fully custom to you and reflect your hobbies or interests. Then move on to looking at all of the essential features of Bootstrap, which has the grid system, breakpoints, utilities, components and working with third party libraries, the add icons. You don't need to be an expert in HTML, CSS, or JavaScript to get started. All you need is a basic understanding of HTML and CSS to get going. By the end of this class, you will have all the skills and knowledge which you need to build great looking and responsive websites. Thank you for taking an interest and let's get started with this class.
2. Why use Bootstrap?: Maybe you've taken this course and not a 100 percent sure what Bootstrap is. Or maybe you've heard of it before, but don't fully understand what role it plays in a web project. Well, I'm now going to give you an overview of what Bootstrap can do. We won't be going too deep at the moment, since I think some things are better demonstrated as we go. But we can at least get a basic understanding. When starting out with anything new, generally, the first thing we want to know is what exactly is it and how can it benefit our projects? With Bootstrap, which is currently on version four. You can think of this as a toolkit for building HTML, CSS, and JavaScript projects. We can build websites and applications using our existing HTML and CSS skills. In fact, we don't even need to know JavaScript upfront to get started and take advantage of the Bootstrap features. With Bootstrap, we don't need to learn a new programming language. It's not a complicated framework or anything like that. It's simply build on our existing skills and it adds some nice features, generally by adding some CSS classes. So we could think of Bootstrap as a helping hand for our websites or applications. We can simply drop it into our projects and we'll find out how to do this very soon. Another great feature of Bootstrap is it's full responsive by default. Meaning it will look great on all screen sizes. So if we're using a small mobile size device, as we see here, we'll generally have the content stacked top to bottom or vertically on the full width of the screen. Once we have more available screen space, such as a tablet or a desktop, we may have the content stacked side-by-side, since you have more available width. Another great feature of Bootstrap is it allows us to develop at a much faster rate. It does this by providing us with a base CSS and JavaScript, which we can drop into our project and use as a great starting point. The base CSS provides some sensible defaults which we may need, such as some spacing, some paddings and margins, and some default colors and fonts. Everything which we use from the base CSS and JavaScript files can be fully customized too. This is because we don't want every single Bootstrap projects, the we create, or other people create too, to look exactly the same. So Bootstrap gives us the flexibility to modify every single style or class that we apply to our project and make it completely our own. Another good thing about Bootstrap is it's beginner friendly. All we need to know up front is some basic HTML and CSS. We can then gradually implement bootstrap into our project when we need it. In fact, we don't need to know any JavaScript to get started with Bootstrap, the Mobile First Styling in, and things such as a drop-down menu, carousels, modals, or progress spinners are all really straightforward to add into our project. We don't need to know any JavaScript before we use it. So this is a basic overview of what Bootstrap is. Of course, will dive a lot more deeper throughout this course. I'm currently on the Bootstrap homepage, which is getbootstrap.com. Inside the nav bar up at the top, we can see we are currently on version four and there is also references to version two and three. With version three still being actively maintained and used in many places. But for this course, we're going to focus on version four. Once you know one major version, however, to be honest, it's not too difficult to use a newer version if you need to work on an older project. Most of the core concepts are the same and the documentation is pretty good too. Also in the navigation is an examples link. If we head over to here, we can see many examples such as an album, pricing, a checkout page, a product page, and a carousel for example, and if we want to take advantage of any of these starter templates, all we need to do is to click on the example. We can then right-click and then go to View Page Source and this will open up in a new tab. We can then grab all the code from here by copying and pasting and take this over to our own project. This is a useful starter for many types of pages and you also free to edit as required. If we go back over to the templates, we can see an example of some of the Bootstrap components. We have a top navigation with our links and also our search box at the top. This is a pre built components using Bootstrap and there is also many of our varieties too. Below this we have a rotating carousel where we can add different images and also text. We can scroll between them using these left and right buttons. On the previous page shows many examples of what Bootstrap can do. I'm going to also use many of these components as we go through the course. So this is a visual look of what Bootstrap can do. But how does Bootstrap work? We begin with regular HTML. So there is no new languages or skills to learn. Most of it is just a case of adding some CSS classes. Here on this slide is just a regular HTML unordered list with some list items inside. Even when using Bootstrap, we start with the same regular HTML. Down at the bottom, we see what is displayed inside the browser by this HTML by default. We have five list items looking pretty plain and with some bullets for each item. Here is the same HTML code. But this time with some Bootstrap classes added, the unordered list has two classes of list-group and list-group-flush along with the list items which have a class of list-group-item. Again, at the bottom we see what the output will be in the browser. This immediate looks better. We have some nice spacing, a line in between, and also the bullets are removed. This is just a starting point though, so if we don't like something about the design, we can still overwrite any parts of it with our own custom styling. Bootstrap just gets us going with some default styles and best practices, which generally look good on all screen sizes. But what are these classes doing exactly? Well, the answer is nothing special at all. Just as when we write a class of ourselves, this just points to some CSS code. At the bottom left of this slide is the Bootstrap CSS or the list-group-item class. It just add some values for the position, the display, adding, background-color and border. Again, we can always overwrite anything which we don't like. We also see the effect which bootstrap has, this is the final version of my project. If we go to right-click and inspect, this will open up the developer tools. We can see when we stretch the browser and also shrink it. That without the box Bootstrap is fully responsive. However, if we go into the head section and remove the link to the Bootstrap CSS. I'm going to delete this element. We can see straight away that Bootstrap is being removed, we lose all of the styling and layout and also all of the responsiveness which comes with Bootstrap and if we reload, we can see that Bootstrap is now being reapplied. So this is what Bootstrap is and why we use it. Next up we're going to get started on our project by choosing your theme.
3. Choose your project theme: This project covers many of the essential features and components which Bootstrap has to offer such as navigation bars, lists, using forms, cards, images, and so much more, all while getting to grips with the Bootstrap grid system and how we can lay out our content to be fully responsive and look great on all screen sizes. So this is the homepage for the final version, which I'm going to build in. Up at the top we also have a pricing page, which will take advantage of Bootstrap cards, along with a contact us page to discover how we can use forms in Bootstrap. This is just my version of the site. You can either follow along with the exact same project which I'm building, which is perfectly fine if you just want to learn what Bootstrap has to offer, or instead, if you have a certain idea to mind or just feeling a little creative, you can completely change the theme and make it your own as we go. All you will need in addition to your ideas, is some images to use. If we scroll down to the section, here now the four images which I'll be using. These have also been provided for use with this course. If choosing your own theme or design, you can also go ahead and find some images which you want to use to replace these four. If we scroll up, we also have some icons in a section and these are provided by the Font Awesome icon library, which we'll be adding soon. You can also easily change these icons to any of these which will suit your projects. You can also change anything else on this website too by using a different component or utility, and we will look at how to do this soon. So once you've chosen your theme and have any images which you would like to use, we can then move on to the next video where we're going to begin to set a Bootstrap in our text editor.
4. Setting up a Bootstrap 4 project: As with any website projects, you will need a text editor to get started. I'm going to be using Visual Studio Code, which is a great editor and the one which I use daily. It's available to download for Mac, Windows, and Linux, and also is free to use too. You can download it from this link here if you need to or you can use any of the alternative if you prefer. To get started including Bootstrap into our project, there is various option we can fuse. We have a CDN, we can self-host files inside of our projects, or we can use a package manager such as yarn or mpm. This is probably the way to go if using a node projects or Ruby on Rails, or something which takes advantage of a package manager. However, this is not going to be something which we'll be covering in this begin course. Instead, we're going to focus on the CDN option, which stands for Content Delivery Network. Bootstrap has us covered for using this really easily. It providers on the Bootstrap website with a link for the JavaScript and the CSS files, which we can easily drop into our project. It has various benefits for our end-user, mostly relating to speed. Since the Bootstrap CDN is located in various datacenters across the world. This means that our files and folders will be served up faster to the end-user because more than likely will be a datacenter somewhere nearby. This also has the benefit that the datacenter may also have a cached version of the files to resulting in an even faster and performance. Multiple datacenters also mean that our files will generally be more available since if a datacenter is down, there will be multiple locations to fall back onto. Content Delivery Providers will also often add some security measures, along with possibly adding some load balancing for high-performance websites too. Another option is to go self hosted. This basically means we download a copy of all of the required Bootstrap JavaScript and CSS files. Then we can host them inside of our own project. We do this just as we would do with any other JavaScript or CSS files, we'll download them, include them inside of our project directory, and then link them inside of our HTML files. This has the benefit of giving us the full control of our files and folders and how we'd like to structure them, where we would like to save them from and save them into our own datacenters or service. This is a really quick and easy way to get started to. Bootstrap also provides this as a simple download use to drop inside of our projects. Another benefit too, is if our application is intended to be used offline, we will still have access to these files when we need them. Back on the Bootstrap homepage, which is get Bootstrapped.com. I'm now going to get started with Bootstrap by clicking on the "Documentation" link, and into navigation and then down to the "Introduction" section. This quickstart involves the CDN links for both the CSS and also the JavaScript files which are required. As an alternative we can also download Bootstrap ourselves and place it into our project too, just like we looked up before. This involves taking the CSS and JavaScript files, placing them into our project folder and then link them using nice style and script tags just as we would do if we would link in it to our own CSS and JavaScript files. There is only one CSS file needed but as you can see, there is three different JavaScript files, which we need to include. Bootstrap uses JavaScript for certain components and if you click on this drop-down, which is just here, we can see exactly which components require these JavaScript files. So this will allow us to leave out certain JavaScript files if we're not using any of these components here, we can now go to include all of the files. Somehow full use of all of the components. We can create our own index page and copy over all of these links or if we scroll down, we can copy the started template from below. So click on this. This is just a basic index page where we have our links to our CSS and also our free final astounded bottom to include our JavaScript. So we'll just copied. I'm now going to go over to the desktop and create a new folder for all projects and of course you can store this anywhere on your system. I'm going to call my project "Bootstrap productivity". Then open it up in Visual Studio Code by dragging over the folder. The first file we need is going to be our index.html. Let's create a new file name this index.html and then we can paste in this data from before. The first thing we want to do is to change the title to be Bootstrap productivity or the title of your choice and then we can open this up inside of the browser. The way we can do this is to either go into our project folder and double click on the index page or in Visual Studio Code, we can right-click on the title and then go to "Copy path" and then paste it as a new tab in the browser. All we have here is a regular HTML heading put our project is now setup and ready to go. In the next video, where we will discover how Bootstrap uses containers and rows.
5. Containers and breakpoints: Before we look at containers and rows, I want to make sure you have a grasp on breakpoints and how they can change the layout and styling for different size devices. This is not only going to be important for learning Bootstrap, but also to understand the containers we're going to look at to. See them in action, we can go over to the bootstrap homepage, which we have open here, and then reduce the browser down to a small width. Simulate how the website would look on a small mobile device. As we see here, the content is generally stacked vertically. Only sections take up the full width for the screen. If we go ahead though and make the browser a little bit wider and so the content changes, just like we have them there, this sudden jump in the content is called a break points. Some of the content which we see is now side-by-side. We have the text on the left-hand side, on the icon on the right, now have more available screen space. If we stretch the browser even further, simulate a desktop view. Every now and again, we'll see a jump in the contents and this breakpoints allows us to apply different styling and layout to different screen devices. Breakpoints are created in CSS using a media query. A media query is basically a way of grouping together CSS rules. Bootstrap will then apply this styling rules when the browser is a certain width. Bootstrap also takes a mobile first approach, meaning it is generally designed for small screen first. We can then change the CSS rules as the device width increases. Bootstrap also has oversizes to which it uses as breakpoints and it these default breakpoints make bootstrap responsive out of the box. As we can see here, Bootstrap will apply CSS rules for different devices as they become a minimum width of 576 pixels, 768, 992 and 1200 pixels and above. We also free to antodies or create our own breakpoints sizes to. Notice so that there is no media query for the device sizes from zero to 576 pixels. This size is not required since this is the Bootstraps default anyway and then we can build upon it with any larger media queries, hence the name mobile first. Understanding these breakpoints will also help us understand that the grid system, which we're going to use, starting with containers. As a requirements when used with grids, we add of a content inside of a container. A container can be any HTML element such as a div or a section, but would name it container class. We can use this container as a main wrapper, so we can control the content inside by adding things such as padding and alignment. When working with Bootstrap version four, there is three different types of containers which we can make use of. We can add a container as a class name to any HTML element such as a surrounding div or a section tag. The first class name, which we're going to look at is simply container, and a container is used to add a fixed width wrapper to our content. For example, if we have a web page which looks like this, we would generally want to split up our webpage into multiple sections, so we may want a header section at the top and then some contents actions just below. We use the container class to add a fixed width proper to all content, just like we see here. On this fixed width is dependent on the current breakpoints, leaving some white space on the left and right-hand side. However, now if we wanted to add a container which is the full width of the page, we would then make use of a class called container-fluid, so this is a container-fluids. Then regardless of the screen size, if this was a mobile device or a desktop or a tablet, the container would always be the full width of the screen, stretching to be a 100 percentage on all green sizes. There is also a third type of container we can use in Bootstrap too, and this is a mixture between these two. We can do this by adding a container class combined with a breakpoint, so we'd have container and then dash, and then we're going to add a breakpoint such as sm or md. For example, with container-md would have a webpage just like before. For the smallest screen size available, which is access, the container would be a 100 percent of the total width. Basically, to begin with, it would look like this one just here, it would be the full width. Then once the screen hit the medium size device breakpoints, it would then change to have some space in on both sides, so it would look like the regular container. This is how containers work in theory, and now we'll take a look at how we can add these to our projects. If we go back into our text editor where we set up our index page, I'm going to delete the level one heading of hello, world and then add some initial content to work with. I'm going to add a section as our wrapper. Inside here we can add a level one heading and I'm going to tell the list to be the content for my final version. The text I'm going to add the all-round productivity solution and, of course, you can change it to suit your particular projects. Then underneath I'm going to add some text of regain control with our effective tools, in a simple to use, customizable UI. Finally, we can finish off this section with a link to a Get started button. If we now give this file a save and go over to the project in the browser, if we reload, we can now see the content we can just add it. The first thing I'm going to do is to add a container to our wrapper section and we can do this by adding a regular class. The class name is a warm which links to our Bootstrap CSS, and this is the class name of container. If we give this file a save and now check this out in the browser by reloading, we still have the text which were added before, but it is difficult to see exactly what effect the container has at the moment, so I'm going to add a temporary background color. We can do this again with a Bootstrap class of bg-dark, and this will give us a dark background color. This dark background gives us the opportunity to see the background container in more detail. We see on the left and right we have this whites pace, so this container is a fixed width. If we shrink the browser down, we'll see that the breakpoints will make the container size change to fit the available space. We can also add the container-fluid and see how this looks in practice too. Reload the browser, and as we've seen before on the whiteboard, this will stretch to the full available width regardless of the screen size. The third type of container which we looked at is a one link to breakpoints. If we have a container-md, this will change our container type on medium devices, which is 768 pixels and above. Sludge shrink the browser to the small size. We can see we have a full width container, and once we get to the medium sized devices, this will let it change to be a regular container. I'm going to reinstate this to be a container-fluid since this is one I'm going to be using on my project but you can choose whichever container to suits your project best. Also, now we understand what the container is doing. I'm also going to change the background colors to be light. All we need to do is to change it to be bg-light, leaving us with a light background color as expected. The next one to discover two more important pieces of the grid, and this is how to use rows and columns.
6. Rows and columns: The next parts of the Bootstrap grid system to get to grids width is using the rows and columns. Both rows and columns are added inside of our containers, which we just looked at and used to layout of a contents. Let's start by taking a look at how we can use rows inside of our containers. In the last video, we looked at the main types of container which we can use. Here we have a container class and then below this, a container fluid nested inside of these containers, we can break up our content into rows. These are content areas which span across the page. We can have as many rows nested inside as we want. We can do this both on the container and also the container dash fluid along with the container using a standard breakpoints. If we take a look at our rows in more detail, over on the right-hand side, we can then break up our rows into columns. This is a way of declaring how wide we want our content to be inside of our row. Bootstrap uses a 12-column grid system, which means the width of the page is split up into 12 sections. If we want the content to spawn the full available width, we declare that we want this to be 12 columns wide. If we wanted to break up our row into two equal sections, the way we would do this if we had a content area on the left. It has a div and then a one on the right. We can set these both to be six columns wide, equaling 12 parts. If we wanted to break a bubble row into three equal parts, we would set this up to be four columns wide. Add a separate row just below this. For example, a div on the left-hand side, one in the center, and then one on the right. We will set this out to be four columns each. Remember early on in the course, we said that Bootstrap by default is mobile first and this also applies to columns too. When dealing with a mobile device which has a narrow screen like this. To start with, columns will always be the full width of the page. They'll always span the full width of the view port. Then after a certain break points, we then need to tell Bootstrap when to break out and then split up into these columns just like this. The way we do this is to apply some Bootstrap classes to your HTML elements, just like we did with the containers. What we're going to do this now by putting this into practice inside of our projects. If we take a look at the container which we created in the last video, we have our content inside, but we don't have any rows or columns to structure these contents. If we remove this from our section, I'm going to now add inside our first row. We can add this as a class to any element, such as a div. We can ask the class of row, and this is going to be a wrapper for our columns to give all of our sections some spacing in-between, so they are not touching each other across the page. Nested inside of this row, we can now create multiple sections taking up parts of our 12 column grid. If we wanted this to be half the width of the page, we could add a class which begins we col, since we are using columns, we then it declared a media query, which you want this to apply to, such as a medium-sized device. Then the number of columns we want the sections take-up. We said before that Bootstrap is designed to be mobile-first, meaning that all of our sections would be the full 12 columns wide by defaults. What we are saying here by adding this class is basically the 1c screen is hidden. A medium-sized device [inaudible] changes to be only six columns wide. Then nested inside, we can add up the contents which we just removed before. Save this, and over to the browser. We now see that our content takes up half of the width of the page. If we shrink this down to be a mobile size, it now becomes the full width of the screen. Back to the medium-sized device. This will now take up six columns of the screen. Generally content begins as the full-width. Since Bootstrap is mobile first, until we sell it otherwise, we could of course change this MD in the class name to be a small or large device if we wanted to switch to six columns at a different time. Now the top here is how we have our section currently. It's aligned to the left. I'm leaving space on the right-hand side for six more columns. But once we wanted this content to remain half the width of the screen, pushed into the middle. There are multiple ways to do this in Bootstrap. Some common ways that you use the CSS Flexbox, or we can use an offset, as we see at the bottom. If you push this over by three columns, it will center the contents. Again, we can fine tune the breakpoint too. Let's head over to the text editor and before this. We can add a offset. Again on medium-sized devices, the much of three columns. This will mean that our content is still taking up half of the space, and the other three columns, a distributed before and after. Save and reload. Now our content is centered on the middle of the page. Again, if we shrink the browser down below medium sized devices, this will always be the full width of the page. There is still some more fine tuning to deal with this section. We will return back to where we will look at utility classes. This is an introduction to using rows and also columns inside of our bootstrap projects. We'll get a lot more practice through out this course. Next up, we're going to move on to taking a look at using lists and list groups.
7. Lists & list-groups: Now we have a better idea of how we can make use of the Bootstrap grid system, we're now going to move on to adding some more content to our projects, and more specifically, we're going to take a look at how we can use lists. Adding a list is just the same as any other regular HTML element, we just add our elements as we would normally do, and then we can improve it by adding some bootstrap classes. I go to the finished version which is open here. This is the area which we added just before, and we're going to make it look a little nicer just like this by adding some bootstrap utilities later on. But now we're going to scroll down to the next section which is this part just here. Over on the left, we're going to have some text and then a list on the right-hand side. We already know how to create this layout, it will be two equal sections, both of them six columns wide and as ever, it's going to be nested inside of a row and a surrounding container. Of course, if you are creating your own version of this, you can add different content or different size sections if you prefer. We're going to push on and create this list group, if you do want to find out more about lists using bootstrap and the different types we can go over to the documentation and this is available inside of the Components. Then if we select the List group, this will give us some examples such as lists with borders, list with different colors, list without borders, you can also get horizontal ones and these are useful for nav-bars. But now I'm going to go to the project and begin by creating a new section just underneath the last one. This section is going to have the class of container, so it's a fixed size. Then inside here I'm going to create a div, which is going to be our row, which is the wrapper for our columns. This is going to have two sections both these with a class which becomes equal to col-MD-6 creativity. They appear side-by-side so again, just to recap, both of these sections would be the full width of the page on a small device. Then when this reaches the medium-sized device, it will then it dropped down to be six columns wide. Starting with the first section, which is the text on the left-hand side. I'm going to add this inside of a p elements with the class of lead. Lead is a bootstrap class which simply makes the paragraph standout undertakes, which I'm going to add is all of these features, included on all plans. This is a pretty simple section. The next one over on the right-hand side of the page is going to be the section for our list. As ever, with bootstrap, we begin by creating our standard HTML markup. Our unordered list and then inside we can create our list items. For the wrapper which is the unordered list, is going to receive a class of list group, which we'll set our unordered list to hover display type of flex, flex-direction to be column. These are stacked vertically and it will also reset any padding and margin, down to our list item. We're going to add a class inside of here for each individual item and this is list-group-item. This is going to add some border and space in for each one of our list items. The first one is going to have the text of hundreds of pre-built templates. Of course, customize this to your needs too and I'm going to copy this and paste this in former times. The second one we'll have the text of calendar and scheduling. The third one is going to be for reminders and alerts. The fourth list item, which I'm going to choose is going to be unlimited lists and to do pages and finally, the last one is going to be the text of odd custom labels to your tasks. Before we go any further, let's save this and check this out over in the browser, gives us a refresh. On the left, we have our text with the class of lead and then the right section, which is our list group. If we right-click and inspect to go into the developer tools, we can check out the classes which had been applied to our list. First of all, let's use inspector to hover over our list, go to select the unordered list with the class of list group. As mentioned before, this ansi display type of flex, it sets the flex-direction and also our padding and margin. If we go down to our list group item, clicking on this will reveal all of the CSS which has been applied it to our list items. We can see the effect if we uncheck any these boxes and we can see the effect which has, as we've also seen before in the bootstrap documentation, the direction of column can also be changed to a row if we want this to be a horizontal menu. Let's go back to our unordered list where we can apply this just after this group. We can also change this to be list group horizontal and this is useful for things such as navigation bars. It looks a little strange because we have some long list items here, but this is how we can update horizontally across the page. If we want to remove the borders and also these rounded corners, we can change this to be listed group flush. Refresh and I'm going to leave this class in place for my project since this is something I personally before. But remember it's up to you how you want to style your project. Next, I'm going to add a tick next to each list item. Just like we see if we go to the final version just on the left-hand side here, we're going to add this into our list items by using a span. The Spanish going to contain a HTML entity code so it's nothing specific to bootstrap, it just regular HTML. Inside of our list item, just before our tax, going to add a span and the HTML entity code is the ampersands, the harsh than a value of one, triple zero four, and then a semicolon. I'm going to grab this and paste it into the rest of our list items. We have the tick next to each one of our list items in the browser. If you want changes to a different icon, or you need to do is to do a search for HTML entity codes and you won't be sure to have options to choose from. To stop also provides us with some background colors which you can choose from to make these list items stand out. For example, we could add a second class to our list item of list-group-item primary. This is one of the economists provided by bootstrap, and this is a blue shade. If we refresh the browser and this is one of the predefined colors set by bootstrap. There is also over close to, such as danger for red, success for green, and do check out the bootstrap documentation for more available colors. Include need light and dark background colors, which looked at earlier when working with containers. I'm now going to remove these colors since this is not needed by projects. We can, of course, include this if you prefer. So I would encourage you to have a play around with these bootstrap classes by adding and removing different ones to see exactly what is possible using bootstrap. You can also check out the bootstrap documentation and see the wide range of all the classes which is available. I would also encourage you to dive into the developer tools when adding and removing classes and then you can see exactly what is going on behind the scenes. With CSS classes have been added or removed to apply the desired and look and feel. Next, we're going to take a look at using utility classes so I'll see you there.
8. Introduction to utilities: We now move on to Bootstrap utilities which basically helps us to quickly add CSS to our elements. Here if we click on the Documentation on Bootstrap Homepage and then go down to the utilities inside the sidebar. This is the section where we'll find all of the utility classes Bootstrap has to offer. These are used to easily add common CSS styling. If we look at the sidebar, we can use them to add things such as borders, flex box, positioning, shadows, spacing, and so much more. Most of these are self-explanatory if you already know some CSS. For example, if we go to the borders, all we need to do is to add some of the Bootstrap classes, such as the border, put a border all round of our elements. We can add borders to a particular side such as the top or bottom. We can remove borders from certain sides and also play around with the colors and the radius too. As you can see, Bootstrap generally provides us with some images. See exactly what these classes are doing. We can also click on the colors, and this is exactly what we looked at in the last video. We used the primary color, and this is also available to use with text too. We also have the light and the dark color which we looked at earlier on for our containers backgrounds. Many of these utilities can be used on different elements too. So we're not restricted to learning different things or different elements. We can also make use of the CSS flexbox in Bootstrap. We can easily add flexbox to our elements with the class name of the flex, which stands for display type of flexbox. Scrolling down, we can set the directions. We have the usual columns and rows as well as the reverse. We can also justify our content. Align our items, and access any of the flex box properties which we have with regular CSS, or by adding a class name to all elements. We also have sizing if we click on this, where we can set the height and the width of our elements. So for example, if we wanted our element to be 50 percent wide, would use the class of W-50. We can replace the W with a H for height, and this will set the height of the element to be 50 percent too. We also have other options such as also 100 percent and 25 percent, and we'll make use of more of these throughout this course. As you can see, most of these names relate to the CSS they apply and are pretty self-explanatory, such as text left and border top. But there is one which I want to show you in more detail, and this is the space and utility. Space and utilities are margin and padding, and we need to build a class name in three or four parts. So let's take a look at how we can do this now. We can apply spacing utilities using Bootstrap by building opaque class name. We do this with up to four different properties which we can combine to make opaque class names added to our elements. So the first thing we need to do is decide if we want to add spacing by a margin or padding. We do this by adding a M for margin or P at the start of our class name. The next thing we need to do is to decide which side of the element we want to apply the space into. We can apply it to the top of the element, the bottom, the left, the right, as we can see here. Or we also have the x on the y-axis. If we apply it to the x, this will apply the spacing on both the left on the right-hand side. The y-axis is vertical, so we will apply this space in it to the top and bottom. Remember, Bootstrap is built and designed to be mobile first. So any margin or padding which we add by default, will automatically be applied to the extra small devices under both. We can then add in a optional break point such as small, medium, large, or extra large, where we want to change the setting for the margin or padding. Default part is to the add a size of 0, 1, 2, 3, 4 or 5 or auto. Zero will reset any margin and padding and remove this from our elements. We have the number 3, which is in the middle. This will apply a spacing of one RAM. If we go lower than this, this is half a RAM, and then number 1 applies a quarter of our RAM. The value of four is equal to 1.5 RAMs, and then the value of five is equal to three RAM. We also have the option of auto 2. Just like regular CSS, this is way where we can apply a margin zero auto for example, and we can make use of this. So for the first example up at the top here we have a pretty standard section with a div nested inside. The orange part of the top represents some margin. So as we see here, if we wanted to add some margin to the top row div, we could do this by building opaque class. We can start by selecting M because we want the margin to apply. After this, we select outside. So one is to apply it to the top of our elements, and then we can choose the optional breakpoints, or we can leave this blank if you want this to apply to all screen sizes. After this, we then select the spacing we want at the end. If we want one RAM, we will go for a value of three. For the next example, we have a same div, I'm going to apply some margin to the top and the bottom too. Just like before, this is margin, so we apply the value of M. We want this to apply to both the top and the bottom. So I can make use of the y-axis inside here. Again, we're not going to use any specific breakpoints. So instead we can add a value, you stuff to this. For the further example, we have some padding which is represented by the green. Now since padding is added to the inside of the elements, we would add this to the main wrapper rather than the div, because this would then apply the inside of our div elements. So for this example, we will choose P. Since we're now dealing with padding. We will then add this one the right-hand side to cover us here. Then any value which you want to choose. Let's go for five in this case. Just below this, we have some padding, but we also want to apply this to the left and right-hand side. So rather than writing out two separate rules, we can make use of the padding on the x-axis. So this example would be padding on the x. Again, we can add any value inside here. We could also change this to include a breakpoints. So if we wanted the padding to only apply on medium-sized devices and above, we could do it by adding a optional third argument. So it can add padding on the x-axis and then dash at a break point of MD, and then the value of four. Down at the bottom we have our fourth example, which is to center and elements in the middle of our div. The way we can do this is by taking advantage of the auto property, just like we would for example, in regular CSS. If we apply margin zero auto. Way we can do this, we can center this in the middle of the x-axis with the value of M and then x. Then set the value to be auto. Just like with regular CSS when using the auto property, we do need to be aware that the display type must be set to block, and we must have a width already set, otherwise this will not apply. So this is the theory behind using name-space and utilities. Next, let's go over to our project and put this into practice.
9. Utilities in practice: Back over to our project, the first thing I'm going to do in the first section at the top is to center all of this text in the middle. We can do this with a simple class. If we go back to our first section, inside of the wrapper, all we need to do here is add the class all text-center. This will push all of the text to the center of our section. Also, if you remember from earlier, we aligned the section in the middle by providing a offset of three columns on the left-hand side. This is fine and perfectly okay to use, but I'm now going to show you an alternative, using Flexbox. If we remove the offset from earlier, this means our section is still the same, six columns wide, but we have this now over on the left-hand side. If we stretch this down to the smaller size, this of course will be the full width on smaller devices or medium. We're going to push this back into the center by adding the Flexbox to a container. The container is the row. We can set the display type to be flex and also add the property of justify content in the center. Save this, and as expected, we don't see any change on the small screen. But if we stretch this out to the medium sized devices, this is now in the center of our section to give it some spacing. We can also add some margin and padding, which we just looked at. Starting with the margin, we build this up with m for margin, the y-axis only disappears on the top and bottom and the value of five, over to the browser. This will apply on all screen sizes. Once we get to the larger screen view, just like here, mostly we're going to add some padding to make this a little bit larger. This is going to apply only on the larger breakpoints on the y-axis. So lg, the value of five. Now down to our text, which is the p element. We're going to use the class of lead which you've already looked at. This will make the paragraph text standout where you just need font size and also the font weight. Bootstrap also has plenty of utility classes for buttons. We can add this to our link. The base class which we added to all buttons is btn. Then we can define what type of button we want to use, along with the color. The color is set with the color utilities which we've looked at before, such as primary, secondary, danger and success. I'm going to use the class of info, which is for a blue color. We can apply this color as a solid background color or a button outline. First of all, we have the solid color, which is btn, followed by the color name of info, leaving us with the solid background color. If we wanted this just to be the color on the outline, all need to do is to change this to be btn outline, followed by the color just afterwards. We can then link these button to our pricing page, which we we'll create very soon. Scrolling down to our next section. We can also add some utilities to this section too. That's enough with the container, we can add the margin on the top and bottom as a value of four and then a padding value of two. This will give our section with the list a little bit of spacing. The next thing I want to do is to align these texts vertically inside of this section. We can do this by adding the CSS Flexbox, the container. We can add the display type of flex, just like we did above. Then the CSS property of align-item-center, and this should now push our text into the middle of the div. Check this, also looks okay on the small screen. Now spacing has now been applied. This is just a first look at using the Bootstrap utilities and how we can use them to make our site look really good and also be fully responsive. We'll also make use of plenty more of the bootstrap utilities as we progress with our project.
10. Adding icons with Fontawesome: At some point when building a project, a website, or application, you may feel the need to add some icons to make it more visually appealing. In the past, I've built my own icons to projects, but I'm not a designer. So for me and it may be much more convenient to reach out for a third party library to provide these icons for us to use. Bootstrap doesn't have its own built-in font icon library in version 4. I'm going to show you now how we can integrate our project with Font Awesome. For my project, I'm going to be using Font Awesome, which is available from fontawesome.com. This has thousands of available icons for us to use and is also a free plan too, which I'm going to use. We can get started by clicking on "Start for free." You do need an account to get started, so you'll need to add in your e-mail address inside of this box and then click on "Create" on the right-hand side. I am already registered, so I'm not going to go through the process. What all you need to do is to add your e-mail and you will also get an e-mail confirmation. After confirming this e-mail and setting up your account, you will then be taken to a page which looks like this. Once set up, this will give us access to a script which we can copy and add this into our own project. Let's grab this and go to our index.html. Looking at this at the top of the page in the head section, so I'm just going to add this above the Bootstrap CSS and this is all the setup which we need to do. Now we include icons into our project, we add this in as a HTML element. We go back to the Font Awesome website and then click on "Icons" in the navigation. We can check out some of the available icons and also click on them to find out how to include them. With the free plans, there is the solid and the regular versions of each icon along with the HTML code which we need to include in our projects. If we see a font which we like, all we need to do is to copy the HTML and then paste this into our index page. All we have here is AI element with a class name. First of all, we have FAR, which is for Font Awesome Regular. If we choose this solid option, this will be FAS followed by our icon name, which is currently address-book. This is the name which we need to change for each icon. Now we know how to use this, I'm going to go to our project and get started. This is the section which I'm going to be creating now using Font Awesome. Of course, you can change these icons to suit your particular theme. We're going to get started with a container and then set up our rows and columns. At the very bottom just above our JavaScript, let's create our section. We're going to have a container fluid. We're going to also set the text to be in the center. If we say light background color with bg-light and also set some margin on the top and bottom, and also some podium. Let's begin with a level three heading, which is going to be the text of Power up with a paid plan. The next step is to create a div with the class row, which is going to be the container for our sections, also some margin on the top and bottom with a value of four. Then we can go ahead and create our individual sections. On my finished version, I'm going to have five sections side by side. Rather than including our sections with the number of columns, we can also simply add the class of col. This is a simple alternative which we're going to use when we want all of the sections to be equal on all size devices. Inside here, we can add the i element which we just seen on Font Awesome. We can begin with the class name to make the solid of FAS. The icon which I'm going to use to begin is fa_users. Another class which is available using Font Awesome is the sizing. We can access the sizing with fa and then multiply this by five with 5x. This is equal to 5m and this also size is available up to 10x. Each one of my sections also has some texts just below. The first one is Multiple users, which I'm going to add in a p element. Then some space in or some padding on the top and bottom of our icon to separate this from our text. Now this first section is completed. Let's go to the browser and reload. Now since we only have one col section, this is now placed in the center. When we add more of the sections, they will all take up the same available space. Let's do this. Now we have four more sections to add in. I'm going to copy this col section, paste this just below. The icon I'm going to use is palette with the text of advanced theming. This should now take up the same amount of space as the first one. Now we just need to add three more. Paste another one in. The third icon is going to be for the globe and the text which is just below is going to be multi-language support. The next icon is going to be for the sync. This is S-Y-N-C and the text of sync across all devices. Then finally, the last one is going to be for customisable templates. This one is going to have the icon of file Alt. Let's check this out in the browser. We have our five equal columns. If we shrink this down, equal sections will try to keep an equal spacing on all screen devices, unless there isn't enough screen space available where they will drop onto a new line. You may also notice a difference in the icon color for my final version and this is something which we can set in our own style sheet. Just like with any finales in Bootstrap, we can apply our own style sheet to override any of the classes. In our project, I'm going to create a new file called as the styles.css. Then in our index page, we can link this in the head section. Add our link below the Bootstrap CSS. The file path is simply styles.css. We can then open this up. Then all we need to do is to target our icons which is the i element, and then set the color. The color I'm going to choose is 40b7ad giving us the green color just like the final version. Adding icons for a project or application can make a real big impact visually, and we don't need to be a designer or spend lots of money to make them look good either. Next up in the next video, we're going to continue with our project by looking at adding images and image utilities.
11. Working with images: If you've understood everything we've done so far during this course, this video shouldn't shock you or cause you any problems. We're going to create a new section but this time focused on adding images. Just like with the rest of the bootstrap sections we've looked at. We're going to begin by adding in our HTML and then we can integrate bootstrap by adding some CSS classes. On Bootstrap we may also add some JavaScript in the background too. Before we begins to look at images we need to add some small project to work with. Provided with this course is a images folder, which you are free to use. Or you can download your own if you prefer. These images folder is on my desktop and I want to drag this into our project folder. If we head over to the finished version and take a look at this. This is the icon section that we just created. Just below this, this is the section which we are going to create now. All of these four images are provided with the course along with a actual on-call sample.jpg. This will not be included in the final project but instead to try out some new classes which we can use on images and we can take a look at this now. So to the project, first of all in the cyber we have our four images and then we have our sample.jpg. We can check this out in our index.html. So let's include this anywhere at the bottom of the page. We can include a standard HTML tag, so this is stored in the Images folder and then the sample.jpg. If we now go to our project, reload, this is the sample image. If we shrink the browser down to a smaller size, you will notice that the image disappears off the edge of the browser. This is generally not something which we want to see. We want the image to be a 100 percent of the available width. We can do this by adding a bootstrap class called image fluid, which is going to help us out. So lets add this to our image elements. So img-fluids and now when we reload the browser, the image should now be reduced, fit the available screen size. We no longer see the image disappearing off the edge of the browser and there's also a few more classes I want to show you. Many of them are not even specific to images with the work nicely with images anyway, such as setting the width of an element as a percentage and this is something which we looked at before in the utilities. So we can add the image width, width w and then dash and as a percentage and we want to try out number 25. Reload the browser and this is now 25 percent wide. We can also change this to overvalue such as 50,75,100, and auto. Along with changing the w to be a h2 and this will affect the height of an element. Next, I'm going to copy and paste this line and then take a look at the rounded class. This rounded class will apply rounded corners to our image and let's just make this a little bit bigger, so we can see more clearly. This applies the radius on all four sides. If we wanted to apply this only to the top, right, bottom, or left. We could also change our class to be rounded top, rounded right, and so on. If we wanted the corners to be fully rounded, more like a circle, we could change this to be rounded, -circle. This will be more like a circle if the image has the same width and height but because the image is wider, it will appear to be more stretched. Another option we have which is similar to the circle is the pill. This will apply rounded corners and also leave a flat top and bottom. So let's take a look at this in action, refresh and this gives us the shape of a pill. Another image utility which we can use is the image thumbnail. So this is img-thumbnail and this will apply a border surrounding the image. Lets make this a little bit bigger it can be difficult to see. If we zoom in, we can see that the image has a border surrounding all four sides along with a rounded corner. We can also use float with images too and this also applies to other elements as well. So for example, if we said float-right. This image will now flow to the right of the rest of the content. So this is just a taste of what we can do with images. As mentioned earlier, some of these classes, along with others, apply to lots of different elements, so we're not restricted to just using them with images. Now let's put this into practice inside of our projects by building a new section. Let's remove these sample images and as ever we are going to begin with a section which is going to have a class. This time I'm just going to use the container class, so it's not the fluid size and then also align the text into the center. Also, like with the other sections, feel free to make this you own and include any different images or text which you prefer. Nested inside we have our row. This row is going to be split up into two equal sections on medium devices. Let's go ahead and add our class names of col-md-6 and we can duplicate this inside of our first row. Let's get to work with the first section. So this will be on the left-hand side on medium devices and above. A level two heading, which is for the text of multi-view calendar. So this is going to be the heading for our first image of on the finished site. This is the text which you see here, followed by AP elements and then our image. This is also the same on the wider screen sizes. But instead we have these side-by-side. So after our heading, we can add a p element with a class which we used before of lead. This will make our text standout and a text of never miss a date again. At the bottom, we can add our image, which is stored in images folder. On the first one I'm going to use is the calendar.png , the old text of calendar icon and then the class name is going to be w 50, to make 50 percent wide. So this is our first section, so I'm going to copy our heading, our paragraph and also our image and then go down to our second section, at this end. The text in this one is flexible to do lists and I'll just make this a capital, the lead tag is going to be: clear tasks like a pro. The image, this time is going to be for our list and don't forget to change the old text too. So before we go any further with our row, let's check everything looks okay and this is our first row, now complete. Back over to our text editor, we are going to create a second row. Let's start by grabbing our first one, since the structure will be the same. We can paste this in, still within our section and just like before, all we need to do is to change our text and the image. So the text is collaborate and then work with all the team members. The image is for the chat and also change the old text too, the classes can stay the same and the for phone, level two heading is note taking. The lead text is take notes on the go and the image is note along with the old texts too. So this all looks good, now we have our two sections inside of our rows. Let's go to the browser and see how this is looking. So this is looking good on the larger screens. Let's shrink this down. This is looking fine, maybe just some padding on the top and bottom of our sections. We can do this in our surrounding divs just after call-md-6 pudding y. Let's go for a value of four and we can make this equal on all four of our sections. pudding y4 and also the last one too, refresh and this is our images now added to our project. Great so now you know how to apply styling to images with Bootstrap. One of the great things too, as well as many of the classes which we've just learned will also apply to other elements too. We are not restricted to only use these with images. Finally, don't feel as though you need to memorize all of these classes as we go along. If you gets stuck, all you need to do is to use the Bootstrap documentation as a reference.
12. Nested rows and blockquotes: When working with our projects so far we have looked at a structure just like this. We've added rows inside of our projects. Then we have divided up our rows into numbers of columns. For example, we've had a six parts section on the left and also six columns on the right. We divide up our row into two equal parts. What if we had a situation where we wanted to also divide up one of these sections? If we had a row just like this. Then our six column section on the left-hand side. We sometimes have a case where we want to divide this section up and also make use of our grid system inside here. The first four would mainly be nearly exactly the same as before. We could add six columns on the right and then six columns on the left inside of a div. Well, this is not the way which we should do this in Bootstrap. This is because Bootstrap requires our columns to only be a direct child of a row. The correct way to approach this would be to create a new nested row inside of our columns. For example, we would have it like this. Where we will create a new div or new elements with the class of row. Then this will allow us to make use of the 12-column grid system once again. We can now divide this row up into as many sections as we would like. If we wanted to apply three different sections to our row, we could apply our columns. This could be four part, four parts in the center, and then four parts on the right-hand side. This is the correct way to approach nested rows and columns inside of Bootstrap. On to the finished version, we can make use of this nested row setup here at the very bottom. I have restricted this outer section to be only eight columns wide rather than the full width of 12 columns. Since we're using columns to achieve this, we can't directly nest these testimonials inside as equal column spaces. But instead, it's just as we discovered before, we can create a second row nested inside and then we have access to our full 12-column grid system, once again inside of this row. Even though this outer wrapper is eight columns wide, the inner nested row will still have the full 12 columns available. Let's go on to the project and create this at the very bottom of our index page. So just before our JavaScript, we create our section. I'm going to give this a container-fluid, some margin on the top and bottom, some padding on the top and bottom too. I need a light background color. The next step is to add a row inside here. This is going to be our initial row, which is going to contain the initial div, which is eight columns wide. This is going to be on the medium-sized devices. So we use the class of col-md-8 to keep this in the center. We can also provide a offset on medium devices too, on the value of 2. Finally, the text-center, to align our text in the middle of our section. All this is going to be inside here is a level three heading and this is going to have the class of py dash 3, to give you some spacing on the top and bottom. The text, as we can see if we go to the final version, is going to be what our users have to say. Let's add this into our heading, save this, and check this out in the browser. At the bottom of our page, a lower can't currently see this because of the background. This section is eight columns wide. Now to create our two sections inside, we need to create a nested row. Let's go back over to our project. We're going to add this just after our level three heading. So a div with the class of row. Inside of here we can access the full 12-column grid system. However let's keep this more narrow. I'm going to create two sections, which are five columns each. We can do this and then offset the rest of the content with the flexbox. So first of all, we can add a div and we can add a class of simply col-5. This will set the section to be always five columns wide regardless of the breakpoints. I'm going to duplicate this to add our two sections inside of our nested row and then we can space these, we justify content around. This will add equal spacing around both of our sections. Since we have a light gray background color, I'm also going to offset these with a different color. We can use bg white or our two nested sections, and also some padding all around, which is going to be a value of 4. I'm going to copy these two and also add these to our second section. Inside of the first section on the left-hand side, we're going to add some reviews or some quotes. Just like we can see here, we're going to add some sample text and then we can add a user who quoted it just below. We can do this with a blockquote, which is a standard HTML element. But we can also add a bootstrap class of blockquote inside of here too. Nested inside as a p element. I'm also going to add some Lorem Ipsum text is by typing lorem and then hit Tab. We can do this in Visual Studio Code. If you don't have this available, simply type out any sample text or a quote of your choice. Still when we use blockquote, we can also add a footer, which is going to be the bottom of our quote section and Bootstrap also has a class available for this, which is simply blockquote-footer. This is going to be the source of our quotes. I'm going to say "Free plan user" and then we can use the site's elements, which is HTML, to quote a user. I'm going to say "Captain anonymous". Let's go over to the browser and check this out. There we go. There's our two nested sections inside of our row. We just need to duplicate this for the right-hand side. So we already have our surrounding div for this section. Let's grab the blockquote and make use of these same classes. I'm just going to change this to be a Pro plan user. Within this footer section, we've got a new class of blockquote footer. This is generally used for identifying the source of the quote and often combined with the site elements, which is used as a wrapper for the sources name. Now let's save this and see how this looks. We now have our two quotes, side-by-side. This is how we can nest rows using Bootstrap. We can create as many columns or as many nested rows as we would like. But always remember that when creating new columns, we always need a parent rapper as a row. Next we're going to be focusing on how to create a responsive navigation, which we are going to include at the top of our project.
13. Navbars and toggles: We're now going to concentrate on one of the most important factors on any web sites, and this is the navigation. To make our site full responsive when dealing with navigations, we need a way to ensure that our navigation links not only look good, books are also fully accessible and responsive too. This what we're going to focus on in this video, let's dive in and take a look. When dealing with navigations on general websites, a common approach which you may see would be something like this. On the left here we have a typical desktop view where we'd have a navigation, a logo on one side and then our navigation links on the other. When dealing with its smaller mobile size screens, we often need a different approach because there's less screen space available. What we'll commonly see up at the top is a navigation, where we have a button which we'll provide some links when we click on it, is often the same links that we have on the full desktop view, but just hidden until we click on the bottom. How do we approach this using Bootstrap? Well, the way this works is we basically create two sections. We have one section for all list items, and then we have a second section for our button. We then create a link between these via an ID, and we'll take a look at how to do this next. We provide this link with our ID, behind the scenes, Bootstrap will also handle the JavaScript for this all to work separate points. Let's now head over to our project where we can now apply our navigation. Making good progress with our projects and now we're going to go back up to the top of our project and creates the navigation. If you go to the final version, we're going to create something which looks like this. We'll have the logo on the left hand side, we'll also have our free links on the right-hand side for navigation. If we scroll down to a small screen, we get a drop-down button, which when clicked on to reveal our links on the smaller mobile and tablet sizes, so it looks much better on smaller screens. Let's now create SNR project of the top of our body section. Back to the index page, scroll up to our body. Let's look at the open inside, which is just here. We'll begin with a nav bar wrapper, which is going to have a site title and a logo. I'm going to use the nav element to do this. This trap also provides us with some classes we can use for navigation, the first one is simply navbar, which we're going to add flexbox, I'm positioning along with some padding. Next I'm going to add navbar, expands, - LG. This which is the content BD full-width view on our large screens. Of course, we can change the break point to be anything else such as MD If we prefer and then finally add some chlorine by attend the navbar lights. Nested inside of our nav elements, we're going to add a link, which is for our site title, or we can have a logo inside of the if you prefer. I'm going to begin with a class name. The class which we need to add is navbar brand, which you're going to add our CSS for spacing and size in our site title. We can add the name of bootstrap productivity or the name of your choice. Now under our site title, we can add our two sections we mentioned before, which are the links and also the button, the togglese links open and closed. Let's start with our basic button, which is going to have a type of button. This is going to control our links, which we can add inside of this div. Let's just create an unordered list for now. Then next we can tell bootstrap that this button is to control these list items by first adding a ID. Let's add the ID to all links. Inside of here I'm going to add the ID as navbar-nav, and then we can pass this to the button as a data target attributes. Inside the opening tag, we add the data targets and set this equal to our ID, so we use this just like a CSS selector. We use the hash since this is a ID and then the ID name of navbar-nav. This button now controls our list items, and we can tell it to show and hide the content by setting data-toggle, collapse. Again inside of the button, we setup our data-toggle and set this equal to collapse. With this now linked up, the next step is basically to add the required Bootstrap classes and also some accessibility attributes to finish things off. Starting with the button, we can also add these onto the online so it's more readable. The next attribute is going to be for our class, and the class name is going to be navbar-toggle, which is going to add some padding, sizing and also a border. Next time we're going to add some attributes to make our site more accessible. This is for people using screen readers or with disabilities. Make our site as accessible as possible. The first attribute we're going to add is the aria controls, and set this equal to our ID, which is navbar-nav. Making sure that this is the same name we give to the ID just below, so it matches our links. We need to understand where button is targeting a collapsible element, i.e our list. Next up we have aria expanded. I will set this to be a value of false. This will tell screen readers if our list is expanded or collapsed at any given time, and we set this to be false if the collapsible element is going to be closed by default, which is because our links are not going to be expanded until a user clicks on this button. The last one we need to add is the aria label, which is going to be set to toggle navigation. This label can be any name of our choice, and this is some text provides the user with a recognizable name. The final piece of this button is to add the three lines. All these free icons which you see on the small screen view. These can be added using a span elements with a Bootstrap class. Let's add these span elements in between the button opening and closing tag. We don't need to add any content between our span. All we need to do is to add the class of navbar toggler icon. Now if we give this a save and go over to the browser to all projects, it reloads, with our button and also our site title. Next we need to add in our links. Let's head back over to our navigation and look for our unordered list, where we're going to begin by adding a class to this wrapper. Class name is going to be navbar-nav, which is going to control any margins and pardon, and also remove the default list [inaudible]. This also makes use of the flexbox too. Next, we can create our list items and again, these are going to have a Bootstrap class and this is going to be nav item with an element nested inside. This also has a class too, the class name for the links is going to be nav link, which is going to remove any default link chlorine, and also sets any required margin and padding. This is just going to link to our index page, so we can add in the index.html. Since this is going to be the home link, let's grab this list item, since we are going to include this two more times. The second link is going to be for pricing. We haven't created this page yet. For this, you're going to link to the pricing.html. Just blow this, our third and final link is going to be for contractors. Again, we've not created a contact.html page, but we're going to be creating this very soon. Let's save this file now and check this out in the browser, hit reload. On a small screen we see all of the content. We see both the button and also the links. If we go to the large screen view button is being removed, and we only see the links. We can fix this and hide these links on the smallest screen view by adding need classes of collapse and that navbar collapse to the surrounding div. Back to our navigation, we need to look for our div which surrounds our links with the idea of navbar-nav, and we need to add a class of collapse and also navbar-collapse too. Let's head over to the browser and see if this fixes our problem. This is looking better on small screens. If we expand this, we now see the button has been removed and the links appear. We can try to expand this by clicking on the button, and we get our links on the small screen view. The final thing to do is to move our links over to the right-hand side on the large screen view. Rather than being against the site title, we want them over on the right-hand side. We can easily do this with the CSS flex box by adding the class of justifying content end in the same deal as before, which surrounds the links. We can add this into here. It's now pushes our links over to the right-hand side of the navigation. Even you would a fully responsive and accessible drop down navigation menu.
14. Cards, card groups and decks: We are now we're going to take a look at using cards in Bootstrap, and you can think of a card as a container for some information. A typical use case could be a product listing on an e-commerce store just like we see here. We can start our public listing with a class of code wrapper and also make use of many of the classes, which Bootstrap provides to layout our content. Inside of our wrapper, we could have a card image and then below this we can also have a card body to wrap all of the rest of the content. Depending on the use case to the card body, can also contain a header and a footer section. All of the rest of the information for our product such as a card title, a subtitle and also the context for our description. Along with this, we also free to provide any of the HTML markup, which you may need, such as the "buy it now" button. We can make this look and feel exactly how we want it to. Now we're going to go over to our project and apply this card structure to our product pricing page. Mentioned for when creating our navigation links, now we need to create a Pricing and Contact Us page. We're going to get to work now on the pricing page and introduced Bootstrap cards. This is what the final pricing page is going to look like. We're going to make use of the cards to create this layout, which is going to contain our free pricing sections using some of the classes which we just looked up before. If you also want to find out more about Bootstrap cards, we can head over to the documentation, and we can find this located in the components link. Of course, feel free to take a look through these card documentation which I'm going to jump into the project and get to work with these pricing sections. Let's start by creating our new file for our pricing page inside the roots of our directory. We want to call this pricing HTML, since this is a HTML file. Once again, we need to bring over all of the boost up links. We're also going to be using the same header to be consistent too. I'm going to get a head start by going to the index page, selecting all grabbing it and then pasting this into our pricing page. Just above our JavaScript, we can remove the unrequired sections, so we don't need the bottom section with the nested row. We don't need the four images so we can remove these, we don't need the section with the icons, this can also go, and finally, we don't need the list group items. Let's give this file a save, and if we go over to the browser, let's click on the pricing link, and we're left with the same navigation and top header section. Next thing to do is to change the site title, open the head. On the end of this I'm going to add pricing, since this is the pricing page. Now let's scroll down and we can create our new section for all cards. At the bottom of the body section, just above our JavaScript, we can add our new section. This is going to have the class of container, so it's a fixed size nested inside here. I'm going to create a div, which is going to be a wrapper for the free card sections. This is going to have a class which is going to be equal to card-deck. We'll take a look at this in more detail when we have some cards to work with. For now though we can add a margin value of three on the top and bottom and also align the text into the center. Now we can go ahead and create our first card. This is going to have a div as a wrapper with the class of card. The class of card will set the position, the display type to be flax, the word drop on the general colors and borders. Then inside here I'm going to create some new sections. We're going to create the card header and also the card body. Let's start with the header section at the top, this is the card header. Inside here this is going to have a level four heading, with the price of the plan. The level four heading and the first price is going to be free, this also takes in a Bootstrap class of font-weight normal. Which other sounds, we'll set the phones to have a weight of normal, and this is nested inside of our header section. This card header class is going to add a radius to the top of the card, some spacing and also all colors. Just after this header section, we can create our body section. As expected, this is going to have the class of card body which is going to set the flexbox grow and shrink values along with spacing and sizing. Inside here our level two heading, which is going to have the price of the plan. A class of card title, which will add some margins to the box of our title. This is a free plan, so the price is going to be zero followed by the small tags where we're going to have the forward slash and then month. This also has a class which is provided by Bootstrap and this is going to be text muted. If we say this, we can see exactly what this class is doing. Let's reload our pricing page, and this makes it smaller and a different color. After the level two heading, we can add the card text inside of a p elements. This class of card text when you use a Bootstrap is used for the bulk of our texts in the card, such as a product description, and our description is going to be "try it out for free-forever". Below this we can create our own order list. The unordered list is going to have some features about this pricing plan. What exactly is included on the unordered list has a Bootstrap class of list on styles. This will remove all the style inflow lists. We can add some margin on the top and bottom as a value of four and then create our list items inside. The first feature for the free plan, I'm going to add one terabyte of storage, and we can duplicate this five more times, decrease more features. It's x for the second one is going to be hundreds of pre-built themes. As I will go ahead and add any text you would like inside of this to make it your own. I'm going to add next the calendar and scheduling. If all point is going to be reminders and alerts, second to last is going to be unlimited list and pages. Then finally, custom labels. Remember we also said before that when using a card, we're free to add any other custom HTML which we like, we're not restricted to use the card classes and the layout which Bootstrap suggests. On the unordered list, we can also add things such as buttons, and this is going to be a link to get started. This button is also going to have the type of button. The base puts in class of btn, then btn block, which will make this the full width of the page. We can see this if we save this and refresh, this will make the button stretch the full width full of card. We can see this more clear if we add a button outline. I'm going to add this as the button outline info, and there we go. Since Bootstrap is mobile first, this is the full width of the page, since we only have one card. But now I'm going to go ahead and repeat this for card number 2, and 3 and we can see what effect this will have. Let's grab our card, the surrounding div. We can copy this, making sure we keep the surrounding div with the class of card deck. We can paste this in it two more times. For the middle one, I am going to change this to be the Pro plan rather than free. We can change it to be pro. You pricing can be $10 per month. The card text upgrades access Pro features. I'm not going to go ahead and change all of these list items because it will make for a pretty boring video. But of course, go ahead and change these if you would like to see your projects. All I'm going to do next is to change the button from "Get Started" to "Upgrade". The third one, this can be for the business. We can change the price once more, let's go for 29, the text, unlimited users, and extra storage, and then change the button at the end to one small b upgrade. Since these are both paid plans on the second and third one, I'm also going to change the button to be slightly different. Rather than using the button outline, I'm going to change this to be simply button info. Here was a solid background color. This is going to be on the last one, and also the one in the middle. Reload and now have our free cards side-by-side on the larger view. If we scale this down to a mobile device, these all now stacked vertically. You'll notice on the desktop view, these cards have some space in between them. This is because of the card wrapper. Early we added this card wrapper and the class of card-deck. If we take a look at this, this class provides the margin around the cards which we see. If we wanted to remove this and have no space in between them, we could change this to be card group instead, and go to the browser. This will now remove all of the space in between our cards, moving them closer together. This is another option, but I'm going to reinstate the card deck of the space in between these, and then to finish off this section and also this page, I'm going to add a header just above this card section. Back to all card container, we need to add this just above our container. We'll just add it. Let's add a div, the padding class with a value of 3 to add some spacing all rounds, and also the class of tech center. Inside of this div, we can add a level 2 heading of pricing, and also some texts just below of free to use for most users or upgrade your plan to access pro features. We can also make this stand out by adding any class of lead to our text, which we've already looked at previously in this project. Over to our pricing page, [inaudible] very nice-looking pricing section for our projects. This is how we can use Bootstrap cards to quickly lay out our contents. The real useful for use cases just like this. [inaudible] things such as product listings like we looked at earlier. This is it now for cards and I'll see you in the next video where we'll take a look at using the Bootstrap forms.
15. Forms and inputs: Forms and inputs are something which we use all the time when visiting websites or using apps. They use to capture information or data such as our name, our email, passwords, or even a message. That this is what we are going to be looking at in this video. We are now finished with our pricing page, we now have this Contact Us link to now link to a new page. We're going to be building something which looks like this. If we go to the final version, it's going to share the same navigation and head section. Then we're going to create a form just below using bootstrap. This is going to be created using HTML markup and a sever, we are going to be using some Bootstrap classes to give us a nice space timing to work with. After the project we can create a new file in the sidebar. Once again, this is going to be in the roots of our projects. It's the contact of our HTML. Since we'll be sharing the same navigation and also the header section, I'm going to copy the pricing.HTML file. Let's copy all of this, and then paste this into our contacts. Of course we don't need these sections that we just created in the last video. We don't need the cards section. I'm scrolling up even further. We also don't need the pricing section either. All we have is the JavaScript down at the bottom. Then I header section up at the top. We can change the page title and we'll say contact us. Now let's get to work on our form. Just below our header section. Above the JavaScript we want to create a form elements. This form element is going to have a Bootstrap class. Under this level, we can go on to the Bootstrap documentation. This is inside of the components. Then we'll go down to the form section to get some more information. There's lots of different types of forms we can use, all relative to the inputs which we're using them on. But most of them generally have a form group as a wrapper. Then inside we place our labels and inputs, along with some different options for laying out our forms, including a in line layout too. Let go back over to our projects. We can begin inside of our form. Let's add a class of container to our form and then give it some margin on the top with a value of four. Then inside here we're going to wrap each label and inputs inside of a div. This div is going to have the bootstrap class of form-group. This classic form group is going to give us the required space in between each of our inputs. Then inside we are going to start by adding a label, which is going to be for our name to detect inside of your name. After this but still when inside of our form group, we can add our first input. Again, this is just regular HTML with some Bootstrap classes. This is going to have the input type of text. The bootstrap class of form control, which is going to control the size in the padding, the colors on the border. Along with a nice transition in and out. Let me click on the inputs. After this, we're going to create a second form group. This one is going to be pretty similar. Well this one is going to be for our email. The surrounding class or form group, I will label nest it inside. This is the label for the email and the text of email address. Next up the input with the type of email. Just as both are going to be add to the class of form control to the input element, the id of emails. This matches up with our label. This is so, when the user clicks on the text of the email address, the input will become active so they can type into it. We also need to do this just above. The id of name so this matches up with our Name Label. After this, we can add the placeholder text of enter your email to reply to. Before we go any further, let's check this is working okay in the browser. Let's check our links are there. We have our link in the pricing page to the contacts.html. Let's check out the index page and open the top navigation. We have our contact link working too. To the browser, and into the project. Click on the contact button. We now have our name and also our address. You can see the transition effect when this is clicked on. We can also add some placeholder text to our name too. Let's go back to our contact form. We can add this into our input. Let's text of enter your name. We now have our two form groups. The next one is going to be a select inputs. This is going to be so we can click on this and select which plan the user is currently on. This once again, has the div with a class of form group. Nested inside, we start with our label. This is going to be for the id of plan. Only takes of which plan are you using. We then add our select inputs. This is also going to have the class of form control. Just like the other inputs. The id is going to be planned. This matches our label just above. Then nested inside of our select elements, we can ask our options to choose from. The first one is going to be free. We can add the text for free inside here. We can add fall options. This second one is going to be for pro with the text of pro. The third one is business and the last one is for a general inquiry whether you are not signed up. We will say non-general question. Let's see how this is looking inside of our projects, refresh. There is also select input with our four options. The next input is going to be for the message area or the text area. Outside of our form group, let's add a new div. This time again the class or form group. The label, which is going to be for all message, only texted message too. Then we can add a text area with multiple rows. We can add our text area elements. The class is going to be form control the id of message to match our label. We can set the number of columns if we like. But I'm just going to set the number of rows to be five. The last part of this form is to add a submit button. You got to have the type of submit and then some Bootstrap classes. The basic button styling and then the color of button info, and a text of send message. Let's test this out in the browser. We now have a message area which we can also expand. I'll send message button too. The kind of course, feel free to customize this form to suit your needs. We can create inline forms, we can create more complex setups just like this, where we can include radio buttons, check boxes, address fields, and so much more. As you can see, forms have many different options and varieties and Bootstrap has covered for most of our needs. However, though we'd forms or any other components which we use in, what if we need to customize them to suit our project. Well, this is what we are going to look at in the upcoming video.
16. Overriding Bootstrap default styling: Bootstrap by default is intended to give us a nice looking styles and features out of the box. But there is sometimes when we may need to override these defaults, not only to make our site look more like we want it to, but also so our site doesn't look the same as all of the Bootstrap projects out there. This is pretty easy to do and no more difficult. Now, I'm going to apply in a regular CSS. If we go to our project, we already have our own custom styles.css file, which we created earlier. I'm going to also have multiple options when it comes to customizing the Bootstrap defaults. If we go to our index.html and then up to the top head section. One important thing to note here is, our link to our custom stylesheets. This always needs to be placed as the last CSS file below any of the Bootstrap files and any of the CSS files which you may have from third party libraries. This ensures that its loaded last, and therefore the contents will override any styling from the both files. So one way to customize this is to use a custom class. For example, if you wanted to change the navbar, we could simply add our own custom class inside of here. Let's go for productivity nav. We can grab this class and we can to take this over to our custom styles. So save our index file. Open up our styles.css. Since it is a class we need the dot. We can then targets our custom class with any CSS properties which we would like. As an example, we can just simply change the background to be a value. Let's go for DDD. Save this, add over to the browser, go to the homepage and now we can see our custom background color. Another way to override any Bootstraps styling is to simply target the element name, or a more general approach. For example, rather than adding a class, we can use some regular CSS by targeting any of these HTML elements. If we wanted to apply a custom background to any of our dev's on the page. We could simply add a dev selector for a custom field, reload the browser, and this is now applied to all devs on our site. So this is not a great looking example, but it's a way we can override any of the defaults, and another way to do this is to use any of the existing Bootstrap classes and then we can add to or override. For example, if we go to our contacts.html, all of the inputs which we've added have had this class of form control. Then grab this and use this inside of our own styles.css. Let's remove this, we then target in form control class from Bootstrap. When doing this all of the existing form control styles will still apply since we're using the Bootstrap style sheets. But since our style sheet is included last, anything which we add inside of here will either add to or override any of these Bootstrap defaults. For example, if at all, all of our form inputs needed some extra padding, we could add 30 pixels to the top and bottom and zero on the left and right, and we may also want to remove all of the border-radiuses on our site and we could easily do this by setting this to be a value of zero. Save this add over to our Contact Us page. We now have the sharp square corners on our inputs and small padding on the top and bottom. If we go into the developer tools we would right-click and inspect. That's like one of our inputs. We can see our custom styles.css has our padding and border-radius applied up at the top. Also the form control, which is applied by Bootstrap style sheets, still has all of these properties taking effect. However, if we take look at the padding and also the border-radius both of these properties have been crossed out since we're now use now a custom styles just above. This means that although we're using Bootstrap as a base for our project, we are not limited by it. We can also create any custom features and also a fully custom look and feel.
17. Final thoughts: Congratulations for reaching the end of this class. I hope you've enjoyed taking this course as much as I enjoyed building it too. I can't wait to see what you guys create. Hopefully you'll share your project in the project area for everyone else to see. Hopefully you can use your new found Bootstrap skills. Put this into practice, building some future projects. Thank you for taking this class and hopefully I will see you again in the future.
Chris Dixon, Web Developer & Online Teacher
