Erick Perez
Published in

Erick Perez

How I learned to Read Documentation Using Bootstrap

Example of some of Bootstraps CSS styles.

In about a week, I made a basic home page using Bootstrap. This was my first time ever using the Bootstrap framework. A CSS framework is basically a CSS template.

After making an HTML page you can link the Bootstrap CSS style sheet like any other style sheet and you will have instant access to hundreds of styles.

To apply a Bootstrap style, you just include the class attribute on a tag and insert the correct class name. The CSS is created for you. Bootstrap was created by the same developers who created Twitter.

What’s the learning curve of Bootstrap? Bootstrap only works if you use the correct class name, on the correct HTML tag. Sounds easy to just choose the correct class name, the problem is that the CSS file has more than 6000 lines of code and you can spend all day looking for a specific class name. Fortunately, Bootstrap provided the documentation of the framework.

Documentation is like the rules and instructions for a project. With documentation, you can know who did what, when, where, and how. Documentation is usually a long document and it keeps everything organized and maintains consistency throughout the process of a project.

The Bootstrap documentation is mostly there to help you learn how to use the CSS framework and apply the correct class names. You can either read the documentation or you can read through each line of code and maybe figure out how to use it.

Many developers do not know how to read the documentation. If you know how to read the documentation it will save time during development. Reading the documentation is not hard once you figure out how it’s organized.

Navigation bar of

The Bootstrap documentation is one of the best looking and organized documentations out there. The main framework has three tabs, getting started, CSS, and components. The getting started tab is about downloading and installing Bootstrap. The CSS and components are basically the same thing the difference is that components are CSS plus the needed JavaScript code.

The side bar of the CSS tab.

The CSS and components tabs have a section for each element like buttons, headings, panels, forms, navigation, etc. The documentation is easy to follow. For example, if you need to style a button go to the CSS tab (because styling a button doesn’t need JavaScript) than click on buttons. That is much faster than reading through 6000 lines of code and not knowing how it works.

On my Bootstrap page this process became easier to the point where I didn’t need to look up the documentation. I figured out what classes work on what HTML tags. In the beginning every time I wanted to add something I would look for it in the documentation. I would go back and forth between the code and the documentation.

When beginning to use a framework this is okay but eventually you will want to get to the point where looking at the documentation is not necessary. The best way to learn a documentation is to go back and forth or you can memorize the whole thing.

Why does going back and forth work? For one you are applying what you learn. You read something in the documentation than you write the code and if it doesn’t work you go back and read it again until you understand it. By going back and forth, there is more exposure to the documentation. This is the process I went through. I started by adding an image carousal. I didn’t know how to create it with Bootstrap but after going back and forth, I figured out how to add it and made it work. This was one of the hardest challenges of the page but now it works flawlessly.

Image carousel on the Bootstrap Web page.

When learning a new framework, it’s a good idea to try new things and different elements because you will make errors but you will learn from them.

With Bootstrap, there are two ways to make a sticky navigation bar, either with CSS or JavaScript. I wanted to make one with JavaScript. The JavaScript version is much harder and I made multiple errors but in the end, it worked the way I wanted it to work. Errors and mistakes are okay, they are an opportunity to learn.

After reading everything in the sticky navigation section I found out it needed JavaScript to work.

Learning to read the documentation is important but also reading everything is important. Using the same sticky navigation bar example, at first I didn’t know that it needed JavaScript because all I did was look at their example and copied the class name. After going back and reading the whole section I learned that it needed JavaScript.

I also learned what each additional attributes did. Just because something seems simple, it might not be that simple and you will need to go back and read the section again.

Example of sticky navigation. When the user scrolls down the navigation stays “stuck” on top of the screen.

If you want to be a front-end developer you will probably be required to read documentation and learn new frameworks, or you will be required to write your own documentation for a client or organization. Frameworks are not a replacement for CSS but serves as a quick way to make a website or an HTML prototype. Once you learn how the documentation is organized, the process for learning the framework is easier. This is the same process used for learning other frameworks and not just Bootstrap.


Bootstrap Web Page

Erick Perez is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web Design and Development. The following article relates to Bootstrap Website in the DGM 2780 Course and representative of the skills learned.

Note: All Bootstrap images and screenshots are from and were used for educational purposes.




Erick Perez is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. This publication showcases his experiences and skills as a Web Designer and Developer.

Recommended from Medium

7 Cloud Management Tools for Businesses to Choose from in 2017

Is it bad to quit drinking coffee cold turkey

Conditional statements in Shell Script

What is the best web hosting site in 2022?

Configuration and Change Management

Work-life balance takes on a new meaning with COVID-19

Using AWS IoT for mutual TLS in a web application

C#221 — First Week!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Erick Perez

Erick Perez

Web Designer and Developer

More from Medium

Starting out Learning Web Design — Best Practices

7 Quick Tips To Improve Your Web Design Skills

100 Days of Code — Day 3.

Browser developer tools

Software Development Facts You must Know