What Is Bootstrap & Why Use It?

Brad Traversy
A free video tutorial from Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media
4.7 instructor rating • 14 courses • 251,687 students

Learn more from the full course

Bootstrap 4 From Scratch With 5 Projects

Master Bootstrap 4 and build 5 real world themes while learning HTML5 semantics & CSS3

11:21:16 of on-demand video • Updated June 2018

  • Learn and create amazing high quality Bootstrap 4 themes and UIs from scratch
  • Learn the Bootstrap 4 utilities, classes, components & JS widgets using a custom sandbox environment
  • Learn semantic HTML5 & modern CSS3 techniques
  • Learn to compile Sass in the easiest way possible using a GUI
English [Auto] So in this video I just want to quickly address what bootstrap is and what it includes just for people that are that are just learning it and aren't really sure you know what it entails and what it is. So bootstrap is an open source front end or UI framework also sometimes called the CSSA framework and it's it was created for very fast web development. Or should they say user interface development. And it gives us tons of tools to create Web sites and application you guys and we get all types of utility classes for margin and padding typography and so on as well as component classes that are basically like pre-made templates for things like alerts progress bars etc. We also get built in javascript widgets and plug ins and easy to use. Mobile first responsive grid system and to do stuff like this from scratch with peerage Tamal and custom CSSA would take a lot of time and a lot of knowledge and bootstrap makes it very easy. So this brings us to the advantages of bootstrap. So one it is browser compatible that this is a huge one your own custom CSSA may not look right in all browsers but bootstrap has basically been tailored to be completely compatible in all modern browsers. It also promotes much faster development with pre-made classes and styling as well as a response of grid. It's great for developers that aren't so good at design and UI maybe or a back end server side programmer but you're not really good with creating user interfaces in design and stuff like that and bootstrap is great for that. It's also very easy to learn as you'll find out and it is responsive by nature so you don't have to write all kinds of media queries. You can simply use the grid and you just have a responsive web site so there's a few different ways to install bootstrap. One is using the Cdn or the content delivery network. This is this is what we'll be doing for the most part. It's very fast because files are served from high capacity infrastructures. It doesn't bog up your server and it can boost performance and save money. So unless you're compiling your own files from SAS a CDN is the way to go and that's what will mostly be doing. Aside from the project where we compile our SAS at least for the SS You could also download the files from get bootstrapped dot com but I wouldn't really suggest that over a CDN unless you're developing or running locally without an internet connection and then finally you can use a package manager like NPM which is node package manager or something like yarn. This is a little more complicated. You have to do it from the command line. This is a good choice for more advanced development where you want to compile your own versions or you want to merge files together and do certain tasks like that. But we're going to stick to the Cdn for the most part. So now I'm just going to quickly go over some of the features of bootstrap some of the utilities the components and so on just very quickly. So we have the grid system which uses flex blocks is completely responsive. We have text and typography classes for things like alignment and font sizing. We have positioning classes we can have classes to display things as blocks or inline or inline blocks. We have spacing classes for margin and padding on top bottom and sides. We want different. Different units of measurement. We have sizing classes for widths and heights alignment for text and other elements colors for backgrounds and text and buttons and plenty of other things we have image classes for fitting images in their containers for making images circular things like that and then response utilities so for instance if we wanted something to only show on small screens or large screens we could do that as well. And then we have shadow classes we have different border classes and a whole bunch of other stuff that you're going to learn. Now as far as CSSA components we have form classes for forms and input groups. As you probably know default each time all forms are very very ugly so bootstrap gives us the ability to make them look much better. Same with tables tables are very ugly and aged him. We have special classes to create like striped tables or bordered tables stuff like that list groups is a really nice way to display unordered lists or ordered lists or side menus things like that. We have cards which can display content in many different ways if you just want a background border with some padding if you want a header and footer if you want to stick an image in there. You can do a lot of different things with cards. While some progress bars which you can change colors you can animate you can change the width and height we have alerts. So for instance if you wanted to say like you know you have been logged in or you've been laid out or if you want an error message and you can also change the colors of the alerts as well. Now bar and menus is a huge one because to implement a nav bar with just each TMLC SS and maybe javascript for some drop downs is quite difficult actually. And this makes it you know bootstrapped makes it very very easy to get that functionality. And we also have buttons and Button groups pagination media objects for like news sites and blogs. A Jumbotron which is like a big showcase area that will you know you can put headings in buttons and all kinds of stuff in badges so badges go really well with list groups. If you wanted a list of categories and you want to put like the number of posts in that category inside a badge you can do something like that. And then for javascript widgets we have a really nice carousel slider where we can have indicators we can have arrows we can set options so if we wanted to go faster or slower things like that we can actually control that within Jay queery. We also have collapsable accordions if we wanted just a basic button to make another piece of content collapse or slide down we could do that. We also have full fledged accordion widgets as well. Modals are basically like pop ups that can fade in nicely and you can put whatever you want in them images forms just text to whatever you'd like tool tips so if you want to hover over something and have a nice tool tip show up. Popovers are very similar to tool tips. And then we also have scrolls spy which will allow you to scroll through your content and then have that piece of content highlight that area in the nav menu which is really nice and we're also going to implement a little bit of custom Jey query to achieve smooth scrolling in in our themes in our projects. All right so that's a really quick summary of what bootstrap includes. If you're confused don't worry about it we're going to go through everything one by one and we're going to in the next video just talk a little bit about what's change from Bootstrap 3 to 4 and then we'll go ahead and get started setting up our text editor.