Lesson Thursday

As you may have noticed, Bootstrap is a huge framework. The un-minified bootstrap.css stylesheet alone contains over 6,700 lines of CSS! There's no reasonable way we could address every Bootstrap element and feature in our curriculum this week. After all, we have a ton of other ground to cover!

Instead, this lesson will walk through how to best navigate and utilize the Bootstrap documentation. That way, you'll be able to add any element of Bootstrap whenever you need to.

The Importance of Documentation

Also, beyond the realm of Bootstrap, the ability to efficiently navigate and reference documentation is one of the most important skills a web developer can have. Believe it or not, "professional" developers don't just sit down and type out large amounts of code from memory. It's a constant process of referencing documentation and other resources, and experimenting with different code to see what works.

You will undoubtedly reference documentation constantly both as you move forward in your Epicodus courses, and later on the job as a web developer. Bootstrap documentation is well organized, and contains straightforward explanations and examples throughout. Therefore, it's not only a great resource to learn more about Bootstrap, but it's also great way to begin familiarizing yourself with the process of referencing documentation in general.

Documentation Structure

The two primary categories of Bootstrap documentation we'll reference most frequently are Components, and CSS. Links to both appear on the navigation bar at the top of the page throughout the entire Bootstrap website.

CSS

The CSS Section includes entries for all the resources we can use to change the appearance or implement Bootstrap's version of standard HTML elements, like headings, tables, forms, grids, buttons, images, etc.

Components

The components section depicts Bootstrap elements and items that aren't simply re-styled or re-imagined elements of standard HTML, but elements Bootstrap has created like their own navigation bars, labels, jumbotrons, quick ways to alter the appearance of images, etc.

Navigation Documentation

Each of these two sections has a sidebar on the right-hand side for easy navigation:

component-documentation-sidebar

css-documentation-sidebar

Each entry in this sidebar represents a Bootstrap element we can use in a site. We can click any of them in order to navigate to that element's documentation entry. For instance, let's select Navs from the sidebar on the Components page:

nav-link-highlighted-sidebar

Documentation Entries

Every entry in the Bootstrap documentation should contain a brief description of the element, sub-headings for the different ways to customize or implement the element (if applicable), examples of what it looks like, and example code.

For instance, in the nav entry we can see several sub-headings. The first two are Tabs and Pills:

tabs-and-pills-nav-documentation-entry

Under each of these sub-headings, we see an example of what this element looks like:

examples-highlighted

And the code we can use to re-create the exact element seen in the example:

code-highlighted

As you can see, these are two slightly different styles of navigational links we can include at the top of a page by using the code provided.

Now, you might not understand 100% of what each documentation entry is discussing yet. That's absolutely alright. But, as you begin to add Bootstrap to your projects, begin to explore documentation with your partner, and implement elements beyond just the most common we addressed in previous lessons.

Not only will this allow you to use a wider variety of what Bootstrap offers, but it'll provide great practice in navigating and comprehending documentation.

A Note on JavaScript

Now, as we mentioned earlier, any of these elements that have visual effects or animations require JavaScript. Such as dropdown menus, modal windows, etc. We won't begin exploring JavaScript until next week. Nor are you required to begin implementing any Bootstrap elements with visual effects.

However, if you'd like to optionally explore these effects and elements in your own projects, you're welcome to. Just note that any bootstrap elements that have animations will not work unless Bootstrap's own JavaScript files are also linked.

For now, the easiest way to do this is to include the CDN link to Bootstrap's JavaScript file in the <head> tags of your HTML document:

javascript-cdn-link

This will ensure your project has access to the necessary JavaScript, without requiring you to download and insert JavaScript into your own project. We'll begin working with JavaScript ourselves next week.

But how can we tell which elements require JavaScript? If we visit Bootstrap's JavaScript Documentation, it contains documentation entries for all elements that also require use of their built-in JavaScript.