What is bootstrap

Bootstrap is the most Famous CSS framework for developing responsive and mobile friendly websites.

Bootstrap is a huge collection of easy, reusable bits of code written in HTML, CSS and JavaScript. It is also a frontend development framework that enables developers and designers to create fully responsive websites.

Essentially, Bootstrap saves you from writing a lot of CSS code, giving you more time to spend on designing a webpage. It includes HTML and CSS based design Web templates for typography, buttons, forms, tables, modals, navigation, image carousels etc. And it can also use JavaScript plug-ins.

It allows you to create responsive design as well as a front-end framework used for easy and fast web development. And it is absolutely free to download and use.

---

Why use Bootstrap

Following are the main reason to use:

• It is very easy to use. Anyone with common knowledge of HTML and CSS can use Bootstrap
• It is compatible on most browsers such as Chrome, Firefox, Internet Explorer, Safari and Opera etc.
• It facilitates users to develop a responsive website.

---

version's of bootstrap

• bootstrap v1.x :-
• bootstrap v2.x :-
• bootstrap v3.x :-
• bootstrap v4.x :-
• bootstrap v5.x :-

---

What Bootstrap package contains

• Scaffolding : The bootstrap grid system provides a basic structure with link styles and backgrounds.
• CSS : Bootstrap comes with global CSS settings, style of elemental HTML elements and an advance grid system.
• Components : Bootstrap includes a lot of reusable components develop to provide iconography, navigation, dropdowns, pop-overs, alerts, and so more.
• JavaScript plugins : Bootstrap also contains a lot of custom jQuery plugins. We can include them all very easily or one by one.
• Customize : Bootstrap components are customizable and we can customize less variables, Bootstrap components, and jQuery plugins to achieve our styles.

---

Advantage of Bootstrap

• Its responsive grid : Don't spend too much time coding your own grid - Bootstrap comes with its own grid system that is predefined. Now, you can get your containers to fill directly with material.
  Defining custom breakpoints for each column is a snap using their extra small, small, medium, large and extra large brakes. You can only stick to the default because it can already meet the needs of your site.
• Its responsive images : Bootstrap comes with his own code to automatically resize images based on the extant screen sizes. Just add the img-responsive class to your img tags, and pre defined CSS rules take care of the rest.
  Let Bootstrap resize your images for you! It can also resize your images by adding classes like IMG-Circle and IMG-Round, and this is without moving back and forth between the code and your design software.
• Its components : Bootstrap comes with full barrelful components that you can easily view on your web page, including:
  1. navigation bar
  2. drop downs
  3. progress bar
  4. Thumbnail
  
  Not only is it easy to add attractive design elements to your webpage, you'll also be able to know that each one of them will look great, no matter the screen size or the equipment used to view them. It has a lot of ready functionality at your fingertips.
• Its JavaScript :

  Bootstrap allows developers to leverage over a dozen custom J-Query plugins. This library gives you even more room to play with interactivity, provides easy solutions for modal popups, transitions, image carousel and scroll spy.

• Its documentation : Simply put, Bootstrap's documentation is some of the best we've ever seen. Each part of the code is described and explained in clear detail on their website.
  Explanations also include code samples for basic implementations, which simplify the process even for beginners. All you have to do is select a component, copy the code and paste it into your page
• Its customizability : One of the main criticisms when it comes to frameworks like Bootstrap is their size — the weight they throw can actually slow down your application at first load. For example, the current version of Bootstrap's CSS file is 119 KB. Although it may not seem particularly big for CSS file as compared to image and video files, it is huge!
  However, what it allows you to do to deal with this is customize what functionality you want to include in your download. By simply visiting their customized and download page, you can check features you don't need for your application, reduce weight from your file and save your users extra load time.
  Customization is the key!
• Its community : Like many open-source projects, there is a large community of designers and developers behind Bootstrap. Hosted on GitHub makes it easier for developers to modify and contribute to Bootstrap's codebase. It also makes it easier for people to collaborate, give advice and interact with peers and fellow users.
  Bootstrap has self active Twitter page, a bootstrap blog, and even a dedicated Slack Room. And it also does not come in the funds of developers willing to help with technical problems on stack overflow, where all queries can be found under the bootstrap-4 tag.
• Its external templates : As its popularity grew, people started creating bootstrap-based templates to speed up the web development process even further. There are many websites dedicated to sharing and purchasing custom templates based on bootstrap.

---

Why might you avoid Bootstrap?

By now, you are probably thinking that using it is a no brainer. But remember - every coin has two sides. Like almost everything in life, bootstrap also has its disadvantages. Let's take a look at some common complaints you may hear about Bootstrap:

Its syntax is confusing!

Before you are familiar with bootstrap, know that some of Bootstrap syntax can be confusing. When using a grid system, for example, to create a column that takes up a third of the screen, you need to add a .col-md-4 square to it. "Wait-4? Where did this 4 come from ?!" Of course, four can inspire you to believe that the column will occupy a quarter of the screen - not a third. While this syntax makes sense (bootstrap uses a 12-column system, and 4 is a third of 12), it may be oblivious to those new to the entire process.

Its files are too big!

As previously mentioned, bootstrap files can be slightly, well, larger, thanks to the sheer functionality offered by its framework. This can increase load time for websites, especially on slow networks.

Beginners may find it difficult to identify and fix this problem; However, as mentioned above, the customize tool on Bootstrap's website can help eliminate any unnecessary code for tasks you'll never use.

So do it your way- just pick the bits you need and leave the rest. (Of course, the more you know about coding, the easier it becomes!)

It keeps me from actually learning code!

Using bootstrap, There is always the risk that, we will get into a cycle of re-cycling existing code without actually understanding it. By spending time to actually learn what you are doing, you can use Bootstrap as a way to disrupt it rather than accelerate your learning.

History of Bootstrap

The bootstrap was developed on Twitter by Mark Otto and Jacob Thornton. It was released as an open source product on GitHub in August 2011. In June 2014, Bootstrap was the No. 1 project on GitHub.

---