CLAIRE CARROLL: Hi, my name's Claire. I am here at Yale. And I will be teaching you today about how to use Bootstrap. So let's get started. So first, we're going to talk about what Bootstrap is. It is an HTML, CSS, and JavaScript framework for projects on the web. So it basically encapsulates a lot of different aspects of how you might develop a web or mobile application. And it helps set up transitions between an application that you might have on your computer or you might have on a phone and making sure that the layout is going to be visible and display the way you want it to on different sorts of platforms. It's also super helpful because it has a lot of pre-compiled and pre-set up basically libraries for you, and a really expensive but customizable codebase that you can use to make it sort of do whatever you want. So it's not going to replace all of your CSS. You'll still probably want a style sheet. But it can set up a lot of the functionality in advance for you. And then, you can modify it as you need. So why use it? It's really very easy if you want to make a navigation bar, instead of fiddling around with padding and columns and all sorts of containers for a really long time like I used to do all the time, you can just use the navigation settings that Bootstrap has already set up for you, which we'll go into a little bit later. It has a lot of features for most different things you could want to put in a web application. And if they don't have it built in natively, I'm sure someone has hacked it. So you can probably find support for a functionality online. And it's an open source project, which means it's free. And it's evolving. So even-- it probably won't change that much during the time you're working on your projects. We're in Bootstrap 3 right now. But it is something that is growing and changing to the needs of the developer community, which is really cool. There is, as I said before, a great library with lots of stuff you can customize. And it's just very streamlined. A lot of popular sites use it. So for example, the NBA website uses Bootstrap to develop it. And as of last year, Vogue did. They've since upgraded. But it worked for them for six months or so. And same story with Wal-Mart, which is just kind of cool to see, that big sites use this and are supporting this, and it can sustain the layout and the intricacies that you might want. So that's kind of fun. How to get started with Bootstrap? 00:03:03,870 --> 00:03:08,996 Basically, you can pick from three different options of which bootstrap you think is going to be right for you. So there's the pre-compiled Bootstrap, which is best for people just starting out with Bootstrap, people starting out with web development, people sort of just trying to learn the terrain, which is probably going to be best for most final project students, at least to start with. And there is also a source code version, which you have to then deal with compiling and getting a specific Twitter compiler to sort of deal with, which is a little more complicated, but not hard. Because it's still pretty standard CSS and JS code that you should be able to figure out. So if that's something you're interested in, there's a lot of support for how to set that up. And then, there's also a SASS only version for Rails projects, which I don't think will apply for many people using Bootstrap for web apps. But it might for you, and then it's a valid option. So the best way to get it is to just go to the Bootstrap website. You can Google it. It'll come up. It's the first hit. And hit the Download button. You'll get a folder, which you then can load into the IDE, or just leave on your desktop if you want to develop there. But alternatively, if you want to use the terminal to basically get the project, you can use npm install. So if you install Node.js and the Grunt client, then you can use the Node Package Manager to get Bootstrap installed very easily on your computer. Or you can also use Bower, which I think is a Mac client. I've never used it. But there's a lot of ways that you can get Bootstrap on your computer and for your applications. I recommend just clicking the Download button and unzipping the folder. But whatever floats your boat. And in addition to the code that you'll get when you download it, which we'll go into in a second, you can also access a lot of templates and themes on the Bootstrap website. They won't be included in the precompiled folder. So you're going to want to poke around a little bit. It should be on the same download page. And you can see that they've already set up some sort of basic, cookie cutter frameworks for websites that you can use to help act as a springboard for your own projects, or sort of as an inspiration if you want. So here's a list of what happens when you download Bootstrap. I just used the website and put it onto my IDE. So you're going to see that there are three sets of folders. You have the CSS, the fonts, and the JS. So the way this is split up is there's the minified files, which is probably where you're going to want to use. And it includes all of the different functionality, all of the different libraries that are included in Bootstrap's CSS domain. So you will use the CSS as your style sheet, or the JS as your script. And the fonts, you can use on a case by case basis. I personally don't usually use their fonts. We'll go into how to deal with that later. But they can be useful if you want them. So first, we're going to go into how to set up your basic HTML with Bootstrap, and then go from there. So you've actually already used Bootstrap in layout.html in p-set seven. They used bootstrap to set up the website. That was sort of behind the scenes. So you didn't necessarily interact with it. But just as a fun aside, it's something that you've already sort of dealt with. So to get started, we're going to go over-- you're probably going to want to set up a boiler plate HTML template that has these specific call set ups so that you can use Bootstrap. You're going to want to put this in a folder for your project. You're going to need to do chmod, access permissions on the folder to make sure that Apache can deal with it. And then, just run it like you would any project. So use apache50, and then you should have it hosted directly for you on the IDE, which is really convenient. So first, we're going to look at what a header might look like in your template. So here, you're going to see the blue text says basically how you might include a bootstrap call. And this is something that you're going to set up in the beginning with all of your char set establishments, basically how the browser should read your code. So this is sort of a good way of calling Bootstrap. It's an easy set up. Sorry, those were flipped. So here, you're going to see that you have Bootstrap's CSS min as your style sheet, which is basically the way you're going to get access to all of the library functionality. You're also going to have a script as a bootstrap script. So this will give you access to pretty much anything in the library that you'll need. You'll also need your own CSS style sheet, probably. And that's something that you can add in addition. You can have more than one. But this is how you're going to want to set up at least the beginnings of your code so that you can use Bootstrap later. In the body portion of your HTML, you're going to want to add a couple calls just to use the plug-ins later. You can pretty much just copy and paste these at the beginning of the body. And it should be fine. 00:09:26,060 --> 00:09:31,325 So now, I'm going to just talk a little bit about the basics of Bootstrap. And then, we're going to go into sort of the layout they set up for you, how you might implement a navigation bar as sort of a handy case study. And then, we'll talk about how they deal with text, how you might work on design with Bootstrap, and also how you can go forward towards asking questions and finding solutions to them on your own. So Bootstrap basics. With Bootstrap 3, it switched to sort of a mobile first framework. So what that means is that the mobile functionality is not separate from the rest of the library. Everything is integrated together. Everything that should work on your laptop should also work on your phone and be formatted accordingly, which is really handy. I'm not sure how many projects are going to incorporate web and mobile, sort of cross-platform development. But if you need to do that, whether for this project or for a project in the future, this is a really handy way of dealing with it. It's consistent across browsers. It's supported by all the major browsers. I think there's some functionality that doesn't work on Internet Explorer. 00:10:49,040 --> 00:10:51,200 So maybe don't use that when you're developing. But Firefox, Chrome, Safari should all be fine. 00:10:59,090 --> 00:11:03,770 It's convenient in that it has the plug-ins all in one place for you. So you don't have to call a million different scripts. You can just sort of call those two or three that we set up at the beginning of the code, which is nice. And it's customizable. So as I said before, they have this library of functions that you can use. But if you want to change the colors, if you want to change the way a button looks, if you want to sort of turn something on its head, you can still do that. It's not a cookie cutter, like you have this specific button, and you have to use it in your code. So this is easier to deal with, or at least to see how you might want to change things with the full code, not the minified version. But it's definitely still manageable. And that's where your own CSS or JavaScript will come into play. So yeah, as I said, this just does a lot of the work for you and gets you developing faster. So one of the main features that Bootstrap sets up for you is this grid layout. And basically what that means is that it sets up a bunch of different columns that make up your page, whether that's on your phone or your computer. It doesn't really matter. And it deals with the most important content first. So basically, you set up what content needs to be displayed right now. This is probably more applicable on your phone or something. But for different browser window sizes, you specify sort of what content is most important, and needs to be priority in displaying, and then as it goes down, the content that maybe can be shifted to if you scroll down to see it. In addition to columns, you have rows. So they're used. They have padding built in. They set up so that you can have dividers on your page, so it's not just one giant column screen. You can have the heading. You can have a primary drop page. Then, you can scroll down and maybe get to a different row on something else, features for your site. One important thing to remember about rows is that the only thing-- you can't have a row nested inside of a row directly. You need to put at least a row, have a row as your parent, and then a column, and then another row. Just because of the way the containers and padding works out in the Bootstrap code. One problem with columns is that there are-- well, it's not necessarily a problem. But there are gutters between them. So they have about 15 points on each side of your column content that is set aside just as blank space. This is usually not a problem at all, right? Because you want to have some space between your text, or your pictures or whatever you're dealing with. But if it becomes a problem for you, if you need something directly adjacent, that is when you might go into the bootstrap code and change things around. Or you might change them in your own CSS. So just looking at how the grid plays out on different platforms, so you've got phones, tablets, smaller computers like a laptop, or maybe larger computers like a big desktop. So the way it plays out with the layout is on a phone, it doesn't collapse. The main content just stays pretty static. With tablets and laptops and desktops, what will happen is the content will sort of like come into being as you scroll, or collapse as it needs to happen, which is kind of cool. For container width, it just sets up maximums based on different platforms. I don't recommend going against these guidelines. They are meant to help you make sure that things are seen the way you want them to be. And the way those will manifest is in the type of columns you use. So as you can see at the bottom, there's extra small, small, medium, and large columns established for you. And that's where those container widths come into play. And those, you can mix and match. You don't have to only use large ones for large desktops. But the idea is that the largest one you can use on a phone is the small, the extra small. The largest you can use on a tablet is the small. And you can go from there. 00:15:56,050 --> 00:15:59,740 So column and grid tips and tricks. If you want to use offset, basically so what this will do is if you have a bunch of columns on top of each other that are maybe different lengths, so you have one column on the right that's super long, and then a short column right below it. And you have two columns on the left. But you want the second column on the left to be lined up with the short one on the bottom of the right. You can use offset just to make sure it doesn't have the two on the left right at the top. And then, have an uneven distribution. And the little stars there just mean what size you're dealing with, so extra small, small. So that's not too crazy. You can also have a class distinction saying clearfix visible. So in this case, it was for extra small. And that makes sure that the columns basically just don't overlap at all, which is convenient. I recommend it. Maybe you want some overlap depending on what you're doing for your project, if you want maybe a picture behind some text, that's sort of where you might want overlap. But in most examples, this is going to be a useful feature for you. And you can see below that sort of an example of how you might have a row set up inside of a container, and how the row will have column as its children. 00:17:29,245 --> 00:17:31,330 So now we're going to shift gears a little bit and go on to how you might implement a navigation bar. Which if we're thinking about it in the Bootstrap grid framework, it's pretty much just a row container set up with a bunch of different columns dividing up what you would put in that row. So maybe you have a Home button, and a Menu button, and an Order button if you're making a food delivery website. But Bootstrap sort of anticipates this and gives you a lot more functionality than you just having to use columns and then write out all of the code to deal with buttons and links and things. So when you're using Bootstrap on mobile, it collapses the menu of the navigation bar automatically for you. So you'll have the little tab button in the corner. And you can click on it if you want to go to a different page, which I'm sure if any of you have tried to go to a website before on your phone, you know what I mean. And you can set up that sort of same collapse on other platforms, for tablets or laptops or desktops, if you want to. That's up to you. A lot of times, you will just fix the navigation bar at the top of the page. And as you scroll down, it'll stay there. But again, you can sort of decide. That's what's so great about Bootstrap is it lets you choose what you want to do. You can also sort of rigidly lock in place, like I just said, if you don't want to do the collapse functionality. And Bootstrap handles that for you. So you don't have to deal with making sure none of the body content interferes with it, or other header content interferes with the navigation bar at all. And you can also very easily integrate things like a search box into your navigation bar instead of trying to put a complicated form inside of a link. So this is helpful for that. So we're going to go into the nitty gritty details of all of how to implement that right now. So the way you might divide up sort of the categories of work that you do on a navigation bar, you have your header, which you'll assign a role to, which will make more sense when we look at the code in a sec. But basically, that's just in addition to defining your class, you define the role as navigation. And that helps Bootstrap know that what you're trying to implement is a navigation bar. Then, you're going to have the different categories on your navigation bar, the Home, the Menu, the Order Online. It's going to be set up like an ordered list, just like you would do if you were writing the CSS and HTML yourself. And then, you'll define that class in a specific way to use the Bootstrap functionalities. So that's .nav and .navbar-nav. So this again is just keying Bootstrap into the idea of how you should format it, get rid of the bullets, center them probably in the divisions, make sure everything looks pretty. So this is sort of handling a lot of the trouble for you. If you want to have a drop down feature in your navigation bar, so let's say one or more than one of the links have options, so if you were doing a clothing website, you might have women's clothing, and then dresses, or sweaters, or something, or men's clothing, and then belts or shirts. You can set up drop down functionality, as well. And then, you just say class equals dropdown-menu. So it's very straightforward, pretty intuitive. For stuff like this if you're working on your own, you would want to probably look up online just what calls to make. But a lot of the stuff that you're going to want to do is set up for you. So for the header, like I said before, you're going to set up role to be navigation. And you're going to call the class usually navbar-default. If you set up anything else in your CSS, you'll add probably more distinctions there. But that's how you get access to Bootstrap's layout. And then, you'll see you're going to want to set up a header for the nav bar. And that'll just be the main link for the page. So whatever the title of it is, it'll be formatted slightly differently. And you can include your link. So in this case, it would be called CS50. 00:22:15,700 --> 00:22:21,130 Going on to sort of the divisions within your navigation bar, you're going to have an unordered list, which is pretty standard. Again, you have the class equals your nav and navbar-nav, including whatever CSS you might want. So here, you can set up different links just normally in an unordered list, and it will know how to format them accordingly. Drop down is a little trickier. So you're going to put an unordered list inside of the larger unordered list of categories. So as you can see here, we're having our list item which we're defining as class drop down so that Bootstrap knows what to do with it. And it's called schools, for example, on this CS50 page. So here, we're looking at-- with the link, you establish downdown-toggle and data-toggle as dropdown. Again, this is just keying Bootstrap into the idea of how it should deal with the following code. Then, when you're done with that link, you just have an unordered list. You don't have to deal with more formatting than that. Bootstrap will handle that for you. And then, you call that your dropdown menu. And then, include the list accordingly. So you could have dropdowns inside of dropdowns, inside of dropdowns. There's not really an end to it. It just depends on what you need it to be. And then, you end the smaller unordered list, and you can end the list. One fun thing you can do is include a caret, which is just an item. You'll say class equals caret, for like a dropdown arrow. So if you want to have the little triangle that says, oh, click down to see that it's a drop down, you would include that on the href for the schools, or your top link, so basically that it knows to include the little symbol there. Which is kind of fun. So additional navigation bar features that I talked about a little bit before, we have optional collapse. So on mobile, collapse is standard. You don't really have an option on that. You could change it if you wanted to, but that would-- you might not want to be using Bootstrap's nav bar for this. You might want to use some other button features and then set them up on your own. But if you wanted to collapse a tablet, or laptop, or a desktop application for their navigation bar, you would just set up a division on the division you're setting up for, the nav bar. And you say class equals collapse, navbar-collapse. And then, it knows that you want it collapsed when you're operating the page, which is pretty cool. And so this is coming all before your list, but after the header. 00:25:21,150 --> 00:25:23,760 So another feature we talked about was if you want to fix the navigation bar to the top of the page. And once again, you just call the bootstrap library and say, navbar-fixed-top, which is kind of stiff but gets the job done. So here, you can see an example of adding navbar-fixed-top to the initial class distinctions we gave navbar with navbar and navbar-default. And this will sort of lock it at the top and make sure that it doesn't move. One thing you're going to want to watch out for if you do take advantage of this feature is you'll want to add some padding at the top of your body of the HTML, whatever your body content is for the page. Because with the fixed top, sometimes it might overlap and cover some of the content you're trying to display. So making sure you add at least probably 50 points, maybe more. But you can also go on percentages if that looks better for you. We'll make sure that the content is being displayed clearly. 00:26:34,020 --> 00:26:36,810 Another feature you can add is the search form. So Bootstrap has a lot of form classes set up for you, which you could use if you wanted to. But an easier way of doing things is they specifically designed a navbar form. So here, you just add the form class as navbar-form. And for an example, you could do search. There are a bunch of different options for different forms you might have. But if you wanted a search bar for the website, for example, this is how they would set it up for you. And it'll include the little magnifying glass icon, and it'll say "Search," and it will have gray text, and it'll look pretty. And it will sort of deal with that. So here, you'll see an example of that. So you have your form class with role of search. You're still going to call it navbar-form, as I said. navbar-left, I think, is just where the text is in the box. And then, you have your form-control. You still set the placeholder. And then, a button type is just a Submit button if you want. Again, this is sort of part of what Bootstrap sets up for buttons for you. And that's why it's btn and btn-default. We're not really going to go into buttons right now, but that is functionality that Bootstrap does for you. 00:28:00,957 --> 00:28:02,790 Now, we're going to shift gears a little bit and talk about how Bootstrap deals with text. So a lot of you are probably going to have maybe at least some blocks of text, if not at least headings or subheadings, on applications that you're developing. So bootstrap sort of styles the headers for you. So if you set h1 or h2, it has already formatted those in a pretty convenient way. Obviously, you can modify the way they'll look. But they'll be prettier than the standard I'm just calling HTML h1, and it's very large, which is nice. The subheadings, they changed the color. So if you're-- I think the standard is to be like a gray. So the headings will be black, and then the subheadings will be gray, which is just a nice way of looking at it. There are also some tags you can use if you're doing very precisely formatted text that you don't want to deal with the spacing or the lines for. So the address tag, you can put a mailing address inside of. And it will do the new lines and space it out, make sure it's justified correctly, which is a very nice thing. It bolds things and italicizes it. It does just a standard mailing address for you. So obviously, this is something you could probably figure out on your own. But it might take you a while. And Bootstrap has already done it for you. So again, that's sort of a reason why you might want to use it. You can also use the abbreviation tag. And so what this does is if you're including an acronym or something in your text and maybe you want to include a definition for that acronym, for people who don't know what it is, or just some indication that it is an acronym, you can use the abbreviation tag. And that gives it the little dotted line underneath. And if you scroll over it, it'll either give you a question mark, which is kind of funny, or the definition if you provided one. Bootstrap also provides really nice features on displaying code in the body of your website. Excuse me. [COUGHS] Sorry. So you just use the code tag. And then, it formats it. It'll put it in a different color. The text is usually red. It'll put it in some sort of fixed width font for you. It makes it look like standard, readable code, which is really great. One thing you're going to want to do is with the tags, you're going to need to incorporate additional information on that so that they know where you're starting and where you're ending, like in case you were to use the word code in your code. It's just a way of ensuring that you're displaying everything correctly. So the start, you'll just do ampersand L-T semi-colon. And then, at the end, you do ampersand G-T semi-colon, sorry, I forgot that in the slide, and then the ending tag. So really nice way of writing code on a website if you need that. But again, it's whatever you need it to be. Bootstrap's default fonts go in order. The way CSS deals with fonts is it looks for the first one. And if it can't find it, it goes to the next one and keeps going until it gets to the end. So here, your ideal is Helvetica Neue, then it goes on to Helvetica, Arial, and then sans serif. That's just the way all of their text is set up. You can obviously change that if you don't want to use these fonts. So you can either use Bootstrap's stored fonts. Or you can just go to Google Fonts and include the link that they give you to embed this line of code and include it in your CSS page that you want to start with whatever new font you have. But that's just the way Bootstrap sets it up so that it's not super ugly if you don't provide any formatting on your text. 00:32:20,740 --> 00:32:23,770 So now, we're going to look at what if you have a question? What if you want to include a button, or a particular method of scrolling, or anything that I have not gone into, which is a lot? How should you approach that in relation to Bootstrap and the Bootstrap community? So there's a couple steps that I wrote up. I think they're also pretty applicable for other questions you might have not related to Bootstrap. So while you're working on your projects, you'll have a lot less innate support from things like office hours, right? There'll be a couple nights of office hours, but maybe not all the TAs know exactly what you're working on. So this is going to be a test to see how you can find answers for yourself. And I think this is a pretty good framework for doing that. So first, obviously, figure out what you want. If for example it's buttons, that's just a convenient example, then great. If it's something maybe more complicated, then it might take you longer to figure out what you want. For example, I really like parallax scrolling. I know it's kind of overrated now, but I still think it's really pretty. 00:33:38,020 --> 00:33:40,270 But for a long time, I didn't know what it was called. So I would just Google obsessively, pretty background scrolling, and what scrolling does Spotify use? Because the Spotify page had it for a while. It took me a while to figure out that it was called parallax. So for more complicated or less obvious functions you might be trying to incorporate, it may take you a little while to figure out what questions to ask. So once you know what you're looking for, a good rule of thumb is to try to find an example. So this is going to depend on how you are approaching this problem. If you see something you like and then you want to use it, there you have your example already. If you know a website that's incorporating something you like, you can go look there. You can also look at the bootstrap templates. And there's a lot of online resources for Bootstrap themes. And these can be great ways to see what Bootstrap can do for you pretty explicitly, but also you should not be limited just to the Bootstrap functionality that already exists, right? You're going to want to use this as a springboard and go off and do your own thing. So if you can find an example, one thing you can do is view page source, right? So you right click and view page source. Or check the source code if it's a template online, and just see how they implement it. And probably won't be perfect for what you want, but it'll be a good baseline for how you might go about incorporating a similar function in your app. If you don't find an example, or you just don't really think it's worthwhile to look for one, look at StackOverflow. Look at Google. Look at forums. Look at the Bootstrap help pages. Bootstrap is pretty unique in that there's a lot of beginning developers, or developers who maybe aren't familiar with Bootstrap's library. Maybe they're a little confused since the library is very extensive. So that combination sort of creates a perfect storm with lots of forums, lots of questions, lots of developers who maybe know the answers and can help along newer users. So there is a lot of support for Bootstrap online. So this is a great way of finding help for problems you might have. If you have a very obscure question, and let's say you can't find it on StackOverflow, you can't find a good example of it, you're pretty stuck. This is where you're going to have to use your own ingenuity. And so for that, I'd recommend going to Bootstrap tutorial pages. TutorialsPoint has a good one. W3Schools has one. There's a couple-- there might be one on Codecademy. There's a bunch if you want. And they'll have at least some framework for how to deal with buttons, or how to deal with photos. And basing off of that level of information, you will then have to take whatever Bootstrap can give you and then maybe work on your own CSS or JavaScript and sort of go from there. So you're going to have to mess with it more yourself instead of being as strictly guided along, which is sort of fun. It can definitely get frustrating at time if you're dealing with, like, padding problems. But it is worthwhile, especially when you can show off this really cool functionality that you've worked on. And then, maybe you can help other new developers who have similar questions. Because definitely, bootstrap is an example of you can see what you think is possible just online and in forums. But then, you can come up with the previously impossible or just the previously un-implemented, and then sort of change the nature of how people might use it if it's a really cool functionality that you've created. So it's a great community, and this is a great chance to sort of push the limits of what you can understanding and what you can just find help for. So the last thing we're going to touch on is design practice to help you support your Bootstrap knowledge. So you set up a navigation bar, you set up a website. But you don't know how to deal with colors, for example. So some design tips and resources in addition to the Bootstrap help is for color palettes. A really useful tool is Adobe Color CC. It used to be called Kuler, which I always inadvertently do, it'll still come up. And I have the link here if you want to look at it. But it is just a useful way of getting hex or RBG codes for a palette of colors that you might use on your website, and making sure that they look good together. It can also help you build colors using color theory of complementary or supplementary colors. And there's a huge additional library of pre-set up color palettes. So you can go look there if you see something you like and then just use the values that they've given you. There's also another useful page on colors I didn't include here called Flat UI. If you Google just Flat and then the letters U and I, it's only got, I think, 12 or 16 colors on it. But they're sort of specifically formatted to look really good online. And I think they're really pretty. So maybe that's a good way of if you want a base color to base your color palette off of, you could go there, get the value of it, plug it into Kuler, and then go on your merry way. In addition to colors, a good way to get pictures for your site if you want to incorporate those would be, in my opinion, Unsplash. It's website you just go to, unsplash.com. It has a very large library of photos from professional photographers who sort of are giving these photos up free for anyone to use. You don't have to attribute them. You don't have to attribute Unsplash. You don't have to do anything. You can just use it, modify, do whatever you want. So that's convenient so you don't have to deal with attribution or rights on images, plus they're also just very pretty pictures generally. So that's a good way to get started if you want inspiration. 00:40:29,180 --> 00:40:32,890 And then continuing on the theme of inspiration, sorry, I didn't mean to do that, there's the Bootstrap Expo, which is on the main Bootstrap download page. And it gives you a lot of examples of websites that use Bootstrap and how they've implemented it and how they've made it work for them. So this is a good way to see how to take the framework that bootstrap gives you and expand it into something specific and useful for what you're doing. There are also, as I said earlier, theme and template downloads that you can use to get started. These don't incorporate a lot of innovative design, but they incorporate at least some to get you sort of off the ground. And those you can get at start.bootstrap.com. And then, to leave you with a lasting quote that I really like, good design is as little design as possible. So basically, you shouldn't try to get in your own way. If you clutter things, if you try to show off your cool design skills and how many things you can do, the intentions of what you're working on won't be as pure. And it won't be as obvious for the user how to interact with the site. So you're going to want to focus on the essentials so that you can do less while making whatever you do implement do more work. So less is more, to use the cliche in this case. And it will help you stay true to your idea and make sure that it comes to life in a pure way, I guess, which minimalism is super in right now, which is convenient for us. Because that makes your life easier. So as long as you can make informed or at least what you think are informed design choices, as long as you're really thinking about them, then you're going to be fine. And that is it on this lesson on Bootstrap. I hope it was helpful. And I hope you can figure out how to use Bootstrap for your own projects. So yeah, thanks for listening.