What is Bootstrap?

Bootstrap is an open source toolkit for developing websites with HTML, CSS, and JS. There is still some debate as to if or not it is a framework or library, well it doesn't really matter to us, does it?

Why is Bootstrap so popular?

In one sentence; Bootstrap is versatile, simple and very flexible to use. A good knowledge and combination of bootstrap and CSS3 will lead to a very smooth and responsive user interface both to the developers during development stage and the end users when it is viewed live.

So let us get right into it.

5 IMPORTANT THINGS ABOUT BOOTSTRAP

1. REBOOT( Reset Sheet): Reboot is a bootstrap CSS reset style-sheet. Reboot is based on Normalize.css. It has completely removed margin-top in most elements, it embraces the CSS inherit value. You can read more about it here

2. Responsive Systems: Bootstrap is very responsive if utilized properly. It utilizes two responsive patterns and alternates them on its various components depending on which serves better.

   • Grid system: Bootstrap utilizes mobile-first flexbox grid and the twelve column's width system to build layouts of all shapes and sizes. It's responsiveness comes in five tiers or classes - -sm -md etc.
   • Flex system: Bootstrap uses flex system to quickly manage the layout, alignment, and sizing of grid columns, navigation, components.

3. Responsive Breakpoints: Bootstrap includes five set of predefined classes for building complex responsive layouts. The classes cover for extra small, small, medium, large, or extra large screen widths.
   Here is a handy table containing all responsive breakpoints and the respective classes.
   

4. Components: Bootstrap has a lot of handy components, from which you can choose and easily integrate or modify to suit your needs as the case may be. Most of these components come with default breakpoints to cater for all screen widths. This can go a long way to help in fast prototyping; a navbar here, a jumbotron there, some forms and containers here and there and you are good to go.
   The best part is that some components have their javascript behaviour incorporated into them already, so you do not need to worry about trying to write the functionalities for it.
   Some of these components are;

   • list groups
   • modals
   • dropdowns
   • alerts
   • carousel etc.

5. Utilities: This is the part of Bootstrap I personally find interesting, because this section is actually responsible for writing less CSS stylings. They are also modifiable; For instance, if a utility color has a class of primary with a value of #14acf2, thanks to reboot you can over ride it by just styling the primary class in your CSS to your desired value.
   So your CSS will just be for customization and for the extents that bootstrap classes cannot handle. Some very handy utilities(I use almost every time) are:

   • border
   • color
   • display
   • flex
   • positioning
   • text
   • margin
   • padding

Note to ourselves
No matter how high you fly with bootstrap you will still need to land with CSS.

Let me explain:
Do not try to defeat the purpose of CSS by refusing to write any styling, because you will build a catastrophic web-page, the essence of bootstrap was not to stop writing CSS, but to reduce the redundancy and repititions and also the size of our style sheet, knowing how hard it can be to debug. If you need to write styling, please by all means scribble your stylesheet.

I also advice that if you are a hardcore CSS fan and do not want to use bootstrap, you should at-least read and know about it, it is not vain knowledge because it can help you understand CSS naming conventions better while will in-turn upgrade your code readability and style.

To know more about bootstrap you can visit these page:
(https://getbootstrap.com/)
(https://medium.freecodecamp.org/bootstrap-4-everything-you-need-to-know-c750991f6784)
(https://medium.freecodecamp.org/want-to-learn-bootstrap-4-heres-our-free-10-part-course-happy-easter-35c004dc45a4)