Introducing Bootstrap 4

Bootstrap was created by the developers at Twitter back in 2011, and 0:00 just like it says in big bright letters on it's homepage. 0:03 Bootstrap is the most popular HTML, CSS and JavaScript framework in the world for 0:07 building, responsive, mobile first projects on the web. 0:13 Over 7 million apps and sites across the web are built using Bootstrap. 0:15 Many web designers, front end developers and 0:20 programmers use Bootstrap to help them build projects faster and easier. 0:22 Even popular companies and agencies like NASA, FIFA, Spotify and Lyft, 0:26 use Bootstrap in their websites. 0:30 So, let's take a closer look. 0:33 Bootstrap is a front end framework. 0:35 So what, exactly, does that mean? 0:37 A framework is a reusable platform that helps you build higher level projects, 0:39 without worrying about the lower level, repetitive details. 0:43 For instance, when building a website or app, you'll want to have a presentable 0:46 layout that works on most devices and screen sizes. 0:51 In the layout, you may have lots of UI components, like nav bars, 0:54 buttons, headers, forms, modals and more. 0:58 Many of these components will appear in different places of the site or app. 1:02 So instead of creating your own custom solution for each of these, 1:06 you can use a framework, like Bootstrap as an out of the box solution for 1:09 implementing your layout and components in little to no time. 1:13 In other words, a front end framework solves many of the common layout, 1:17 typography and browser compatibility problems from the starts, so 1:21 you can simply focus on your content or design. 1:26 To view the latest documentation for Bootstrap, visit getbootstrap.com. 1:28 Now the website you're seeing, may look a little different than mine, and 1:33 that's okay. 1:36 That just means you're working with a more recent version of the Bootstrap 1:37 documentation. 1:40 And the layout, content, and component styles we're about to cover, 1:40 should still work the same way. 1:43 But be sure to check the teacher's notes of each video as they'll up-to-date 1:45 information about everything covered in this course. 1:48 Knowing your way around the Bootstrap documentation will give you a head start 1:51 when building projects because the docs contain information and 1:56 examples on just about everything in Bootstrap. 1:59 You can see exactly how something works right away, 2:02 right here in the DOCs without having to test it on your site first. 2:05 So it's always a good idea to keep the documentation handy, 2:08 because you'll reference it many, many times throughout the development process. 2:11 As I mentioned earlier, Bootstrap provides code for a lot of the common content and 2:15 layout styles, as well as JavaScript code components for 2:20 user interface tasks commonly used in website and app projects. 2:24 Click the documentation navigation link, and in the docs sidebar navigation, 2:28 you'll find links to pages containing download and installation instructions, 2:33 and the all the ready made classes for layout content and UI components. 2:38 For example, the layout section contains the style options you use to lay out your 2:42 project, and set up your responsive grid system. 2:47 And the content section lists the style options for 2:51 displaying your content including CSS resets, typography, images and more. 2:55 Now the book of the docs is here and the component section, as you can see there 3:01 are dozens of prebuilt components each performing a different UI tasks. 3:06 Now some interactive components like dropdown,modals and 3:11 collapsing elements require JavaScript to work. 3:15 Well the good news is you can skip writing that JavaScript yourself because Bootstrap 3:19 already provides it. 3:23 So instead of spending hours building and testing a responsive navigation, 3:24 a fluid column layout, a button group or a drop down menu for example. 3:29 I can simply browse through the docs, find the examples I like and copy and 3:33 paste the provided code snippets into my projects HTML file. 3:38 Bootstrap also comes with several handy utility classes to help you control 3:42 the spacing, alignment, colors even the visibility and 3:47 accessibility of your content. 3:50 And you can find those by clicking the Utilities sidebar link. 3:51 For example, utilities include classes for 3:56 assigning responsive friendly margin and padding values to an element. 3:59 There's also responsive floats enabling flexbox behavior, and 4:04 center aligning content. 4:08 Normally in your CSS, 4:11 you might include redundant declarations to style your content a certain way. 4:13 Well, Bootstrap provides classes for these common repetitive tasks, 4:18 so you don't have to write them. 4:22 And you don't have to use or 4:24 even download all the tools Bootstrap provides because it's easily customizable. 4:25 For instance, some developers use Bootstrap for 4:30 the predefined design styles and grid so 4:33 they can quickly build a well-presented site with a rock solid responsive layout. 4:35 Some use only the grid for laying out their pages and 4:40 add their own design with custom CSS. 4:43 And some may use it just for the JavaScript components. 4:45 In most projects you'll likely use the grid in only a few of these components. 4:49 In this course, we'll use popular components like the Nav Bar, 4:54 Jumbotron buttons, forms and a few others to see how you can 4:57 build a full fledged website design and lay out with Bootstrap. 5:00 You can view a showcase of some of the best designed websites using Bootstrap 5:04 at expo.getbootstrap.com. 5:09 So be sure to check out a few of these websites to get 5:11 a better idea of what's possible when using Bootstrap. 5:14 You'll also find links to useful Bootstrap resources like additional showcases, 5:17 themes, code snippets and more over in the Resources page. 5:23 Coming up in the next video, we'll look at the ways we can download and 5:27 install Bootstrap, then start building the full stack conf project. 5:30