Bootstrap (front-end framework) explained

Bootstrap
Author:Mark Otto, Jacob Thornton
Developer:Bootstrap Core Team
Programming Language:HTML, CSS, Less (v3), Sass (v4) and JavaScript
Platform:Web platform
License:MIT License[1] (Apache License 2.0 prior to 3.1.0)[2]

Bootstrap (formerly Twitter Bootstrap) is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

, Bootstrap is the 17th most starred project (4th most starred library) on GitHub, with over 164,000 stars.[3] According to W3Techs, Bootstrap is used by 19.2% of all websites.[4]

Features

Bootstrap is an HTML, CSS and JS library that focuses on simplifying the development of informative web pages (as opposed to web applications). The primary purpose of adding it to a web project is to apply Bootstrap's choices of color, size, font and layout to that project. As such, the primary factor is whether the developers in charge find those choices to their liking. Once added to a project, Bootstrap provides basic style definitions for all HTML elements. The result is a uniform appearance for prose, tables and form elements across web browsers. In addition, developers can take advantage of CSS classes defined in Bootstrap to further customize the appearance of their contents. For example, Bootstrap has provisioned for light- and dark-colored tables, page headings, more prominent pull quotes, and text with a highlight.

Bootstrap also comes with several JavaScript components which do not require other libraries like jQuery. They provide additional user interface elements such as dialog boxes, tooltips, progress bars, navigation drop-downs, and carousels. Each Bootstrap component consists of an HTML structure, CSS declarations, and in some cases accompanying JavaScript code. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields.

The most prominent components of Bootstrap are its layout components, as they affect an entire web page. The basic layout component is called "Container", as every other element in the page is placed in it. Developers can choose between a fixed-width container and a fluid-width container. While the latter always fills the width with the web page, the former uses one of the five predefined fixed widths, depending on the size of the screen showing the page:[5]

Once a container is in place, other Bootstrap layout components implement a CSS Flexbox layout through defining rows and columns.

A precompiled version of Bootstrap is available in the form of one CSS file and three JavaScript files that can be readily added to any project. The raw form of Bootstrap, however, enables developers to implement further customization and size optimizations. This raw form is modular, meaning that the developer can remove unneeded components, apply a theme and modify the uncompiled Sass files.

History

Early beginnings

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. According to Otto:

After a few months of development by a small group, many developers at Twitter began to contribute to the project as a part of Hack Week, a hackathon-style week for the Twitter development team. It was renamed from Twitter Blueprint to Twitter Bootstrap and released as an open-source project on August 19, 2011.[6] It has continued to be maintained by Otto, Thornton, a small group of core developers, and a large community of contributors.[7]

Bootstrap 2

On January 31, 2012, Bootstrap 2 was released, which added built-in support for Glyphicons, several new components, as well as changes to many of the existing components. This version supports responsive web design, meaning the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (whether desktop, tablet, mobile phone).[8] Shortly before the release of Bootstrap 2.1.2, Otto and Thornton left Twitter, but committed to continue to work on Bootstrap as an independent project.[9]

Bootstrap 3

On August 19, 2013, Bootstrap 3 was released. It redesigned components to use flat design and a mobile first approach.[10] Bootstrap 3 features new plugin system with namespaced events. Bootstrap 3 dropped Internet Explorer 7 and Firefox 3.6 support, but there is an optional polyfill for these browsers.[11] Bootstrap 3 was also the first version released under the twbs organization on GitHub instead of the Twitter one.[12]

Bootstrap 4

Otto announced Bootstrap 4 on October 29, 2014.[13] The first alpha version of Bootstrap 4 was released on August 19, 2015.[14] The first beta version was released on August 10, 2017.[15] Otto suspended work on Bootstrap 3 on September 6, 2016, to free up time to work on Bootstrap 4. Bootstrap 4 was finalized on January 18, 2018.[16]

Significant changes include:

Bootstrap 4 supports the latest versions of Google Chrome, Firefox, Internet Explorer, Opera, and Safari (except on Windows). It additionally supports back to IE10 and the latest Firefox Extended Support Release (ESR).[17]

Bootstrap 5

Bootstrap 5 was officially released on May 5, 2021.[18] [19]

Major changes include:[20]

See also

Also, several web frameworks support rendering in Bootstrap.[23] [24]

Notes and References

  1. Web site: bootstrap/LICENSE. Github.
  2. Web site: bootstrap/LICENSE (v3.0.3). Github.
  3. Web site: Search · stars:>100000 . 2022-12-04 . GitHub . en.
  4. Web site: Usage statistics and market share of Bootstrap for websites. January 24, 2023. w3techs.com. en.
  5. Web site: Bootstrap Containers · Bootstrap v5.0 .
  6. Web site: Bootstrap from Twitter . Otto . Mark . August 19, 2011 . Developer Blog . Twitter . https://web.archive.org/web/20170223125113/https://blog.twitter.com/2011/bootstrap-twitter . February 23, 2017 . live . February 23, 2017.
  7. Web site: About . Bootstrap . August 19, 2011 . February 23, 2017.
  8. Web site: Say hello to Bootstrap 2.0 . Otto . Mark . January 31, 2012 . Developer Blog . Twitter . https://web.archive.org/web/20170223125701/https://blog.twitter.com/2012/say-hello-to-bootstrap-2 . February 23, 2017 . live . February 23, 2017.
  9. Web site: Otto . Mark . Onward . blog.getbootstrap.com . en . 29 September 2012.
  10. Web site: Bootstrap Blog - Bootstrap 3 released .
  11. Web site: Bootstrap 3 released . Otto . Mark . August 19, 2013 . https://web.archive.org/web/20161021202024/http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ . October 21, 2016 . live . February 23, 2017.
  12. Web site: Bootstrap 3 plans. December 10, 2012 .
  13. Web site: Bootstrap 3.3.0 released . Otto . Mark . October 29, 2014 . https://web.archive.org/web/20160724153923/http://blog.getbootstrap.com/2014/10/29/bootstrap-3-3-0-released/ . July 24, 2016 . live . February 23, 2017.
  14. Web site: Bootstrap 4 alpha . Otto . Mark . August 19, 2015 . https://web.archive.org/web/20170123145832/http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ . January 23, 2017 . live . February 23, 2017.
  15. Web site: Bootstrap 4 Beta. Mark. Jacob. Otto. Thornton. August 10, 2017. August 16, 2017.
  16. Web site: Bootstrap 4. blog.getbootstrap.com. January 18, 2018. en. February 5, 2021.
  17. Web site: Supported browsers . Bootstrap . February 23, 2017.
  18. Web site: Release Release v5.0.0 (#33647) · twbs/bootstrap. May 5, 2021. GitHub. en.
  19. Web site: Bootstrap 5. blog.getbootstrap.com. May 5, 2021 .
  20. Web site: Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap. GitHub. en. September 29, 2019.
  21. Web site: v5: drop Internet Explorer support by XhmikosR · Pull Request #30377 · twbs/bootstrap. April 7, 2020. GitHub. en.
  22. Web site: Bootstrap Icons. November 7, 2022.
  23. Web site: Bootstrap-Flask. 2022-11-07. HelloFlask.
  24. Web site: Bootstrap-Django. 2022-11-07. zelenij.