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.
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.
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.
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.
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.
Each of these two sections has a sidebar on the right-hand side for easy navigation:
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:
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:
Under each of these sub-headings, we see an example of what this element looks like:
And the code we can use to re-create the exact element seen in the example:
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.
<head> tags of your HTML document: