Overview of what Bootstrap 4 is in website design

Hey buddies, it is time for Project4, this kind of next chunk. It is devoted to understanding Bootstrap. So this video is going to explain what Bootstrap is, hopefully. So Bootstrap is, think of it, the big word is Framework, and I'll tell you a story. 

So imagine, because we just spent a lot of time, building that last website, right? Our portfolio site, but there was some, lots of stuff that you did repetitively. We styled buttons, the navigation, remember that? There was lots of like display block, turning off for Media Queries, getting Media Queries going, loading JavaScript. Now if you built another site, you’re probably going to run into all of those things again. If you build 100 sites or 1000 sites, you're going to run into pretty much all of them. They're all going to have buttons, they're all going to have images, they're all going to need to do a very similar thing. 

Instead of starting every single time from like your CSS reset, where everything is just blank, and adding everything to it, you can get good at it, but you get bored at it, or at least you struggle with the repetitiveness of stuff that already just needs to get done for every site. So that's where Bootstrap came in. So clever people at Twitter decided, "All right, we're making all of these sites, and what we'll do is we'll add some consistency across them all, but also make it really easy to use," and they kind of broke it into three parts. 

There's the structure, there's the components, and then there's the styles. So basically the structure says, "All right, we're always going to have Media Queries", "We're always going to have them kind of break down in different ways, on mobile, tablet, and desktop, and we'll make that into like CSS sheet that already exists." You just start with that one. There's mobile devices, there's tablets all looked after, and they're all in there, so that's your kind of like core structure. 

Then they went, "All right, let's have some components that are reusable." So we built the little jQuery drop-down menu from mobile. They went, "Let's just make that," so all you have to do as a Designer, is put a snippet of HTML in your website, and that Nav will work. It will be dropped down, it will be good on all browsers, and you won't have to do all the Media queries, where we block it, and display:none, and all that sort of fun stuff. They just say, "We'll do that," and that's a component. Also, like an Image slider, if you want to add an Image slider, you can definitely do it in jQuery, it's not crazy hard, but there was a lot of fiddling, what we had to do. 

What they've done is, say, "Here you go, ready to go, add Carousel. Add the word Carousel to your HTML, and we'll do all the CSS and all the jQuery, ready to go." That's why it's a framework. It's just like something to kind of get yourself going. You can change all the styling, but they'll do all the hard heavy lifting, in terms of HTML, CSS, and JavaScript. So grid, components like navigation and image sliders, and the next one is styling. We've done it loads where we're like, "I want the links to not look so terrible, blue and underlined." So they've already done those styling for you, and you can override it easily, but they've done lots of the styling, so that things don't look-- suck to start with, they look, like they're pretty good. 

Bootstrap has a very specific look to it, so I can go to our website and go, Bootstrap, because the Designer or Developer has been really lazy, and just used all the styles from it, and the good thing about it is that, you can be lazy, and you can have very little design knowledge, and have a good looking site, but they do have a certain look to them. You can override those. So Bootstrap helps us with the kind of grid, or the structure of the website. Then they help us with components, and then they do all the styling. All of it can be overridden, but it's there to go, and it's a good place to start for a website. 

Your next question might be, "Why don't we do this at the beginning, and skip earlier stuff?" A couple of reasons, one is that, to actually use Bootstrap you need foundation in HTML and CSS, and understand that before you can actually do any changes to Bootstrap. You can't just jump into Bootstrap really, and start trying to mess with it. It's for people that already have that skills to go fast. So you need to have those skills to be able to use Bootstrap. 

The other question might be, "Do we have to use Bootstrap?" and the answer is "No." Bootstrap is just an option for people that, you might get to this point, and go, "Actually, I like all that stuff, and I'm going to practice that stuff, for a lot longer before I start using Bootstrap, and I can come back to this part of Dan's course." The reason, I guess, I use it sometimes, and sometimes not. The times I wouldn't use it is, I'm looking at one of my designs, and I'm really kind of, I like to customize quite a lot, I want to change everything. So I look at it, I'm like, "Actually, I'm just going to end up, changing every single thing that I put in via Bootstrap." So it's not going to save me any time. 

So I'm just going to ignore Bootstrap in this particular web build, but then I might look at a site and go, "Actually, I need to do this quickly, it needs to look pretty good." So I'm going to rely on Bootstrap just to kind of build the front end real quick. It might be a prototype, or it might be something, where I'm doing it for love, or cuddles, where I'm not getting any time or any money to spend on it. I just need it done quickly, and it to look pretty good. That's where Bootstrap might come in. Do you have to use it? No. Why didn't we start it already? It's because we need that foundation kind of knowledge in HTML and CSS, before we start using Bootstrap. 

Another good reason to use Bootstrap is, or at least learn Bootstrap, is that there are going to be lots of other things that use it. So we're building our own custom site using Bootstrap, but let's say you start using WordPress later on, or Shopify, or Drupal, or Joomla, or, I think of other CMS'. They will kind of do all the heavy lifting in terms of website creation. They'll take that away from you, but what they'll do is they'll say, "I'm using a Bootstrap theme." The cool thing about that is that because you understand Bootstrap, you can go through and adjust WordPress, and move it around, and change it, and kind of make it your own. So there are lots of other things like CMS' that use Bootstrap. We're using in this case, or the rest of this course, to style our own sites, but it's used to style lots of other CMS sites as well. 

Another thing to mention is that Bootstrap is just an option. There are alternatives of Bootstrap, something like Foundation would be a good alternative for it. Bootstrap would be, in my opinion the most common option. So yeah, there are other games on the block. That's not the saying, is it? There's other things you can-- competitors to Bootstrap, so it's not the only one. So what else are we going to do? What we'll do is, remember, Bootstrap is kind of three big parts. It is the grid system, which is the structure, there's components, which is things like the Nav, and the Image Sliders, and Footers, does those for you. Then there's the styling part of it, so those three. 

What we're going to do in the next kind of few videos, we'll install Bootstrap to get started with, then I'll do a brief overview of those three aspects, before we dive into building a full website, because I feel like, I try to explain it all in this first video, but I know it's a little hard and abstract sometimes. So let's cover those three with like, there will three overview videos of those three components. Let's jump in, start doing them now, and I'll see you in the next video.