If you are currently or planning on exploring the world of web development, chances are you’ve heard of Bootstrap. So what exactly is it? Bootstrap is a free open-sourced front-end framework that offers responsive designs in a variety of ways. It was created in 2010 by a designer and a developer at Twitter and has gained huge popularity because of how simple it is to use.
Reasons why you should use Bootstrap
- Easy to Start Using
- Great Documentation: Follow this link to Bootstrap’s Documentation
- Less is More: You can do less CSS manipulation, also minimizing the amount of CSS and files required for your webpage without repeating yourself.
- Customizable: Bootstrap has lots of Javascript Plugins, allowing for better customizations.
- Grid System: Default is a 12 column grid that can be fixed or responsive, with lots of choices in design.
- Compatibility and Responsiveness: Bootstrap is compatible across all browsers, and is responsive across different platforms from laptops, to tablets, to phones.
Installation
For this blog, I will focus on how to install and use Bootstrap as a library for Javascript. For most modern Javascript frameworks, installing Bootstrap is as simple as what’s shown below, it just depends on the package you are using.
Follow this link to be redirected to Bootstrap’s Documentation. Copy and paste the CSS link as well as the the three JS scripts into your index.html file. Now you can begin to code your CSS, HTML, and Javascript.
If you aren’t using a Javascript framework, then you can just import Bootstrap as a script from a CDN. For example, use this link to help guide you on how to use Bootstrap with Ruby on Rails.
Grid System
Bootstrap has a 12 column grid system which allows you to position elements horizontally by percentages. The most useful part of the 12 columns is that it can be easily divided into halves, thirds, and quarters. It also has built in margins and paddings. that makes the elements look clean. This is also a concept that is popular with UI designers and helps you collaborate with them
Bootstrap also accounts for different screen sizes which is very useful for web frameworks. A layout may not be perfect for all devices, so bootstrap gives us options to be able to modify how many columns it takes based on the screen size. Below is an example of the various sizes to account for the ranges of screens. “Extra small” is meant for mobile format, “Small” can be used for mobile or vertical tablets, “Medium” is generally used for horizontal tablets, and “Large” and “Extra Large” is mainly used for large tablets or desktops.
Because the grid is made up of 12 parts, you can dictate how many parts each column can take up. So for example, if you want to divide your grid into thirds on a mobile app, then you would only need to add the defaulted class provided by Bootstrap, then type in “col-md-4” to each of the elements that are positioned next to each other and all their contents would be put into three columns. You can add multiple “col” classes to your code, in response to the variety of platforms your users will be using. Fret not though, even if you don’t add a “col-lg” to your code and your user is using the desktop version, the program will just look at the last biggest thing “col” you wrote.
Usage
For basic usage, visit this link to look for examples of what you would like to use. Applying styles is as simple as adding the class name to the relevant elements. At any point you can extend their classes and also add your own. Styles and properties created by users will generally take precedence over those defined in bootstrap making easily extendable.
Conclusion
This is an extremely basic how-to for Bootstrap’s Grid System. I would highly recommend you check out the links provided for better documentation and guidance.
The best advantage to using bootstrap is the speed at which a beautiful and responsive design can be created. It allows for rapid prototyping and the ability to play with multiple ideas without having to create from scratch. Happy Coding!
