Bootstrap (front-end framework)

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

Bootstrap
Original author(s)Mark Otto, Jacob Thornton
Developer(s)Bootstrap Core Team
Initial releaseAugust 19, 2011 (2011-08-19)
Stable release
4.6.0[1]  / 19 January 2021 (19 January 2021)
RepositoryBootstrap Repository
Written inHTML, CSS, Less (v3), Sass (v4) and JavaScript
PlatformWeb platform
LicenseMIT License (Apache License 2.0 prior to 3.1.0)
Websitegetbootstrap.com 

Bootstrap is among the most starred projects on GitHub, with more than 142,000 stars, behind freeCodeCamp (almost 312,000 stars) and marginally behind Vue.js framework.[2]

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 Twitter developer Mark Otto:

A super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company.[3]

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 Bootstrap, and released as an open source project on August 19, 2011.[4] It has continued to be maintained by Mark Otto, Jacob Thornton, and a small group of core developers, as well as a large community of contributors.[5]

Bootstrap 2 and 3

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, or mobile phone).[6]

The next major version, Bootstrap 3, was released on August 19, 2013. It redesigned components to use flat design and a mobile first approach.[7]

Bootstrap 4

Mark Otto announced Bootstrap 4 on October 29, 2014.[8] The first alpha version of Bootstrap 4 was released on August 19, 2015.[9] The first beta version was released on 10 August 2017.[10] Mark 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.[11]

Significant changes include:

  • Major rewrite of the code
  • Replacing Less with Sass
  • Addition of Reboot, a collection of element-specific CSS changes in a single file, based on Normalize
  • Dropping support for IE8, IE9, and iOS 6
  • CSS Flexible Box support
  • Adding navigation customization options
  • Adding responsive spacing and sizing utilities
  • Switching from the pixels unit in CSS to root ems
  • Increasing global font size from 14px to 16px for enhanced readability
  • Dropping the panel, thumbnail, pager, and well components
  • Dropping the Glyphicons icon font
  • Huge number of utility classes
  • Improved form styling, buttons, drop-down menus, media objects and image classes

Bootstrap 4 supports the latest versions of the 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).[12]

Bootstrap 5 Beta

Bootstrap 5 Alpha was officially released on 16 June 2020.[13]

Version 5 Beta is currently the latest version of the package which launched on 7 December 2020.[14]

Major changes include:[15][16][17][18]

  • Dropping jQuery in favor of vanilla JavaScript
  • Rewriting the grid to support columns placed outside of rows and responsive gutters
  • Migrating the documentation from Jekyll to Hugo
  • Dropping support for IE10 and IE11
  • Moving testing infrastructure from QUnit to Jasmine
  • Adding custom set of SVG icons
  • Adding CSS custom properties
  • Improved API
  • Enhanced grid system
  • Improved customizing docs
  • Updated forms
  • RTL support

Changes that are coming soon:[19]

  • Implementing an offcanvas menu

Changes that are being evaluated:[20]

  • Sass module system
  • Increased usage of CSS custom properties
  • Embedding SVGs in HTML instead of CSS

Features

Bootstrap is a HTML, CSS & JS Library that focuses on simplifying the development of informative web pages (as opposed to web apps). 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 in the form of jQuery plugins. They provide additional user interface elements such as dialog boxes, tooltips, 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.

Example of a webpage using Bootstrap framework rendered in Firefox

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 of the web page, the former uses one of the four predefined fixed widths, depending on the size of the screen showing the page:

  • Smaller than 576 pixels
  • 576–768 pixels
  • 768–992 pixels
  • 992–1200 pixels
  • Larger than 1200 pixels

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.

Default Bootstrap colors compared to Web colors of the same name
Name Hex
(RGB)		 Red
(RGB)		 Green
(RGB)		 Blue
(RGB)		 Hue
(HSL/HSV)		 Satur.
(HSL)		 Light
(HSL)		 Satur.
(HSV)		 Value
(HSV)		Alternatives
Bootstrap White #FFFFFF 100% 100% 100% 0° 0% 100% 0% 100%White
Bootstrap Gray 100 #F8F9FA 97% 98% 98% 210° 17% 98% 1% 98%
Bootstrap Gray 200 #E9ECEF 91% 93% 94% 210° 16% 93% 3% 94%
Bootstrap Gray 300 #DEE2E6 87% 89% 90% 210° 14% 89% 4% 90%
Bootstrap Gray 400 #CED4DA 81% 83% 85% 210° 14% 83% 6% 86%
Bootstrap Gray 500 #ADB5BD 68% 71% 74% 210° 11% 71% 9% 74%
Bootstrap Gray 600 #6C757D 42% 46% 49% 208° 7% 46% 14% 49%Bootstrap Gray
Bootstrap Gray 700 #495057 29% 31% 34% 210° 9% 31% 16% 34%
Bootstrap Gray 800 #343A40 20% 23% 25% 210° 10% 23% 19% 25%Bootstrap Dark Gray
Bootstrap Gray 900 #212529 13% 15% 16% 210° 11% 15% 20% 16%
Bootstrap Black #000000 0% 0% 0% 0° 0% 0% 0% 0%Black
Bootstrap Blue #0D6EFD 5% 43% 99% 216° 98% 52% 95% 99%
Bootstrap Indigo #6610F2 40% 6% 95% 263° 90% 51% 93% 95%
Bootstrap Purple #6F42C1 44% 26% 76% 261° 51% 51% 66% 76%
Bootstrap Pink #D63384 84% 20% 52% 330° 67% 52% 76% 84%
Bootstrap Red #DC3545 86% 21% 27% 354° 71% 54% 76% 86%
Bootstrap Orange #FD7E14 99% 49% 8% 27° 98% 54% 92% 99%
Bootstrap Yellow #FFC107 100% 76% 3% 45° 100% 51% 97% 100%
Bootstrap Green #198754 10% 53% 33% 152° 69% 31% 82% 53%
Bootstrap Teal #20C997 13% 79% 59% 162° 73% 46% 84% 79%
Bootstrap Cyan #0DCAF0 5% 79% 94% 190° 90% 50% 95% 94%
Gray #808080 50% 50% 50% 0° 0% 50% 0% 50%Grey
Blue #0000FF 0% 0% 100% 240° 100% 50% 100% 100%
Indigo #4B0082 29% 0% 51% 275° 100% 26% 100% 51%
Purple #800080 50% 0% 50% 300° 100% 25% 100% 50%
Pink #FFC0CB 100% 75% 80% 350° 100% 88% 25% 100%
Red #FF0000 100% 0% 0% 0° 100% 50% 100% 100%
Orange #FFA500 100% 65% 0% 39° 100% 50% 100% 100%
Yellow #FFFF00 100% 100% 0% 60° 100% 50% 100% 100%
Green #008000 0% 50% 0% 120° 100% 25% 100% 50%
Teal #008080 0% 50% 50% 180° 100% 25% 100% 50%
Cyan #00FFFF 0% 100% 100% 180° 100% 50% 100% 100%Aqua

See also

References
  1. https://blog.getbootstrap.com/2021/01/19/bootstrap-4.6.0/; retrieved: 28 January 2021; publication date: 19 January 2021.
  2. "Search · stars:>1". GitHub. Retrieved November 14, 2018.
  3. Otto, Mark (January 17, 2012). "Bootstrap in A List Apart No. 342". Mark Otto's blog. Archived from the original on October 28, 2016. Retrieved February 23, 2017.
  4. Otto, Mark (August 19, 2011). "Bootstrap from Twitter". Developer Blog. Twitter. Archived from the original on February 23, 2017. Retrieved February 23, 2017.
  5. "About". Bootstrap. Retrieved February 23, 2017.
  6. Otto, Mark (January 31, 2012). "Say hello to Bootstrap 2.0". Developer Blog. Twitter. Archived from the original on February 23, 2017. Retrieved February 23, 2017.
  7. Otto, Mark (August 19, 2013). "Bootstrap 3 released". Archived from the original on October 21, 2016. Retrieved February 23, 2017.
  8. Otto, Mark (October 29, 2014). "Bootstrap 3.3.0 released". Archived from the original on July 24, 2016. Retrieved February 23, 2017.
  9. Otto, Mark (August 19, 2015). "Bootstrap 4 alpha". Archived from the original on January 23, 2017. Retrieved February 23, 2017.
  10. Otto, Mark; Thornton, Jacob (2017-08-10). "Bootstrap 4 Beta". Retrieved 2017-08-16.
  11. contributors, Mark Otto, Jacob Thornton, and Bootstrap (18 January 2018). "Bootstrap 4". blog.getbootstrap.com. Retrieved 2018-03-16.
  12. "Supported browsers". Bootstrap. Retrieved February 23, 2017.
  13. "Bootstrap 5 Alpha". Developer Blog. June 22, 2020.
  14. "Bootstrap 5 Beta". Developer Blog. December 7, 2020.
  15. contributors, Mark Otto, Jacob Thornton, and Bootstrap (2018-12-21). "Bootstrap 4.2.1". Bootstrap Blog. Retrieved 2019-03-22.
  16. contributors, Mark Otto, Jacob Thornton, and Bootstrap (2019-02-11). "Bootstrap 4.3.0". Bootstrap Blog. Retrieved 2019-09-29.
  17. "Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap". GitHub. Retrieved 2019-09-29.
  18. "v5: drop Internet Explorer support by XhmikosR · Pull Request #30377 · twbs/bootstrap". GitHub. Retrieved 2020-04-07.
  19. "Bootstrap 5 Alpha". Developer Blog. June 22, 2020.
  20. "Bootstrap 5 Alpha". Developer Blog. June 22, 2020.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.