Get started with Bootstrap how to make websites from scratch | Laurence Svekis | Skillshare

Get started with Bootstrap how to make websites from scratch

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 21m)
    • 1. 1 Bootstrap Course Introduction

      3:36
    • 2. 2 Get Bootstrap to your page

      4:50
    • 3. 4 source code explained

      2:50
    • 4. 5 setup bootstrap write some code

      4:26
    • 5. 6 Grid system explained

      11:06
    • 6. 7 Top Bootstrap resources Online

      9:07
    • 7. 9 Bootstrap buttons colors

      7:27
    • 8. 11 Bootstrap webpage structure

      4:17
    • 9. 12 Navigation bar building in bootstrap

      5:38
    • 10. 14 Bootstrap navbars sticky footer header navbar

      5:42
    • 11. 15 Make a reponsive navbar in Bootstrap

      5:07
    • 12. 17 Add a bootstrap carousel

      11:07
    • 13. 19 Add content and lists to website

      2:38
    • 14. 20 Push Pull Grid Columns in Bootstrap

      3:38

About This Class

Learn to create website quickly using Bootstrap the most popular HTML CSS JavaScript Framework online

Bootstrap is the most popular front end framework for developing responsive web projects.

With pre-build classes that you add to your HTML elements, you can really quickly and easily build amazing mobile first fully responsive websites.  Bootstrap has everything you need to create websites from scratch.  Spend less time building your CSS utilize Bootstrap to make web development.

I use Bootstrap on a regular basis, and wanted to create a course to introduce Bootstrap to other everyone.  With over 15 years of web development experience I'm here to help you learn how to use Bootstrap.

Bootstrap makes creating websites a snap, its for everyone of all skill levels.  Bootstrap is full of features and takes care of those common repetitive tasks you need to do when building common web components.  

Anyone can make beautiful web content.  Take your project to the next level with Bootstraps jQuery plugins.  Easy to add fully functional jQuery snippets that work well within your HTML elements.  Add carousels and a whole lot more.

The bootstrap grid system is the core to understanding how Bootstrap works.  Any device website access, which works.   Phone, tablets desktops are all covered with Bootstrap.

Mobile first thinking and mobile first design is at the very heart of Bootstrap.  Its works and looks amazing across devices.

Source Code is included -straight to the point training.

By the end of the course you will have the skills and know how to add create websites using Bootstrap.

I am here to help you learn how to create your own websites and ready to answer any questions you may have.

Want to know more, what are you waiting for take the first step.  Join now to start learning how you too can create amazing websites with Bootstrap today.

Transcripts

1. 1 Bootstrap Course Introduction: within this course, I'm going to introduce you to using Bootstrap. Now, Bootstrap is the most popular front and framework for developing Web projects, and bootstrap is just really easy to use. And it really allows you to easily and quickly create websites. So within this course, I'm gonna introduce you to different tools and resources for a using bootstrap. So there's gonna be a lot of different Web tools that are available. Eso I'm gonna be going through those within the course. My name is Lawrence, and I've been a Web developer for over 15 years. I use bootstrap on a regular basis, and I really enjoy using boots drop. And I'm gonna share my knowledge with boots. Drop with you within this course. So I'm gonna start off with explaining just different things that you can do with boots. Drop explaining all of the different highlights and how bootstrap works where you can get bootstrap. How did at it into your website, different buttons and so on. And I'm also gonna introduce you to different resources online. So of course there's gonna be how to get boots dropped. There's a bootstrap get hub, and there's also resources such as code pen where you can actually write bootstrap, bootstrap syntax and attach boots stopped here CSS and create your own bootstrap files right online and just see how they work. You immediately get to see the results when you make some updates here, you get to see what happens here on the right hand side in the display area. This is one of the reasons are really like to use code pen, and I'm gonna be using it a little bit through this course as well. So also, we're gonna be talking about the structure of bootstrap and how to build out a website from scratch using bootstrap. So this is the website of Web project that we're gonna be building and creating. And as you can see here, there's a navigation menu, and this is one of the things with boots dropped. That bootstrap just makes it really easy and is very intuitive to design these navigation menus. And, as you can see, when I resize the page, were fully responsive. And this is by design within bootstrap. Bootstrap is mobile first. So you thinking mobile first when you're designing your websites, how they're gonna look on the small screen. And this is what Bootstrap does best makes responsive websites easily, as you can see that I've got my navigation menu. We can have drop downs in that navigation menu when I get in a bigger screen than it resize is once again. And I would also updates some of this content here, and it stocks it in different orders. And this is also what's at the heart of bootstrap is the grid system. So we're going to be covering that and how to use that and how to think the grid system when you're designing your Web pages. Also, we're gonna be looking at some really cool functionality that you can bring into your boot Stop projects such as the carousel. So this is an example of the image carousel that we're covering in the course, and it's really easy. You don't have to have any additional JavaScript or Jake Worry coating. This is all built through utilizing the default bootstrap classes. I'm gonna show you how to do this. I'm also including the source code within the course, so source code is included, and I also do encourage you to take that source code. Try it out for yourself and see what you can make happen using bootstrap. So when you're ready, let's begin creating some amazing content with Bootstrap. 2. 2 Get Bootstrap to your page: in this course, I'm gonna show you how easy it is to create a website using bootstrap. Now Bootstrap is the most popular HTML, CSS and JavaScript framework for developing Responsive Mobile first websites. So, just as mentioned here on their website, and in order to get bootstrap, it's really easy to dio and add it into your Web projects. It's really easy to add bootstrap into your Web projects. So essentially, what bootstrap does is it allows you to use a set of pre defined CSS styling classes in order to create your website and create it so that it's responsive as well. And it also comes with some pre defined JavaScript functions, and you can utilize those within your code as well. So in order to get started with bootstrap, you can go over to their website. It's called get bootstrap dot com, so this is the main central repository. They also have a get hub repository here. Eso You can access it and find out more information about boots drop, so bootstrap is free. Open source. You can use it within your Web projects. You can link to the seedy ends, or you could download the source files in order to get it installed and set up on your Web pages. So there are a few options for setting it up within your Web projects. So if you want to download it, you can go ahead and download all of the source files. And what you really only need to get started with bootstrap is that CSS library? So go ahead, Teoh, either to download it or I'm gonna show you another really quick way to get started with Bootstrap. So there's a few options here when you click the get started option. You've got that first option again to either to download boots drop. So this is compiled and Mina flied CSS and JavaScript and fonts, so all of it is self contained. And if you're working on your local machine and if you don't have an Internet connection, then you can still get access to the bootstrap files as long as they're downloaded on your system and you're linking to them. And another way is Thio thio. Use SAS. So SAS is Portmore advanced users, and you need a compiler for that, and it allows you to actually customize that bootstrap code. So what? I'm gonna be showing you within this course is we're gonna link to the default bootstrap library. So that's going to be just this one bootstrap dot CSS file. And we're going to create a separate style sheet in order to customize our bootstrap install. And this is gonna be the quickest and easiest way to get started with bootstrap. So just go ahead and select that cdn and what a cdn essentially is. This is a shared library so we can bring bootstrap into our Web projects just by linking to that shared library and bring that into our projects eyes number of different ways to link to it. There's several different CD ends, so probably one of this is probably one of the more popular ones. The bootstrap cdn dot com. So I was gonna go ahead and copy that bring it over to my Web project, paste it. Really, That's all. There is really to bring bootstrap into your Web project. And besides this, they also do have they've got all of the information here. What's within the compiled bootstrap? How bootstrap is set up with all the different folders directories, and there's some more information here with your compiling your CSS and JavaScript. It's a number of different ways to bring boots. Drop into your projects as well, so you can use grunt, and you can use packaging in order to bring through bootstrap eso down here at the bottom. They also have a basic template. So this is just a really good basic default html template. So again linking over that cdn file. So see, if you just copy this, paste it into your website. So I just created a blank html page and now just copied this in and saved it. And I go to my Web page, and if I go out and if I refresh it, we're going to see that. Now we've got boots drop installed and we've got our first HTML code. They're showing up, and in the next lesson, we're gonna be taking you through how to customise this boots, drop code and turn it into a website. It's just as easy is that to get this starting a basic template to start off creating your projects in boots, drop 3. 4 source code explained: this lesson. I wanted to walk through what the download files are. So if you were to go over to boots drop and simply go to download it, you see that you're going to get essentially three folders. So you've got your CSS files here. So you've got a regular bootstrap men ified theme and theme as well. Men ified. You've got your fonts here. So there's some of the fonts that air use used within boots Drop. We've also got our JavaScript here, so this is actually all G query. So you do need to link to J Query first, see any taxes the J Coury library and then access the bootstrap library, So you got to keep it in that order. So we've got our boots drop, and then men ified bootstrap. So the difference between the regular bootstrap and the men ified bootstrap, it's gonna open that up here is that the regular bootstrap, the non men ified version of bootstrap, is going to be the one that's used. So this is just the regular version of bootstraps gonna make this full screen here and we can see that it's really easy. Teoh to read. You can go through and you could make some updates. But I don't really advise that you do update the bootstrap default file because sometimes we could make some updates and you want to go back. It's a little bit more difficult, so it's always better to create your own CSS file and link out to that and make the updates in that fashion. And the men ified is the same content, but there's no spacing in between there. So essentially, what men, if I does, is loads faster and the same thing for JavaScript. So they've got the regular JavaScript here, and then they've got the men if I JavaScript, which is gonna be condensed version without the white space in order for it to load faster and use either one as your main source for your projects but by default. And what we've got here when we're linking to boots drop here is that we're linking automatically to that men ified version. So we've got a link to Bootstrap here, within that default template that would built out and slink into the men ified version and the same thing with JavaScript linking to the men ified version of JavaScript and then over here, we've got a link to Jake Worry because G query is necessary in order to run the JavaScript functionality and bootstrap. And, of course, if you're not using any of that functionality than that's not gonna be necessary. So the next lesson we're going to start creating some off our boots, drop files. We're gonna begin to build out our website and design our template using boots dropping. I'm going to show you just how easy it is to really get started quickly to create content using bootstrap that's coming up in the next set of lessons. 4. 5 setup bootstrap write some code: The really neat thing about Bootstrap is there's a lot of documentation online for it. And one of the main source of documentation, of course, is their website. But there's a lot of resources online where you can access bootstrap content. You can get free templates, you can get started templates, you can get example samples and a lot of really cool stuff with bootstrap. But we begin to design our website. I want to go over some more of the bootstrap coding. So they do have an explanation here. And essentially, when we open up our code, we see that this default here. So we've got our doc type is listed here. And of course, this is HTML five. Over here, we're specifying the language. So English, the character set. So all of this is used by the browser in order to be able to better render. Wrote that content. We've got some updates here for i e. So it's gonna be forcing IE to use the latest version of edge eso. This is because I e sometimes the older versions of IE they're not as compatible with the new or Web code. Eso they do throw this in and as well we've got a shim down here again for I e for i e eight. And essentially, if it detects ie eight or i e nine that load some help her files. JavaScript, help her files in order to make the website perform better and as expected, warm or as expected, And then over here, we've got the title. So essentially, this is what the default boots drop structure is. Here is the link to the bootstrap file. And as I mentioned, usually what I like to do is I like to create my own style sheet. So I'm gonna link into my own style sheet here. That's gonna be it styled up CSS. And I'm gonna link it out as a style sheet and close that off. So this gives us the link to the style sheet. And for now, we're not gonna be really doing a lot with the JavaScript. This is just the J. Corey Link here, and the reason that we lowered all of this JavaScript at the bottom of the page. Sometimes you might see javascript being loaded. The talk and the reason being is that Jake weary and bootstrap, it's a lot of dom interaction. And the dom essentially is what gets built by the browser after renders out the code. So you do need tohave that document getting built out by the browser, which is the document object model. It gets rendered out by the browser. And then the idea is that G Query and JavaScript access that, and Jay Curry is only available after the actual document has rendered. Eight. They're not going to be able to access those J Corey objects pre rendering of the Dom, and that's why we keep them at the bottom, because we want to make sure that entire HTML and entire Web page gets loaded in and it's ready to go. So now when we're started, ready to get started with boots drop, I just go to show you some really neat things that we can do with boots Drop and one of them, and one of them that you're going to see use quite often is, is the Jumbotron essentially what bootstrap is? It's a set of classes, and as we know with classes, we can apply classes to anyone of the elements within our Web page and these classes and bootstrap already have pre defined styling to it. So if I link to a class called Jumbotron and I was gonna do Hello, world, it's going to show you what this looks like. So when I go back out to my web page and if I refresh it here, we see that we've got this pre defined styling. We've got this kind of great background or text to centered vertically, and we've got kind of rounded sides which we can't really see because we're just taking up that full block of allocated space. And in the next lesson, we're gonna jump mawr into how to structure our boots. Star pods were building it out. So this was just a demonstration about how we get boots drop in and how we get it started and how we start accessing these boots, dropped classes and as well in upcoming lessons, we're gonna talk about the grid system. The grid system is really the core of bootstrap, and understanding the grid system will allow you to understand how to utilize bootstrap. That's all coming up in the next set of lessons 5. 6 Grid system explained: bootstrap is all about the grid system, and understanding the grid system in boots drop is gonna help you utilize and understand bootstrap Much better now. Bootstrap is designed to be mobile, first and responsive, and essentially, what that means is that the thinking went, It comes to designing. Your Web site should be from the smaller screens first and building out from there because you can always take care of the larger screen sizes but the small screen sizes. Sometimes if you've got a lot of content up there, it might get squished. It might get crunched. It might not be as readable as you'd like it to be. So start thinking with the smallest screen first and then build out from there. And essentially, the way that grid stop grid system works and boots drop is that we have the ability to set 12 different columns. And of course, we can customize that if the need be. But working with the 12 column system is very straightforward, and it's probably the best layout toe work with eso. It's very un restrictive. And of course, with 12 we can do a lot of multiples of 12 so we can do. If we want to do have a four column layout, we could do them three columns across and do four columns that way on. And there's a lot of versatility when working with the 12 column system. If we want to have a two column website, we take up a span of six columns on each side, and that would give us the 12 as well. So a lot of variations. What we can do with 12 and understanding the grid system is really there's. There's different breaking points within boots drop. So the way that boots drop is designed is that it has multiple breaking points, and the break points essentially are meant to be, depending on what type of device the users on and having a different display model for those different devices. So we see here that when our options here within the grid options, we've got essentially four different options. So we've got an extra small. We've got small, medium and large, so extra small would be designed more for phones. Ah, a little bit larger devices. The smaller tablets might be small devices on, and maybe some other tablets as well. So if you're designing for those up platforms. Then you would be looking for this kind of call. Um, small sizing. So but 7 50 picks across. There's also medium devices. So these air the larger tablets and then starting in with death stops, laptops of the smaller screens and so on and then finally going all the way over to the larger devices. So anything 1200 picks and up, then we'd have a container size for large. And then you were versions of bootstrap that's just coming out the bootstrap for there's going to be an even larger version. So on X L version, and there's gonna be a lot of classes that are gonna be pre defined with these different breaking points. And that's coming up in the newer versions of Bootstrap, which is currently within the Alfa. So in order to design our website, we got to think of it as a grid. So essentially the 12 columns across and each call I'm taking up a pre defined percentage of the space that's available on the website. So I'm gonna go ahead and start creating some of this grid system so we start off by creating a role and much like when we're designing tables and HTML we start out with a rolled class in. This pre defines that this is gonna be a role, and it's gonna have some columns contained within it. We're going to start off with DIV. Call them. And of course, you can apply these classes to any element most of time. It just makes more sense to work with dibs and spans. But of course, you can apply it to different elements as needed. So this class, instead of that c o l. So that's gonna indicate that this is a column, and then we have some parameters here for the columns. So if we want the column to behave differently on a small screen as opposed to a medium screen, we could set it at S M. And for this for this demonstration, I'm gonna use the medium size. So just going quickly back to this we see that medium is MD. We also have large LG and then excess. So that's going to keep it static at those columns. And I'll show you what I mean by that. So, with on a medium size screen, I'm gonna have column MD class of six. So I'm just gonna do one. And I got a copy that sold for and 12 or six so that the equal 12 altogether. So let's go take a look at our code and see what happens now. So you see that we've got both of those columns and I'm actually gonna update some of the styling. Here s Oh, this is just temporary so that these are more visible. So I'm gonna add that rate within the page here, and I'm gonna set call, um, actually going to create a brand new class and I'm gonna set this up for the column colors . So I'm going to give it a border so we can actually see where the border is. One pick, solid black. I'm also going to give it a default height. So maybe we'll take 200 pics as the default height. And we don't have to worry about with because bootstrap is handling all of that for us s Oh , this is just so that it's visible to the user. So let's apply this class to hear. So again, this isn't a bootstrap class, but this is just for demonstration purposes, so we can actually see where our columns air falling. So you see that Now we've got these two columns, and this is where the interesting thing happens with bootstrap. When I start re sizing it, we see that when you get to a certain breaking point, they actually stock, so they're no longer next to each other, but they stack. And this is what we mean by mobile responsive design. Because this just essentially means that we're ready for different sized screens and the output is gonna be displayed differently, depending on what the screen size is. So let's also take a look at this and I'm gonna create another role. And for this one, I'm gonna have an SM, so it's gonna break. And maybe I'm gonna even keep this phone that excess. So this is the smallest screen size. So even when I do shrink it down, these break points are going to be different than the previous ones. So let's take a look at and see how this behaves. And we see that initially on the larger screens. So anything over that medium screen size s anything over m d is or anything over 9 70 is gonna just take on that default and applied both columns. But once we start to shrink down below 9 70 and I was gonna shrink this down and show you how this works. So once we hit that 9 70 then we start hitting some breaking points. I believe 9 70 should be coming up fairly soon. So there's our first breaking point and we see that the MD broke already and because we've hit that breaking point and then we have a second breaking point at 7 50 which is gonna be about 200 pics smaller. And then that's gonna stack these ones because one of these is on the S M class. So once we hit that breaking point of 7 50 than we see that this one starts to stack. So if we had two of these classes, they've stock one on top of the other at this point, and we see that doesn't matter how much we shrink the screen. This bottom one here is always reserving half of available with of that, that spacing where that div, and because we've set it at excess and excess, essentially prevents it from re sizing. So it doesn't matter what size the screen is, it's always gonna be taking up only six of the available columns, or 50% of available space on within the Web page. So each column is approximately about 12 or 11 11 point something percent of the webs of the available space. And then if you add them all together, us if we've got six there, then we get 50% of the space. So, actually, I'm sorry. I think that was wrong, that each one would probably be taking up about nine just under 9% of available space and then once we shrink it so this would take up 50. If we're doing a call span of three, we'll show you how this is gonna work as well, on adding a few more. And ideally, we do want to try to stick to a total call a total call of always working into that value of 12 so that we don't have any lagging columns, because sometimes this will not space it properly. So when you're designing for the call, I'm splitting. Make sure that you're taken into consideration, that you want to work with spacing of 12 and just show you how this is gonna look so when we're on the smallest screen because their break point is MD, we don't see any changes, and we don't actually see anything happen until we get to that larger breaking point. And then at that point we see that we've got four columns, so each one of them is taking up 25%. We're actually 25% so each one of these again it's taken up 25%. So because it's three columns wide does take some getting used to. But essentially it's makes It makes it really easy to design websites. So if you want to have a website that WAAS had a main content area in a navigation menu on the right hand side sub menu or something like that and corn, so maybe this would be for remain content. So you could really usually make a two column website and you could continue to build out from there, adding in your HTML elements as needed. 6. 7 Top Bootstrap resources Online: I wanted to introduce you to what's possible with bootstraps. And this lesson. We're gonna be going over some of the Web resources that are available and that are out there in order for you to use practice. Bootstrap, build out bootstrap content buildup, bootstrap code and so on. So one of the resources that I really like to use is called Cold Pen I o. And this resource actually gives you the ability Teoh edit content online and update content online. And it's really easy to bring bootstrap rate within your projects here within code pen online. So you don't even need tohave an editor. You don't need to have anything. You can just go over the code pen, create a brand new brand new pen, and go into the CSS here and here. We've got an option for quick ad so we can select bootstrap. And then, of course, there's some other ones as well. Eso All we have to do is selected bootstrap. I'm just going to change that to none and close it. And that brings bootstrap right into our project and essentially what Bootstrap does. So I'm gonna get rid of this for a second and show you what the difference here is. So this is pretty bootstrap. This is what this website is gonna look like pre bootstrap. It's got a whole listing of all these really, uh, whole listing of just some typical elements and each to mail that you'd be using. So without any styling, it looks like that. Then we bring in bootstrap and just close that now, and we see that we get a whole different look and feel, and this is what bootstrap does. It allows us to do styling really easily. And here's the grid system that we were just talking about in the earlier lesson. Another really neat thing about bootstrap is its ability to have these buttons is pre made button colors, but in classes, button sizes. There's a lot of options here to play around with. And again, it's really easy that buttons, and we're gonna showing it how to do that within upcoming lessons. Also, Bootstrap three has icons. Eso. It's got a whole bunch of icons that are ready to go and ready to utilize within your code . Eso within bootstrap, for there are some changes when it comes to the glitch. Cons. eso. There's other resources as well to use for glyph con such as font Awesome. It's a few different resources for that. We can see the styling for forms that's got some pre defined styling performs there. Those buttons again tables really easy to create this kind of, uh, this hover effected in tables. The strike defect Zebra effect on It's got some miscellaneous items here, such as bread crumbs, page nation, pagers, tabs, pills, novelists, labels, badges, progress bars. It's a lot of options here. It's got panels. So these panels are gonna change for bootstrap for as well as they're gonna be introduced. Something called cards. But for now that bootstrap three, we've got these panels we've got the list groups on. We also have some alerts down here as well. So a lot of really need stuff that we can do with bootstrap, and it's just a ZZ as just adding it into adding the various classes within your code. So another really good resource for bootstrap says a lot of these editors here that allows you to build your bootstrap so you've got booed. Ploy, which lets you see cold repositories, lets you fiddle with bootstrap edit it. There's a bunch of resources here, so people will post bootstrap code snippets. And so on whole really good community here for bootstrap, so another excellent resource for boots drop. And then, of course, you can build out your bootstrap demo pages. Ought right online at boot play as well. Another really good resource to build out your boots drop is layout it dot com, and this one's a really neat one. Because this is all Dragon drop. It's all you need to do is select the components. So let's say I wanted to have a form in there. I could drop that in there. I can hot. Maybe if I want to have a button in there, I can change the button style, the different button classes that are available. And I'm gonna talk more about this as we progress through the course. Also, if I wanted an ordered list, Aiken, drop that in. There's also components here. So there's that Jumbotron that we had looked at earlier s. So this is the Jumbotron, and there's all these different components that we just just looked at. There's also there's also navigation bars so you can have various types of navigation bars so you can have a default. You can have pills, you can have it stacked or not stacked. So all of this is just with the click of the button. There's also JavaScript. So if I want to dry again, my image carousel and I could set that up and have that fully functional just by bringing in that HTML code and linking in the JavaScript libraries. And then when you're ready, you can either preview it or you could download it, and you can log in, create account here, register with your social accounts, or you could just go to the non logged in. And there you see all of that boots, drop source code, and that's ready to copy paste into your project, and then your boots drop your Web pages already gonna look like this. So talk about really easy to design websites. There's also boots, dropped theme and literally there's so much stuff that you can do with all of these generators and designers. Eso we've got a theme generator, so usually over here, you start with the Web designer. If I wanted a navigation bar, I can see this is the navigation bar. Next, if I wanted to create a carousel so I could add that carousel in next. And if I wanted Teoh maybe here. I wanna have some content here. So I'm gonna create a container for the content and have some role. Is there? So it's not that the greatest functionality, but maybe I wanna have just looking for a really good unit to drop in. Here s Oh, yeah, Essentially, you could start building out your content there. You could go in the editor, you could see that html code. So there's those containers that I created and there's that fluid roles. So I'm going to just update this really quickly and just to demonstrate what we can do with bootstrap eso here and maybe typically, we might have some content or something like that. So do call him m d six, and I'm gonna just do another one of those. So I have a quick to call them website and switch back over to the preview and show you what this is gonna look like so you can get rid of that. We can see that now. Already, we have a really nice presented website content and of course, in you could view it. You have to sign up for that. But you could download it as well. Eso again you have to sign up for. That s so not going to go through all the sign up process. But you can get the point there that if you want to use this content, you can just simply go like this inserted in. I can go up to my Web page, refresh it, and I'm gonna have all that content ready to go. Another really good one is boots watch. So there's got some free themes here. Eso these air some defaults starter themes. As you can see that they've updated the color formats here for all the buttons. And of course, we're gonna be talking about thes. But as it's always good to know that you've got all of these really good starting places to start building at your website so you can get your court up and running really quickly, and then you just customize it and make it look the way that you want it to look. So this is all available. There's also a button generator. Eso This is something we're gonna look out in the upcoming lesson. But for now, it's just good to understand that this is available as well as this button generators available. Really, there's plenty of resources that I haven't even mentioned here online. Eso just need to do a Google search for bootstrap resources, bootstrap templates, themes, whatever you're looking for. And there's really so many different types of resources here. You can literally find whatever you're looking for really easily when you add when you're looking online for boots, drop content and components. 7. 9 Bootstrap buttons colors: So one more thing that I do want explain before we jump into our code is the color scheme A here for bootstrap. So we saw that earlier. We've got all of these different buttons and we can apply these different button classes and have completely different colored buttons. So I'm gonna just show you how this is gonna work and we see that it's done over and over again. So even for labels for problem progress bars, we get this repetition of these same colors. You've got it over here. We've got panels. Success s Oh, this is all success. And we've got six different ones to choose from in Bootstrap. And I'm gonna go up and take a look at them under the button classes. So within the button classes, we've got our default, which is just white with a white background black text. We've got one called primary. We've got one called success. We've got one called info. We've got one called warning Danger. And these air the main color schemes that are being used and we go over to our boots watch . We see that they've done some variations of these colors and what this is going to do so. Then I just find one that looks kind of like a default here. So maybe just take this one and preview it, and you can see that literally. They've got all of those button colors here outlined, and whatever button use color you select, then this is what's gonna be displayed. So it's going to use this color schema and you can use thes columns against within tables. You can set your pre defined colors as well, and you can do it here within the inputs here. So we've got the ability to set the success error warnings there. We also have it within our alerts. So you've got the warning, danger, success and primary. We've got it within the labels. We've got it within progress bars and so on. So on a space also what panels? Eso We've got a lot of places where this gets used, and one of the really need things here is his button generator s over here. You entering your button text, you have an option here to do a mini button, a small default or large, and we can see the different sizes here in the right hand side and they're also displaying the code that coincides with it on. And then we've got all of the different button colors that are available. I've like default and we can update the different link types. So these boots dropped. Classes could be applied to any type of element. So here we've got an anchor here. So hyperlink that's getting applied to that Here. We've got a button. It's getting applied to that. We can apply to input we can apply to submit. We can also apply it to a div and so on. We also have different states here, so we can do it active. We can do it disabled. We also have our icon s. So this is something that we can add in and we don't have to add in. All this does is just simply adds that class there with that icon so that I I and then that's got a class there. And that adds in the selected icon code, we can also update the icon colors. They could be black or white asses well, and then the icon position and all this is doing switching where the order is when that icon gets represented. So Let's go back into our code pen and I'm gonna create a brand new code pen. So I was gonna go leave, and I'm gonna do I just realized that I had to sign in there, so I wasn't logged in. So now I can go in and I can do new pens. There s So now I'm just gonna create a brand. You pen, I'm gonna add in the boots drop theme. And it's just show you how the buttons work. So over here to make this larger. So I'm gonna just got a diff here, and I'm going to give it a class. So be t n is for button, and then the 2nd 1 here is gonna be whatever button color we want it to be. And then for the dibs, the content is within it. So I just do click me and we can see that right away it creates that button and we've got that functionality here. Eso We also have a bunch of different options here for the buttons. So one of them is if we want Teoh change the colors just like this over here, where we had primary we had in full we had success, and then we've got the BT and large as well. We just simply have to add those in. So if I want it to be green people of success, If I wanted a bigger button, I could do a button large and so on, so I'll make that button larger. So you do have those six different colors for the buttons. So if I wanted a red one, I could do danger. And that will turn that red and so on. And I've got the info and warning as well. And if I want to change this button, so I've got button sizes. So actually, it's not button large. It's button allergy, and that's what's gonna make it large. Eso the same way that we had the breaking points that we're setting up, and you'll find that a lot of the bootstrap stuff gets I'd done over and over again. So we've got these different sizes for buttons, so button sm for a smaller button and so on were able to do a button full the full way across. So if I want to do a button block, what this will do is create the button all the way across, and then you can do various combinations as well. So if I wanted a large button block, I could do that. I want a small one. I could do that. I also have the ability to do active, so active so I can change it to an active buttons is a little slight color variation. I have a copy, this one so we can see that there's actually a difference between the active so a subtle difference between what's active and what's not. It's really good that it already has thes preset, because when you're adding, updating these classes dynamically than this gives you the ability to to really toe add these in. Maybe if you're using Jake, or you can add the classes in toggle them, removed them with the code, and this makes it really functional. So everything has already thought of and ready to go there. We can see we can go disabled, So even though this is a div, it's not a button. It still disables that it puts this mark here on top of it that we can't click on it, and it kind of gray's it out a little, Mute said a little bit. So this is the basic color scheme of that you can use when it comes to bootstrap. So now we're ready to start building out our website and start adding in boots drop code in order to develop a website from scratch. So that's coming up in the next set of lessons. 8. 11 Bootstrap webpage structure: One of the first things that we need when we're designing a website is we need navigation. So I'm gonna walk you through how to set up some navigation within your bootstrap theme. And there's actually one other thing I do want to cover quickly before we get started with the navigation. So what we want to actually do is we want I'm going to get rid of this and I want to create a container that's going to contain all the contents of my bootstrap design. And with boots dropped, there's two different options. So there's container fluid, and then there's just regular containers. So I'm gonna show you what the difference between the two is. So I'm gonna have, and I'm just gonna have this as a route rule on Get rid of the fluid there, save that and make this beautify it. So it's check out what's going on on our website now. So when I refresh it, we see that we do have a slight variation, a slight difference I need to add in this class so we can actually see our our columns. Let's go back and try this again. So you see that with the talk one. When it's fluid, it's taken up all the available real estate, but when we're using just regular container were out of fixed with. So doesn't matter. Even though we're expanding our our website, our browser saw our browser size. We see that the fixed with stays out of as it is, it's nicely centered within the page, and it's not gonna expand above this. So believe this is 11 80 eso its preset to not go above that so depends. The first step is to determine what type of website you want to design. So if you wanna have one that just there both are going to resize on a certain breaking point, they're actually going to come to look the same way eso whenever we start shrinking it down . At a certain point, we see that this one here is actually taking up more available space than this one. So even though we've shrank it down, we see that there are subtle differences and that it's reserving some padding here on the left and the right, and this one's reserving a little bit more padding on the left and the right, so it's still centering it So we have to decide how we want our website to behave. So one of the ways I usually do it is I like to have these fixed withs because even if someone comes on a bigger screen, it's nicely centered and I don't like to really overwhelm people with a lot of content. Eso I like to keep it within that fixed with. So that's what I'm gonna do with my website that we're going to be designing within this course. I'm gonna keep the container at that fixed with this is the main starting point of the website to determine what type of container you're going to contain. Your code and and then now we're ready to start building out our website and as mentioned before, if I wanna have a website with maybe a menu here on the left hand side and then you here on the right hand side, I can really easily build of eight within bootstrap and if I want to have different areas here, So if I wanted to have a row, that was maybe all the way across all the time, so we could do something like that. I could also build out like a header or footer and so on. So I could build these these components out as well so I could do something like header close that off as a header, do this one as a footer and close this off as a footer. And now when we go into our website, we see that we've already got a nicely structured, laid out website, and so this is gonna be responsive. So it's automatically gonna stock and and stock are content the way that we want it displayed out. In the next lesson, we're going to be looking at how to set up a navigation bar. So every website needs a navigation bar. And I'm gonna walk you through how to set that up within your website that's coming up in the next lesson. 9. 12 Navigation bar building in bootstrap: this lesson. I want to walk through how to set up a navigation bar. So we do have a choice with the navigation bar. We can keep it within our container, or we can keep it outside of our container. So I'm gonna start to build out a navigation bar outside of the container and with boots drop, we can have different types of navigation bar, so we might not necessarily want have a main one. We can have navigation bar that's now have tabs s. So we're just gonna indicate that it's a knave and I'll show you what the different other classes customization classes are as we progress through this lesson. So typically, when we're designing websites, we're gonna set up on ordered lists and we're gonna have all of our navigation items as list items. So this is a fairly typical way to design websites, and then within here is we've got our hyperlinks here and then a link out to whatever Page one, link it out. So it might have something like home and just thistles gonna look like, uh, and another maybe we've got our products listed, and contact area was some typical menu options in your website, so I refresh it. We see that we've got this kind of built out menu, but, I mean, it doesn't really look like an actual navigation menu, and it doesn't. So we've got this hover over effect because bootstrap understands that you do wanna have thes has clickable links. You do wanna have them as represented, kind of like buttons. So users understand what they're gonna be used for. So what we have looked at before, we've got an option for now, Tabs. And so that one looks like So when we refresh the page now we see that we've got more of a navigation type menu and I'm gonna shrink this down a little bit so we can see the comparison here on the right hand side. So this looks sight. This looks pretty good. We have some other options as well. Weaken do pills. So whenever I refresh that so they look slightly different, we can also set an active one. So and this is set on the list items that we can set the class of active. So you see that the active one is gonna have this blue around it and then other ones are just regular pills. Eso We have quite a few options here when it comes to navigation menus and as well we can continue to build those out. We can have drop downs if we want and so on. So if you want tohave maybe in the products here, we want to change this and update this to a drop down. So we need to just change this to class drop down and eso this were we need to add in some additional classes here in order to for it to function as a drop down, so keep it as products. But we're going to make some updates to what we're going to be doing with us. We're going to call over to class. So the classes, let's drop down. Toggle. So these air essentially some classes. But they're going to give some instructions on what we want toe happen here. So we want a toggle data toggle and what we want a toggle is we want a toggle, are dropped down and want to put it as a rule off button. So update the actual role within the attributes there. And so here we can have whatever html we want in there. Teoh indicate that this is the drop down and then we need to create a new ordered list and give it a class of drop down. So drop down menu class and then we could have a bunch of list items in here. Eso again we could list out. So it's something like this one to, and three, Let's check this out. So save that and refresh it. So now, under products, we see that we've got this drop down menu. We see how easy it is to work with Bootstrap because they've already thought of everything . They give us this ability to really to customize what we want and how we want things to look and feel. So we've got our drop down menu. And then, of course, if I was to change us over two tabs, let's check out how this is gonna look now. So if I refresh it under tabs, we still have the levels drop down options. So the next lesson we're gonna actually build out a navigation bar. So this is the starting point for building up navigation, but you might see this typically being used within their Web page eso if we want to have a really cool default navigation bar. Boots drop already has us covered for that, so that's coming up in the next lesson. 10. 14 Bootstrap navbars sticky footer header navbar: in this lesson. I want to convert the navigation bar that we built in the last lesson. I want to convert it into a knave bar. So an official bootstrapping knave bars were going to give it a class of now of bar and was gonna make a now far default. We have specify what type of knave bar we want, and these again is of these pre defined classes and bootstrap really easy to use and utilize within your coat. So the first thing we want to do is we can set up a header fort as well. So if you want to set up now bar header, we can specify that sometimes within your navigation bar might want to have an actual headers. Let's see what has changed now so far, so CR menu looks slightly different. It's got this kind of great out area in it. It's going all the way across there on. That's because we're not within the container. If we want to have it Onley a navigation bar within our container because by default it takes up all available space. We can shift it into our container, and that's going to make it in as a contained navigation bar. So I'm gonna get rid of that, have tabs. And I'm gonna change this to love far enough and see how this is gonna look. So when we refresh it now, it's starting to look more and more like a navigation bar. So, as I said, we do have an option here for a header. So if you wanted to add in a diff here in the beginning, uh, and let's say we won't do a class nav bar header and close that one up again. And then this is where you put your website name or whatever you want to place in there Now , one of the thing that we can do as well so decides doing it this way we can put the container within the nav bar. So if you want to do something like class and and that's the thing with bootstrap, you can reuse these classes wherever you want. Eso, whatever just kind of makes sense with when you're designing. You can see that now when I've moved out in there, so it's gonna look slightly different there, and that didn't really turn out that great. So we need to devastate this span a little bit, So typically you would be linking out. So I'm gonna use just a link out as the container for that and see if that makes any difference that that gives it, um that, uh, the underlying the hyperlink. There s oh, now we need to add and update our class. So I'm gonna add now Bar brand. And now, when we refresh it, we see that now looks mawr. It flows better within our navigation bar. And so this is really the all there is to it to build out a navigation bar within bootstrap . And we do have a few other options. Here s so if we wanted Teoh, we notice here that we had just gone with the default. We can inverse it if we want. So we've got our converse of the naff bar. So what that is is it reverses the colors. We can also fix the position. So if we want this navigation bar to always be fixed to the top, so even if we scroll down So I got to shrink this down a little bit so we can actually scroll so few on our navigation bar to be fixed at the top. Bootstrap has us covered for that as well. So I can do enough bar. It's one word. So now bar fixed talk. And so this is gonna look so this fixes that at the top. So it keeps it within that static location. And of course, if we're doing it this way, then we need to shift down our style. So need Teoh add some styling into our web page and we'd have to shift shift down. Maybe this container given an I d or something like that s O that we have the ability to, uh, to see the content that's underneath is when you go with with a sticky header or sticky footer, Then you've got to make sure that you can access and see content underneath. So you have to shift around some of the styling for that case and that you can add and bootstrap also houses covered on this talking about sticky tops. We can also do a sticky bottom. Eso here, it's just going to sit at the bottom. So if we want, if our design was to have her navigation bar here always at the bottom, nothing at the top where Maybe we want to add another navigation bar at the top. We can do this really easily with boots drop just by indicating the different classes. So one of the things that we still need to work with our So I'm gonna actually get rid of this. And I could have it as a fixed position. Refresh. It s 01 of the things that we notice here is it's not really like it. It's semi responsive. It works kind of Okay, but you might not wanna have this menu showing off. You might want to have a button that ta goes the menu to pop down, especially when you've got these drop down menus. Eso It gets kind of long there, and it's when you're on a mobile device, you've got some limited spacing. There s so you want to be conscious of the amount of space that you have available and able to allocate. So in the next lesson, I can show you how to make this navigation bar responsive 11. 15 Make a reponsive navbar in Bootstrap: So this lesson we're gonna make our navigation bar collapsible because in the interest of making it mobile first when we look at our small screen, this is not how we want our content to be displayed. We don't want this menu showing up, and we want the user to have the option to either to toggle that menu to actually see some additional content. So what we need to do is add in a navigation bar. I'm going to get rid of this one here because I wanted to take up that full, available spacing suggest show you with the difference years. So on the mobile, we don't actually see much of a difference. Eso we wanted to going across that entire available spacing. Let's just cause whenever I designed websites, I usually like that idea that that navigation bars across the top eso One of the things that we need to do is no need to add in our navigation button. So I'm gonna just add in button and give it a class off now for toggle. And we just need to specify some or attributes here. So now bar toggle is gonna be the class that we need to use the data. It's going to date a toggle and what we wanted toe happen, so want to collapse. And then we need to specify a data target. So this will help. It will help us isolated. What content? We want to make collapsible eso. This is indicated with with an I d. And then from there, we're going to select it. What? We want to collapse oats we're gonna cut. We're gonna wrap that in a div as well the content that we want to make collapsible. So I'm just gonna call it again. It's going to give it an idea of a So my target is gonna be a and then within that button so we can add in whatever we really want. Here s a typically you're going to see this type of icon in here within the button. So when I save that, let's refresh that. Take a look. So we don't actually see anything happening yet s we've got our icon there and maybe just kind of just do default, but it shows up a little bit better there. So now we see that we've got that icon in place and we can now we need toe Identify the area that we wanted to make. Collapsible eso. This is where we're gonna another def And this div is gonna wrap around that content that we want to make collapsible eso depending on if we want to make our navigation brand part of the collapse or not. So usually you're not going to see this within that collapsible. So I'm gonna do class and collapse, and the other class that you need to add in here is now far collapse. That's the class that's being used within bootstrap within bootstrap three. And then we just need to sign an I d to it. And because we're calling over just to a eso, that's all we need to do in there. And then we just need to close off that in the diff. Let's try the Senate and see how this works. So now we've got our collapsible now for when we click it, it opens and closes. Whenever we go large, we still missing. We're not seeing all of our content. Eso it's still need to work on that. Eso Let's go take a look at her code and see what's happened here. Why it's disappearing and were not able to see it. And I believe actually, this shouldn't be now. That should be now, bar. So just take a look at that and refresh it. And now we've got our menu back. And when we collapse it So that was the record. So there was just a slight error in the syntax there. And we see that it is fairly consistent here. Whenever we're calling now, Bar. So the main classes now bar and then we've got these kind of subclass is here with the dash , So default toggle nab our header. Enough Bar brand now Bar collapse Nav bar nav. So this is indicating where the knave is and so on. So there we have our nav bar already to go. We can close it. We can open it on its fully responsive, depending on the size of the screen. 12. 17 Add a bootstrap carousel: Let's continue to build out our website, and I'm gonna update thes dibs to be sections just so that's more in line with. With your HTML five standards, it's not really gonna change the way anything looks eso I've already got my default content bleed out here. So I got a main area over here and maybe in here is where I want to add. Maybe I want to add some images there. Or maybe I want to add in. That's we can add carousel in there. So some rotating images up over to Lauren pixel and this is where I'm going to get the images that I'm going to use. I'm gonna throw a carousel in There is thinking I could put a jumbotron, but we've already looked at the Jumbo Tron. So let's do something different and we're gonna do a div here. So we always need to have a container for these classes. And here we're just gonna give it an I d. Of B eso. These can literally be anything that we want. So we need to specify that this is a carousel and so did a ride is the other attributes that's going to specify for care cells in boots drop. And so now the content within here is where we're going to contain all of our carousel items. So we need to have a main container, a rapper for our carousel items or care. So images. So again, Div. And we're going to call this care of cell inner. So that's the standard class that we're gonna be using. So this is our main rapper for the carousel, and then within here is we're gonna have class and we're gonna all over items, and the 1st 1 that we want to have is an active item. So just going to set that class toe active and then just in here is we're gonna place my image something. I just copy that image code out there, and Lauren Pixel gives you the ability to really quickly and easily grab some images. So if I wanted to get an image of maybe some cats or something like that as my first item and have a second item there, so this one's not gonna be active, and maybe this one can be food just to spice things up a little bit and then, well, just gonna do three. So we're gonna do this one and this is gonna be city. Let's take a look and see what this is looking like now. So you see that we get our image in there and we're only showing that first active image. So not a whole lot happening quite yet with the carousel. And we still need to add in some functionality for the carousel certain tied in some carousel in indicators and so on. But we do see that the images are actually rotating. So with caress owes, there's actually a few options when it comes to caress owes and bootstrap eso. There's different things that we can do when we're different classes that we can set for it . Specify what type of role this attributes is playing. So by default, maybe. Let's just try, sure, if it has it so list box. So that's the rule that's gonna place was gonna refresh it. And so not really a whole lot of change right now. We don't have any buttons to change it. We're not Centered says quite a few things that are still missing in here. So let's add All of that was in. So the indicators could be added in as ordered lists. So class and deserve that care Carousel, Liza, carousel indicators and each one of these list items will be another indicator which will link out to those those those different pages there, those active pages. So now we need to set up a bunch of list items of data. Target is the attribute for where we're targeting eso. We need to specify the i d that we're targeting. So that data target is just gonna be be to coincide with the idea that we've indicated there data slide to is the other attributes that we're listening. And then here we just need to specify which which one we wanted Teoh to slide it to and because the 1st 1 is active. So I'm just going to specify the class of active and close that one off. And now I can copy these out biscuit or two, that active class there, and this one's going to slight toe one. So we just indicate which where were sliding to in order of which where the images air presented. So let's take a look at that and see if anything is showing up there. So we do have them showing up, but we actually can't see them. So we do have them showing up and they are clickable on. We need to probably center out these images to really make them to make them more visible. So it here, I'm gonna jump into my style here, and I'm gonna update the size of these images. Of course, with Lauren Pixel, I do have that option where I can update it here as well. So I mean this This is another option that I have here to update the image is to make them a lot wider. But maybe I want to just make them all 100% civil. I'm gonna just take this class of item and a selected image. I give it away 100% that we are images that air within the carousel. We're gonna take the full available space. There are 100% and one other thing there. Now it's it's overflowing. So we need to probably set that overflow at hidden. We'll see how that turns out. It's not exactly so. We need toe set the overflow off the item as him. Probably just gonna take another look at that. And just to make sure, yes, we want to set the overflow of the item as him. I'm also going to get rid of that height here, so that's gonna be getting in the way. So now when we refresh it So now we've got our image, we can navigate to them and so on so we could move to the different images within that care . Sell Now, eso Let's also add in. So sometimes with the carousel is you see these menus here at the side. Eso typically there there controls there on the left and the right, So we're gonna add those in as well. So just after the carousel inner and we're gonna pull this one to the left and call it your sole control. So that's the actual That's the class that we're gonna be using. And we're gonna h rough, too. The i d that we're using for that entire carousel. So that's gonna be this one over here, So h rough be. And we need to put you need to target those because those air targeted feel the ideas there , and so role the button data slide. And this is where we're sliding it too. So you have an option. Decided to previous weaken, slide it to next. So the 1st 1 we're going to slide to previous and this is where we can use. I just use that less than sign. So take a look and see how this turns out. That's refresher. And now we've got this sign here so we can see to the previous one we can see to the other ones as well and that we can also do one on the right. So just to right over here, maybe make this one greater than so Carris silicon soul. And through this one, it's not going to go over to the previous. It's gonna go to the next and take a quick look. And I believe we still missing slide over here because we want that carousel to actually slide across. Let's take a look at this now. So we've got our buttons here to move them, and there still seems to be something that's ah, it's not right since quickly looking over this. So it is actually sliding. But we're not activating on these targets. And I just noticed that the problem here is that a misspelling on carousel. So let's try this again and refresh it. And hopefully this time eso it is activating and it is all working. So all of our buttons are working were able to slide to and navigate through all the different images that are available to us. We can also use those indicators to navigate through. So that was what it was. There's just this misspelling on the class care sell those, make sure that you do spell them carousel. And this is the classes. And much like the knave bar, we started out with the main being carousel. And then we have thes dashed classes. We've got indicator there, we've got inner, we've got controls. And this also, uh, follows through to the different attributes that were using. So the carousel ride that the data ride isn't care. Sell on. This all helps Bootstrap understand what you want to be able to show up and happen within your Web page. So the next lesson we're gonna build this out a little bit more, so we're gonna add in some default content and maybe add in some buttons and finish up our Web project. So it's coming up in the next set of lesson 13. 19 Add content and lists to website: this lesson. I want to update some of our content. So I'm gonna go over to the dummy text generator. Says generates some Laura, um, text. And this is always useful when you're creating websites and you wanna have some placeholder text. So you just do something like this and I want to show the paragraphs so that I get those paragraph breaks there. So now, instead of this blah, blah, blah, I can update it with some actual riel content, which is gonna be pretty cool because it's going to make it look more like a website. So let's go back it and refresh it. Now we've got some content in their eso. Maybe over here. We want to create some kind of clickable area create a list group in this one since said this blah, blah, blah. Take that eight and we're gonna start with an unordinary list. And this list is just gonna be class these air some against some default lists, list group and now interested to create our list items. So list items and the list items have a class of list group. I don't so much like what we saw in the carousel that whenever we're listing out the items , so and I'm just gonna make a bunch of them here. I don't need that much spacing, so just save that. And now we can see that we've got a bunch of list items here, and maybe I need a little bit more text here in this mean content area. So going to grab that eight and update that text in there. There we go. So now we've got a list here. We've got our main menu up here at the top. We've got some content placed in here and s We've got a full line of content down there at the bottom. And when we re size it, we see that it resize is really Well, uh, one of the things we might want to do is we might actually want to shift these columns around, so I might not want this one to display on top whenever we're citing it. But we might maybe want to keep it at underneath because maybe we've got some main content here. So there is actually a way to do that with bootstrap where we can push and pull the different columns. So as we re size. We can push and pull the columns, so I'm gonna show you how to do that in the upcoming lesson. 14. 20 Push Pull Grid Columns in Bootstrap: in this section, I'm gonna show you how we can push and pull pieces of the grid over and actually customized where they get displayed when the when the browser re sizes get smaller. So when we hit different break points, So what I want to do is actually want to move this menu below this one. So by default, because we've indicated this one first, so it automatically stacks above it. So there is a way to update this. So what we have to do just go into our source code, and I gonna set up call. Um, and then we have to specify the break point. So this is an M d break point, and we actually want to push this particular call, um, over and we want to push it over nine so that it's gonna be nine plus three. And that's gonna take up that full with so as well for this one. So won't do the same thing. M. D. And we want to pull this one over. So I want to pull this 1/3. So take a look and see that this works out. So now when we re size it, we're actually pushing it over eso It's actually getting reversed here. So we see that now, this column is being pushed over here on the right hand side, but before that, it's still coming in there first. So all we need to do now is just update the order that being presented and show you how this is gonna turn out. So now we get the desired effect where we've got this piece of content first. And when we re size, we get back to our initial display area. And of course, we still need to make some updates because this is nine, so we don't need to pull it over three, But we need to make the mathematics work as well. So instead of instead of pushing and pulling, I gotta actually reverse thes because I reversed the order there. So there we have our original display there, and when we shrink it down, we see that it actually reverses border. So this is our desired effect, and this is how we want it to show up within our display area. And as you can see this quite a lot, you can do with the grid and you can really begin to customize that how you want things to be displayed and how you want the various grid columns to move around and remember that you're always working with a system of 12. So mathematically miss, make sure that everything was That's up to 12. So because I wanted to add up to 12 initially, I'm starting out at nine, and I want to push it over to be push it over three When we re size with that breaking point and here I want to start at three. But I want to pull it over to nine whenever we hit that breaking point. So what's happening is that we're actually reversing that order. And when we re size, we're going back to that default order where this one gets displayed. First on this one gets displayed second. And of course, there's different variations that you can do of this as well, so you can have it in that reversed order, and you can flip them around as needed, so sometimes you might have this on the right hand side. He might want to flip it over to the left, or vice versa. And this can all be done with push and pull of the column content