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

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

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
34 Lessons (2h 60m)
    • 1. Welcome to the course!

      1:54
    • 2. What is Flexbox?

      3:26
    • 3. Flex direction

      4:42
    • 4. Flex wrap and justify content

      5:16
    • 5. Align items

      5:21
    • 6. Align content

      4:26
    • 7. Controlling child items: order

      2:57
    • 8. Controlling child items: grow and shrink

      6:15
    • 9. Controlling child items: alignment

      2:37
    • 10. Time to practice: Integrate Flexbox into Tech Store

      1:01
    • 11. What is the CSS Grid?

      0:56
    • 12. First look at the CSS grid

      7:16
    • 13. Grid gaps

      2:28
    • 14. Track repeating and the fr unit

      3:42
    • 15. Min and max track sizes

      2:06
    • 16. Grid line numbers

      7:06
    • 17. Grid line names

      5:53
    • 18. Grid template areas

      7:11
    • 19. Nesting grids

      2:32
    • 20. Alignment

      5:47
    • 21. Time to practice: Song Finder layout

      6:55
    • 22. What is Bootstrap?

      3:33
    • 23. What we will be building

      2:29
    • 24. Creating a Bootstrap project

      7:01
    • 25. The Bootstrap grid

      8:27
    • 26. Adding images and text

      11:35
    • 27. Bootstrap navbars

      9:54
    • 28. Bootstrap carousels

      6:33
    • 29. Adding controls to the carousel

      4:34
    • 30. Bootstrap modals

      8:32
    • 31. Bootstrap forms

      13:52
    • 32. Bootstrap utilities

      12:12
    • 33. Thank you

      0:52
    • 34. Follow me on Skillshare!

      0:23
41 students are watching this class

About This Class

Welcome to Full Stack Web Development for Beginners!

This course is designed to teach beginners everything they need to know to build full stack websites and applications!

This is part two of this huge course, teaching you all about the CSS Flexbox, CSS Grid and the Bootstrap 4 framework.

We begin with the CSS Flexbox, where you will learn all about:

  • What the CSS Flexbox is
  • Flex direction
  • Flex wrap and justify content
  • Aligning items
  • Aligning content
  • Controlling the order of child items
  • Child items grow and shrink values

We then move onto the CSS Grid, learning about:

  • What is the CSS Grid
  • The grid display type
  • Grid gaps
  • Repeating tracks
  • The fr unit
  • Min and max track sizes
  • Grid line numbers
  • Grid line names
  • Template areas
  • Nesting grids
  • Alignment

After this we learn about the responsive Bootstrap 4 framework:

You will learn about:

  • What Bootstrap is and what it can do
  • Setting up Bootstrap projects
  • Whats include in the CSS files
  • The grid system
  • Adding images and text
  • Responsive navbars
  • Carousels
  • Using carousel controls and captions
  • Modals
  • Forms
  • Bootstrap utility classes

All while building a gourmet burgers project.

This second part of the course covers all of the layout fundamentals you need to go on to building full stack websites.

So, enjoy this class and check out the rest of the parts as they become available!

Transcripts

1. Welcome to the course!: Welcome to full stack Web development for beginners is costing, designed to take you from beginner to a Web developer capable of building no 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 on applications. This is a second part in the full Siri's, where we'll continue building on your hate, html CSS and Responsive Web design knowledge and introduce you to the CSS Flex box, the Grid and also the boost dropped. Four framework. This course is all about creating flexible layouts, beginning with the CSS Flex box two hours to have amazing control over how elements are laid out on the page. We then move on to the CSS grid, which is one of the most powerful of modern techniques to learn the lay unhelpful Web pages , creating almost any type of layout you can imagine. We finish off with the popular Bootstrap four framework. Where will build a burger restaurant website. This will give you the chance to learn. I'm put into practice the bootstrap grid system, images and text nut bars, rotating car sells, models, forms and so much more. We also look at the utility classes who struck, provides or easy styling, along with how to override any of these styles. Make your projects completely custom. I hope you're excited to learn all about boots. Drop on laying out websites in the second part off this course. 2. What is Flexbox?: in the last few sections, we have learned a lot about halted crate on change layouts. A lot of the historic ways of criminal outs involved using tables off floats. We have already talked about the limitations of these methods on why they're not ideal for laying out pages in this section. We're going to be looking at both e flex box on grid These modern lay our methods make laying out where pages so much easier we're going to begin with the CSS Flex Books. Flex Box was designed to be used for worn dimensional layout, meaning it deals with Warne access at the time, even a row or a column just like you can see here. No, only this flex box control the direction, but it also allows us to set the alignment to like we have here looking online, an item or a group of items to the left or right, or even to the top or bottom. Flex box also allows us to control the size off the individual items, too. He on the top roll. We have two boxes taking a one part and then an item taken up two parts. Then for the second role. We have two items, one item taking up three times the size of the over. These also flexible too meaning. If there is more or even less space available, thes free parts will always be in proportion to the one part. Another great feature off flex box is the ability to control the order in which the items appear on the page. Traditionally, elements appear in the order will place them in the Haight Schimmel file. Flex Box announces to control these source order. This can be particularly useful when switching elements around for different layouts. We could have certain elements in one order, the largest greens and then a completely different order for smaller screens before we jump into building something with flex box that is born important concept to first understand on this is the main and cross access. I would define the main access by setting the flex direction. Roe is a default, and this place is the items in the left to right row on a standard left right browser. As you can see on the right role, reverse is opposite and disappears from right to left. Then we have column, which is the top to bottom and then also column reverse, which is the opposite of bottom to top. When we said this flex direction, they should be considered the main access. Then the cross access runs perpendicular to the main axis. So if you had flex direction, set to row column will be the cross access. Also, if we said the Flex direction two column, then row with them, become the cross access. So if this is a little bit difficult to understand right now, just remember that the main axis is the direction we set, and then the cross access is the opposite. So this is a basic overview of how the flex box works. In the next video, we'll set it up in our text editor on sea in Action. 3. Flex direction: we now know some basics about flex box, but seen in action will really help us To understand how things work to begin. I'm going to create a new project called Flex Box. So right, click a new folder on name Mrs Flex Books. Now, we can go ahead and open this up in our text editor. So I dragged this over and then we can create or familiar index or hey, Jim O. And then I want to use the short court all of Haiti mo cold on five and then hits up. Said the title on this committee Flex box. I'm give that save for this example. I'm going to set some elements to the screen the work with So within the body section. Let's go ahead and create a div. This is going to have an I D off container inside here. We can also add some motives, so this could be item worn and then a class of item so it wants create five more of these items someone to copy the section here and then paste it in five more times, even those with six different items with another container so light in to free for five and six under could also have the same class name of item for each one of these. Then let's hope we can open up the style tanks within the head section. So it again, let's talk about this item we don't item and then we're gonna add some colors. So the backgrounds, let's go for, like coral, some putting, or for two pixels. It's a margin of 10 pixels onto the text line off center. This is rescue with some basic style in, so you can see the elements on the page. And now, if we open this up in the browser, let's go to the index or hate Schimmel on Open this up and 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 the flex box with their need to set the display. Type two Bowflex. This is done on the parent elements on the parent elements. We gave an I D off container. Let's go back up to the style times than at the top. Here's the harsh because it's an I D and then constructively Container and then said the display type two reflex gives our save and then reload the browser. We now have a change. The reason we're now at 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 role. Let's take a look at real reverse. This is also on the parents on. We set that with the Flex Direction or RO Reverse save. So before we hard item one on the left and Item six on the right refresh. Now the first item begins on the right inside and then moves over to the left. We also have a direction of column to stock these items on top of each other, so change will reverse to be now column, and these start from top to bottom again, just like before. If you want item one to be the opposite and down at the bottom. We considered this to be column reverse in the Flex direction said column reverse and now our items switch over from bottom to top. So this is the four flex direction options we have available to us. Remember when certainly flex direction. This is considered the main access. So we have Ro Ro reverse column and column reverse, too. So that's it. Notable. First, look our flex box, and next we'll take a look at how we can use Flex Rupp on Justify Content. 4. Flex wrap and justify content: in this video, we're going to be looking at flex rap and how to justify the content. First, let's go ahead and change the flex direction back to be the default role inside the parent container. All of the items we've added and now on the same row, it will refresh on the now go from left to right if you keep out of more items in or will still appear on the same line. So let's go down to our items ons copies and I'm paste in number six just below. Given those 12 items, this behavior can be changed by using the flex rub property. The default is set to know up. This is why we're seeing all the items on the same line. This also applies to the container to. So if you go over to the style section and target the container that's aren't the Flexeril property and then set this to be Rupp say that reloads. And now the items were rough onto multiple lines. If we make the browser even Noah, each time there's less space that will all drop on to new line. This place is items on the line, Director below If you wanted the opposite effect. We can use Rupp reverse. So I reverse onto the end of this, give us save and then reload. And now the extra items which were on the line below now appear on the line of both because it's now works from bottom stop. So 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 rock and also for flex direction. To add these into Warner property on this is called flex flow. So you can delete these two lines here and then aren't flex low. His takes in two values. The 1st 1 was overvalue off row for the flex direction and then the second floor up. So this first funny was flex direction. Then the 2nd 1 is the flex. Rupp say that. And now with merge 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 spaced out across the main access. This is also a CSS property which is our needs to the container. So that's our justify content. And then let's begin with Flex start. If we refresh, we don't see any change in the browser. This is because Flex start is default. We can see how this affected more if we try flex and around the flex start that's at flex end. So remember that our items by default or in a row so across the page from left to right This is why flex start aligns all items on the left inside and then flex end aligns all the items to the right inside, which is the end of the main axis. Let's also try sensor save and then reload And now everything is aligned to the center of the main axis and we still have the same behavior. If we to shrink the browser, all items would still drop on to the next line. Starting from the center. This, of course, places items along the centerline of the main axis which is just through here. The next three options all related to how the available space between these items gets distributed. If we start with space between so rather than center, we conard space between on, See how this is looking So now the items still on the same line that would normally be but now 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 on right inside We have space around for this, so change space between to be space around. This spacing is applying to both sides now, so items will have twice as much space in between them than it will do on the end. Because, for example, item free has half the space here and then item four as have the space on the side here too . If you wanted to have the space on each side to be equal, we also have space evenly. So let's give this a go. Another is even space between all the items. This is it now for this video. But you should not be able to see how powerful the flex box is for layout. Even we just added 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. So let's delete this. Last six were added in early on and then reloads and no back toe 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. Other items aren't also determined the space in between them. All this was doing across the main axis. We have the main access set to row. This means all of the alignment and space in was across the page from left to right A line . Items also works with these same items too, but this time on the cross access. So currently, with our current set up, the cross access would be vertical well from top to bottom for this demo, working out some different heights to these items. This will help you see better how line items works. So let's go over to our work six items and then it's on some style. So the non attributes that's at the height let's go for 300 pixels in company section. I'm looking at this in a couple more times, so I'm going to go for 2 50 on this one and then free 20 at the end. And Dan Refresh. Now this looks a little strange. We've only said the height off free of these items, but it looks like they have all changed. This is because the default value for a line items is stretch, so the flex items will stretch to the height of the tallest one to fill the height of the container. So back over to our styles at the top of the page again, this is it. In the apparent container, we can add a line items and, as we just mentioned, Stretch is the default so ardently seem won't cause any changes. So let's begin with flex start so flex and a dash and then starts. Flex Start will start the items on the starting edge across axis. So for those this will be the top of the page and then working down. So now we see the free items which height with changed under your items or still less they originally were. If it wants changes to start at the bottom of the page, would then use flex end. So remember this flex start on flex and position is dependent on which accesses our main and cross. If we went ahead and changed the main access to be column. So rather than row it changes to be column refresh. And now they sets the main access to be vertical, meaning the flex end, which sets across access, would now be over on the right inside what changes back to row and then reinstate. Also, that is option to center the items too. Again using a line items we can change flex end to be center and you can probably imagine what this does. This ants a line right down the middle off the container on all items were spaced evenly above and below this line. These type of layouts used to be a lot more complex, but would flex box. This allows us to do all of this? With just a few lines of CSS, we can take things even further to buy a line into the baseline of the text. So this text, which is in between each item, so let's change sensor to be baseline refresh. So 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 a bottom line of the text on This is what we see here to see a change will need to move the text out of position. Horizontal line should do these photos. Let's go down to our items found inside this first if we can have the horizontal line and let's see what effect this as over in the browser. So now we have more content. Insider here this is pushed down this item on text on doll of items Still a line to the bottom of this. If we move the text out of position on another element to it will also still line. So this time art to or is until lines and this is inside of ice and free and then refresh. You can see that all the items still lined up even over added two extra pieces of content. So this is how we can use a line items in flex box. In the next video, we'll take a look at another cross access Lyman method called a line content 6. Align content: next up, we're going to take a look at a line content. I know there's been quite a few terms to get your head around here. What you can think of a lying content are similar to justify content which have already used, but this time it applies to the cross axis rather than the main axis. For this, we need a few more roles of content. So let's remove these styles, which added in last time. So the 1st 1 the horizontal line, the two lines here and then the final two startle attributes. Okay, So to move that, and then I'm going to copy the six items once more ons then paste him in and focal paste is in two more times to give us 18 different items. Say that and then refresh Good. So we now have about free lines of content to work Would if we to shrink the browser down a little. It would also help for this demo if we set a background color to the container, aren't also set it to be the full height of the screen. So what in this container, let's are some CSS So first of all the backgrounds on I want to Go for, Like, Green and then said the heights to before screen Weird 100 VH remember V hatreds of relative size, which sets us to be 100% of the view port height. Okay, And then finally, let's remove this online items and justify content from previous videos. I'm just going to comment these out so they're still there and then refresh. Okay, so now we can get to work on online content. Remember, we're still working on a cross access, so all this will be applying from top to bottom, just like a line items which were looked at before stretches. Also, the default for lying and content to This is why all of our items taken of the full height of the view part. We also have a familiar flex start to and also flex end. So let's see how these look in a line content, so flex start to begin words and then refresh. So now we don't have the default stretch value on all items about the start of the cross access, which is a top of the page. As you probably imagine, Flex end pushes this to the bottom of the page and then rises to the top. So let's just demonstrate this would flex end refresh. And now everything is down at the bottom of the cross access we also have sent it to which will push everything into the middle of the heights or the middle of the cross access. In this case, you should be starting to see a pattern here too. Most of the properties were looked at pretty much the same, but just applied to a difference. Access just like justify content. That is also space between on space around, too, that start with space between so supplies all the space in between the items like we just mentioned. We also have space around and this will give us equal space around all the items. So from top to bottom half of the space is on top of the item, on 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 access this time to be column and then refresh your browser. Okay, so no columns. That's the main access to be vertical. This means the horizontal is now the cross access and this causes alone content and now apply across the page. Since this is now the cross access, let's go ahead and change your doctor row and then reload the browser. So this is one of those things which just needs a bit of practice. It's go ahead around. I want to start using the inside of our CSS more regularly. Things will become a lot easier. This is if a now for spacing out the items and I will see you in the next video. 7. Controlling child items: order: all of the flex box properties we have looked at so far of being added to the parent container. This allows us to control the items as a group, but in this video on also the remaining flecks books videos, the properties will be applied directly to the individual flex items. This gives us greater control over individual items. First, we want to look at setting the order which other items will appear? Let's go back over to our index page on. We can return back to our six original items. So let's delete these last 12 Leven items worn through to six on. In fact, we can also remove the heights which you said earlier Let's delete this loan on also working comments out lying content from the last video. By default, I was six items will appear on the screen in the source order. So we see item mourn Wright Fruits Item six across this main access. 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 answer the older property. Let's begin by setting these to be one, the order property will allow us to rearrange any of these items. So all we need to do is aren't this order class to any of these items? So let's go for writing to that order in as a class. What's the browser and then reload. So this now moves are second item to the very end. This is because all of items have a default order which is this property here off zero. This means our item to now has a weight of one moving it to the very end. This number could be anything such as 10 15 or even 30 for example, and they will still appear in order in which we set negative numbers are also allowed to. So we said this to negative warn this one mile place right into right at the very start since all your items oven order off zero. This is particularly useful for changing layouts with responsive design. The order can be changed in a media query toe have different layouts for different screen sizes, so it's a really useful tool tohave So this is how we can rearrange the order by using flex box. It is really simple and just one line of cold. What? You can see how effective this could 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 these child items more specifically, how they grow and shrink to the available space. So to begin, I'm going to go down on reduce our demonstration to be for products. I'm can also remove this older class, then also the correspondent CSS just a both. Okay, good. So to do this, we can use a property called Flex. Grow on. Also flock shrink. Let's begin by taking a look at Flex Girl. This will determine how an item congrats go along the main axis. At the moment, sytem size is controlled by the amount of content in the middle on also any part him. So currently they don't take up the full width of the screen, which we can see over in the browser. If we go ahead and our flex girl to one of these items as an in line style. Of course it doesn't have to be in line. It can also be included in the CSS to so let's aren't the Flex grow and said it's to a value of one safe, and now our first item takes up a lot more space than the remaining free so basically these free items here number 23 and four will always stay the same size dependent on the content inside. And then the war would flex. Grow will take up the additional space if we do the same fall item to if a company's flex grow and then let's see what this does. Okay, so items free and four both still take up the same space that always have done. Then the remaining spaces shared equally between items one and two. Because both have unequal flex grow value of one if we go ahead and aren't this toe all the items so item free and item four to we now see the all four items share the same amount of space. This Flexeril value of one is not any particular unit of measurement such as a pixel or M is significant door when compared to the rest of these values, the difference happens when they you know, all the same, it will make item free. A Flexeril value off to over the browser, and no item free will try to take up twice the amount of space as the rest. If it's available, that's strange is to be free, and it now it should be even wider, while this Flexeril property deals with how items will grow across this main axis if the space is available, we also have flex shrink, too. These deals with how item should drink if there is not enough space for them to fit. First, let's remove the rump by commenting out the flex flow, which is this line here. So come on and forward slash if using visual studio code, they're looking out of fixed width off 600 pixels for the container, so that's at this down at the bottom. The weight off 600 pixels number can make sure these items don't fit in this container by setting them to be a wit, Let's say 160 pixels so we could do it like this and set the width of 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. That's changes beef like spaces on still 160 pixels, so this flex basis defines the default size oven elements before any remain in space is distributed here the four items too wide to fit into the container, so this is where flex shrink comes in. Black shrink will determine which items will shrink to fit the available space. Let's go down and change flexed row to be flex shrink this time changes for all four items on that set the last two to be a value of two and then refresh when I'll see the items free and four have shrunk since their higher value compared toa items born and to if we go over an increase one of these items to be free instead, this will cause item to shrink the most when there is not enough space for them all to fit in a container. In this video, we have looked at flex, Groll, flex ring and flex basis. These free properties come to combine into the flex shortened like this so up to the item we can comment out this flex basis and then replace it with flex. So if we were to add zero worn and then auto, these are the default settings. Zero to begin with, it's a flex grow. One is for flak shrink and then also is for the flags basis, which were added just both here. If we to say that and then see how it looks over in the browser, this is how it would look with the defaults. We have this fixed width off 600 pixels for the container and then our four equal items because they all set to the value of zero. You can play around these values just like before, too. For example, if would say all items have a flex bro value of one so worn and worn and then over the browser there will each now take up the available space equally in the container. This flex property is a lot easier and cleaner. Then writing all these free properties separately. We know don't. We're looking at how items grow and shrink. Next up will finish off looking at the flex box by learning about a line self 9. Controlling child items: alignment: earlier in this section, we learned the full group of items in various ways. This works fine, but sometimes may want one particular item to be aligned differently than the rest. For this case, we have the online self property to begin. I'm going to move the in line styles, which would just be before. On this is the four items below sort of move the in line styles, which is the flex shrink values before 12 alliance self works just like a line items which we used on the container. But this time we added to the item. We want control to see this in action. I'm going to set the container to be the full height. So school up to the style section. And then it said the height to be 100 VH, which remember, is the height of the view bolt. If you go to the browser just like we've seen with a line items, the default value is stretch, which is why these a place from the top to the bottom of the page to control one of these individual items. We can aren't a line self and changes default, so let's go down to the products on this any of these. So let's reintroduce the style this time we can aren't a line self. Let's begin weird sensor and refresh. And now we're control in one individual item rather than a whole group of items. We also have some familiar looking properties to such as Flex Start which we should know what happens now If we refresh this now, place this at the start off the axis. If you wanted this to be placed down at the bottom or the opposite end, we also have flex end which have already seen before On this gives us some expected behaviour. We also have baseline to which we looked out for over values. So let's change flex end to be baseline refresh and this will now line up with the baseline of the text from over items. So this is it normal, for I will look at the CSS flex box. You can see how useful it could be for laying out websites. Next, we're going to cover another layout technique called the CSS grid. So I will see you see him 10. Time to practice: Integrate Flexbox into Tech Store: before we jump in tow, learning about the CSS grid while the flex boxes still fresh. You know, heads, I would like you to go off and now get some practice using this flex box. This lex boxes a really useful way to lay our websites. But just like when learning anything new, the consumer lots taking it up first. It does become easy with practice all And this is what I would like you to go ahead and do now. I would like you to use some of the flex box techniques you learned and then go ahead and apply them to our textile project. You don't need to go crazy and completely rewrite all the CSS, but just tried to change a few things to include his flax box. Some ideas to make the product automatically fill the container, or you could go even further and use flex box to change the layout for different size devices. Go ahead and give them a go on, then come back to learn all about the CSS. Create 11. What is the CSS Grid?: we now move on to another powerful technique for laying out websites, called the CSS grid grid cells. Pretty much all of the layout problems Web developers have had to work around in the past. The flex box, which we just looked at, helps off a lot of these layout problems, too. But it is one dimensional. We can only work in Eva columns or rows at one time. Great, on the other hand, is truly flexible and allows us to work in two dimensions. This means it can be easily used to lay out a full website where this flex box is generally better suited to smaller alignments on position in they can be ball fused together on actually worked together very well. So let's waste no time in German 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 Flex Box Project folder and then rename this the grid. So over to the desktop, all the location where you saved your project. I'm going to duplicate this project and then once it's doing, that's rename this the grid open itself in visual studio code and then we can also open up the index Hate smell inside of the browser, this will say, was setting up all the boilerplate Haiti more cold, which we need to get started. So let's go over to the indexed or hey, Jamal, come close this side bar down and that makes him change. Use to clean this up. So the title of grid and damn, we could remove all the styles from the container just leaving in this background color. We can also reuse this. We'll also reuse item to select remove the flex properties, leaving in just a background color on. Also, the partying is fine. Down to the div will gain use the D of container on also the individual items. So let's just remove this style property from inside the enamel. Good to go good. So just like with the flex box. First we need to change the display type off the container. But this time Robin said it to be flax. We used the grid, so display with the type of grid and let's see what happens over in the browser. If we're reload, we don't see any changes as of yet. When we set the grid, the child items of the container a block level. So the full which for the page. If you want the items to be in line, we can change the grid type to be in line. So let's go over to here and changes to be in line, great reloads and then all the items now in line rather than block. I'm going to stick with grid for now, though, so that remove this in line. I'm just all the spots. A normal So then declare how we want these items to be laid out. We set the number of columns on Rose that would want to use. I'm going to start with the columns and this is done inside of the main container. We do this with a CSS property called grid template columns, and then I'm going to set this to be 100 pixels and does the browser. Okay, So to see these items better, let's aren't a border around outside of each on this needs to be doing inside items. So just a simple board of one pixel on a solid line have a go. We've only specified Warner column at the moment, which is 100 pixels wide. This is why we see them all stocked 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, that's on the second column off 300 pixels and then the 3rd 1 80 on This is how this looks in the browser. We have specified free sizes here. So the 1st 3 items off these sizes so we have the 1st 100 then free hundreds 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 could be better seen with more items. Let's go down to the hate Shamil now making duplicates. One these dibs. So let's pace in a couple more times. So five, six and then seven. And there's also repeated items on the second row. And then we left would warn extra item, which defaults to the first column. These columns on also Rose, which will look at next and known as trucks. So at the moment would have 100 pixels my truck, a free 100 pixels by truck and then an 80 pixel wide track on the right. Also, these don't need to be sized in pixels. Eva. We can use things we already know. So chance percent I m or even auto to automatically take up the remaining space. So rather than 80 pixels here, we can set this furred track to be auto. And then this for track, will automatically take up the remaining space now on to rose. At the moment, the height of each one of the rose is set by the content. This includes apart into using visual studio code, we can add some sample text called Laura MIPS. Um, so let's go down to one of our items. Let's say item to If we type Florham with a top, well, then get some more text content. So Let's see what effect this house in the browser on this first row is now a taller because of the extra content. We don't always want this, so we often want to have control over these ourselves. This is where grid template rolls comes in. If we go back over to a container, we can also set to greed template rose on. Let's set this to be a volley or 100 pixels, then back over on all three rows and now sets of 100 pixels high. So 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 2nd 1 value will only affect the first row. So go ahead and aunt more values. So let's go ahead and arts the 1st 1 let's say, 250 pixels, 150 pixels and then 100 okay, good. So now have free individually sized role trucks in just a few lines. We have controlled the layout for our content in two dimensions, using both columns and rows. This is in contrast to the Flex box, which is designed to be only used on more dimension at the time, even a row or column. This is our first look at the grids that is so much more still to cover, though on will continue in the next video. 13. Grid gaps: In the last video, we added a border around these grid items, so we'll come back to see how they're laid out. If we go over to the success on 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 is we can use great gaps. Are the greed gulf Between columns? We have greed column gap. This is also applied to the container. 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, that is also grid rogue up to, and you can add this also to the container. So grid Rocca. Let's again set this to be 10 pixels. Refresh, and there's a 10 pixel gap between the rows on the columns. Now. No time these gaps only between the rows and columns, not around the edge. This solves one of the old problems were hard when space no 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 short on version two called Greed Cup. So rather than having two lines of code here, we could remove these on instead. Just use great cup, just like when using margin and puddin weaken. Set to values the 1st 1 with rose. So 20 pixels and then for the columns, 10 pixels and refresh or, if wanted, one value to apply it above the rows and columns. We can just leave in one value, such as tam pixels, and then this 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 grids would be a lot more complex and time consuming. This is it enough, agreed Cups. Next, we'll look at how to repeat trucks. On also said the men mark sizes 14. Track repeating and the fr unit: in this video, we're going to look at some ways to have better control off our trucks. First is how to repeat tracks that have the same size. Is if you wanted all of our columns to be 200 pixels wide just like this. So Robinson, all free. There were 200 pixels. We already know that. Saying one value like this will only result in one column being displayed to help with this grid provides us with repeat so we can add days inside of all columns. So let's on. Repeat. And then we're gonna handle value inside of the brackets like this. We still keep the size of the truck here, but before this, we aren't the number of times we wanted to repeat. So we've wanted four columns we do for our 200 pixels and reload. And there's over four columns would equal with. We're still free to add more individual tracks to even before or after. So if we wanted the 1st 1 to be 100 pixels and then repeat four more afterwards, we simply aren't a new value in before this. So 100 pixels and then I will repeat afterwards. So this gives us our first column art 100 pixels wide on four repeated columns at 200 pixels each. If you wanted 1/5 track to take up the remaining space on the right inside, we could also do this. Look it out of fixed size. Or we could reuse the auto property, which would seem for refresh and now have a extra item at the end. Alternatively, if we're no harmony columns we want to use, we can also set thes also to let's remove auto from the ends around the first value. Let's say we want free columns. We could also use auto inside of the repeats, and there we go. So there's over three columns, and now the tracks automatically resize to the content. Next, I want to show you a new unit of measure called the FR Unit, which is short for fractional. This unit relates the one part of the available space. It works like earlier when we looked out. Flex values where a value of one is one part of the available space on the value of free is three times bigger. Let's on it tomorrow columns and see what happens. So when I'm a grid template columns instead of auto conard warn fr and refresh. Now the weed for marble columns don't depend on the content. They all take up the same available space. And of course I didn't and you call him in. But to fr we'll take up twice the available space. So at 1/4 column refresh, this is now twice the size of these free, as you would expect. Repeat can also be applied to rose to so just below what can also on repeat again inside the brackets without how Maney Rosa wants and then the size and then remove All were lost calling from itself. Now for reloads get free, equal size rose to again. Our roles can also be makes with over size trucks, too, meaning this is really flexible to use. 15. Min and max track sizes: the CSS grid also allows us dissect arrange for the truck size by adding a minimum maximum size, which you should be. We do this with the main max function. We can do this inside of all columns or rows. If we go to the columns to begin, we can remove this, repeat and then replace it with the men. Marks function inside the brackets. This also takes in two values. The first is the minimum size of the column. So let's say 100 and 60 pixels and then the second Molony is the maximum size Let's go for 200 pixels. So this section will apply into the first column on Let's have a Couple More columns in the 2nd 1 could be worn F R. And then the 3rd 1 will make it twice the size off to ever, then over to the browser. So this 1st 1 is the one we interested in. This is the one using men. Marks on the size should be between 100 and 60 and 200 pixels to check. This is working. We can open up the developer tools on inspect the first column. Okay, so let's go over to the inspector. It will hover over this item. Concede the size is set to 200 pixels. Then the 2nd 1 is one fr. So we'll take one part of the available space and then the 3rd 1 is set A to fr they should be twice the available space. This is 518. This one is 259 which is exactly half. We can also better see these men marks inaction by shrinking the browser down to a smaller size. And then let's hover over this first item again and you can see even know his browser is really small. Would now have a minimal Vanni over 100 and 60 pixels. So this men max function is really useful. We wants have fine control over the size of a track display on this is how we can use it. 16. Grid line numbers: each of the trucks, which were great even a row or a column has these numbered grid lines between them. The's grid lines begin a warn, which is the start of the truck, then continue along degree direction to the end of the truck. He will see we have our column. Tracks numbered from 1 to 5 on the road was numbered from morn fruit of all. But why do we need to know this? Well, we can use these grid line numbers to position and elements exactly where we wanted to be. On the grid. We use grid roll start Federal end grid, CONST. Art and Grid column end to specify the starting and end positions across each axis where we want to place an element. He would have been elements between lines two and free on the road and in between lines free and four for the columns. Let's go over to the text that it's on. Give this a go ourselves to begin. I'm going to replicate this grid from the slides, so open the grid template columns that's hard to repeat, so that's removed Men marks and in this time of repeats on simply are four columns are more fr each and then for the roles become repeats free, worn fr too. On these gonna be all equal about the series in action. We also need some more items, so that's copy one of these dibs items and then paste in. Let's go for 12 items so 89 turn you haven't and then 12 and there's over 12 items on the screen. Position in with these grid lines will be the first properties we have covered so far, which applied to the item rather than the container. So I'm going to change the class on one of these items. So let's go over to the items on Let's go for this one and changes to be I to mourn and then change the background color in the CSS. It's always stands out a little bit more so why to mourn on go for the background color risking but anything But unlike blue is fine and refresh and now we have one item which turns out great. We now good to start working with this born item, starting with the example from the slides. If we go to our item more Nazi SS, we can begin with grids Row start, which was seen in the slides, and this is the starting position on the road. So let's go for position to then, when he's also aren't grid row end for the end position again, going off the slides. This is positioned free and then the same for the coms, So Grades column Start position free. Creates column end position for on over to the browser. So notice how this item one has moved and all the rest of adjusted and still stayed in order. These grid lines come about any number two places. Item anywhere on the grids, or it could even spanning multiple rows and columns. If you wanted this blue item, it's also take up the role below it. We could go over to the CSS and change the grids. Row ends this time to be number four reload, and now we spans across to grid rose. Same with columns to If you wanted items also spawned across the column to the right of it , we could just simply adjust the numbers the great column, and to be number five There we go and still all of items will flow on also keeping order There is also some short on syntax to to make this even simpler. So rather than having four lines in the CSS, if we comment this out, we can use grid row, unfinished grid role looking out over to quibble values off two and four, separated by a slash. And then we also have a short on for great column, which, as you may have guessed, is the two grid column sizes for free and then five on If we know, take a look at this after reload. Everything still looks the same, but instead we know how this over two lines. Finally, there is an even shorter version two called Grid Area, so that's also comment out. These two lines here and then below this weaken aren't agreed area, but this time we are double four values. We do need to be careful law, because the 1st 2 values on our two starting positions So the 1st 1 is the role start and then we have column start. So the 1st 2 values or two and then free so to then free then the last two. What our to ending positions, which is this one before and then five so four and five and then a game. 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 we are to the fore values grid also provides us with the Spahn keyword to this allows us to specify the line we want to start on. Then how many rows or columns we want to spawn across? If you wanted our example to also take up this bottom row to down here, we could start our position to as we already do. Then it's fun across our free rose, so one to you and free back over to a great area instead of the row end to be set to four. You can then say spawn across free Rose. See how this looks. Okay, Good. So now we start at the same position and spawn one to you and free spotting across multiple trucks like this is really useful for Les announce our webpages, for example, who would span across the top row to create had area or section, often area for a sidebar on also main section This is it now for line numbers on. I'll see you in the next video 17. Grid line names: In the last video, we looked at grid lines and how the number grid also gives us the ability to name leave grid lines to something more appropriate. You will often come across names such as Roast Art or Row End. Another useful way is to name them relating to the section of all page. So it has a header footer, sidebar and so on. We're now going to return back to Adam Properties to the container so we can return item one to just being item. So let's remove the worn off the end of here. And now with his girl back up to over container CSS, we can go ahead and on our columns, so let's remove this repeat. From here on, all we need to do is art and name insiders where brackets for each column followed by the size of the truck. So open, open, close square brackets. We consider it our 1st 1 to be called first and then the size of born fr. We can then repeat this with square brackets again on call. The second on this could be to fr if we want 1/3 column. Exactly the same name is furred No, it won't if ah, and then at the very end, weaken Name this lust that said this would be to fr remember these names inside the square brackets. Totally up to you. Okay, so let's see how this looks. Let's see how well four columns in action goods and there's our four columns would want a fire to warm. And then, too. So also, rather than using individual names like which is done, we can repeat the same name each truck such as coal start and then call end Cole start to call into start free and free start for and then end for To achieve this, all we need to do is the hard cold start on also called end. And then these numbers will be added automatically after each one to distinguish between each column. I'm looking also do exactly the same with Rose to We can achieve this by going back over to the project and using repeat Okay. So to begin to on this cold start called end to each column, we can go ahead and use the repeat method from before ennstal eat or for individual names. Then go ahead and on. Repeat inside the brackets. I'm going to add four columns on four separate by the comma. Then we can go ahead and other with square brackets, the first value we're going to search as cold start. And this is the name for the start of each individual column. So we'll be cold starts Nicole, start to call, start free, and someone then the size we want each column to be, I'm gonna set mind to be worn fr. Then a second set of square brackets are the name for the end of each column. So in OK, so I'm going to use coal end and then say that and also do the same for the rows below. We can keep free, Rose. That is fine. Looking at the name of roast art the size of one of our and then our ended name off row end . Give us safe and then refresh. And then we're back to a standard for by free grid layout. Now we can go ahead and ardour Item one class back in place. I'm looking. Move the item toe. Weber wants you would need grid names. So the first born that's underclass of item mourn. So we'll concede the blue item again. Okay, So to make things more clear, I'm going to comment out the group area that we used here for item worn and then go back to using these four individual values, so it's a little bit easier to work with. Couldn't you have the role to be starting at two and four on? Let's just leave that for now instead for the columns, Let's go for Cold Start and then and position to be Cole End. Remember, these are the names which was set above inside of the square brackets. Reload, Broza. Okay, so as expected, to have the row start position to such warn and then to and then ends opposition fall, which was set with these two values here, wouldn't set the columns to be the column start and column end. So remember that cold start and call end is the starting and ending position off our first column. This is why it's only taken out one section here. If we wanted this Despina Two columns such as over to this one here, what could then it changes to be cold and to so now This starts at the beginning of the first column and ends at the end of column, too. No one to the Rose. If we said the first found you to be real start and then the 2nd 1 to be row in for What's the browser now? This begins at Roll Start, which is the first role here, and then ends up row and four, which is 1/4 1 here. So were you doing nothing different here than we've already learned? The only difference is we a reference in 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 lay out a full website. 18. Grid template areas: along with position in elements. With these guidelines, we can also create full areas such as a header content sidebar and footer grid provides us with a property called grid template areas to do this First, though, we need to think about how our grid will be structured using rows and columns. Looking at the diagram here will have a header on one roll content and cyber on the next roll and finally a footer on the third row. Therefore, we know we need free rows of the grid. We only need two columns for the content in cyber. Remember the header and footer areas will spawn across the East. Two columns. This is how our grid lines will look once we set the free rolls into column trucks. So let's head back over to the text editor on See this in action? Okay, so let's get to work with setting this up. We're going to be working with these groups areas to begin with so we can comment on all these 12 items. So let's remove all these for no way to comment. Then inside the container, we can get to work with ad in our header. That's ahead of L. A moons on the text of Headed to We Also Hot Main section for the content, then a sidebar with the side elements and then down the bottom. We also hard a footer. Okay, so we can see these areas better. Let's are the border it's all for So what in the style section, Let's go for the Hedda, the main the Side Andi footer and on the border property of one pixel and then a dash line . Oh, it's the browser hit refresh, and there's about four content areas we just added. Then back over to our grid. A template. Roles and columns are working. Begin to set this up. So up to the top, remember for the columns we need to one for the content section on. More for the sidebar. So remove the repeats on the 1st 1 could be free fr on the side bar could be smaller, so worn fr is fine. Then onto the rose. So we need free rose one for the header, one for the content on one for the footer, the head that could be worn fr three f r for the main content and then one by far for the footer If we know, reload the browser. This is how our four sections will no look. Since we set two columns the four elements arranged on 22 rows like you see here. So let's get to work with changing this with our greed template area. So let's add the CSS property in greed templates areas Remember the S on the end. So with this property was set up names for each section. These names are arranged like a table. We have two columns and free rose so our names are arranged like a free by two table. So we're onto the quotations for our first role and Dammika nods that was second row and then a for growin just below. Remember to add the semicolon right at the end to so we want the head area to span across these two top columns. So we are header in the first column and then header in the second column too, because he's despond right across the road. But I was second row. We want the content to be on the left and then a sidebar on the right and then the bottom just like the header we want the foot area dishpan Both of the columns. If we say that we won't see any difference in the browser just yet, would have refresh Well, first needs place other items inside of these sections. We do this with same four properties we've already used. If we go down to item worn, we used grid row, start row, end column start and column. End all we can use a short on a grid row and greed column, which we've already looked up. So let's set this up. First of all, we can target the header. So we set the size of this header by using grid row and grid column. So first for crude role, this could be the head of section which was set up at the top. So would you just here and then the same for greed column. So just below this on grid column and also said this to the head area, which you created within, repeat this to the main aside and footer the main section we sat the grid row to be the content and then the grid column. I also believe content to We also created an area for the sidebar. I will give us the name of side by here. So down for the sidebar section, which was the aside elements just like before we do Grid row and said this to be the sidebar. Great column. This is the sidebar to then finally, the foot area grid row, the name of Footer on a great column on This is the footer to say that and then over to the browser and refresh. Okay, good. So just to recap, we have our header spread across the top. This is because we've said the header have a grid row on grid column off this header template that was set above So just here, which spans across our two columns of the first role. Well, then said the second row to be divided between the content, which is going to be the free fr section, and then the sidebar will be worn fr. We define these below again using grid roll on Greek column for the side of the main section. Then at the very bottom we set the foot area, just like the head of this also spans across the two columns, certain the footer and head out to be the full width of the page. Good. So this leaves. I will lay out now complete on how we intended using greed, template areas. Next, we'll take a look at nest in the grid's. 19. Nesting grids: this grid layout is now how we intended. But what if you wanted to nest? Our 12 items inside of the main section has agreed to Let's give us a go and see what happens if we go back over to our projects and then reinstate our 12 items. So that's one comment out this section here on Also, remove the class of item one. Then we can go ahead and cut these items out and then place them in sign of our main section. Could the zones And now you can remove the text of content paced ease inside of this main section. So we have the head out of the top, the main section with 12 nested items. The sidebar in the footer. Let's see how this initially looks inside the browser. The items are all there, but we scroll down the not in a grid like layout items of justice playing as block level elements. The main element is apparent for these items, So what can change the display? Time to be grid over in CSS. Let's go up to the main section and then change the display type to be grid. I would also give us agreed. Got to on Let's are five pixels for the Gulf. So let's see what happens now with this in place would have refresh. Okay, good. So now have agreed. Cap here. Then we need to define how many columns and Rosa wants. Just like wouldn't only dio this again is within the main section. So let's aren't the grid simply columns. So let's go for repeats. We'll have four columns worn fr and then the grid template rose just below on. Repeat these two. Then we just signed a one fr toe out. As many roles is necessary. Keep small even to over to the browser Refresh. Good to know we have nested of a grid inside of the main content area, just like early one looked at flex box. The grid also allows us to have finer control over how individual items of lines on this is what will cover next 20. Alignment: we know going to move away from a layout on focus on alignments. A lot of what recover in this video is similar to the flecks box, where we align items at the start and center or stretch to fill space. Gonna need the items are taken up all the available space, so we need to make the items a little smaller to align them. That's first com entitled The Trucks on. These are the ones in the main section, so template columns and template rose, then set a size for the items. So the items class, which would have just here let's first remove the pun in and then are a height to the individual items off 60 pixels reload. We can see by default the items set to stretch across the room. First, we're going to look at justify items which we aren't to the container to affect all child items as a group on the row access. A lot of these will be familiar already, such as end to place the items of the end of the row on also starts. So go over to the main section, which is a container for these great items. I'm just here. We conard justify items and set them to be end Refresh Now all items are pushed to the end of the road. We also have starts. You can probably guess what this does to this moves everything to the start. Remember the second item would you just here if we scroll back down has more text. Therefore it fills more the available space. We can reinstate this so all the items move the same So let's rename this item to and there goes all items and now equal the default value for this is stretch. So let's replace. It's not would stretch. I wish you get the same effect which would become with we also have sent it to. And this will place all the items in the center of the rope with with being determined by the content inside. We also have the option off baseline to If we're lying into text Next, we can also use online items. This also applies to the parent container. What effects the items along the column this time, Robin the role to see this we need some more height to work with. So inside the main section let's make the main a little bit higher. So the height off 1200 pixels number concerts, a line items. Let's begin. Weird sensor. Oh, to the browser Refresh. So now we have a taller main section and all the items are lined to the center. We can see at the top. We have an equal gap at the top here on also the bomb Section two. I'm not going to go through all these options because we can use the same values as we have just looked up under all work the same way. But this time on the opposite, its axis, the next two properties we apply to the child items to control them individually. Let's reintroduce our item. One class on this could be any of the items that's just on this in never can control this morning individual item them back up to the main section, going to comment out. Justify items on also a line items to solar Don't interfere. Okay, so now we can go back up to the Item one and then we can allowing a individual item. But this time we used justify itself. So let's begin with end and then over to the browser refresh because it's also works on the road. This pushes his blue items that end on a factor thing. This is being a little bit messed up with these great columns. Yeah, it is now. So now we have all these items said to stretch, and then this individual item on the end of the road center will also do was expected and move this one item into the middle of the role. The changes to be sensor Remember, we have all the same properties available as we just looked up. So say even then refresh. And that's our item now in the center of this role. If we want this to be centered on the column rather than the role, we also have a line self. Let's give this a go and also set this to be the center, and now this is centered across the row and column. Using both justify self on the line. Self together is a really easy way to center on item, both vertically and horizontally. This used to be a lot more complex before grid and flex box. Let's go ahead and try one mall line self, I said. This is the end take a look at this and no, the item is pushed to the bottom so you can see we have lots of useful options when using the grid, which cause also pretty much any type of layout will ever need. 21. Time to practice: Song Finder layout: later in this course will building this application where you use a concert for an artist or a song on they displayed as a grid. So, for example, if you type in a artist inside here just like this, and then hit search were them presented with a list of songs we'd also an audio player to play. A preview of these will build this later in a p I section. We have the album Artwork, the Artist song title on this music player at the bottom, which will play the 1st 29 seconds. All this music information will be provided by connecting to iTunes using an A P I. If you were not sure what an a p I is just yet. Don't worry about you. Who could all you need to know its own. But we're going to get started on this application by creating the hay HTML and CSS. We need including 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 set up on also the hate mail code together. Would you know this is so We have the same hate schimmel, meaning we could do the same things when there aren't the jobs script 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 are playing in the grid properties. Let's begin by crying The Project folder Let's closes Down and and Quit Project folder and again you Can Aren't these anywhere someone to call mine the Song Finder opening soap in the Text editor. So drugs project fuller into their and then we can go ahead and create a new file called The Index. Oh, hey, Jim O. Okay, So to begin, that's onto the hate email structure, and I'm going to be using the HATCHIMALS five short cut and then hit Sub To Grow is our structure, the Document title or Song Finder and then down to the body section. Let's begin with the head area and then a site title in hatred on All Song Finder that's opening up inside the browser and check everything is working. Okay, never go, says I was signed title in next page, Then we need an input area to type in the song name of the artist. So let's start with a label on. Let's call this the search input and then the text or search for your favorite artist and then closes label off of the end when he we can also adds our input with the type of text and then the i D. Which much is this search input? Okay, good. Then after this, we need a Putin and this is going to be the button which goes ahead on complete their research. So just aren't a simple ball turn into there and then horizontal line at the very bottom, just a section off his header reloads and see how this is looking. Okay, Good. So that I would label, but its exports on the bottom, scrolling down below. This had a section Let's create the main section, and this is going to be the area where all of our songs appear. For now, let's give this an I D off songs and then inside here weaken Art An article. This article is going to be the rapper for each one of the individual songs, so each individual song needs an image. But Now I'm just going to add some dummy or some sample data just to see how look on the screen so we'll go ahead and start release with the CSS. All this text and images will be replaced later with some data which you pull from items. So we consider this image. I'm going to add a wit for the 100 pixels I hides 100 pixels to and then our style property just so you can see this image so background of blue. And now we should see a blue square on the screen. Next we can add to the P tanks on this is going to be for our artist name. So any artist on songs phone so just aren't anythin inside of here and a second set of P elements for the song name. Then finally, we're going to look at a new element which we're not seeing yet on. This is the hatred or five audio element. This will allow us to play our music inside of the browser. It needs a source attribute which you can leave empty for now on also the text of controls which will give us some controls to work with such as I will play, which also turned into a pause the timer on also the progress bar goods. Now let's copy this article on paste and still have six of them. So to free for five and six and then save and then reload on now we have six different items on screen. So remember this hate similes Just placeholder text and images. All this data will be pulled in later from our FBI. For now, though, I will leave you with you to create a link on external star feet. Apply some styling. Aunt also agreed layout to these 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 on degreed. Gap will be fine. So good. Look on. I will see you in the next section 22. What is Bootstrap?: Welcome back to this Brunn's new section. He We're going to take a look at one of the most popular frameworks for building websites, which is called Bootstrap Do Stop crony. At the latest version or version, fall is open source and free to use. It is a Libra Hey html CSS and also job script, which we've not yet looked up. But don't worry about that. At the moment, you can find it hard to get boost up dot com. Some of the components will use and boost up, such as a carousel. Require job script to work, but we don't need to know any job script. I'll be staged to use them. Boost Trump allows us to quickly and get started building projects and also allows us take advantage of lots of pre built components such as navigation boss image chorus cells on forms to name a few. Getting started is also really easy. Weaken just aren't bootstrap to a project just like any over CSS file and start writing our website as normal. We can then ever use a pre built components or write our own hate Chamorro's normal and then take advantage of the bootstrap C says classes provided to us to give us some based island and to build on if we go ahead and open up the documentation from enough bar, that is quite a lot to get through on the cover Lots of this for this section. First of all, I'm going to head over to the components on the left inside and click on this on inside here we could see all the different available components tours, for example, if wanted a number, you click on another bar section and there were given some more information about how to use it. We also then get lots of court examples on also a demonstration. So if we wanted to use this number in our project, we could copy this cold below on. This is all the section here which produces this now bar. There is usually some more different examples within different nails too. On you can see all these as well schooled home. There is also some forms, so click on the forms elements on the left on exactly the same as before. We're then taken through lots of different examples. This all takes advantage of standard hey, Gemmell elements such as imports select and text areas book Boo Stop Them! Provides some CSS for us to the news by adding the boost our classes, such as form group on form control, just like you can see here, we'll also take a closer look at some more. These components from this project, such as rotating car cells on also use models. It's also worth no one to all of the styles and boost our provides is just a base starting point. We are free to go ahead and change any of these styles with some custom CSS. So if you're still not sure what bootstrap is, all we need to understand for now is we can take advantage. Abuse drops pre defined CSS. I can only make our hatred will look a lot better but also applying some best practices and keep Holstein in looking more consistent across different browsers. So know, have a little background into boots. Drop. Let's now move on to get a boost in our project set up 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 boost of works and how we can use various components as well as different utility classes. On also how the boot shop creed system works. We begin about the top with our had a section, which is a navigation bar. You go on the site isil various links on 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 on will also use controls, toe analysis, troll left and also right through these images. This rotating carousel is one of the beauty shop components. As is enough, borrow the tall I'm looking at various forms of these and how all the classes work. June's project, if we scroll further down, would then have information about Old Burger site. This will teach us how to use the boost of containers, rose and grid system to the line 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 screen sizes, including one of our turn into a drop down for the smaller screens. Let's make this full size once again. Then, if you go even further down, will have a sign up section. If you click on this, were then introduced to a motel components, which is basically a pop up where Conard it's, um, information for the user. In this case, we're going to take a look at how we can use boost top form components. It's, um, a couple forms look really nice. He will have a name and email on also a text area, along with some checked boxes down on the bottom and finally finish off with a foot area down to the bottom. So by the end of this section, you'll also have this fully finished website, too, and also some knowledge about how to use Bush of components boost up utilities along with how we can use containers, rows and columns. Great grid system, along with the knowledge of how to override and boost our classes to make this fully custom . Okay, good. So hope you looking 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 get bootstrap dot com, which is a boost up home page, and then it goes down to the get started section here. Remember, though websites like this can often it 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 starter folder by clicking on the Big Donald 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 download section on Left, and if you scroll down, we can go ahead and download the CSS and Josh Boot 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 Dome. A cdn is a content delivery network. This basically means, rather than I did in the CSS and JavaScript files into all projects and then linking these in Ohio HTML. Instead, these files are hosted on an external server for roasting, too. He we could see we have our CSS and JavaScript sections seven. Copy this link for the CSS. I also have some job script links here to where we can link it was script tags to the seedy Um, if you scroll down even further for we have a started Temperley, and this is a really convenient place to start. This has all the basic HTML structure would need, along with any links to the required CSS and also the JavaScript to. So let's begin by copying this started template with the culpable in in the top corner. Let's krump hold that. And then, if we go over to the desktop and create a new folder called Gourmet Burgers, open a visual studio code, a number can drag in this project folder to begin. As always, we create our indexed or hate schimmel. But this time we now have a bootstrap starter, so kam paste in the skeleton structure gives us save, and then we can go ahead and open this up in the browser. That's double click index or hate smell. 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 aren't our own customization. We can change the title to be gourmet burgers and then save and our changes now reflected in the browser. So this text of Hello World may look like a standard hate one elements, but it has a little default boot. Stop styling, like all the other elements, will have to. We can see this if the comments out the CSS link in the head section. So the boost up CSS is just here. So if it comments out this line and then we fresh we see the bootstrap default styles have now been removed. Selectors removed his comments and now this back in to see what's going on behind the scenes, we can take a look at the CSS provided by a bootstrap. If we copy this link inside the hatred right to the very end, copy that and then over to the browser. We can face this in it, just like a normal you are. All This is the style she which is linked to a base tomorrow. It's a little hard to read because currently it's magnified. This means all the white space has been removed to keep the file size smaller. So to see this even better if we select all and then copy, I'm gonna search for quote beautifying on this is all made cold Beautify the awg So it's like this on the one we need is the CSS So select this link Here on the left hand side we conard the CSS import So paste in al bustan cold and then click on beautifully in the middle So over on the right, unsigned We can see that but I'm gonna make this the size of the full screen. So this is all the CSS which boost our provides. It now looks for marketed in a way which looks familiar and if we scroll through it, there is quite a lot. If we press command or control f, this will let assert for the cold. So let's search for the hate one and the answer. Then we can see all the CSS, which is a plan to this hate one elements. So first we have hate one rifle to hate six which apply some default margin bottom A fun family of inherits. We also have a form weight the line heights and also inherited text cooler down to the next one. We can also see the phone size is 2.5 ram, which is why when we removed the booth off style sheets be hate one. Then if he had smaller, we can also scroll through and take a look at some more styles to if we wanted to. But hopefully you get the idea of what is going on behind the scenes, and we'll also take advantage off a lot off the classes created for us as we build this project. This would also be the same as a CSS file if you want 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 a great to use, make our project look better, we can still override any of these base styles. We have our own style sheets. We do this by creating our own CSS file, just like we have done in previous projects. Anything to it in the head section below this boots top link. It is actually encouraged onto or override any of these default boot stop 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 low for quickly building websites and components with best practices consistent Stylin across different browsers and also an excellent foundation to build on. Now we have our project set up. Next. Let's move on to understanding how the bootstrap greed works. 25. The Bootstrap grid: our hello world example is now sets up in this video, we're going to look at probably one of the most important concepts to understand. I'm working with Bootstrap, and this is the beautiful upgrade system. The grids basically allows it to lay things out. Nice and easy amuses the CSS flex box under the hood to begin generally, the first thing we need to dio used to create a container for contents. This is Ari as a CSS class off container, so that's head over to the project. And first remove the hate one off Hello World, which is just here. We can then aren't I would deal with the class of container, So just Credit Div, just like we normally would on this time. In our attributions class off container containers are required when working with the booster upgrade system as they act as a rapper for Overcome Tim. Using them also allows us to send our content both horizontally and vertically to nested inside. We aren't a second if on this one has a class off row. So inside the open inside of the class off road, these rows actors a rapper for laying out content by using columns. Boots stopped grid is 12 columns wide. This means if we want to equal sections side by side in a row, look, it's up both to be six columns wide each. If you wanted free sections, each one needs before columns. So let's huddle first. If inside the room on this going to have a class of coal dash MD dash for inside here we can on some text with the P tags off 1/3 wind. So because the grid is 12 columns wide were taken up four partier, so this is 1/3 of the width of the road. If we don't copy this in, pasted it two more times on. Also, make sure this is indented properly, just like that. No, If we give that save and then refresh the browser, we'll get free sections on the screen. Each would 1/3 of the wit of the rope to see these grid sections better, we can add some background classes, which also provided by bootstrap. So after Cole MD. Four, we cannot be G success on disk uses a green color. The 2nd 1 commit BG primary. This is for blue on the 3rd 1 could BBg secondary on that? This is a great color. This now shows, is the effect off the container. We add it. The container is a fixed width, so if we to stretch the browser even wider or smaller, we'll see that the width changes with different break points. There is also a full. Which container available to all we need to do is change container to be container fluid, and this will spawn the full width of the page. But I'm just going to stick to the container for now. We can also have multiple roles inside of this container to it will go back over to the class off cold and before this nd stands for medium sized devices under control, exactly how many columns wide we want the content for different screen roots. If we go back over to the get boost from website, which is get boost up dot com and then documentation. If we go down to the layout section on, left inside and then on, he'll have the option for the grid. So it's like this. If we scroll down to the table, which is just here, we'll see he will have a class prefix, and we've used called Dash MD for medium sized devices. This table shows a size in which each class supplies to, for example, small is 540 pixels. Sounds large 960. We can add as many of these prefixes as we want to. For example, who could have a layout 12 columns wide on small screens and then changed to be six columns wide on medium screens and then down to four columns on larger devices. We only have the medium prefix set, which is 720 pixels on a both. So if we shrink the browser down to below 720 inside of our index page, the four column with no longer applies. As you can see here, we can changes by idea Nicole S. M. It's rather MD changes to be sm refresh, and this no applies to small screens. If you wanted this green and the blue section to be signed by side will need to set this to be six part each so we could go ahead and changes to be call Esam six and then also on medium devices, changes back to four and also for the second woman, Conard Cole s M. Six. So both of these first sections, both on smaller devices with six columns wide and then change before columns wide on medium devices. If we save, refresh these two sections and out six columns each on the great section is a default. 12 columns. If we make this wider to go above the medium devices, this again will change the four parts each. Because we've set that here. Let's now take a look at a different scenario. Imagine if we change both small Dave's before columns, so call sm four under the same for this one, too. This means we not taking up the full 12 concrete. We only specifying eight parts for smaller screens which, if we save and refresh and then go down to the small screen, this will know leave a space at the end of the rule. For this case, we can move the content by audience and offset. We can answer this offset on the left hand side pushing these two into the middle. So if we do offset Dash S M again, this will only apply on small devices and then two columns. This one on push the rule across by two columns, even the green and blue section in the middle. If we stretch the browser, this will also apply to all sizes able to. So now on the medium devices will still have this two column offset. This is easily resolved by certain offset to be zero for whatever scream. We want it to be removed. That's trying to move from the medium size screens on above. It's under offset m d 0.0. So this will make sure that the offset is removed on medium side of Isis and above. If we now refresh, the officer is now removed on the medium devices, both he will shrink this down. It should still apply on the small screen. We can simplify things even further if we just want all Dave's inside of a row to be equal . We can just specifying coal. So rather than having all these classes here, if you want to keep things really simple, just don't call. Same for the second section on. Also, the third gives us save reload What is in place? All of our sections will take up an equal amount of space on all screen sizes, So this is how we used columns with the bootstrap grid system to lay out our items. No, No more about the boot shop greed. Let's now move on to Anderson content to this project. 26. Adding images and text: since Boost drop is just hate Dimel, CSS and some job script. Behind the scenes. Adding text and images is just the same as we have already learned. Let's begin by setting up all three sections to be four columns the medium devices and above. So change the coal to be MD Dutch full. Now we could do this for all three sections, so I m d four entities to we don't need these coolers anymore. So we couldn't move the background success Primary on secondary. We'll have the content. It's time to you see the difference between a free sections. Okay, So if we go back over to the finish site, which will have just here, will be billed in the images on all attacks for these free sections. So this is our 1st 4 column section I was second on by Wilford making up the 12 column grid . I have 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 my of these images saved on my desktop, I'm not gonna go over to the project folder and ideas to it. So he's my images folder, someone to drive these into the gourmet burgers project. And with these no, inside the project, we can now get to work, which are the knees to our website. So it's an index or hey, html going to be working in this contain a section. So first of all this first coal MD four looking to move the text and then our image elements just like normal hate smell were at the source attributes on I added thes inside images folder. If we open up a sidebar and in images we have carousel warn and carousel to for the rotating slider. I have three different images down on the bottom here, which we're going to use for the free sections. So for closes down the 1st 1 I'm going to The art is open on this has the dot jp extension the old text which we should always aren't. Okay, so just below this image, we can then go ahead and add some normal elements. So it was a hate to for the title and let's say, over 50 restaurants and then below this some text with the pizza, thanks to Now, if this were hard to the text off, treat yourself next time you were in the area and you can change us that any text would you prefer? It doesn't really matter now over to our projects and then reload Index page so you can see we have an image. We'll have a hate to and dance and text. This image is really big at the moment, but we'll fix that soon, not onto the middle section Looking also to move these text a gain. Are there places with an image? The image source this time is images slash challenge dot J peg on the alternative text off eating challenge image. Okay, so now blow the image. So if we take a look at the finish sites, this is what we're looking for now. So the hate to off fancy a challenge and then the text below of Why not try one of all famous burger eating challenges. So beginning with the hates to and then the text below with Pete. Thanks. So burger eating challengers. OK, so that's our 1st 2 now in place. And then the 3rd 1 removed the text and then an image for this 3rd 1 on the sources. Time is sign Dodge a peg Again. An Images folder signed a. J. Paige the old text or reputation image. So this is the third section, which is over on the right inside, which is established 2000 free and then some text below Exit hates to should any text of your choice. So over 15 years off, high quality. Okay, so once you've included, if let's go over to the browser, we'll probably see quite a bit of a mess, to be honest, if we refresh. Yes, there's a more free, different images on the three sections because the images are far too big to fit in place to fix this weaken. Aren't our own CSS file override any of the boost? Drop defaults? So currently, if you remember in Head section, we have the boost up course CSS. But this is just a base starting point for us to work. Would, like we said earlier, is encouraged out our own style sheets. So if we go over to our project folder number, Cunard's and you file so styles Nazi SS for custom styles. Okay, so now I'm going to target the coal MD full. And then all images which follow what could, of course, on a custom class to this if we wanted to, but let you stick with the classes that would have so wait for 140 pixels to keep them quite small on the height off 104 pixels to because remember, these just intended to be formed nail size images on, Of course, when it's a link, this index page so a custom CSS always goes right to the bomb so we can all right, any of these default styles for both. So the link relationship Hey, style sheets the hatred. So this is the same level as in next page, so this could just go in hate dress. Ah, styles don't CSS and then close this off. Once the doughnuts. Let's see how this looks in the browser. Good. So now all three columns, an out side by side with small images hate to on also the text, so the next content aren't to the section. If we go to the finished version. Here is these buttons, which you down at the bottom. These bonds are pretty simple to wind these just ankle tags with some boost across use to make them look nicer. So back over that sex that it's ah and then to old first section just after these pizza and CIA. So I'm going to add some more Peter eggs in a nest. A link inside this link is going to have some boost our classes. So this is going to get beat again and then be tiene secondary. This will go is a great color that we've seen before. So this primary secondary is kind of similar to what we use for the background colors when we looked at the grids in the last video, these kind of default styles that boost our provides for different elements. In this case secondary is a gray color that will concede us to you. Then later, we was a different color for this green section. So back to our button Bt end and Bt and secondary, I don't need a link. So the hay draft I'm looking Just leave this empty for now as we don't have any paid you selling to well at the roll off button and then the text inside off view details. After this, we're going to aunt this right arrow, which is this one? Just here on this is don't with hate Schmalensee from a hatchimals Entities, begin with amber Sons. The encircled for the roses are a key. Whoa! And this must end in a semicolon Save. That's And then there's our button with the arrows on the right inside. So I'm going to copy this button and paste in to the over two sections. So cover this link that would just started in and the next we cannot This at the end of our second area and then the third area just underneath our reputation does not lie, so I don't three times, and now it's, you know, free sections on the screen. So these images now look a lot better now the fit inside the containers. But we can still take things even further with some bootstrap classes to make the corners rounded. We can do this with a rounded circle class, which boost our provides. So the first section here for the restaurants inside the image at the class off rounded circle, the same for the second image, and then the third and final image on Let's see how this looks. That wasn't a problem for this middle one wishing to dash inside of there. Okay, good. So these Romney corners added with the CSS board radius boo stop allows us to understand radios to the top, right, bottom, left or circle, just like we just use their inside. Here we consider these classes. If we go over to get boost up dot com and then if we go over to the documentation And if we scroll down to utilities to have the borders looking at border colors on this is the one that we've just used, which is aboard radius on. We ust rounded circle, which we see here. Finally, we can also aligned this new content to the center of each section. So it looks more lines like these ones here, we can do this point out in a text center class to the container. So just after container are the class of tech center over to the browser, and this now aligns all the content to each section. Great. So now our content is centered. I'm going to leave this video there and move on to looking up boots. Drop enough bars 27. Bootstrap navbars: one of the really useful components Busta provides is responsive. No bus. If we head over to the documentation in the component section, it was girl down to the Nabaa tub. We can go fruit. Some examples of what Bush ah provides. If we scroll down, you can find out some more information about how these work the classes we need to apply, or we could scroll down to some of these examples on this is going to be a one which is similar to what we going to build him. It's going to have our site title in the top corner, then some various links. You can even have a drop down. If you want the search box on, then a search button. This will also be responsive. So if we're to shrink the browser down, this would turn into a nice drop down menu like this. So let's get to work over in our index page. So inside off the index HTML. That's give us a little bit more space. So to begin at the top of the body section, we're going to get this started just like a normal head of section. So let's use the hates mill had a tags and then inside. Here, we can go on to construct enough inside this enough. We're going to add our a tyke, and this is going to be for our side title. So can aren't I? Will. Gourmet Burgers title insider here. We could just keep the hatred if, as an empty attribute for now, that's fine. So there's all site title in side of here and then just after we're going to creative, which would be container for our links. So 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 the stiff who have another list. And this is going to before our list items so going to have home and also locations. So it's at the Ally Tags, and he's going to the links to Sonesta Link insider here. The 1st 1 is home and then a second list item again with the eight are nested inside, honestly, going to be four locations. No case there's or links were not a list, and then after this one or the less we're going to outperform and this is going to be for the search box, the form just here and make sure this is still within this surrounding Dev. So just for his clothes in the tank, then go ahead and at our input to the form and then I will but earn just afterwards. And this is going to be the button with the type or submit and then closes off with the text. We'll search. So let's say that and then open this up inside the browser. Okay, so there's our standard looking in head of section, the title, the links and then the search below. So now all we need to do is go ahead and add some booster classes to make this look nicer and also be responsive. Let's start right at the very top inside the non section. So let's at the class. So the 1st 1 need is no bar because this is enough bar and then also a second class off. No bar expand M. D. So this will make the enough by expand on medium sized devices then of ah, Doc, This is for the dark of theme than the fixed hyphen top. So it's fixed to the top of the page and then BG dark. So let's give that save and go over to the browser if we loaded can instantly see a dark background color. But let's go into the developer tools and see or each one these classes actually does in practice. So let's make a bit more space and then inspect. Oh, enough. So this fixed top was one of the things which were added This an easy position to be fixed . Andi also set it right at the top of the page. We have background dark which set his dark background color. We see here on Rambo also. How did not bar expand m d? This kicks in inside the media query with the minimum wage off 768 pixels, just like we looked at in early videos. Okay, So back over to our cold on it starts with the tanks. So what have the empty hatred If let's go ahead and add a new class to here too. On this one could be enough bar bronze. I remember these all classes provided by booster save and then refresh and now have this white color link. Okay, So remember, from before we added a surrounding Dave container which surrounds all this section here. This is a section which collapses on the smaller screens. So therefore Bustan provides us with some classes we can add called collapse on. Also, no bar hyphen collapse. Honest will keep the collapse section looking nice down to the on our list. We have the class off no bar dash nav, and then a 2nd 1 which is Emma. Also, Emma also applies auto margin to the right off this another list. This pushes the search bar over to the right inside. So, for refresh, this now applies automatic margin on the right off this another list, keeping the section over on the right. Inside. We'll talk more about margin and partying in more detail later on in this section. But for now, let's go over to the list items and adult classes here. So the 1st 1 is now item and then we can do the same to the second list item the same class off nav item, then it's also some links. So at the class for the link off Nav link and then the 2nd 1 which is just here. This is also now linked to. Okay, So save and also the browser. And now have a little bit more space in on also some different color in make em. We could go into the developer tools on, see what each one is. Classes does individually. So over to the knave link. Okay, so we have this nut bar dark on also enough about link, which gives it its color. We have some media creators which apply some party in the very sizes. The same with is none of link, which were added. It has a display type of block on also some pardon. And this will make sure our nut bar is nicely or lined up with some spacing around. If we shrink the browser and closes down, we don't yet see the button in the top right hand corner on the smaller screens like we've seen in the bush up demo In the documentation for this we need are a button it to our code . So, just underneath the gourmet burgers title just before this div, which is a club section, we're going to add a button and then inside his button, this is gonna take in a class. Oh, no, uh, jugular. This is going to have the type off bottom, and then the next part is going to be for data toggle on. We set this to be collapse, and this makes the button a toggle button which expands and collapses the content off Another element, The over elements which were referring to Is this Dave below with the class of collapse and not bar collapse. So the length is born to this, Dave, we need our A i d to begin with, You can call it anything you want, but I'm going to call this the nut bar collapse. And now this has a unique reference. We can go ahead to our button and add a day to target ons. Give this the same name. So I had harsh because it's a i d. And then we have no bar collapse. Okay, so now let's go with the browser and then refresh. And now if we shrink the browser down, we'll continue. We're going to burn in the top right hand corner, but it doesn't stand out too much of the moment. So let's just take a look. Actually, inside the buttons, we need our to the icon for the bottom would do this using the spawn elements and then add some classes off Nova on. This is not bar Tegler icon. Say that and then shrink the browser down. And there we go. So this is the spawn elements with the icon inside. So we can now see all button on this also drops down because it's linked to the separate Dave section on the David linked to. Is this one here with the I. D. Off of bar collapse which willing to this data target just here this is now the section complete. We'll have a nice looking navigation bar by simply applying its, um, bootstrap classes and helpers in the next video, we're going to be adding a image carousel to this home page. 28. Bootstrap carousels: just like the nut bars were seen at the beginning of the last video in the boots dropped documentation back over in this component section on the left inside. We also have a link to car sells to. So click on the Carousel Link on here. And then again, if you scroll down, we can see various examples from the cold. So he is a simple example here, which is thirsty, cold below it. It was gold down to the version, which says with captions. So he's indicators here, which will be out in soon. But we want this version here with captions, so it's a little bit of text about each image. This is going to be similar to the one we're going to be building. So how these captions on also these indicators to click between the very slides. So let's go over to our index page and then at the top of his head elements. Let's make some space for a car. So So first, let's add a surrounding Dave talk. Then inside here, we're going to add some Boucha pluses. The 1st 1 is going to be off carousel and then the 2nd 1 off slide We also add a data ride attribute on this is going to be equal to Carousel. The data ride attributes off. Carousel tells bootstrapped automatically play the carousel Once the pages loaded inside here, we're going to add a second div nested in the middle, and this is going to have the class off carousel in a This class off carousel inner is going to act as a rapper for our slides or images, which we're going to add. Now Let's are double first. If for all first slide, this is going to have a class and this is carousel item, and then inside here, we can't aren't our image that want to display inside the carousel. The image also has a class to, and this is going to be W. Dash 100 W 100 is a bootstrap utility class to set the image width to be 100% of the container we can, then as the source for our image, which is our images folder and then the image off carousel worn J. Pink, then an old attribute with some text on. I'm just going to set the text to be first life and now OK, So that's our first div for the first carcelle item. If we copy the section, we can add up one morning and just below this is going to take in the same classes. But I wanted to Dio is changes to be our second image off carousel to okay, so over to the browser and then toe index page. If we refresh, we don't get anything shown on screen. This is because one of our images needs toe Have the active class added, This will enable the slide show to appear on the will Begin with slide with this active class rather than in the sauce order. So back over to the code just after one of these Carcelle items we cannot active. Say that and then refresh. Okay, good. So this is the first slide that we see here and now we can see straightaway that this is working. When we looked at the examples on the boot struck website, we also mentioned adding captions to these lines. We can add that these in for each image section, so back over to our carousel item and damn weaken adds this just after the image. So let's make some space under here. American adjective, which is going to surround public option section. This needs a boost. Shop class. Uh, this is descriptive. This is Cosell caption. And 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 on you can see in more detail . Okay, so let's add a level five head in, and this is going to be for the title of the caption. So I'm going to God made to order for this first image and then below just a standard p tag with some text off using only the finest ingredients. Okay, good. Let's make it a little bit more space here. If you do see any issues when going through this boost top section, just make sure that all the nest in is done correctly. Make sure that, for example, is carousel caption. It's just blow. The image on this section is all nested inside of this carcelle item on someone. This is usually the biggest cause of any coding problems when working with boots stop. And also the classy has been applied to the wrong element. So now Let's go ahead on and scroll down to the second image. So the second image inside of this carcelle item, we're going to add to the surrounding Dev, just like before. This also has the same class of carousel caption A hate fire to keep this consistent with the text off over 50 types on our menu and then below this our standard P elements with the text off all build your own. Okay, says I want to captions for with two images. Let's see this in action over the browser. Okay, good. There's a were made to order level five head in on the textures below. If you move off, this hopefully will see a rotation. And so there we go says I was 2nd 1 with the caption down the bottom Good to this image carousel is now working on start to look good. In the next video, we'll add some left and right buttons, Suffolk and skip through these images 29. Adding controls to the carousel: Welcome back. We'll have a working slideshow display now, which is nice. We can make this even better, told 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. Inside Skip Forward. These added at the bottom of our carousel active section, so down. If we locate the opening type, which is Carcelle slide and then scroll down to the very bottom. I'm going to add this just before the close and talk. Let's begin with a A type because it's going to be a link. This is going to have the class off carousel control dosh Creve. Would you show for previous a role off puts in and then also a data slide, And this is going to be equal to previous, which is P. R. E. V. So data slide will specify which slides ago, too. The two values Conard is previous or next, so this one is going to go back. So I want this value off previous. Then we're going to add, I was spun tugs, and it's going to be for the icons. This works in a similar kind of way. Too old drop down, whereas the span and then we are some classes to display the icon. The class it wants to use here is Carousel Control dosh previous dash icon. So this is going to be the left auto, just like when these opening hateful bracket CIA. Okay, so this is our icon a number going to add a second span just after this and this is going to have the text off previous. We won't actually see these on standard browsers. This is going to be for screen readers only. Now we declare this is for screen readers by adding a class off s are on Lee. If we say that and then reload, we can see over the left inside that we don't have the text or previous. We just have this little icon just there. Then we can do exactly the same. So that's copy this eight Argh! And then do the same for our next. Now just lying all this up. Okay, so the eight AG is going to have the class. We need changes to be next. The data slides can also be next to the icon when it's change previous to be next. And then finally the text off next for the screen. Readers say that and then reload the browser. It's a little bit hard to see, but we have the right a role just here on the left one just here to. But if we click on them, they don't seem to work. And this is because we need to link them to our slideshow. These bones are links using a elements, but, like with all of the links, we need to specify Wetterling, too, with hatred attributes first, we aren't a i d to the carousel Rapid If let's go up to the opening tag on this day, would class of carousel slide? We conard an i D on these i d off carousel controls. This name is totally up towards. We just need to make sure this i d will march the hatred for the two links so copies carousel controls are makin uses I d. Just below as a hatred. So the first a. That's odd a hey draft and use a hush this time and paste in Carcelle controls. And then for the second link down here. The hatred attributes again with the harsh of carousel controls. So now these two images and now Lincoln Tuo main carousel. So hopefully, if we save and then go to the browser, these two links should not work. Okay? Goods would go back on forward through our images. Great. So this is all working. And this isn't now for Dakota Cell. In the next video, we'll look at another one of bootstraps components, which is the model. 30. Bootstrap modals: Now is the time to look at another useful Boucha components, which is called a model. The motive is kind of like a pop up window, which you can give any information to the user. In our case, we're going to be adding a sign up section at the bottom off our site. Then when the user clicks on the sign of button, this will end. Activate a mortal window. What do you say? Consign up using a form. Once a mobile has popped up, we can still click off its and return back to the original page. Let's no head over to our index page and see how to odd motile to begin at the bottom of the page, I'm going to create a sign up section. This will basically be a role with some tax on one side saying, Sign up for exclusive offers and then a button on the right inside to click on, which activates the mortal. So right at the very bottom off, our hate Shimo So school right down. I'm going to add a new container for this section so this could 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 off container fluid, which makes it the fluid full width off the page and then also BG dark to give it the background color inside here. We can aren't I would deal with the class of role closes off, and then we need to add two new classes forward left, section on the right section. The left section is going to be a div, and she got half the class of coal m d seven. What you make it seven part wide on the medium sized devices and above, and then a second section just below, which will take up the remaining five parts. So this needs to have the class of coal MD five giving us our 12 column grid. So now this grid is in place. We can first are some sign of text, which is going to go on the left inside inside of these P tanks. So sign up for exclusive office that the dots and then when it's arda button on the right inside, which will activate our motile problem. So inside the five section on the right, let's add a button with the type of button and then some bushel classes. The 1st 1 is BT n and then BCN success. So BCN is the standard based isles for a button. Then BT and success will give the green background color. If you say that on, check this out in the browser. This is right at the very bottom. So we can just about see our text on the left inside here Andi then the button here. So this doesn't look too good at the moment. But some boot shop classes should fix this. We also need Zadeh some text inside the button to So let's do that First, um, Conard to the text off sign appear so inside this role Conard to the class off tech center on this pushes all the taxed to the center off the diff Let's see how this is looking. Refresh goods are button on. Also, detect is in the center off each one of the containers. Let's make this text now all lights on. Also italic This is in the left onside. So Canadian this Dave just here. So after m g seven, we have the utility class off text lights can. This is also provided by Bootstrap on also formed It's Alec, so there's a pretty self explanatory. So if we save and see how this is looking good snow, a text is now is white color on. Also, it's Alec. We'll also improve on this later by adding some margin and putting. We'll do this in a later video. So for now, let's move on to constructing our pop of model. This could be added anywhere inside of all cold, but I'm going to add mine just under the sign of section. So back over told code. And then again, right at the very bottom below the sign up, Dave. Here, we're going to add all motile section. Let's on a comment. Okay, so now when it's art, I was surrounding, def. This is going to have a class off motile on also fade. This fake class is a fading effect provided by booster. This will make the transition nice and smooth. Inside. Here adds a new def on. This should be fairly familiar with just basically constructing Dave's with boost our classes, the ardour nice style. Um so the class off motile dialogue this class of motile dialogue makes a motel Nora If we remove this, it makes a model the full width for the page. So I'm just gonna keep motile dialogue in place to keep this nice and compact and then a new tive nest inside. This is going to have the class off motile content. So this is the content we want to have inside of our model on that This is split up between ahead of section a body Onda footer. So now we are free New Dave's at the same level. So this is the 1st 1 for the header. So the class off motile header on if a copy this section here and paces in two more times, There we go. So that's all ahead. Uh so the middle one is going to be for the body and then the last one is the footer, so make sure it is footer, body and head of section is all nested inside of this motile content. Dave here. Otherwise things won't look as intended. So let's see how we looking so far over inside the browser. That's refresh and click on the sign of button so we can see straightaway that the pop up doesn't happen when you click on the button. So as you may expect, we need to link this button to the motile foot it to work first we include an i d on the actual motile on if you go to the top So this i d It's going to be any name of our choice. So I'm just gonna call this motile then when it's hard to attributes to the button which will activate it. So the sign of put in just here would tell this button to activate the motile by first ad in the data toggle attribute, Onda said this to be motile Then we set which mortal we wanted to activate by using the data target and then setting is equal to the i d off the motile. So the harsh on motile and this is the same i d which we gave to the motile just below. If we save on, try to sell in the browser Now let's click on the sign of button here. Okay, so the bullet isn't quite working out. Just go Always feel cold on check everything here. So the idea of motile on then the button the, uh when he said our dates toggle on there, so make sure I spell correctly Reload. Click on our Putin. Okay, so that's I will pop up, which is in fact, all motile. But remember, we didn't add any content to the model. Had a mortal body on the motile foot section. This is why we see free empty sections on the screen. And this is what will move on to next. When we are that will form to this model so the user can add their sign up details. 31. Bootstrap forms: we know all about using forms from earlier on in the course, so this video should not throw up any surprises. However, we're going to look at how boot shop handles these forms uses exactly the same elements was already seen. But then, at some nice styling, a position in by adding the bush up classes. I want motile. Nile pops up on the screen when you click on this sign of Bourne on inside his model is where we're going to add. I was signing form. First. We can add some text to the motile head of section, which is this talk partier. So let's go. Actually, before we do that, if you click off the mortal, it would close it down and then over to the tax editor. Let's go down to all motile head of section here and inside here. I'm going to add a level five head in with the text off sign up for exclusive office. Do Stop also has some classes available to on this time. This one is called Motile title. So say that's and then go over to the model pop up, click the button and there's over text at the very top then on Friday, in our form inside his middle section, which is the body. So back over to our model this time inside of this motile body section going toe as a form , this form is going to have a div nest inside with the class off form group. So this groups together all of the form section include any imports and enables. We are teach import enable inside his phone group to add some structure to all form elements. So, Charles, any margin to space amount. Let's begin with a label on this label is going to have the usual for attributes and this is going to link to our input. Let's call this a name import because we're going to aunt a name section and then the text off your name, Then off this label Conard, our input. This is going to have the type of text and then some classes. So the boost our classes off form control. Hey, I d. And this idea is going to be name input. Which much is this label? So I d off name inputs. Then after this, we're gonna add it someplace All the text on this could be anything of our choose in. I'm going to simplify. I've enter your name. Okay, So before we added this butcher class off 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 on also sets inputs to be 100% wide. If we say that we can see what effect this has inside the model. So click on the button and there's a 100% wide input in the middle with the label off your name. This is how old form looks. By default. You have the label and input on separate lines. Boots top applies the display type of block on a wait for 100% to most form elements. If you wanted this label on import to be in line, the reason class food is too. We can add this to the surrounding form container and the class is called form in line. Say that and then reload. Look on the model and now our label on import is in line. But I'm gonna keep this as originally Waas without this class of form in line, it's less removes for now and then on to your email in address form groups. So just like this name section here, we also surround over inputs with this class off on group. Let's copy this and then paste in just below. This one is going to be for the email. Let's change your name to be your email. This accounts have the import type of email, too. We also need to change the label for attributes to be email input, which is going too much his i d. Here. So also changes to be email input on. I think everything else is OK, just a place holder. So enter your email on That's looking good just below this email we're going to pace in one more time on this is also going to have this around Endeav with a class of farm 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. So that's delete this input from here. Okay, after this label, when I'm going to create the text area, so remember the text, every house and opening and closing tug on the input just has the self closing tag so the text area can have a class on foreign control, which is the same as these ones above, because it's a text based input and then an i D. Which much is this label? All the dress Remember from earlier with a text in port. We can also specify how many roles you want to add on the one said this. Be free by default and send a placeholder with the text off. Enter your address. Okay, so I think that's it all done for the free inputs. So let's see how this is looking. Activate the motile. Okay, good. So I got the name the email on also the address, which is a text area. You can drive this open down to make a bigger or smaller, so this just leaves the foot area down in the bottom Inside a here. I would like to add some checked boxes. Ask if the user wants to be contacted by email, a post and then a submit button, too, to send the form first. Let's aren't these checked boxes, so down to our model should be motile footer, so it makes you let's change so about the body head, Uh, and then the footer at the bottom. So let's start with our email imposed inputs. So the surrounding div with the booster classes off form check because this will be a check box and then form Jack in line, keep these elements in line, and then we can add our input with the type of check box the bush, our classes off form check input. After the class, we're going to art and I d which is going to link up to a label on this I d. I'm going to call this the email check. And then finally a value which is going to be equal to option one and then closes off. Remember, the value is the text which will be sent to the server. Wants his form has bean submitted. Okay, so after the import, we need to ardour label, and this label is going to have a class off form check label the four attributes which is going to link to our I d off the check box above. On this was email check. Find it sexy inside off contact by email. Okay, let's make a little bit smaller silicon. See all on the screen, and then I'm just going to copy this to speed things up. So make sure you copy this full surrounding Dev face this in just below. A number can just simply changes. Want to be contact by post. So the classes all the same, which needs check the ideas difference. So the idea this time is going to be post Check the fall attributes compose check to contact by Post, and it's just add a question mark after each one of them. And then finally, let's wrap up this model with a button to submit the form. The text off submits the type of submit to the Bush art classes off BCN and then BT and primary, which will give it the blue color for the bottom. So that should be all now for the foot and we'll go over to check boxes here, and then I will submit button. So let's take a look at this in action. Activate the pop up. Okay, so the foot content is now there. What? It looks a little out of place. We can quickly fix this with a little flecks box rather than additional flex box in your CSS file. Bootstrap also provides us with some utility classes. We can use the art flex box in really quickly. So over to our code a number conard a flex box C says helper in side this motile footer Div So just after model footer we Conard justify content between and this works exactly like justify content between did you know CSS But boost operated inside off a CSS class So say that on over to our model and there goes and now things and nicely spaced out in the footer . This is just like what we have already learned. We can also replace between we have center start, end and around, for example, to the only difference is here we use in a class provided by boots top under the hood. It's still applying a CSS style property just like we did early in the course. If we were to open up the developer tools and then school down if we then inspect this foot area of the motile click on this, we can see this class of justify content between which we I did just here. It's simply applying the justifying content flex box property to these elements So let's close this down. Okay, So now if we go back over to or hate mail, if we take a look at the surrounding form inside the motile, So the form element that is he closing tag on, there's the opening tug. You know it's in this form element needs removed to surround all of all form elements. At the moment, it only surround this body content, off name, email and address. So let's cook this closing form tag out of here. And then if we move this down, let's move this right down to the bottom. So make sure it has the button with the type of submit, and now we can add this in just after the foot section. So now all of our imports and now inside this form elements just to finish things off. I'm going to art a button on the form, which is just going to be in X so the user can click to close motile. You can also click off the screen to close the motile like we've seen before, but sometimes you use it may not know that it can do this, so a little cross in the corner off the form will really benefit. I'm going to add this in the motile head of section So let's scroll up to the motile Had a party, a Anamika nards, A bottom. So just after this hate five, let's start a button A never cannot say Hey Tchmil Entity which is going to be a symbol ofttimes And this is going to be a little cross which we'll see in just a moment. So the boat turn. It needs a type of button, a class of clothes and then data dismiss off motile so data dismiss of model will declare We want this Putin to close the mortal when it's clicked So it gives us save and we contrive missile toe over in the browser Reload! Open up the motile and there's a hateful entity which is the cross click on this and now this closes down our model. This is our model now fully functional and also the form now looking better. As with all elements and components we've used so far, check all the bootstrap documentation for some variants on some different ways. We can use him along with any sample code, to get us going next week on to look out Bootstrap space in utilities toe at margin on partying 32. Bootstrap utilities: As we already know, bootstrap is just hey html CSS and some job script. If you want to art any CSS, such a margin of putting, we can still select any of our booster classes or elements and then add them to our own CSS file and then changes CSS properties, as we don't previously the easing of away, which bootstrap provides us. And this is where some useful utility helpers, if we go over to the boost drop documentation and then in the menu on the left hand side, click on utilities Utilities are basically a way for us to quickly are twosome styles to an element without even having to go to the CSS file. Starting with Borders, we can see here we conard borders to an element which some descriptive class names. So we have border, which will apply a border to all four signs. You also have bought a top right bottom left to it would take a look at the menu on the left. You 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 you click on Flex, we could take a look at the Flex box section on scroll Down We see some flex for news we can add as a class we've already used justify content between for our form section. Well, we have access to all of the flex box utilities if we also go down Aunt, click on text just to you Also looking at this tech section we've already used the tech center class, which we can see just here. There's also text left, text writes on also some utilities toe only. Apply this on different view Pore sizes scroll on further down we have sizing on We've already used this before Inside of our carousel we've used e w 100 class which will have here and this sets our images to be 100% of the available with. There's also spacing utilities here and this is what we're going to look at in this video. This is used to target some margin and putting values to all the CSS. So 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 P, which sounds a margin or punning then after this, MRP would then specify which side of the elements we wanted to apply to. We can add t for top B for bottom left, right and so on. So if you wanted to add some margin to the right, we start with M Ah. Then after these letters, with then specify which size we want to add, we did a number from 0 to 5 all. We also have the option of auto Zero will reset any default margin and put in back to zero to work. It was the value of 0.5 rams and so on. We also have X, which will apply the classes to the left and rights or why, which is for the top on bottom. So let's go over to our project on. If we shrink the browser down, we're going to start inside off the navigation. Let's drop this down. I'm going to begin getting to work on this form section, but we want to add some classes to make this look a little nicer, and then we'll use some of the space in utilities. So let's open up our text that it's ah and then get to work in our head of section. So it was grilled on toe a form inside his header on. In fact, let's remove this carousel from the header places afterwards. So screw around towns after these controls, could this section out Okay, so then down at the bottom of overhead A Let's pace this outside. Don't make sure this is all okay. Expand the browser. Okay, great. So now we just have aware navigation inside the header. So let's get to work with our form section by adding some boost our classes. So just here, and we can add a phone class or form dosh in line. American art some margin so we can use M y. So this will apply some margin on the Y axis, which is above and below, and then the value of two save that reloads on the drop down will now have some margin on the top and bottom off the form. Then we can go ahead and make this look a little nicer with some boot shop classes. First of all, the imports could have a class or form control. Then we aren't the type for the import of text and then a placeholder value off search. Okay, so now the button, we've got the type of submit that's just aren't some classes to this. So the 1st 1 committee BT and which received before NBC and outline dosh success outline will make sure that this color only applies as a border. Rather solid color and success will give us the green color, which will see just here on these on their own separate lines. Because we're on the small of you here. You will make this a little bit wider. Will now get these components now in line. So this M Y two, which have added here, will apply margin for all screen sizes. We can also set a different margin value for over screen sizes, too. For example, if you wanted to reduce his margin on medium sized devices on above, we could art and why dash MD medium devices and then reduces down to be one rather than two . If we save and then refresh now, when we make the browser the medium sized devices, this margin is now reduced on the form, Great to know have different margin values for above medium sized devices. This search born is also a little too close to this input. It would look a little nicer with some space in in between. To fix this, we can add some margin into this input to so this import just here. Let's add a new class off Emma, which is margin rights, then small devices and above that said this to me, too. Refresh. And there we go. So there's a margin on the right inside on. This should apply on smaller devices, which is here and above. Okay, good. If we shrink the browser down to the smaller size, which we've seen before, this book is also tight against the input. Let's have some margin to the button, The spaces out. So down to the button after Bt, an outline success. What can you is M y? And then that said this to be to let's see this in action greats. This looks good on the smaller screens if we stretches to the largest greens, we could also reset this margin for largest greens, but it does look fine, so I'm going to keep it like this for now. Now on to the free images down the bottom. We also need to add some space in to the section. I'm going to add some part in it to the in side of this element. So let's go down to the container. So the free images below the carousel. So it's this one here after a container and tech center. Let's add some putting on the Y axis on. This could be a value or five. Reload. Okay, good. So now we've got some partying on the top and bottom to make this container a bit taller. I'm with some more equal spacing. Finally, to finish off this home page. Let's are a foot area so back over to The Hague HMO right down to the bottom on what closes Dave off we can as a foot of section, So this is going to be a simple for two area. We're going to begin by adding a buck to stop born so when the user clicks on it that were taken back to the top of the page. Then afterwards, we'll add a copyright symbol with name of gourmet burgers with a home and locations link just to finish things off. So let's begin by audience, and classy is to this foot area. We can make this a container on BG light to get with the light background color, the space things that we can add. It's, um, putting on the Y axis on a value of four. Open up the P elements, and this is going to be our text off back to top and in fact, will just put this out in the ads. These in as a link with the A Element's and Paste is inside. The P types can have a class, and again, this is a utility class off float right. This will make the text float to the right on side of the page. On this, Lincoln also have a hatred attribute with a value of a hush. This means when a user clicks on this link, they'll be redirected back to his home page, and then it will start at the very top of the page. So let's take a look at this refresh click on back turtle, and then the page reloads right at very top. So there's a whole buck stop link, then, just after this week, it adds a new set of P tanks. So this is going to contain our text off gourmet burgers with the copyright symbol and then at two links, which is going to be four home on locations. So just after this opening, Peter guy, I'm going to aren't the hateful entity off copyright, which is ampersand copy and a semicolon, and then the text, all of 2018 gourmet burgers. And then I'm going to add a second hateful entity, which is called made 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. So next up, we're Conard to links for home on locations still within this Peter here. So that's audible. First link with the text of home. This can have a empty hatred attribute as we don't have anything selling to just after this link. We can also add at this mid dot once more to separate our two links and they're making art . I will last link, which is going to be four locations. The games can also have the empty hatred. Give that save. Oh, it's the browser. Okay, good sofa. Zoom in and then scroll down to the very bottom. There's a link which is back to top which is floated to the right with this utility here. Then we have our copyright symbol in the text of gourmet burgers. I would dot in between separates our links off home on locations. So this is it now for project And also I was spacing. Utilities hope you can now see how using boot shop can really give us a head start when building websites. Of course, all the default styles and not always going to be exactly what we're looking for and it is encouraged to override them and make customization ins dis of your needs. This is it. Now, if I will look up, boost off on. 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 flex box grid on Bootstrap before we started at the very beginning taken and look at the CSS flex box. Then we moves on to 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 boost. Dropped four framework will allow us to create great looking websites really fast, all while building a burger restaurant website support 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 then everything you need to know to build full stock applications. So by from now on, I will see you in the next part of this course. 34. Follow me on Skillshare!: huge congratulations from me for reaching the end off this class. I hope you really enjoy it and gain some knowledge from it. If you've enjoyed his class, make sure you check out the rest of my classes here on skill share on. Also follow me for any updates on also to be informed of any new classes as they become available So funky once again. Good. Look on. Hopefully I'll see you again in the future class.