Full Stack Web Development for Beginners- Part 2: Flexbox, CSS Grid and Bootstrap 4

1. Welcome to the course!: Welcome to Full Stack Web Development for Beginners. This course is designed to take you from beginner to a web developer capable of building not only front-end user interfaces of a website, but also design and build the back-end to interact with too. So who am I? My name is Chris, and I will be your instructor for this course. I'm a web developer, and also the producer of lots of tutorials, teaching thousands of students the skills they need to build websites and applications. This is a second part in the full series where we'll continue building on your HTML, CSS, and responsive web design knowledge, and introduce you to the CSS Flexbox, the Grid, and also the Bootstrap 4 Framework. This course is all about creating flexible layouts, beginning with the CSS Flexbox, to allow us to have amazing control over how elements are laid out on a page. We then move on to the CSS Grid, which is one of the most powerful and modern techniques to learn. The laying out full web pages, creating almost any type of layout you can imagine. We finish off with the popular Bootstrap 4 Framework, where we'll build a burger restaurant website. This will give you the chance to learn, and put into practice, the Bootstrap grid system, images and text, navbars, rotating carousels, models, forms, and so much more. We also look at the utility classes Bootstrap provides for easy styling. Along with how to override any of these styles and make your projects completely custom. I hope you're excited to learn all about Bootstrap and laying out websites in the second part of this course. 2. What is Flexbox?: In the last few sections, we've learned a lot about how to create and change layouts. A lot of the historic ways of creating layouts involved using tables of loads. We've already talked about the limitations of these methods and why they are not ideal for laying out pages. In this section, we're going to be looking at both the flexbox and grid. These modern layer methods make laying out Web-pages so much easier. We're going to begin with the CSS Flexbox. Flexbox was designed to be used for one dimensional layout, meaning it deals with one axis at the time, either a row or a column. Just like you can see here. Not only does Flexbox control the direction, but it also allows us to set the alignment to, like we have here. We can align an item or a group of items to the left or right, or even to the top or bottom. Flexbox also allows us to control the size of the individual items too. Here on the top row, we have two boxes, taking up one part and then an item taking up two parts. Then for the second row, we have two items. One item taken up three times the size of the order. These also flexible to meaning if there is more or even less space available, these three parts will always be in proportion to the one part. Another great feature of flexbox is the ability to control the order in which the items appear on the page. Traditionally, elements appear in the order of a place them in the HTML file. Flexbox allows us to control this source order. This can be particularly useful when switching elements around for different layouts. We could have certain elements in one order, for larger screens, and then a completely different order for smaller screens. Before we jump into building something with flexbox, there is one important concept to first understand. This is the main and cross axis. We define the main axis by setting the flex direction. Row is at defaults and this places the items in a left to right row on a standard left-to-right browser. As you can see on the right, row-reverse is the opposite and this appears from right to left. Then we have column which is the top to bottom, and then also column-reverse, which is opposite of bottom to top. When we set this flex direction, this will be considered the main axis. Then the cross axis runs perpendicular to the main axis. So if I had flex direction set to row, column will be the cross axis. Also, if we set the flex direction to column, then row would then become the cross axis. So if this is a little bit difficult to understand right now, just remember that the main axis is a direction we set, and then the cross axis is the opposite. This is a basic overview of how the flexbox works. In the next video, we will set it up in our text editor and see in action. 3. Flex direction: We now know some basics about flexbox. Both seen inaction will really help us to understand how things work. To begin, I'm going to create a new project called flexbox. Right-click "New folder" and name is a flexbox. Then we can go ahead and open this up in our text editor. Drag this over. Then we can create our familiar index.html. Then I'm going to use the shortcut of html Column 5 and then hits up, set the title and this can be flexbox and get that save. For this example, I'm going to set some elements to the screen to work with. Within the body section, let's go ahead and create a div. This is going to have an id of container. Inside here, we can also add some more divs. This can be Item 1 and then a class of item. I want to create five more of these items. I'm going to copy this section here and then paste it in five more times, leaving us with six different items within our container. Item 2, 3, 4, 5, and 6 and they can also have the same class name of item for each one of these. Then let's hope we can open up the style tags within the head section. To begin, let's target this item with dot item, and then we're going to add some colors. The backgrounds, let's go for lightcoral, some padding of 30 pixels, some margin of 10 pixels, and the text-align of center. This is just to give you some basic styling so we can see the elements on the page. Now if we open this up in the browser, let's go to the index.html and open this up. There's our six items on the screen. We're just seeing the default behavior at the moment. Because these are block level elements, so they'll all be on the online. To begin to use flexbox, we then need to set the display type to the flex. This is done on the parent elements and the parent elements we gave an id of container. Let's go back up to the style tags. Then at the top, use the harsh because it's an id, and then we can target the container and then set the display type to be flex. Gives us save and then reload the browser and we now have a change. The reason we are now seeing them in a row like this, is because as we've seen in the slides in the last lecture, the default flex direction is row. Let's take a look at row-reverse. This is also on the parents and we said that with the flex direction of row-reverse save. Before we had Item 1 on the left and Item 6 on the right, refresh. Now the first item begins on the right-hand side and it moves over to the left. We also have a direction of column, the stack these items on top of each other. Change row-reverse. It'll be now a column and there is a stack from top to bottom. Again just like before, if we want Item 1 to be the opposite and down at the bottom, we can set this to be column-reverse, flex direction say column-reverse, and now our items switchover from bottom to top. This is a four flex direction options we have available to us. Remember when sign flex direction, this is considered the main axis. We have row, row-reverse, column, and column-reverse to. That's now our first look our flexbox and next we'll take a look at how we can use flex box and justify content. 4. Flex wrap and justify content: In this video, we're going to be looking at flex-wrap and how to justify the content. First, let's go ahead and change the flex-direction back to be the default row, inside the parent container. All of the items we've added are now on the same row. We should refresh and then now go from left to right. If we keep adding more items in, all will still appear on the same line. Let's go down to our items and copy this and paste it. Number 6, just below. Given those 12 items, this behavior can be changed by using the flex-wrap property. The default is set to no wrap. This is why we seeing all our items on the same line. This also applies to the container too. If we go over to the style section and target the container, let's add the flex-wrap property and then set this to be wrap, save that, reload. Now the items will wrap onto multiple lines. If we make the browser even narrower, each time is less space, they will all drop on two newline. Displaces items on the line directly below. If you wanted the opposite effects, we can use wrap reverse, so add reverse onto the end of this. Give that save and reload. Now the extra items which were on the line below, now appear on the line above, because it now works from bottom to top. Just like before, if we shrink the browser, all the additional items jump up a level rather than below. In fact, there is also a shorthand for this flex-wrap and also for flex-direction to update into one property. This is called flex-flow. We can delete these two lines here and then odd flex-flow. It takes in two values. The first one was our value of row for the flex-direction, and then the second for warp. This first line with flex-direction then the second one is for the flex-wrap. Save that. Now we've merged these two lines into one. The next thing I want to show you is how to justify the content. This is used to control how our items is spaced out across the main axis. This is also a CSS property which is added to the Container. So let's add justify contents and then let's begin with flex-starts. If we refresh, we don't see any change in the browser. This is because flex-dot is default. We can see how this effective more if we try flex-end. Rather flex-starts, let's add flex-end. Remember that our items by default are in a row. Across the page from left to right, this is why flex-start aligns all items on the left hand side and then flex-end aligns all the items to the right-hand side, which is the end of the main axis. Let's also try center, save and reload. Now everything is aligned to the center of the main axis. We still have the same behavior if we're to shrink the browser, all items would still drop onto the next line starting from the center. This of course, places the items along the center line of the main axis, which is just through here. The next free options all related to how the available space between these items gets distributed. If we start with space between. Rather than center, we can add a space between and see how this is looking. Now the items still on the same line that would normally be. But now I have equal amount of space distributed between each item. If instead we wanted the space to be all around them. So to be equally on the left and right-hand side, we have space around for this. Change space between to be space around. This spacing is applied to both sides now. Items will have twice as much space in between them than it will do on the end. Because for example, item 3 has half the space here and then item 4 has half the space on this idea here too. If you wanted to have the space on each side to be equal, we also have space evenly. Let's give this a go. Now there is even space between all the items. This is it now for this video, but you should now be able to see how powerful the flexbox is for layout. Even we just add in a few lines of CSS. 5. Align items: Let's begin this video by going back to our six original items in the index page. Let's delete these last six that we added in early on and then reload and now back to our original six items. First, we want to begin by looking at a line items. In the last video, we looked at justify content, which aligned or items and also determined the space in between them. All this was done across the main axis. We have the main axis set to row. This means all of the alignment and spacing was across the page from left to right. Align items also works with these same items too, but this time on the cross axis. Currently, with our current setup, the cross axis would be vertical or from top to bottom. For this demo, we can add some different heights to these items. This will help us see better how align items works. Let's go over to our six items and then let's add some style, so the style attributes. Let's add the height and let's go for 300 pixels, then copy this section. We can add this in a couple more times. I'm going to go for 250 on this one and then 320 at the end, and then refresh. Now this looks a little strange. We've only set the heights of three of these items, but it looks like they've all changed. This is because the default value for align items is stretch, so the flex items will stretch to the height of the tallest one to fill the heights of the container. So back over to our styles at the top of the page. Again, this is during the parent container. We can add align items and as we just mentioned, stretch is the default, so adding a sign won't cause any changes. Let's begin with flex-start. flex-start will start the items on the starting edge of the cross axis. So for those this would be the top of the page and then working down. Now we see the three items which height we've changed, and the right-hand still, as originally were. If we want changes to start at the bottom of the page, we would then use flex-end. Remember these flex-start and flex-end position is dependent on which axis, is our main and cross. If I went ahead and changed the main axis to be column, so rather than row, if you change this to be column, refresh and now this sets the main axis to be vertical, meaning the flex-end, which sets a cross axis would now be over on the right-hand side. If we change it back to row and then reinstate. Also, there is option to center the items too. Again, using align items, we can change flex-end to be center. You can probably imagine what this does. This adds a line right down the middle of the container and all items will be spaced evenly above and below this line. These type of layouts used to be a lot more complex, but with flex box, this allows us to do all these with just a few lines of CSS. We can take things even further too by aligning to the baseline of the text. This text which is in-between each item. Let's change center to be baseline, refresh. Inside the browser on first glance, it looks no different from the flex-start option. Remember, though this is a line into the baseline. The baseline is the bottom line of the text and this is what we see here. To see a change, we'll need to move the text outer position. Horizontal line should do this for us. Let's go down to our items and inside this first div we can now add a horizontal line. Let's see what effect this has over in the browser. Now we have more content inside here. This pushed down is item one text and all the other items still aligned to the bottom of this. If we move the text outer position on another element too, it will also still align. This time add two horizontal lines, this is inside of item three and then refresh. Now, we can see that all items still aligned up, even though I've added two extra pieces of content. This is how we can use align items in flex box. In the next video, we'll take a look at another cross axis alignment method called align content. 6. Align content: Next up we're going to take a look at align-content. I know we're seeing quite a few terms to get our head around here. Though you can think of align-content as similar to justify-content, which we've already used. But this time it applies to the cross axis rather than the main axis. For this, we need a few more rows of content. So let's move these styles which were added in last time. So the first one, the horizontal line, these two lines here and then the final two, style attributes. Remove that. Then I'm going to copy the six items once more and then paste them in. In fact we paste these in two more times it goes 18 different items. Save that and then refresh. So we now have about three lines of content to work with if we shrink the browser down a little. It would also help for this demo if we set a background color to the container and also set it to be the full height of the screen. So within this container, let's add some CSS. First of all, the backgrounds. I want to go for light-green. Then set the height to be full screen with 100vh. Remember vh is a relative size which just has to be a 100 percent of the view-port height. Finally, let's remove this align-items and justify-content from previous videos. I'm just going to comment this out. So it's still there , then refresh. So now we can get to work on align-content. Remember we're still working on the cross axis. All this will be applying from top to bottom. Just like align-items which we looked at before. Stretch is also the default for align-content too. This is why all of our items and technically full height of the viewportt. We also have a familiar flex-start too and also flex-end. Let's see how these look in align-content. Flex-start to begin with, and then refresh. Now we don't have the default stretch value and all items that are at the start of the cross axis, which is the top of the page. As you probably imagine, flex-end pushes this to the bottom of the page and then rises up to the top. So let us demonstrate this with flex-end refresh, and now everything is down at the bottom of the cross axis. We also have center too. Which will push everything to the middle of the height or the middle of the cross axis in this case. You should be starting to see a pattern here too. Most of the properties will looked at are pretty much the same, but just applied to a different axis. Just like justify content, there is also a space-between and space-around too. Let's start with space-between. This applies all the space in between items. Like we just mentioned, we also have space-around and this will give us equals space around all the items. From top to bottom, half of the space is on top of the item and the other half is below the item. This gives us the effect of having twice the amount of space in between each item. If we change the main axis is time to be column. Then refresh the browser. Now column sets the main axis to be vertical. This means a horizontal is now the cross axis. This causes align-content and now apply across the page, since this is now the cross axis. So let's go ahead and change it back to row and then reload the browser. This is one of those things which just needs a bit of practice to get our head around. Once you start using it inside our CSS, more regularly, things will become a lot easier. This is it for now for spacing out the items and I will see you in the next video. 7. Controlling child items: order: All of the Flexbox properties we have looked at so far have been added to the parent container. This allows us to control the items as a group. Both in this video and also the remaining Flexbox videos, the properties will be applied directly to the individual flex items. This gives us greater control over individual items. First, we're going to look at setting an order, which our items will appear. Let's go back over to our index page and we can return back to our six original items. Let's delete these last 12, leaving items one through to six and in fact, we can also remove the heights, which you set earlier. Let's delete this line and also we can comment out a line content from the last video. By default, our six items will appear on the screen in the source order so we see item one, right through to item six across this main axis. The order property will allow us to rearrange any of these items. I'm going to begin by creating a new class of in the CSS. I'm going to call this the order and then we can add the order property. Let's begin by setting this to be one. The order property will allow us to rearrange any of these items so all we need to do is add this order class to any of these items. Let's go for item two and order in as a class. Out of the browser and then reload. This now moves our second item to the very end. This is because all of items have a default order, which is this property here of zero. This means that our item two now has a weight of one, moving it to the very end. This number can be anything such as 10, 15, or even 30, for example and they will still appear in the order in which we set. Negative numbers are also allowed too so we set this to negative one. This will now place item two, right at the very start since all of your items have an order of zero. This is particularly useful for change in layouts with responsive design. The order can be changed in a media query. They have different layouts for different screen sizes so it's a really useful tool to have. This is how we can rearrange the order by using Flexbox. It is really simple and just one line of code, but you can see how effective this can be. Next, we'll cover how to allow the items to grow and shrink with the available space. 8. Controlling child items: grow and shrink: We're going to continue looking at how we can control this child items. More specifically, how they grow and shrink to the available space. To begin, I'm going to go down, and reduce our demonstration to be four products. We can also remove this order class. Then also the corresponding CSS just above. To do this, we can use a property called flex-grow and also flex-shrink. Let's begin by taking a look at flex-grow. This will determine how an item can grow along the main axis. At the moments item size is controlled by the amount of content in the middle, and also any padding. Currently they don't take up the full width of the screen, which you can see over in the browser. If we go ahead and add flex-grow to one of these items as an inline style, of course it doesn't have to be in line. It can also be included in the CSS2. Let's add the flex-grow, and set this to a value of one. Save. Then our first item takes up a lot more space than the remaining three. Basically, these three items here, number two, three and four, will always stay the same size depending on the content inside. Then the one would flex-grow, will take up the additional space. If we do the same for item two, if we copy this flex-grow, then let's see what this does. Items three and four, both still take up the same space, they always have done. Then the remaining space is shared equally between items one and two. Because both have an equal flex-grow value of 1. If we go ahead and add this to all the items. Item 3 and item 4 too, we now see the all four items share the same amount of space. This flex-grow value of one, is not any particular unit of measurement, such as a pixel or an m. It is significant when compared to the rest of these values. The difference happens when they are not all the same. If we make Item 3, a flex-grow value of two, of to the browser, and now item 3 will try to take up twice the amount of space as the rest if it's available, It's changes to be three. Now should be even wider. While this flex-grow property deals with how items will grow across this main axis, if the space is available. We also have flex-shrink to. This deals with how items should shrink if there is not enough space for them to fit. First, let's remove the rap by commenting out the flex-flow, which is this line here. Command and forward slash. If using Visual Studio Code, then we can add a fixed width of 600 pixels for the container. Let's add this down at the bottom. Width of 600 pixels. Then we can make sure that these items don't fit in its container by setting them to be a width, let's say 160 pixels. So we could do it like this and set the width for the item to be 160 pixels. This is one way to do it, or we could use a new flex-box property, which is called flex-basis. Let's change this to be flex-basis spaces, and still 160 pixels. This flex basis defines a default size of an elements, before any remaining space is distributed. Here, the four items are too wide to fit into the container. This is where flex-shrink comes in. Flex-shrink will determine which items will shrink to fit the available space. Let's go down and change flex grown to be flex-shrink this time. I'll changes for all four items. Let's set the last two to be a value of 2. Then refresh. We now see the items 3 and 4 have shrunk. Since a higher value compared to items 1 and 2. If we go over an increase, one of these items to be three instead. This will cause the item to shrink the most when there is not enough space for them all to fit in a container. In this video, we've looked at flex-grow, flex-shrink and flex-basis. These three properties can be combined into the flex shorthand like this. Up to the item, we can comment out this flex basis and then replace it with flex. If we were to add zero,one and then auto. These are the default settings. Zero to begin with is a flex-grow. One is for all flex-shrink, and then auto is for the flag spaces which you added just above here. If we save that, and then see how it looks over in the browser, this is how we would look with the defaults. We have this fixed width of 600 pixels for the container. Then our four equal items, because they're all set to the value of zero. We can play around with these values just like before too. For example, if we would set all items have a flex-grow value of one, so one and one, then over to the browser. They will each now take up the available space equally in a container. This flex property is a lot easier and cleaner, than right now these three properties separately. We now done with looking at how items grow and shrink. Next up, we'll finish off looking at the flex-box by learning about a line self. 9. Controlling child items: alignment: Earlier in this section, we aligned the full group of items in various ways. This works fine. But sometimes, you may want one particular item to be aligned differently than the rest. But this case we have the align self property. To begin, I'm going to remove the inline styles which we just added before, and this is the four items below. Remove the inline styles, which is a flex shrink values. Before font 2. Align self works just like align items, which we used on the container. But this time, we add it to the item, we want to control the series in action. I'm going to set the container to be the full height. Scroll up to the Style section, and then let's set the height to be 100 vh, which remember, is the height of the view port. If we go to the browser, just like we've seen with align items, the default value is stretch, which is why these are placed on the top to the bottom of the page. To control one of these individual items, we can add align self and changes defaults. Let's go down to the products and add this to any of these. Let's reintroduce the style. This time, we can add align self, and let's begin with center, then refresh. Now, we're controlling one individual item rather than the whole group of items. We also have some familiar looking properties too, such as flex start, which we should know what happens now if we refresh. This now places this at the start of the axis. If we want to distribute placed down at the bottom or the opposite end, we also have a flex end, which we've already seen before. This gives us some expected behavior. We also have baseline two which we looked out for overvalues. Let's change flex end the baseline, refresh. These will now align up with the baseline of the text from over items. This is it now for our look at the CSS flex-box. You can see how useful it can be for laying up websites. Next, we're going to cover another layout technique called the CSS grid. I will see you soon. 10. Time to practice: Integrate Flexbox into Tech Store: Before we jump in to learning about the CSS grid, while flexbox is still fresh in our heads, I would like you to go off and now get some practice using this flexbox. This flexbox is a really useful way to lay our websites. But just like when learning anything new, they can seem a lot to take in at first It does become easier with practice though. This is what I would like you to go ahead and do now. I would like you to use some of the flexbox techniques you've learned and then go ahead and apply them to our textile projects. You don't need to go crazy and completely rewrite all the CSS. But just try to change a few things to include this flexbox, some ideas, qubits to make the products automatically fill the container. Or you could go even further and use flexbox to change the layout for different sized devices. Go head and give that a go and then comeback to learn all about the CSS grid. 11. What is the CSS Grid?: We now move on to another powerful technique for laying out websites called the CSS grid. Grid solves pretty much all of the layout problems Web developers have had to work around in the past. The flexbox, which we just looked at, helps solve a lot of these layout problems too, but it is one dimensional. We can only work in either columns or rows at one time. Grid, on the other hand, is truly flexible and allows us to work in two dimensions. This means it can be easily used to layout a full website, whereas flexbox is generally better suited to smaller alignments and positioning. They can be both used together and actually work together very well. Let's waste no time in jumping straight in to learn about the grid. 12. First look at the CSS grid: Okay, so let's get started with the grid. To begin, I'm going to duplicate the flexbox project folder and then rename this the grid. So over to the desktop or the location where you saved your project, I'm going to duplicate this project and then once that's done, let's rename this, the grid. Open this up in Visual Studio Code. Then we can also open up the index or HTML inside of the browser. This will say we're setting up all the boilerplate HTML code, which we need to get started. Let's go over to the index or HTML. We can close the sidebar down and then make some changes to clean this up. So the title the grid. Then we can remove all the styles from the container. Just leaving in this background color. We can also reuse this. Lots of reused items too, select remove the flex properties, leaving in just a background color and also the pattern is fine. Down to the div, will again use the div container and also the individual items so let's just remove the style property from inside there and then we're good to go. Good. Just like with the flexbox, first we need to change the display type of the container, but this time, rather than set it to be flex, we use the grid. So display with the type of grid and let's see what happens over in the browser. If we reload, we don't see any changes as of yet. When we set the grid, the child items of the container at block level, so do the full width of the page. If you want the items to be inline, we can change the grid type to be inline. Let's go over to here and change this to be inline-grid, reload and then all items now inline rather than block. I'm going to stick with grids for now though. Let's remove this inline and restore this back to normal. Then declare how we want these items to be laid out. We set the number of columns and rows that we want to use. I'm going to start with the columns and this is done inside of the main container. We do this with the CSS property called grid-template-columns and then I'm going to set this to be 100 pixels and also the browser. To see these items better, let's add a border around the outside of each and this needs to be done inside the items. Just a simple border of one pixel and solid line. There we go. We've only specified one column at the moment, which is a 100 pixels wide. This is why we see them all stacked in one column like this. If we want more than one column, we specify more numbers. So just after the 100 pixels for the grid-template-columns, let's add a second column of 300 pixels and then a third one of 80. This is how this looks in the browser. We have specified three sizes here. The first three items of these sizes. We have the first 100, then 300, and then 80. Then any extra items will be repeated like we see for this fourth item down here, which falls into the first column of 100 pixels. This can be better seen with more items. Let's go down to the HTML. Now, we can duplicate one of these divs. Let's paste this in a couple more times. So 5, 6 and then 7 and there's our repeated items on the second row. Then we're left with one extra item which defaults to the first column. These columns and also rows, which we'll look at next are known as tracks. At the moment, we have a 100 pixels by track, a 300 pixels wide track and then a 80 pixel wide track on the right. Also, these don't need to be sized in pixels either. We can't use things we already know. So five percent or even auto to automatically take up the remaining space. Rather than 80 pixels here, we can set this third track to be auto and then this third track will automatically take up the remaining space. Now, onto rows, at the moment, the height of each one of the rows is set by the content, this includes a part in two. Using Visual Studio Code, we can add some sample text called Lorem Ipsum. Let's go down to one of our items. Let's say item two and if we typed lorem with a temp, we then gets more text content. Let's see what effect this has on the browser. This first row is now taller because of the extra content. We don't always want this though, we often want to have control over this ourselves. This is where grid-template-rows comes in. If we go back over to our container, we can also set the grid-template-rows and let's set this to be a value of 100 pixels. Then back over and all three rows are now set to 100 pixels high. Now, the content is no longer in control of the height because we've set it to be exactly what we want. Just like columns, only setting one value will only affect the first row. I can go ahead and add our values. Let's go ahead and add the first one. Let's say 250 pixels, 150 pixels, and then 100. Okay. Good. Now have three individually side road tracks. In just a few lines, we've controlled the layout for our content in two dimensions, using both columns and rows. This is in contrast to the flexbox, which is designed to be only used on one dimension at a time, either a row or column. This is our first look at the grids. There is so much more still to cover though and will continue in the next video. 13. Grid gaps: In the last video, we added a border around these grid items. We'll come back to see how they are laid out. If we go over to the CSS and remove this border and back over to the browser. It becomes difficult to see the rows and columns. By default, there is no space in between the columns and rows but to fix this we can use grid-gaps. To add a grid-gap between columns, we have grid-column-gap. This is also applied to the container. So let's go ahead and add grid-column-gap. The value was up to us. So let's begin with 10 pixels and this will add a 10 pixel gap between each of the columns. As you may have guessed, there is also grid-row-gap too and you can add this also to the container. So grid-row-gap and lets again set this to be 10 pixels, refresh. There is a 10 pixel gap between the rows and the columns now. Note how these gaps only between the rows and columns, not around the edge. This solves one of the old problems we had when spacing new items using CSS methods such as margin, where the space will be all around the elements, even the surrounding edge by default. Also, there is a shorthand version too called grid-gap. So rather than having two lines of code here, we can remove these and instead use grid-gap. Just like when using margin and padding, we can set two values. The first one is for the rows, so 20 pixels and then for the columns, 10 pixels, then refresh. Or if we wanted one value to apply to both the rows and columns, we can just leave in one value, such as 10 pixels, and then it leaves equal gaps all around. You can see how much we can control with just a few lines of CSS. This kind of layout without the grid would be a lot more complex and time consuming. This is it now for grid-gaps. Next we'll look at how to repeat tracks and also set the min and max sizes. 14. Track repeating and the fr unit: In this video, we're going to look at some ways to have better control over our tracks. First is how to repeat tracks that have the same sizes. If we wanted all of our columns to be 200 pixels wide, just like this. Rather than setting all free, if we had 200 pixels, we already know the sane one value like this, will only result in one column being displayed. To help with this, grid providers will repeat, so we can add this inside of our columns. Let's add repeats, and then we can add our value inside of the brackets like this. We still keep the size of the truck here, but before this we add the number of times we want it to repeat. If wanted four columns, we would do four at 200 pixels, and reload, and items of four columns with equal width. We still free to add more individual tracks to either before or after. If we wanted the first one to be 100 pixels, and then repeat before or afterwards, we simply add a new value in before this. 100 pixels and then I will repeats afterwards. This gives us our first column at 100 pixels wide, and four repeated columns at 200 pixels each. If we wanted a fifth track to take up the remaining space on the right-hand side, we could also do this. We could add a fixed size or we could reuse the auto property, which we have seen before, refresh and now we have a extra item at the end. Or alternatively, if we know how many columns we want to use, we can also set this auto to, select remove auto from the end, and the first value, and let's say we want free columns. We could also use auto inside of the repeats. There we go. There's our three columns and now the tracks automatically resize to the content. Next, I want to show you a new unit of measure called the fi unit, which is short for fractional. This unit relates to one part of the available space. It works like early what we looked at, flex values, where a value of one is one part of the available space and value of three is three times bigger. Let's add it to our columns and see what happens. Whenever you create template columns, instead of auto, we can add one fi, and refresh. Now the width of our columns don't depend on the content. They all take up the same available space, and of course, adding a new column into fi, will take up twice the available space. Add a fourth column, refresh. This is now twice the size of these three, as you would expect. Repeat can also be applied to rows too. Just below, we can also add repeats. Again inside the bracket, we add how many rows we want, and then the size, and then remove our last column from the top. Now for reloads, get three equal-size rows too. Again, our rows can also be mixed with other size tracks too, meaning this is really flexible to use. 15. Min and max track sizes: The CSS grid also allows us to set a range for the truck size by adding the minimum, maximum size, which should be. We do this with the min-max function and we can do this inside of our columns or rows. If we go to the Columns to begin, we can remove this repeats and then replace it with the min max function. Inside the brackets, this also takes in two values. The first is the minimum size of the column. Let's say 160 pixels and then the second value is the maximum size, let's go for 200 pixels. This section will apply to the first column and let's add a couple of more columns in. The second mode can be one fr, and then the third one will make it twice the size of 1fr, then over to the browser. This first one is the one we interested in. This is one using min-max and the size should be between 160 and 200 pixels. To check this is working, we open up the developer tools and inspect the first column. Let's go over to the inspector. If we open this item, we can see the size is set to 200 pixels. Then the second one is 1fr, so we'll take one path of the available space. The third one is set it at 2fr, so it should be twice the available space. This is 518 and this one is 259, which is exactly half. We can also better see this min-max in action by shrinking the browser down to smaller size. Then let open over this first item again and you can see even though its browser is really small, we now have a minimum value of 160 pixels. This min-max function is really useful when we want to have fine control over the size our track display and this is how we can use it. 16. Grid line numbers: Each of the tracks which we create, even in a row or column has these numbered grid lines between them. These grid lines begin at one, which is the start of the track, then continue along the grid direction to the end of the track. Here we see we have our column tracks numbered from 1-5, and the rows numbered from 1,2,3,4.But why do we need to know this? Well, we can use these grid line numbers to position an elements, exactly where we wanted to be on a grid. We use grid row starts, grid row end, grid column start, and grid column end to specify starting in end positions across each axis, where we want to place an elements. Here we have an elements between lines two and three on the row, and then between lines three and four for the columns. Let's go over to the text editor and give this go ourselves. To begin I'm going to replicate this grid from the slides, open the grid template columns, let's add a repeat, let's remove the min-max, and then this time I'll repeat and simply add four columns at 1 fr each, and then for the rows we can repeat three, at 1 fr too and these can be all equal. By seeing this in action, we also need some more items. Let's copy one of these divs, the items, and then paste in, and let's go for 12 items. 8, 9,10,11, and then 12, and there as our 12 items on the screen, positioning with these grid lines will be the first properties we have covered so far, which apply to the item rather than a container. I'm going to change the class on one of these items. Let's go over to the items, and let's go for this one, and change it to be item one, and then change the background color and the CSS, so this stands out a little bit more. Item one I'll go for the background color, this can be anything but light blue is fine and refresh, and now we have one item which turns out, great. We now go to start working with this one item, started with the example from the slides. If we go to our item one CSS, we can begin with grid row starts, which we've seen in the slides, and this is the starting position on the row, so let's go for opposition two, and we need to also add grid row end for the end position. Again, going through the slides, this is position three, and then the same for the columns. Grid columns start, position three, grid column end, position four, and opposite the browser. Notice how this item one is moved and all the rest have adjusted and still stayed in order. These grid lines can be any number to place it's item anywhere on the grid, or it can even span multiple rows and columns. If we wanted this blue item to also take up the row below it, we could go into the CSS and change the grid row end, this time to be number 4. Reload and now we spans across two grid rows, same with the columns two. If we wanted the items to also span across the column to the right of it, we could just simply adjust the numbers. The grid column end, to be number 5, and there we go, and still all of items will flow and also keeping order. There is also some shorthand syntax too, to make this even simpler. Rather than having four lines in our CSS, if we comment this out, we can use grid row. Again this grid row, we can add our two grid row values, of two and four, separated by a slash, and then we also have a shorthand for grid column, which as you may have guessed, is a two grid column sizes of three, and then five, and if we now take a look at this, after reload, everything still looks the same, but instead we now have this over two lines. Finally, there is an even shorter version too called grid area. Let's also comment our these two lines here, and then below this we can and to grid area, but this time we add our four values. We do need to be careful a lot because the first two values are our two start subdivisions. The first one is the row start, and then we have column start, so the first two values are two and then three. Then the last two are our two ending positions, which is this one, four and then five. Again, we should see no difference inside the browser, but this time the CSS is just on one line, but do be careful of the order of which to add the four values. Grid also provides us with the span keyword tool. This allows us to specify the line we want to start on, then how many rows or columns we want to span across. If you want to double example to also take up this bottom row two down here, we could start our position two, as we already do. Then span across our three rows, so one,two and three. Back over to our grid area. Instead of the row end to be set to four, we can then say span across three rows. See how this looks, good. Now we start at the same position and span, one, two and three. Spanning across multiple tracks like this is really be useful for laying out our web-pages. For example, we could span across the top row, to create a head area, or section off an area for the sidebar, and also main section. This is it now four line numbers, and I'll see you in the next video. 17. Grid line names: In the last video, we looked at grid lines and how they're numbered. Grid also gives us the ability to name these grid lines to something more appropriate. You will often come across names such as row start or row end. Another useful way is to name them relating to the section of all page such as a header, footer, sidebar and so on. We're now going to return back to adding properties to the container. We can return item 1 to just being item. Let's remove the one off the end of here and now if we scroll back up to our container CSS, we can go ahead and add our columns. Let's remove this repeat from here and all we need to do is add a name inside the square brackets for each column, followed by the size of the track. We open up and close the square brackets. We can set our first one to be called first and then the size of 1FR. We can then repeat this with the square brackets again and call this second and this can be 2FR. If we want the third column, exactly the same. Name is third, named 1FR and then at the very end we can name this last and set this to be 2FR. Remember these names inside the square brackets, totally up to you. Let's see how this looks and let's see how we're four columns in action. Goodness, our four columns with 1FR, two, one and then two. Also rather than using individual names like we've just done, we can repeat the same name for each track such as col-starts and then col-end, col-start 2, col-end 2, start 3, end 3, start 4 and then end 4. To achieve this, all we need to do is to add col-start and also col-ends. Then these numbers will be added automatically after each one to distinguish between each column and we can also do exactly the same for rows 2. We can achieve this by going back over to the project and using repeat. To begin to add this col-start and col-end to each column, we can go ahead and use the repeat method from before and delete the four individual names, then go ahead and add repeat. Inside the brackets I'm going to add four columns. So add four separated by the comma. Then we can go ahead and add our square brackets. The first value we're going to set as col-start and this is the name for the start of each individual column. It will be col-start, then col-start 2, col-start 3, and so on. Then the size we want each column to be unless I want it to be 1FR. Then a second set of square brackets to add the name to the end of each column. In our case we're going to use col-end and then save that and also do the same for the rows below. We can keep three rows, it's fine. We can add the name of row-starts, the size of 1FR and then our ending name of row-end give that save and then refresh. Then we're back to a standard for four by three grid layout. Now we can go ahead and add our item one class back in place and we can move the item to where we want using this grid names. The first one, it's under class of item 1. So we can see the blue item again. To make things more clear I'm going to comment out the grid area that we used here for item 1 and then go back to using these four individual values so it's a little bit easier to work with. Can you have the row to be starting at two and four? Let's just leave that for now. Instead for the columns, let's go for col-start and then end position to me col-end. Remember these are the names which we set above inside the square brackets. Reload the browser. As expected, we have the row-start at position two, that's one and then two, and then it ends up position four which we start with these two values here. We then set the columns to be the column-start and column-end. Remember the col-starts and col-end is starting and ending position of our first column. This is why it has only taken up one section here. If we wanted this to span two columns such as over to this one here, which then changes to be col-end 2. Now, this starts at the beginning of the first column and ends at the end of column 2. Now we want the rows. If we set the first value to be row-start and then the second one to be row-end 4 of the browser. Now, this begins at row-start which is the first row here and then ends at row-end 4 which is the fourth one here. We do nothing different here than we've already learned. The only difference is we're referencing these grid lines by a name rather than a number. Next we're going to look at how we can use grid template areas to layout a full websites. 18. Grid template areas: Along with positioning elements with these grid lines, we can also create full areas such as header, content, sidebar, and footer. Grid provides us with a property called grid template areas to do this. First of all, we need to think about how our grid will be structured using rows and columns. Looking at the diagram here, we have a header on one row, content and sidebar on the next row, and finally a footer on the third row. Therefore, we no need three rows of the grid. We only need two columns for the content and sidebar. Remember, the header and footer areas will span across these two columns. This is how our grid lines will look once we set the free rows and two columns trucks. Let's head back over to the text editor and see this in action. Let's get to work with setting this up. We're going to be working with these grid areas to begin with. We can comment out all these 12 items. Let's remove all these for now with the comment. Then inside the container we can get to work with adding our header. Add the sub header elements and the text of Header 2, we also had a main section for the content, then sidebar, with the side elements, and then down at the bottom we also had a footer. We can see these areas better, let's add a border to all four. Within the Style section, let's go for the header, the main, the side, and the footer. Add the border property of one pixel and then a dashed line. Over to the browser, hit refresh and there's our four content areas we just added. Then back over to our grid template rows and columns, and we can begin to set this up, so up to the top. Remember, for the columns, we need two, one for the content section and one for the sidebar. Remove the repeats and the first one can be 3fr, on the sidebar can be smaller, so 1fr is fine. Then onto the rows. We need three rows, one for the header, one for the content and one for the footer. The header can be 1fr, 3fr for the main content, and then 1fr for the footer. If we now reload the browser, this is how all four sections will now look. Since we set two columns, the four elements are arranged on the two rows, like you see here. Let's get to work with change in this with our grid Templates area. Let's add the CSS property in, grid templates areas. Remember the S on the end. With this property, we setup names for each section. These names are arranged like a table. We have two columns and three rows, so our names are arranged like a three by two table. We adds the quotations for our first row and then we can add our second row and then a third row in just below. Remember to add the semicolon right at the end too. We want the header area to span across these two top columns. We add header in the first column and then header in the second column too, to cause this to span right across the row. But our second row, we want the content to be on the left and then a sidebar on the right. Then the bottom, just like the header, we want the footer area to span both of the columns. If we save that, we won't see any difference in the browser just yet, but we refresh. We first need to place our items inside the sections. We do this with the same four properties we've already used. If we go down to Item 1, we used grid row, starts, row end, columns start, and column end, or we can use a shorthand of grid row and grid column, which we've already looked up. Let's set this up. First of all, we can target the header. We set the size this header by using grid row and grid column. First of all, grid row, this can be the header section which we set to up at the top, so which is just here and then the same for grid column. Just below this add grid column and also set the header area which we created. We then repeat this to the main aside and footer. The main section we set the grid row to be the content and then the grid column to also be the content too. We also created an area for the sidebar and we'll give this a name of sidebar here. Down for the sidebar section, which was the aside elements. Just like before we do grid row and set this to be the sidebar grid column. This is the Sidebar 2. Then finally, the footer area. Grid row, the name of footer and grid column and this is the footer too. Save that and then Oh to the browser and refresh. Good just to recap, we have our header spread across the top. This is because we've set the header to have grid row and grid column of this header template that we set above. Just here which spans across our two columns of the first row, we then set the second row to be divided between the content, which is going to be the 3fr section and then the sidebar we'll be 1fr. We define these below, again using grid row and grid column for the aside and the main section. Then at the very bottom we set the footer area and just like the header, this also spans across the two columns. Setting the footer and the header to be the full width of the page. Good. This leaves our layout now complete and how we intended using grid template areas. Next, we'll take a look at nesting grids. 19. Nesting grids: This grid layout is now how we intended. But what if you wanted to nest our 12 items inside the main section as a grid too? Let's give us a go and see what happens. If we go back over to our projects and then reinstate our 12 items. Let's uncomment out this section here and also remove the class of item one. Then we can go ahead and cut these items out and then place them inside of our main section. Cut these outs. Then we can remove the texts of contents. I'm pasting this inside this main section. We have the header at the top, the main section with 12 nested items, the sidebar and the footer. Let's see how this initially looks inside the browser. The items are all there. But if we scroll down they are not in a grid layout. Items are just displaying as block-level elements. The main element is apparent for these items. We can change the display type to be grid of NCSS. Let's go up to the main section and then change the display type to be grid. Also we can give this a grid gap too, let's add five pixels for the gap. Let's see what happens now this in place, we got to refresh. Goods now have our grid gap here. Then we need to define how many columns and rows we want just like we would normally do. This again is within the main section. Let's add the grid template columns. Let's go for repeats. We have four columns, one FR. Then the grid template rows just below. Repeat these too. Then we just add one FR to add as many rows as necessary and keeps them all even too. Over to the browser, refresh. Now we have nested our grid inside of the main content area. Just like earlier when we looked at Flexbox, the grid also allows us to have finer control over how individual items are aligned. This is what we will cover next. 20. Alignment: We now going to move away from our layout and focus on alignment. Lots of what we cover in this video is similar to the flexbox, where we align items at the start and center off stretch to fill space. Coordinate the items has taken up all the available space. We need to make the items a little smaller to align them. Let's first comment out the tracks and these are the ones in the main section. Template columns and template rows then set a size for the items. The Items class, which will have just here, let's first remove the padding and then add a height to the individual items of 60 pixels. Reload, we can see by default the items are set a stretch across the row. First we're going to look at justify items, which we add to the container to affect all child items as a group on the row axis. A lot of these will be familiar already, such as end to place the items at the end of the row and also start. Go over to the main section, which is a container for these grid items. Just here we can add, justify items and set them to the end, refresh. Now all items are pushed to the end of the row. We also have start and you can probably guess what this does too, this moves everything to the start. Remember the second item which is used here, if we scroll back down, has more text. Therefore it fills more the available space. We can reinstate this for all the items move the same. Let's rename this item two. There we go, all items are now equal. The default value for this is stretch, select replace, start with stretch. How much you get the same effect which you began with, we'll also have centered too. This will replace all the items in the center of the row with width being determined by the content inside. We also have the option of baseline too if we're aligning the text. Next, we can also use align items. This also applies to the parent container, will affect the items along the column this time rather than the row. To say this, we need some more height to work with. Inside the main section, let's make the main a little bit higher. The height of 1200 pixels and then we can set align items. Let's begin with center over to the browser, refresh. Now we'll have a taller main section and all the items are aligned to the center. We can see at the top we have an equal gap at the top here and also the bottom section too. I'm not going to go through all these options because we can use the same values as we have just looked at and all work the same way, but this time on the opposite axis. The next two properties we apply to the child items to control them individually. Let's re-introduce our item one class. This can be any of the items. Let's just add this in and then we can control these one individual item. Then backup to the main section, going to comment out, justify items, and also align items too so that they don't interfere. Now we can go back up to the item one and then we can align individual item but this time we use justify itself. Let's begin with end and then over to the browser, refresh and because this also works on the row, this pushes this blue item to the end. In fact I think this is being a little bit messed up with these grid columns. It is now we have all these items, set the stretch, and then this individual item on the end of the row. Center will also do as expected and move this one item into the middle of the row. Changes to be center, and remember we'll have all the same properties available as we just looked up. Save and then refresh and that's our item now in the center of this row. If one is to be centered on the column rather than the row. We also have align-self. Let's give this a go and also set this to be the center. Now this is centered across the row and column. Using both justify-self and align-self together is a really easy way to center an item both vertically and horizontally. This used to be a lot more complex before grid and flexbox. Let's go ahead and try one more, align- self, set this at the end. Take a look at this and now the item is pushed to the bottom. We can see we have lots of useful options when using the grid, which causes of pretty much any type of layout we will ever need. 21. Time to practice: Song Finder layout: Later in this course, we're building this application, where the user can search for an artist or a song and they displayed as a grid. For example, if we type in an artist inside here, just like this, and then hit "Search" will then present it with a list of songs. We'd also an audio player to play a preview of these. We'll build this later in the API section. We have the album artwork, the artist, song title and this music player at the bottom, which we'll play the first 29 seconds. All this music information will be provided by connecting to iTunes using an API. If you're not sure what an API is just yet, don't worry about it. We'll cover all you need to know later on. But we're going to get started on this application by creating the HTML and CSS we need include the CSS grid layout. Then we can ask the functionality in a later section. We're going to do this a little differently to over practice exercises. I'm going to go through this project setup and also the HTML code together with [inaudible] , this is how we have the same HTML. Meaning we can do the same things when we add the JavaScript later, so there's no confusion. Then I will leave you to go ahead and complete the projects CSS by yourself to give you some extra practice, applying in the grid properties. Let's begin by creating the project folder. Let's close this down and then create a project folder. Again, you can add this anywhere. I want to call mine, the Song Finder open this up in the text editor. I'll drag this project folder into there. Then we can go ahead and create a new file called the index.html. To begin, let's add the HTML structure. I'm going to be using the HTML five shortcuts and then hit "Tab" to groove this our structure. The document title, of Song Finder. Then down to the body section. Let's begin with the header area, then assign title in h1 of Song Finder. Let's open this up inside the browser and check everything is working okay. There we go, there's our song title in the index page. Then we need an input area to type in the song name of the artist. Let's start with a label, and let's call this the search input. Then the text of search for your favorite artist, and then close this label off at the end. Here we can also add our input, with the type of text. Then the id which matches this search input. Then after this we need a button. This is going to be the button which goes ahead and completes our search. Just add a simple button into there. Then a horizontal line at the very bottom just to section off these header. Reload and see how this is looking. That's our label or text box and the button, scrolling down below this header section. Let's create the main section. This is going to be the area where all of our songs appear. For now let's give this an id of songs. Then inside here we can add an article. This article is going to be the wrapper for each one of the individual songs. Each individual song needs an image. For now I'm just going to add some dummy or some sample data just to see how it'll look on the screen. We can go ahead and style this with the CSS. All this text and images will be replaced later with some data which are pulled from iTunes. We can see this image, I'm going to add a width of 100 pixels, a height of 100 pixels too. Then add a style property just so we can see this image, background of blue. Now we should see a blue square on the screen. Next we can add the p tags. This is going to be for our artist name. Any artist and song is fine so just add anything inside here. Then a second set of p elements for the song name. Then finally, we're going to look at a new element which we've not seen yet, and this is the HTML5 audio element. This will allow us to play our music inside the browser. It needs a source attribute which you can leave empty for now. Also the text of controls, which will give us some controls to work with, such as our play, which also turns into a pause, the timer, and also the progress bar. Now let's copy this article and paste in so we have six of them. So two, three, four, five, and six and then save and then reload. Now I have six different items on the screen. Remember this HTML, is just placeholder text in images. All of this data will be pulled in later from our API. For now though, I will leave you with you to create a link to an external style sheet, apply some styling and also a grid layout to the songs. There is no right or wrong way to do this, just style however you like. But I would recommend at least applying the grid. It doesn't need to be anything complex. Just a simple grid with free columns and a grid gap will be fine. Good luck. I will see you in the next section. 22. What is Bootstrap?: Welcome back to this brand new section. Here we're going to take a look at one of the most popular frameworks for building websites, which is called Bootstrap. Bootstrap Crony, at the latest version of version 4 is open source and free to use, is a library for HTML, CSS, and also JavaScript, which we've not yet looked at but don't worry about that at the moment. You can find it at getbootstrap.com. Some of the components we'll use in Bootstrap, such as a carousel, require JavaScript to work. But we don't need to know any JavaScript at this stage to use them. Bootstrap allows us to quickly get started building projects, and also allows us to take advantage of lots of pre-built components, such as navigation bars, image carousels, and forms, to name a few. Getting started is also really easy. We can just add Bootstrap to our project just like any other CSS file, and start writing our website as normal. We can then either use a pre-built components or write our own HTML as normal and then take advantage of the Bootstrap CSS classes provided to us to give us some base styling to build on. If we go ahead and open up the documentation from the navbar, there is quite a lot to get through, and we'll cover lots of this for this section. First of all, I'm going to head over to the components on the left-hand side and click on this. Inside here we can see all the different available components tools. For example, if we wanted a navbar, we click on the navbar section and then we're given some more information about how to use it. We also then get lots of code examples, and also the demonstration. If we wanted to use this navbar in our project, we could copy this code below. This is all the section here which produces this navbar. There is usually some more different examples with some different layout too, and you can see all these as we scroll down. There is also some forms. Click on the forms elements on the left, and exactly the same as before. We'll then take a view of lots of different examples. This all takes advantage of standard HTML elements, such as inputs, selects, and text areas. But Bootstrap then provides some CSS for us to then use by adding the Bootstrap classes, such as form-group and form-control, just like we can see here. We'll also take a closer look at some more of these components throughout this project, such as rotating carousels, and also use modals. It's also worth noting too that all of these styles that Bootstrap provides is just a base starting point. We are free to go ahead and change any of the styles with some custom CSS. if you're still not sure what Bootstrap is, all you need to understand for now is we can take advantage of Bootstrap's predefined CSS to not only make our HTML look a lot better, but to also apply some best practices, and keep our styling looking more consistent across different browsers. Now we have a little background into Bootstrap. Let's now move on to getting a Bootstrap project setup. 23. What we will be building: As we go through this section, we're going to be building this Gourmet Burgers website. This project will allow us to learn how bootstrap works and how we can use various components, as well as different utility classes and also how the Bootstrap grid system works. We begin up at the top with our header section, which is a navigation bar, including the site title, various links, and also a search box in the corner. Scrolling down, you can also see we have a rotating carousel. Each different image has its own caption. We'll also use controls to allow us to scroll left and also write through these images. This rotating carousel is one of the Bootstrap components, as is the navbar at the top. I'm might look at various forms of these and how all the classes work during this project. If we scroll further down, we then have information about our burger sites. This will teach us how to use the bootstrap containers, rows, and grid system to align and arrange our items on the page. This website will also be fully responsive so for go ahead and shrink down, the browser. We'll see a layout change for different screens sizes, including our navbar tending to a drop-down for the smallest screens. Let's make this full size once again. Then if we go even further down, we have a sign-up section. If we click on this will then introduced to a modal components, which is basically a pop-up where we can add some information for the user. In this case, we're going to take a look at how we can use Bootstrap form components to make our forms look really nice. Here we'll have a name, an email, and also a text area, along with some checkboxes down at the bottom. Then finally, we finish off with a footer area down at the bottom. By the end of this section, you'll also have this fully finished website too and also some knowledge about how to use bootstrap components, bootstrap utilities, along with how we can use containers, rows, and columns to create grid system. Along with the knowledge of how to override any bootstrap classes to make this fully custom. Okay, good, so hope you look forward to this. Now let's move on to get our project started. 24. Creating a Bootstrap project: Starting a project using Bootstrap is really easy. To begin, if we go over to getbootstrap.com, which is a Bootstrap homepage, and then go down to the "Get Started" section here. Remember though, websites like this can often change layouts so if yours looks a little different when you visit, just have a little look around for the Installation or the Getting Started section. There are a few different ways to get going. We can download the full startup folder by clicking on the big "Download" button in the top corner. This is great, but includes lots of things we don't need at this stage. We can also go over to the Download section on the left. Then if we scroll down, we can go ahead and download the CSS and JavaScript files. Then drop these into our project folder. All the way I'm going to do it in this project is by using a CDN. Let's go back to the Introduction and then scroll down. A CDN is a content delivery network. This basically means, rather than adding the CSS and JavaScript files into our project and then linking these in our HTML. Instead, these files are hosted on an external server, follows to link to. Here we can see we have our CSS and JavaScript sections. We can copy this link for the CSS. We also have some JavaScript links here too, where we can link our script tags to the CDN. If we scroll down even further, we have a starter template, and this is a really convenient place to start. This has all the basic HTML structure we need, along with any links to the required CSS and also the JavaScript too. Let's begin by copying this starter template with the "Copy" button in the top corner. Let's grab hold of that. Then if we go over to the desktop and create a new folder called Gourmet-Burgers. Open up Visual Studio Code, and then we can drag in this project folder to begin. As always, we create our index.html, but this time we now have a bootstrap starter, so we can paste in the skeleton structure. Give that a save. Then we can go ahead and open this up in the browser. Let's double-click the index.html, bring up the browser, and there's our hello, world example. That's all working fine. Back over to the project, we can now start to add our own customizations. We can change the title to be Gourmet Burgers, and then save. Our change is now reflected in the browser. This text of hello world may look like a standard h1 element, but it has a little default Bootstrap styling like all the other elements will have too. We can see this if we command out the CSS link in the head section. The Bootstrap CSS is just here. If we command out this line and then refresh, we see the Bootstrap default styles have now been removed. Let's just remove these commands and add this back in. To see what's going on behind the scenes, we can take a look at the CSS provided by Bootstrap. If we copy this link inside the href right to the very end, copy that, and then over to the browser, we can paste this in just like a normal URL. This is the style sheet which is linked to at this URL. It's a little hard to read because currently it's minified. This means all the white space has been removed to keep the file size smaller. To see this even better, if we select all and then copy. I'm going to search for CodeBeautify. This is what we need, codebeautify.org, so select this. The one we need is the CSS, so select this link here. On the left-hand side, we can add the CSS input. Paste in our Bootstrap code and then click on "Beautify" in the middle. Over on the right-hand side we can see the outputs. We can make this the size of the full screen. This is all the CSS which Bootstrap provides. It now looks formatted in a way which looks familiar. If you scroll through it, there is quite a lot. If we press "Command" or "Ctrl" "F", this will search through the code. Let's search for the h1 and hit enter, then we can see all the CSS which is applying to this h1 elements. First we have h1 right through to h6, which applies on default margin bottom, a font family of inherits. We also have a font weight, a line height, and also inherits the text color. Down to the next one. We can also see the font size is 2.5 rem, which is why when we remove the Bootstrap style sheets, the h1 then appeared smaller. We can also scroll through and take a look at some more styles too, if we wanted to, but hopefully you get the idea of what is going on behind the scenes. We'll also take advantage of a lot of the class' created photos as we build this projects. This would also be the same as a CSS file if we were to download it and add it to our project folder. The final thing I would like to point out is that while all these styles are great to use and make our project look better, we can still override any of these base styles with our own style sheets. We do this by creating our own CSS file, just like we've done in previous projects and link to it in the head section below this bootstrap link. It is actually encouraged to add to or override any of these default Bootstrap styles for the simple reason that a lot of websites use Bootstrap and we don't want all the websites online to start looking the same. It is a good idea to use Bootstrap though, for quickly building websites and components with best practices, consistent styling across different browsers, and also an excellent foundation to build on. Now we have our project setup. Next, let's move on to understanding how the Bootstrap grid works. 25. The Bootstrap grid: Our Hello World example is now setup. In this video, we're going to look at probably one of the most important concepts to understand when working with bootstrap. This is the bootstrap grid system. The grids basically, allows it to lay things out nice and easy and uses the CSS flex box under the hood. To begin, generally the first thing we need to do is to create a container for our contents. This is added as a CSS class of container. Let's head over to the project and first remove the h1 of hello world, which is just here. We can then add our div with the class of container so just create a div, just like we normally would. This time we can add a bootstrap class of container. Containers are required when working with the bootstrap grid system as they act as a wrapper for our content. Using them also allows us to send our content both horizontally and vertically too. Nested inside, we add a second div, and this one has a class of row. Inside the open inside the class of row. These rows act as a wrapper for laying out content by using columns. Bootstrap grid is 12 columns wide. This means, if we want two equal sections side-by-side in row, we could set both to be six columns wide each. If we wanted three sections, each would need to be four columns. Let's add our first div inside the row. This's going to have a class of col-md-4. Inside of here we can add some text with the p tags of one-third wide. Because the grid is 12 columns wide, we're taking up four parts here so this is one third of the width of the row. If we then copy this in and pasted it two more times. Also make sure this is indented properly, just like that. Now if we get that a saved and then refresh the browser, we'll get three sections on the screen, each with one-third of the width of the row. To see these grid sections better, we can add some background classes which are also provided by bootstrap. After col-md-4 we cannot bg success. This gives us a green color. The second one could be bg primary. This is for blue. The third one could be bg secondary and this is a gray color. This now shows us the effect of the container we added. The container is a fixed width. If we just stretched the browser wider or smaller, we see that the width changes with different break points. There is also a full width container available too. All we need to do is change container, to be container fluid. This will span the full width of the page. But I'm just going to stick to the container for now. We can also have multiple rows inside this container too. If we go back over to the class of col-md-4, this md stands for medium sized devices. You can control exactly how many columns wide we want the content for different screen roots. If we go back to the getbootstrap website, which is getboostrap.com, and then documentation. If we go down to the layout section on left-hand side. Then under here we have the option for the grid. Select this. If we scroll down to the table, which is just here, we see here we have a class prefix, and we've used col-md for medium sized devices. This table shows there's a size in which each class applies to. For example, small is 540 pixels and large 960. We can add as many of these prefixes as we want to. For example, we could have a layout 12 columns wide on small screens, and then change to be six columns wide on medium screens and then down to four columns on larger devices. We only have the medium prefix sets, which is 720 pixels and above. If we shrink the browser down to below 720 inside of our index page, the four column width no longer applies as we can see here. We can change this by adding col-sm. Rather than md change it to sm, refresh. This now applies to small screens. If we wanted this green and the blue section to be side-by-side, we would need to set this to be six parts each. We could go ahead and change it to col-sm-6. Then also our medium devices changes back to four and also for the second one, we're can add col-sm-6. Both of these first sections, both on smaller devices with six columns wide and then change with four columns wide on medium devices. If we save, refresh, these two sections are now six columns each and the gray section is the default 12 columns. If we make this wider to go above the medium devices, this again will change to four parts each because we've said that here. Let's now take a look at a different scenario. Imagine if we change both small divs to be four columns so, col-sm-4 and the same for this one too. This means we're not take up the full 12-column grid. We only specifying eight parts for smaller screens, which if we save and refresh and then go down to the small screen, this will now leave a space at the end of the row. For this case, we can move the content by adding an offset. We can add this offset on the left-hand side pushing these two into the middle. If we do offset-sm, again this will only apply on small devices. Then two columns. This will now push the row across by two columns leaving the green and blue section in the middle. If we stretch the browser, this will also apply to all sizes above two. Now on the medium devices, we still have these two column offset. This is easily resolved by setting the offset to be zero for whatever screen we want it to be removed. Let's try to remove it from the medium sized screens and above. Let's have the offset-md-0. This will make sure that the offset if removed on medium-sized devices and above. If we now refresh, the offset is now removed on a medium devices, both if we shrink this down it should still apply on a small screen. We can simplify things even further. If we just want all divs inside of a row to be equal, we can just specify col. Rather than having all these pluses here, if you want to keep things really simple just add col. Same for the second section and also the third, get that saved, reload. With this in place, all of our sections will take up an equal amount of space on all screen sizes. This is how we use columns with the bootstrap grid system to layout our items. Now we know more about the bootstrap grid. Let's now move on to adding some content to this project. 26. Adding images and text: Since Bootstrap is just HTML, CSS, and some JavaScript behind the scenes. Adding text and images is just the same as we've already learned. Let's begin by setting up all three sections to be four columns, the medium devices and above. So change the call to be MD-4. We could do this for all three sections. Add MD-4 into these two. We don't need these columns anymore so we can remove the background. Success, Primary and secondary. We'll have the content this time too see the difference between the three sections. If we go back over to the finished site, which we have just here, we'll be building the images and all the text for these three sections. this is our first four column section, our second, and our third, making up the 12-column grid. I've included some images for you to download. If you want to use the same as me. If not, you can, of course, go ahead and choose your own if you prefer. I have these images saved on my desktop. I'm going to go over to the project folder and add these to it. Here is my images folder. So I'm going to drag these into the gourmet-burgers project. With these now inside the project, we can now get to work with adding this to our website. So obviously the index our HTML we're going to work in this container section. First of all, this first call, MD-4, we can move the text, and then add to image elements. Just like normal HTML, we add the source attributes. I added these inside images folder. If we open up the sidebar, and then images, we have carousel one and carousel 2 for the rotating slider. We have three different images down at the bottom here, which we're going to use for the three sections. If we close this down, the first one we are going to to add is open. This has the dot JPEG extension. The old text, which we should always add. Just below this image, we can then go ahead and add some normal elements, such as H2 for the title. Let's say over 50 restaurants. Then below this some texts with the P tag 2. For this we add the text of treat yourself next time you're in the area. You can change it to any text which you prefer. It doesn't really matter. Now, over to our projects, and then reload the index page. You can see we have an image, we'll have H2 and then some text. This image is really big at the moment, but we'll fix that soon. Now, on to the middle section, we can also remove this text again, and replace this with an image. The image source is time, is images/challenge. jpg. The alternative text of eat-in challenge image. Now, below the image. If we take a look at the finished site, this is what we're looking for now. The H2 of fancy challenge, and then the text below of why not try one of our famous burger eating challenges. Beginning with the H2, and then the text below with the p tags. So burger eating challenges. That's our first two now in place. Then the third one, remove the text, and add an image for this third one. The source this time is sign.jpg. In the images folder, sign.jpg, the old text or reputation image. This is the first section which is over on the right-hand side, which is established 2003. Then some text below. The H2, this will be any texts of your choice. Over 15 years of high-quality. Once you've included this, let's go over to the browser, and we'll probably see quite a bit of a mess, to be honest if we refresh. So there are three different images, and the three sections, because the images are far too big to fit in place. To fix this, we can add our own CSS file to override any of the Bootstrap defaults. So Courtney, if we remember in head section, we have the Bootstrap core CSS. But this is just a base starting point for us to work with. Like we said earlier, there is encouraged to add our own style sheets. If we go over to our project folder and then we can add a new file. So styles.css for custom styles. Now, I'm going to target the call MD-4. Then all images which follow. We could of course add the custom class to this if we wanted to. But let's just stick with the classes that we have. So width will have 140 pixels to keep them quite small and a height of a 140 pixels too. Because remember these just intended to be thumbnail size images. Of course, we need to link this in index page. So our custom CSS always goes right to the bottom. So we can override any of these default styles for both. So the link relationship is style sheet, the href. So this is the same level as the index page. This can just go in the href as styles.css and then close this off. Once you have done that, let's see how this looks in the browser. Good. Now, all three columns are now side-by-side with the small images, page too and also the text. The next content to add to this section, if we go to the finished version here, is these buttons which are down at the bottom. These bonds are pretty simple to add. These just anchor tags, which some Bootstrap classes to make them look nicer. Back over to the text editor, and then to our first section, just after these P tags here. I'm going to add some more P tags and next the link inside. This link is going to have some Bootstrap classes. So this is going to be btn. Then btn secondary. This will go as a gray color that we seen before. These primary, secondary is similar to what we use for the background colors when we look at the grids in the last video. These are default styles that Bootstrap provides for different elements. In this case, secondary is the gray color that we can see just here. Later we use a different color for this green section. Back to our button, btn and btn and secondary. Then we need a link. So the href. We can just leave this empty for now as we don't have any pages to link to. We'll add a row of button. Then the text inside of view details. After this, we're going to add this right arrow, which is this one just here. This is done with an HTML entity. Remember, HTML entities begin with ampersands. The entity code for the arrows is raquo, and this must end in a semicolon. Save that. Then there's our button with the arrows on the right hand side. I'm going to copy this button and paste it in to the other two sections. So copy this link that we just added in. Then next we cannot days at the end of our second area. Then the third area, just underneath our reputation does not lie. Add that end three times. Now, it's in our tree sections on the screen. These images now look a lot better. Now, they fit inside the containers. But we can still take things even further with some Bootstrap classes. To make the corners rounded,w e can do this with a rounded circle class, which Bootstrap provides. The first section here for the restaurants inside the image at the class of rounded circle. The same for the second image. Then the third and final image. Let's see how this looks. Seems there is a problem this middle one, we should add a dash inside of there. Okay, good. So these rounded corners are added with the CSS border-radius. Bootstrap allows us to add this radius to the top, right, bottom left, or circle, just like we just use there inside here. We can see these classes if we go to getbootstrap.com. Then if we go over to the documentation, and if we scroll down to utilities, so have the borders, we can add bolder colors. This is one that we've just used, which is a border-radius. We use the rounded circle, which we see here. Finally, we can also align this new content to the center of each section. So it looks more aligned like these ones here. We can do this by adding a text center class to the container. So just after container add the class of tech center over to the browser. This now aligns all the content to each section. Great, so now all the content is centered. I'm going to leave this video there and move on to look it up. Bootstrap nav bars. 27. Bootstrap navbars: One of the really useful components, Bootstrap provides is Responsive Navbars. If we head over to the documentation in the component section, if we scroll down to the Navbar tab, we can go through some examples of what Bootstrap provides. If we scroll down, we can find out some more information about how these work, the classes we need to apply, or we could scroll down to some nice examples. This is going to be a one which is similar to what we're going to build in. It's going to have our site title in the top corner, then some various links. We can even have a drop-down if we want, a search box, and a search button, this will also be responsive. So if we were to shrink the browser down, this would turn into a nice drop-down menu like this. Let's get to work over in our index page. Inside of our index.html, let's give this a little bit more space. To begin at the top of the body section, we're going to get this started just like a normal header section. Let's use the HTML header tags and then inside here we can go on to construct a nav, inside this nav, we're going to add our a tag and this is going to be for our site title. We can add our Gourmet Burgers title insider here, and we can just keep the href as an empty attribute for now. That's fine. There's our site title inside of here. Then just after we're going to create div, which would be container follow links. Just add these in for now, we're going to go ahead and add some Bootstrap classes soon. But for now we just want to show you the structure. Inside this div we have an unordered list and this is going to be for our list items. We're going to have home and also locations. Let's add the li tags and these are going to be links too, so nest a link inside of here. The first one is home and then a second list item, again with the a tag nested inside, and this is going to be for locations. There's our links, our unordered list. Then after this unordered list, we're going to add a form. This is going to be for the search box, so the form just here. Make sure this is still within this surrounding div. So just for this closing div tag. Then we can go ahead and add our input to the form and then I will put in just afterwards. This is going to be the button with the type of submit and then close this off with the text of search. Let's save that and then open this up inside the browser. There's our standard looking header section, the title, the links, and then the search below. Now, all we need to do is go ahead and add some Bootstrap classes to make this look nicer and also be responsive. Let's start right at the very top, inside the nav section. Let's add the class. The first we need is navbar, because this is a navbar, and then also a second class of navbar-expand-md. This will make the navbar expand on medium-sized devices. Then navbar-dark, this is for the darker theme. Then the fixed-top, so it's fixed at the top of the page. Then bg-dark. Let's give that save and go over to the browser. If we reload, we can instantly see a dark background color. But let's go into the developer tools and see what each one of these classes actually does in practice. Let's make a bit more space and then inspect our nav. This fixed-top was one of the things which we added. This adds position to be fixed and it also sets it right at the top of the page. We have background dark, which sets this dark background color we see here. Remember we also added navbar-expand-md. This kicks in inside the media query with the minimum width of 760 pixels, just like we looked at in early videos. Back over to our code, and let's start with the a tags. We have the empty href. Let's go ahead and add a new class to here too, and this one can be navbar-brand. Remember, these are all classes provided by bootstrap. Save and then refresh, and now we have this white color link. Remember from before we added a surrounding div container which surrounds all this section here. This is a section which collapses on the smallest greens. Therefore, bootstrap provides us with some classes we can add called collapse and also navbar-collapse. This will keep the collapse section looking nice. Down to the unordered list, we have the class of navbar-nav and then a second one, which is mr-auto. Mr-auto applies auto margin to the right of this unordered list. This pushes this search bar over to the right-hand side. If we refresh, this now applies automatic margin on the right of this unordered list. Keeping this section over on the right-hand side. We will talk more about margin and padding in more detail later on in this section. But for now, let's go over to the list items and add our classes here. The first one is nav-item, and then we can do the same for the second list item, the same class of nav-item. Then there's also some links. We add the class for the link of nav-link, and then the second one, which is just here. This is also nav-link too. Save and go to the browser and now we have a little bit more spacing and also some different coloring. Again, we can go into the developer tools and see what each one of these classes does individually. Over to the nav-link. We have this navbar-dark and also the navbar-link, which gives you this color. We have some media queries which apply some padding of various sizes. The same with this nav-link which we added. It has a display type of block and also some padding. This will make sure our navbar is nicely all lined up, with some spacing around. If we shrink the browser, it closes down. We don't yet see the button in the top right-hand corner on smaller screens like we've seen in the Bootstrap demo in the documentation. For this, we need to add a button to our code. Just underneath the Gourmet Burgers title and just before this div, which is a collapse section, we're going to add a button. Then inside this button, this is going to take in a class of navbar-toggler. This is going to have the type of button and then the next part is going to be for data-toggle and we set this to be collapse. This makes the button a toggle button, which expands and collapses the content of nav element. The other elements which we're referring to is this div below with the class of collapse and navbar-collapse. To link this button to this div, we need to add a id to begin with and we can call it anything we want, but I'm going to call this the navbarCollapse. Now this has a unique reference. We can go ahead to our button and add a data-target and give this the same name. So I'll add a hash because it's a id and then we have navbarCollapse. Now, let's go to the browser and then refresh. Now, if we shrink the browser down, we can see we've got the button in the top right-hand corner, but it doesn't stand out too much at the moment. So let's just take a look. Actually inside the buttons we need add the icon for the button. We do this using the span elements and then add some classes of navbar, and this is navbar-toggler-icon. Save that, and then shrink the browser down, and there we go. This is the span elements with the icon inside. We can now see our button, and this also drops down because it's linked to the separate div section. The div it's linked to is this one here with the id of navbarCollapse, which will introduce data-target just here. This is now the section complete and we'll have a nice looking navigation bar by simply applying some Bootstrap classes and helpers. In the next video, we're going to be adding a image carousel to this homepage. 28. Bootstrap carousels: Just like the navbars we've seen at the beginning of the last video in the bootstrap documentation. Back over in these components section on the left hand side, we also have a link to carousels too. So click on the carousel link on here. Then again, if we scroll down, we can see various examples from the code. So here's a simple example here, which is just the code below it. If we scroll down to the version which says we've captions. So here is indicators here, which will be added soon. But we want this version here with the captions, solves a little bit of text about each image. This is going to be similar to the one we are going to be building. So we how these captions, and also these indicators to click between the various slides. So let's go over to our index page. Then at the top of this header elements, let's make some space for our carousel. So first let's add a surrounding div tag. Then inside here we're going to add some Bootstrap classes. The first one is going to be of carousel and then the second one of slide. We also add a data ride attributes. This is going to be equal to Carousel. The data ride attributes of carousel tells Bootstrap to automatically play the carousel once the page is loaded. Inside here we're going to add a second div nested in the middle. This is going to have the class of carousel-inner. This class of carousel-inner is going to act as a wrapper for our slides or images, which we're going to add now, Let's add our first div for our first slide. This is going to have a class, and this is carousel-item. Then inside here we can add our image that we want to display inside the carousel. The image also has a class two, and this is going to be w-100. W-100 is a Bootstrap utility class to set the image width to be 100 percent of the container. We can then add the source for our image, which is our images folder. Then the image of carousel.jpeg. Then an alt attributes with some text. I'm just going to set the text to be first slide for now. So that's our first div for the first carousel item. If we copy this section, we can add one more images just below. This is going to take in the same classes, but all we need to do is changes to be our second image of carousel2. So over to the browser and then index page. If we refresh, we don't get anything shown on the screen. This is because one of our images needs to have the active class added. This will enable the slideshow to appear. And it will begin with the slide with this active class rather than in the source order. So back over to the code. Just after one of these carousel items, we can add active, save that, and then refresh. Good. So this is the first slide that we see here. Now we can see straight away that this is working. When we looked at the examples on the Bootstrap website, we also mentioned adding captions to these slides. We can add these in for each image section. So back over to our carousel item. Then we can add this just after the image. So let's make some space under here. Then we can add div, which is going to surround our caption section. This needs a bootstrap class and this is descriptive, this is carousel-caption. Remember if you want to know exactly what CSS any of these classes is applying, just head over to the browser and go into the developer tools and you can see in more detail. Let's add a level 5 heading. This is going to be for the title or the caption. So I'm going to add "Made to order" for this first image, and then below just a standard p tag with some text of using only the finest ingredients. Good. Let's make it a little bit more space here. If you do see any issues when going through this bootstrap section, just make sure that all the nesting is done correctly. Make sure that, for example, this carousel caption is just below the image and this section is all nested inside of this carousel item and so on. This is usually the biggest cause of any coding problems when working with Bootstrap and also the classes being applied to the wrong elements. So now let's go ahead and scroll down to the second image. So the second image inside of this carousel item, we're going to add the surrounding div just like before. This also has the same class of carousel caption, a h5 to keep this consistent with the text of over 50 types on our menu. Then below this, our standard p elements with the text of "Or build your own". There's our two captions for our two images. Let's see this in action over the browser. Good. There's our mates order level 5 heading and the textures below. If we move off this, hopefully we'll see a rotation. There we go, says our second one with the caption down at the bottom. Good, this image carousel is now working and stand to look good. In the next video, we'll add some left and right buttons so we can skip through these images. 29. Adding controls to the carousel: Welcome back. We have a working slide show display now, which is nice. We can make this even better by adding some controls to skip between these slides. To do this, I'm going to add some buttons to the carousel. One on the left-hand side to skip to the left, and then one on the right-hand side, to skip forward. These added at the bottom of our carousel div section. Down, if we locate the opening tag, which is carousel slide, and then scroll down to the very bottom. We're going to add this just before the closing tag. Let's begin with a, a tag because it's going to be a link. This is going to have the class of carousel control-prev, which show of our previous. A role of button, and then also a data-slide. This is going to be equal to previous, which is P-R-E-V. Data-slide will specify which slides to go to, the two values you can add is, previous or next. This one is going to go back, we want this value of previous. Then we're going to add our span tags, and this is going to be for the icons. This works in a similar kind of way to our drop-down, where we add the span and then we add some classes to display the icon. The class we want to use here is carousel control-previous-icon. This is going to be the left arrow, just like one of these opening hedge wall brackets here. This is our icon and then we're going to add a second span just after this. This is going to have the text of previous. We won't actually see this on standard browsers. This is going to be for screen readers only. Now we declare this is for screen readers by adding a class of sr only. If we save that and then reload, we can see over on the left-hand side that we don't have the text of previous. We just have this little icon just there. Then we can do exactly the same, let's copy this a tag and then do the same for our next. Just line all this up. The a tag is going to have the class we need to change this to be next. The data-slides can also be next too. The icon who needs change previous to be next. Then finally the texts of next for the screen readers, save that and then reload the browser. It's a little bit hard to see, but we have the right arrow just here and the left one just here too. But if we click on them, they don't seem to be working. This is because we need to link them to our slide show. These bonds are links using the a elements. But like with all of the links, we need to specify where to link to, with the href attributes. First we add a id to the carousel wrapper div. Let's go up to the opening tag. This div with the class carousel slide, we can add an id. This id of carousel controls. This name is totally up to us. We just need to make sure this id will match the href for the two links. Copy this carouselcontrols. We can use this id just below as href. The first a, let's add a href and use a # this time and paste in carouselcontrols. Then for the second link down here, the href attributes, again with the # of carouselcontrols. These two images now link in to our main carousel. So hopefully if we save and then go to the browser, these two links should now work. Good, so we can go back and forward through our images. Great, this is all working and this is it now for our carousel. In the next video, we will look at another one of Bootstrap's components, which is the model. 30. Bootstrap modals: Now is the time to look at another useful Bootstrap components, which is called a modal. A modal is a pop-up Window which can give any information to the user. In our case, we're going to be adding a sign-up section at the bottom of our site. Then when the user clicks on the sign up button, this will then activates a modal Window, where the user can sign-up using a form. Once the modal has popped up, we can still click off it and return back to the original page. Let's now head over to our index page and see how to add modal. To begin at the bottom of the page, I'm going to create a sign-up section. This will basically be a row which some texts on one side. Saying "sign-up" for exclusive offers. Then a button on the right-hand side to click on, which activates the modal. Right at the very bottom of our HTML. Scroll right down. I'm going to add a new container for this section. This can go right at the very bottom. Just above these JavaScript, let's create a new div, and this is going to have a new class of container fluid, which makes the fluid full-width of the page. Then also bg-dark to give it a background color. Inside here we can add our div with the class of row. Close this off. Then we need to add two new classes, follow left section and the right section. The left section is going to be a div. and this going to have the class of col-md-7 which you make it seven parts wide on the medium sized devices and above. Then a second section just below, which we'll take up the remaining five parts. This needs to have the class of col-md-5, giving us our 12 column grid. Now this grid is in place, we can first add some sign up text, which is going to go on the left-hand side inside these p tags. Sign up for exclusive offers, dot, dot, dot. Then we need to add a button on the right hand side, which will activate our modal pop-up. Inside the five section on the right, let's add a button with the type of button. Then some button classes. The first one is btn, and then btn-success, btn is the standard base styles for a button, then btn-success will give it the green background color. If we save that and check this out in the browser, this is right at the very bottom. We can just about see our text on the left hand side here, and then the button here. This doesn't look too good at the moment, but some Bootstrap classes should fix this. We also need to add some text inside the button too, let's do that first. We can add the text of sign up here. Inside this row we can add the class of text center, and this pushes all the text to the center of the div. Let's see how this is looking. Refresh, good, our button and also the text is in the center of each one of the containers. Let's make these texts now, light and also italic. This at the left-hand side. We can add it in this, div just here. After md-7, we have the utility class of texts light. This is also provided by Bootstrap and also form italic. These are pretty self-explanatory. If we save and see how this is looking, good, now our text is now is white color and also italic. We'll also improve on this later by adding some margin and padding. We'll do this in a later video. But for now, let's move on to constructing our pop-up modal. This can be added anywhere inside of our code but I'm going to add mine just under the sign-up section. Back to our code. Then again right at the very bottom, below the sign up div here, we're going to add our modal section. Let's add a comment. Now we need to add our surrounding a div. This is going to have a class of modal and also fade. This fade class is a fading effect provided by Bootstrap. This will make the transition nice and smooth. Inside here we'll add a new div. This should be fairly familiar, we're just basically constructing divs with Bootstrap classes to add our nice styling. The class of modal dialog. This class of modal dialogue makes a modal narrower. If we remove this, it makes a modal the full width of the page. I'll just keep modal dialog in place to keep this nice and compact. Then a new div nested inside. This is going to have the class of modal-content. This is the content we want to have inside of our modal, and this is split up between a header section, a body, and a footer. Now we add up three new divs at the same level. This is the first one for the header. The class of modal header. If we copy this section here and paste this in, two more times. There we go, so that's our header. The middle one is going to be for the body, and then the last one is the footer. Make sure it is footer, body and header section is all nested inside of this modal content div here, otherwise things won't look as intended. Let's see how we're looking so far over inside the browser. Let's refresh and click on the "Sign Up" button. We can see straight away that the pop-up doesn't happen when you click on the button. As you may expect, we need to link this button to the modal for it to work. First, we include an id on actual modal. If we go to the top, this id is going to be any name of our choice. I'm just going to call this modal. Then we need to add two attributes to the button, which will activate it. The sign-up button just here. We tell these buttons activate the modal by first add in the data toggle attribute, and set this to be modal. Then we set which modal we wanted to activate by using the data-target. Then sign this equal to the id of the modal, the hash modal. This is the same id which we gave to the modal just below. If we save and try this out in the browser. Now let's click on the "Sign Up" button here. The button isn't quite working. Let's should go over to our code and check everything here. We've got the id of modal and then the button, we need to add data-toggle on this and make sure it's spelled correctly, reload, click on our button. There's our pop-up, which is in fact our modal. But remember we didn't add any content to the modal header, the modal body and modal footer section. This is why we see free empty sections on the screen. This is what we'll move onto next when we add our form to this modal, so the user can add their sign-up details. 31. Bootstrap forms: We know all about using forms from early on in the course. This video should not throw up any surprises. However, we're going to look at how Bootstrap handles these forms. It uses exactly the same elements, as we already seen, but then add some nice styling positioning, by adding the bootstrap classes. Our modal now pops up, on the screen, when we click on the sign upon and inside this modal is where we're going to add our sign-up form. First we can add some text to the modal header section, which is this top part here. Let's go. Actually before we do that if we click off the modal, we'll close it down. Then over to the text editor, let's scroll down to our modal header section here, and inside here I'm going to add a level 5 heading with the text of sign up for exclusive offers. Bootstrap also has some classes available too and this time this one is called modal title, so save that, and then go over to the modal pop-up, click the button, and as our text at the very top, then to add in our form inside this middle section, which is the body, so back over to our modal. This time inside this modal body section we're going to add a form, this form is going to have a div nested inside with the class of form group. This groups together all of the form section include any inputs enables. We add each input enable inside this form group to add some structure to your form elements, such as any margin to space them out. Let's begin with a label and this label is going to have the usual four attributes. This is going to link to our inputs. Let's call this a name input because we are going to add a name section and then the text of your name. Then after this label can add our input, this is going to have the type of text and then some classes, so the bootstrap classes of form control, id and this id is going to be name input, which matches this label so id of name input. Then after this we can add some placeholder text and this can be anything of our choosing, I'm going to simplify, enter your name. Before we added this bootstrap class of form control, this is used on any text-based inputs such as the type of text, select, and text area. This will apply any style such as colors and also sets the input to be 100 percent wide, if we save that, we can see what effect this has inside the modal so click on the button and there's our 100 percent lied inputs in the middle with the label of your name. This is how our form looks by default. We have the label, an input, on separate lines. Bootstrap applies the display type of block and wait for 100 percent to most form elements. If we wanted this label and input to be in line there's a class for these two. We can add this to the surrounding form container and the class is called form in line, save that, and then reload, click on the modal, and now our label and input is in line. But I'm going to keep this as it originally was without this class of form in line that should remove this for now and then onto our email and address form groups, so just like this name section here, we also surround other inputs with this class of form group. Let's copy this and then paste in just below. This one is going to be for the email, so lets change your name to be your e-mail. This is going to have the input type of email too. We also need to change the label for attributes to be email input, which is going to match this ID here. Also change this to be email inputs. I think everything else is okay. Just a place holder, so enter your email and that's looking good. Just below this email we're going to paste this in one more time and this is also going to have the surrounding div with a class of form group but this time it's going to be for your address. This time we're going to have a text area, rather than the standard inputs. Let's delete this input from here. After this label we're then going to create the text area. Remember the text area has an opening and closing tag and the input just has the self-closing tag. The text area can have a class of form control, which is the same as these ones above because it's a text-based input. Then an ID, which matches this label of address. Remember from earlier with a text input, we can also specify how many rows we want to add and we set it to 3 by default. Then a placeholder, with the text of enter your address. I think that's all done for the free inputs so let's see how it's looking. Activate the modal. Good. We've got the name, the email, and also the address, which is a text area. Now we can drag this open down to make it bigger or smaller. This just leaves the footer area down at the bottom. Inside it here I would like to add some checkboxes to ask if the user wants to be contacted by email or post then a submit button too to send the form. First let's add this checkboxes, so down to our modal it should be modal footer so make sure let's changed. We've got the body, the header, and then the footer at the bottom. Let's start with our email and post inputs. The surrounding div, with Bootstrap classes of form check because this will be a checkbox and then form check in line, keeps these elements in line then we can add our inputs with the type of checkbox, the Bootstrap classes of form check inputs. After the class, we're going to add an ID, which is gone to link up to our label. This ID I'm going to call this the email check. Finally, a value which is going to be equal to option one and then close this off. Remember the value is the text which will be sent to the server once this form has been submitted. After the input, we need to add our label. This label is going to have a class of form check label. The four attributes, which are going to link to our ID of the checkboxes and this was email check. Finally, check inside of contacts by email. Let's make a little bit smaller so we can see on the screen. Then I'm just going to copy this to speed things up so make sure you copy this full surrounding div paste it in just below and then we can just simply change this one to be contact by post. The classes all the same, we just need check the IDs difference. The ID this time is going to be post check. The form attribute can be post check too, contact by post, and I should add a question mark after each one of them. Finally, let's wrap up this modal with a button to submit the form, the text of submit, the type of submit too, the Bootstrap classes of btn, and then btn-primary, which will give it the blue color for the button so that should be all now for the footer, I will go with two checkboxes here then our submit button. Let's take a look at this in action. Activate the pop-up. The footer content is now there but it looks a little out of place. We can quickly fix this with a little flexbox. Rather than adding all flexbox in our CSS file, Bootstrap also provides us with some utility classes. We can use flexbox in really quickly. Over to our code and then we can add a flexbox CSS helper inside this modal footer div. Just after modal footer, we can add justify content between. This works exactly like justify content between we did in our CSS. Bootstrap provides it inside of a CSS class, so save that and over to our modal. There we go. Now things are nicely spaced out in the footer. This is just like what we've already learned. We can also replace between with center, start, end, and around, for example two. The only difference is here we're using a class provided by Bootstrap, under the hood, it's still applying a CSS style property, just like we did earlier in the course. If we were to open up the developer tools and then scroll down. If we then inspect this footer area of the modal, click on this, we can see this class of justify content between, which we added just here, is simply applying the justify content flexbox property to these elements. Let's close this down. Now if we go back over to our HTML, if we take a look at the surrounding form, inside the modal, so the form element that has the closing tag, and there's the opening tag. You notice that this form element needs to be moved to surround all of all form elements. At the moment it only surrounds this body content of name, email, and address. Let's cut this closing form tag out of here and then if we move this down, let's move this right down to the bottom. Make sure it has the button with the type of submit, and now we can add this in just after the footer section. Now all of our inputs are now inside this form elements. Just to finish things off I'm going to add a button on the form, which is just going to be an x so the user can click to close the modal. You can also click off the screen to close a modal like we've seen before. But sometimes the user may not know that they can do this so a little cross in a corner of the form will really benefit. I'm going to add this in the modal header section. Let's scroll up to the modal had a part here, and then we can add a bottom. Just after this H5, let's add a button then we can add a HTML entity, which is going to be a symbol of times, and this is going to be a little cross, which we'll see in just a moment. The bottom needs a type of button, a class of close, and then data dismiss of modal. Data dismiss modal will declare we want this bottom to close a modal when it's clicked. Give that save and we can try this out over in the browser. Reload, open up the modal, and there's our HTML entity, which is the cross, click on this, and now this closes down our modal. This is our modal now fully functional and also the form now looking better. As with all elements and components we've used so far, check out the Bootstrap documentation for some variants and some different ways we can use them along with any sample code to get us going. Next we're going to look up Bootstrap space in utilities to add margin and padding. 32. Bootstrap utilities: As we already know, Bootstrap is just HTML, CSS, and some JavaScript. If we want to add any CSS such as margin and padding, we can still select any of our Bootstrap classes or elements and then add them to our own CSS file and then change the CSS properties as we've previously. There is another way which Bootstrap provides us and this is with some useful utility helpers. If we go of to the Bootstrap documentation and then in the menu on the left-hand side, click on "Utilities". Utilities are basically a way for us to quickly add some styles to an element without even having to go to the CSS file. Starting with borders, we can see here we can add borders to an element with some descriptive class names. We have border, which will apply a border to all four sides. We also have border top, right, bottom, and left too. If we take a look at the menu on the left, we can see these helpers are available for most common CSS properties. In fact, we've already used some of these already in our project. If we click on "Flex", we can take a look at the flexbox section and scroll down. We see some flex values we can add as a class. We've already used justify content between for our form section, who will have access to all of the flexbox utilities. If we also go down and click on "Text", just here, also looking at this text section, we've already used the tech center class, which we can see just here. There's also text left, text right and also some utilities to only apply this on different viewport sizes. Scrolling further down, we have sizing, and we've already used this before inside of our carousel. We've used the W 100 class, which we have here and this set our images to be 100 percent of the available width. There's also space in utilities here and this is what we are going to look at in this video. This is used to add some margin and padding values to our CSS. If we take a look at how we can use this, we need to construct a class name. We build this up beginning with an M or a P, which stands for margin or padding. Then after this m or p, we then specify which side of the element we want it to apply to. We can add T for top, B for bottom, left, right, and so on. If we wanted to add some margin to the right, we start with m, r then after these letters, we then specify which size we want to add with a number from zero to five or we also have the option of auto. Zero will reset any default margin and padding back to zero. Two would give us a value of 0.5 rams and so on. We also have x which will apply the classes to the left and right, or y, which is for the top and bottom. Let's go over to our project and if we shrink the browser down, we're going to start inside of the navigation. Let's drop this down and we're going to begin getting to work on his form section. First, we want to add some classes to make this look a little nicer and then we use some of the spacing utilities. Let's open up our text editor and then get to work in our header section. We scroll down to our form inside this header. In fact, let's remove this carousel from the header and just place this afterwards so scroll route downs after these controls, cut this section out, then down at the bottom of our header, let's paste this outside and to make sure this is all okay, expand the browser. Great. Now we just have our navigation inside the header. Let's get to work with our form section by adding some Bootstrap classes. Just here we can add a form class of form-in line and then we can add some margin, we can use m y. This will apply some margin on the y-axis, which is above and below and then the value of 2, save that, reload and the drop-down will now have some margin on the top and bottom of the form. Then we can go ahead and make this look a little nicer with some Bootstrap classes. First of all, the inputs can have a class of form control. Then we add the type for the input of text, and then a placeholder value of search. Now, the button, we've got the type of submit, let's just add some classes to this. The first one can be btn, which we've seen before, then btn outline-success. Outline will make sure that this color only applies as a border rather than a solid color and success will give us the green color, which we'll see just here. These are on separate lines because we're on a smaller view here. If we make this a little bit wider, we now get these components now in line. This my2, which we've added here, will apply margin for all screen sizes. We can also set a different margin value for other screen sizes too. For example, if we wanted to reduce this margin on medium-sized devices and above, we could add my-md medium devices and then reduce this down to be 1 rather than 2. If we save and refresh, now when we make the browser, the medium-sized devices, this margin is now reduced on the form. Great. Now we have different margin values for above medium sized devices. This search button is also a little too close to this inputs. It would look a little nicer with some spacing in between. To fix this, we can add some margin to this input too. This inputs just here, let's add a new class of mr, which is margin, right. Then small devices and above, let's set this to be 2, refresh and there we go, so that's a margin on the right hand side and this should apply on smaller devices, which just here and above. Good. If we shrink the browser down to the smallest size, which we've seen before, this button is also tight against the input. Let's add some margin to the button to space this out, so down to the button, after btn outline success, we can use my and then let's set this to be 2. Let's see this in action. Great. This looks good on the smaller screens. If we stretch this, so the larger screens. We could also reset this margin for larger screens. But it does look fine so I'm going to keep it like this for now. Now onto the three images down at the bottom. We also need to add some space in to the section. I'm going to add some padding to the inside of this elements. Let's go down to the container, the three images below the carousel. It's this one here after container and text center, let's add some padding on the y-axis and this can be a value of 5, reload. Good. Now we've got some padding on the top and bottom. Let's make this container a bit taller, add some more equal spacing. Finally, to finish off this homepage, let's add a footer area, back over to the HTML. Right down to the bottom and we'll close this div off. We can add a footer section. This is going to be a simple footer area. We're going to begin by adding a back stop button so when the user clicks on it, they'll be taken back to the top of the page. Then afterwards we'll add a copyright symbol with the name of Gourmet Burgers. We add a home and locations link just to finish things off. Let's begin by adding some classes to this footer area. We can make this a container and bg-light to give it a light background color. To space things out, we an add some padding on the y-axis and a valley of 4, open up the p elements and this is going to be our text or back to top. In fact, we'll just cut this out and add this in as a link with the a elements and paste this inside. The p tags can have a class and again, this is a utility class of float right, This will make the text float to the right-hand side of the page. This link can also have a href attribute with a value of a hash. This means when a user clicks on this link, they'll be redirected back to this homepage and then it will start at the very top of the page. Let's take a look at this. Refresh, click on back to top and then the page reloads right at the very top so there's our back to top link. Then just after this we can add a new set of p tags. This is going to contain our text of Gourmet Burgers with the copyright symbol and then add two links, which is going to be for home and locations. Just after this opening p tag, I'm going to add the HTML entity of copyright, which is ampersand copy and a semicolon, and then the textile of 2018 Gourmet Burgers. Then I'm going to add a second HTML entity, which is called mid dot. This is simply going to be a dot which will separate this text here from the links which we're going to add in next. Next up, we can add two links for home and locations still within this p tag here. Let's add our first link with the text of home. This can have a empty href attribute, as we don't have anything to link to. Just after this link, we can also add this mid dot once more to separate our two links and then we can add our last link, which is going to be for all locations. Again, this can also have the empty href, give that a save, out to the browser. Good. So if we zoom in and then scroll down to the very bottom, there's a link which is back to the top, which is floated to the right with this utility here then we have our copyright symbol and the text of Gourmet Burgers, a dot in between to separate our links of home and locations. This is it now for our project and also our spacing utilities. I hope you can now see how using Bootstrap can really give us a head start when building websites. Of course, all the default styles are not always going to be exactly what we're looking for and it is encouraged to override them and make customizations to suit your needs. This is it now for our lookup Bootstrap and I'll see you in the next section. 33. Thank you: Congratulations on reaching the end of this course. I hope you are now a lot more comfortable laying out websites, using the CSS Flexbox, Grid, and Bootstrap 4. We started at the very beginning, taking a look at the CSS Flexbox. Then we moved onto the CSS Grid system, which is an amazing way to create almost any type of layout you could imagine. Finally, learned how to use a Bootstrap 4 framework to allow us to create great looking websites really fast. Or while building a burger restaurant website, just put everything you learned into practice. Remember all this is just the second part of this course. So be sure to check out the next part, to gain a deeper knowledge, and learn everything you need to know to build full stack applications. Bye for now, and I will see you in the next part of this course. 34. Follow me on Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare, and also follow me for any updates and also to be informed of any new classes as they become available. Thank you once again, good luck, and hopefully I'll see you again in a future class.