Getting started with Bootstrap

Every time I would start a project while at Flatiron School, I would plan on using a css framework for styling. I would look through the documentation for different frameworks such as Bulma, Bootstrap, Semantic, and would be immediately put off. There was so much in the documentation and I didn't understand what I needed to add to my code in order to use the frameworks pre-styled elements. Instead of spending a little extra time to learn, I would focus on my project's functionality and end up styling with vanilla css from scratch.

Since completing the program, I am able to approach learning a bit more calmly, and am happy to announce that I learned my first css framework, Bootstrap. Looking back, I am not sure why I was flustered with it to begin with. It is very easy to use and has great documentation that is well organized and easy to understand. Below I will walk you through how to add Bootstrap to your projects and how to go through the documentation.

1. Visit Bootstrap.com and click on GET STARTED. This will take you to an Introduction page.
2. The intro page gives you a few options to add Bootstrap to your project.
   • You can copy the css link and paste it in your html file( in the head section under the title where you would normally add links for stylesheets). This is best option if you will not be needing any functional components such as drop-downs or items that change in appearance.
   • If you will be needing Javascript or functionality as mentioned above, you can copy the bundle or separate scripts located under the Javascript section on the intro page and paste the scripts at the end of the body section in your HTML file.
   • If you are barely starting on your project, you can copy the starter template which already has what you need to get started.
3. If you like, you can download the full css and javascript source code from the Download page on the Bootstrap site. You would add these files to the css folder of your project and link them in your html file as stylesheets. The downside of doing this is that the files will have to be loaded every time a user visits your site/application since it will not be cached. This can make loading slower.

Now that you have added Bootstrap to your project, you have access to many pre-styled elements. To apply them, all you need to do is add class names to your html elements and attributes. For example, you would add "col" for column, "btn" for button. The documentation is split into sections that make it easy to find what you are looking for but you can also search for any element in the searchbar to easier find the documentation for it.

One of the huge advantages to using a css framework, other than the pre-styled elements, is the added responsiveness. Rather than creating multiple stylesheets or media queries for different screen sizes, you can add sizes to your an element for different breakpoints. For example, if you set up a column using the class "col-6-md", the column will take up half of the screen width(6 out of 12 possible column widths) for screen sizes medium or larger. If it is smaller, the column will resize to full width of the screen automatically.

With more practice, I can understand how Bootstrap can be a time-saver as well as keep your code cleaner, provide uniformity if you are working on larger teams(people aren't making up their own class names), and help make your project more responsive. Don't let the documentation intimidate you, it is a lot easier than you think.