Jump to content

Bootstrap (front-end framework): Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
Add reference for old license
→See also: MOS:SEEALSO should be list
 
(19 intermediate revisions by 15 users not shown)
Line 15: Line 15:
| license = [[MIT License]]<ref>{{cite web|url=https://github.com/twbs/bootstrap/blob/main/LICENSE|title=bootstrap/LICENSE|website=Github}}</ref> ([[Apache License 2.0]] prior to 3.1.0)<ref>{{cite web|url=https://github.com/twbs/bootstrap/blob/v3.0.3/LICENSE|title=bootstrap/LICENSE (v3.0.3)|website=Github}}</ref>}}
| license = [[MIT License]]<ref>{{cite web|url=https://github.com/twbs/bootstrap/blob/main/LICENSE|title=bootstrap/LICENSE|website=Github}}</ref> ([[Apache License 2.0]] prior to 3.1.0)<ref>{{cite web|url=https://github.com/twbs/bootstrap/blob/v3.0.3/LICENSE|title=bootstrap/LICENSE (v3.0.3)|website=Github}}</ref>}}


'''Bootstrap''' (formerly '''Twitter Bootstrap''') is a [[free and open-source]] [[CSS framework]] directed at responsive, [[Responsive web design#Mobile first, unobtrusive JavaScript, and progressive enhancement|mobile-first]] [[front-end web development]]. It contains [[HTML]], [[CSS]] and (optionally) [[JavaScript]]-based design templates for [[web design#Typography|typography]], [[Form (HTML)|forms]], [[button (computing)#HTML|buttons]], [[web navigation#Local website navigation|navigation]], and other interface components.
'''Bootstrap''' (formerly '''Twitter Bootstrap''') is a [[free and open-source]] [[CSS framework]] directed at responsive, [[Responsive web design#Related concepts|mobile-first]] [[front-end web development]]. It contains [[HTML]], [[CSS]] and (optionally) [[JavaScript]]-based design templates for [[web design#Typography|typography]], [[Form (HTML)|forms]], [[button (computing)#HTML|buttons]], [[web navigation#Local website navigation|navigation]], and other interface components.


{{As of|2023|May}}, Bootstrap is the 17th most starred project (4th most starred library) on [[GitHub]], with over 164,000 stars.<ref name="most-starred">{{Cite web |title=Search · stars:>100000 |url=https://github.com/search?q=stars:%3E100000&type=repositories |access-date=2022-12-04 |website=GitHub |language=en}}</ref> According to W3Techs, Bootstrap is used by 19.2% of all websites.<ref>{{Cite web|title=Usage statistics and market share of Bootstrap for websites|url=https://w3techs.com/technologies/details/cs-bootstrap|access-date=January 24, 2023|website=w3techs.com|language=en}}</ref>
{{As of|2023|May}}, Bootstrap is the 17th most starred project (4th most starred library) on [[GitHub]], with over 164,000 stars.<ref name="most-starred">{{Cite web |title=Search · stars:>100000 |url=https://github.com/search?q=stars:%3E100000&type=repositories |access-date=2022-12-04 |website=GitHub |language=en}}</ref> According to W3Techs, Bootstrap is used by 19.2% of all websites.<ref>{{Cite web|title=Usage statistics and market share of Bootstrap for websites|url=https://w3techs.com/technologies/details/cs-bootstrap|access-date=January 24, 2023|website=w3techs.com|language=en}}</ref>
Line 26: Line 26:


[[File:Twitter Bootstrap Under Firefox 32.png|alt=Example of a webpage using Bootstrap framework|thumb|Example of a webpage using Bootstrap framework rendered in [[Firefox]]]]
[[File:Twitter Bootstrap Under Firefox 32.png|alt=Example of a webpage using Bootstrap framework|thumb|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 with the web page, the former uses one of the five predefined fixed widths, depending on the size of the screen showing the page:{{Citation needed|date=September 2022}}
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:<ref>{{Cite web |title=Bootstrap Containers · Bootstrap v5.0 |url=https://getbootstrap.com/docs/5.0/layout/containers/}}</ref>
* Smaller than 576 pixels
* Smaller than 576 pixels
* 576–768 pixels
* 576–768 pixels
* 768–992 pixels
* 768–992 pixels
* 992–1200 pixels
* 992–1200 pixels
* Larger than 1200 pixels
* 1200–1400 pixels
* Larger than 1400 pixels


Once a container is in place, other Bootstrap layout components implement a CSS Flexbox layout through defining rows and columns.
Once a container is in place, other Bootstrap layout components implement a CSS Flexbox layout through defining rows and columns.
Line 41: Line 42:
=== Early beginnings ===
=== 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:
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:


{{quote|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.<ref name="bootstrap a list apart">{{cite web | url = http://markdotto.com/2012/01/17/bootstrap-in-a-list-apart-342/ | title = Bootstrap in A List Apart No. 342 | last = Otto | first = Mark | date = January 17, 2012 | website = Mark Otto's blog | archive-url = https://web.archive.org/web/20161028153404/http://markdotto.com/2012/01/17/bootstrap-in-a-list-apart-342/ | archive-date = October 28, 2016 | url-status = live | access-date = February 23, 2017}}</ref>|sign=|source=}}
{{quote|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.<ref name="bootstrap a list apart">{{cite web | url = http://markdotto.com/2012/01/17/bootstrap-in-a-list-apart-342/ | title = Bootstrap in A List Apart No. 342 | last = Otto | first = Mark | date = January 17, 2012 | website = Mark Otto's blog | archive-url = https://web.archive.org/web/20161028153404/http://markdotto.com/2012/01/17/bootstrap-in-a-list-apart-342/ | archive-date = October 28, 2016 | url-status = live | access-date = February 23, 2017}}</ref>|sign=|source=}}
Line 53: Line 54:
=== Bootstrap 3 ===
=== Bootstrap 3 ===


On August 19, 2013, Bootstrap 3 was released. It redesigned components to use [[flat design]] and a [[Responsive web design#Mobile first, unobtrusive JavaScript, and progressive enhancement|mobile first]] approach.{{cn|date=October 2023}} Bootstrap 3 features new plugin system with [[namespace|namespaced]] events. Bootstrap 3 dropped Internet Explorer 7 and Firefox 3.6 support, but there is an optional [[Polyfill (programming)|polyfill]] for these browsers.<ref name="v3-release">{{cite web | url = https://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ | title = Bootstrap 3 released | last = Otto | first = Mark | date = August 19, 2013 | archive-url = https://web.archive.org/web/20161021202024/http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ | archive-date = October 21, 2016 | url-status = live | access-date = February 23, 2017}}</ref> Bootstrap 3 was also the first version released under the twbs organization on GitHub instead of the Twitter one.<ref>{{cite web |url=https://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/|title=Bootstrap 3 plans|date=December 10, 2012 }}</ref>
On August 19, 2013, Bootstrap 3 was released. It redesigned components to use [[flat design]] and a [[Responsive web design#Mobile first, unobtrusive JavaScript, and progressive enhancement|mobile first]] approach.<ref>{{Cite web |title=Bootstrap Blog - Bootstrap 3 released |date=August 19, 2013 |url=https://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/}}</ref> Bootstrap 3 features new plugin system with [[namespace|namespaced]] events. Bootstrap 3 dropped Internet Explorer 7 and Firefox 3.6 support, but there is an optional [[Polyfill (programming)|polyfill]] for these browsers.<ref name="v3-release">{{cite web | url = https://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ | title = Bootstrap 3 released | last = Otto | first = Mark | date = August 19, 2013 | archive-url = https://web.archive.org/web/20161021202024/http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ | archive-date = October 21, 2016 | url-status = live | access-date = February 23, 2017}}</ref> Bootstrap 3 was also the first version released under the twbs organization on GitHub instead of the Twitter one.<ref>{{cite web |url=https://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/|title=Bootstrap 3 plans|date=December 10, 2012 }}</ref>


=== Bootstrap 4 ===
=== Bootstrap 4 ===
Line 107: Line 108:
* [[JavaScript library]]
* [[JavaScript library]]
* [[Tailwind CSS]]
* [[Tailwind CSS]]
⚫
* [[Web framework]] — some support rendering in Bootstrap.<ref>{{Cite web |url = https://github.com/helloflask/bootstrap-flask|title = Bootstrap-Flask|access-date = 2022-11-07|publisher = HelloFlask}}</ref><ref>{{Cite web |url = https://github.com/zelenij/django-bootstrap-v5|title = Bootstrap-Django|access-date = 2022-11-07|publisher = zelenij}}</ref>

⚫
Also, several [[Web_framework|web frameworks]] support rendering in Bootstrap.<ref>{{Cite web |url = https://github.com/helloflask/bootstrap-flask|title = Bootstrap-Flask|access-date = 2022-11-07|publisher = HelloFlask}}</ref><ref>{{Cite web |url = https://github.com/zelenij/django-bootstrap-v5|title = Bootstrap-Django|access-date = 2022-11-07|publisher = zelenij}}</ref>


== References ==
== References ==

Latest revision as of 11:03, 14 December 2024

Bootstrap
Original author(s)Mark Otto, Jacob Thornton
Developer(s)Bootstrap Core Team
Initial releaseAugust 19, 2011; 13 years ago (2011-08-19)
Stable release
5.3.3[1] Edit this on Wikidata / 20 February 2024; 9 months ago (20 February 2024)
RepositoryBootstrap Repository
Written inHTML, CSS, Less (v3), Sass (v4) and JavaScript
PlatformWeb platform
LicenseMIT License[2] (Apache License 2.0 prior to 3.1.0)[3]
Websitegetbootstrap.com Edit this on Wikidata

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.

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

Features

[edit]

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.

Example of a webpage using Bootstrap framework
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 with the web page, the former uses one of the five predefined fixed widths, depending on the size of the screen showing the page:[6]

  • Smaller than 576 pixels
  • 576–768 pixels
  • 768–992 pixels
  • 992–1200 pixels
  • 1200–1400 pixels
  • Larger than 1400 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.

History

[edit]

Early beginnings

[edit]

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:

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.[7]

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.[8] It has continued to be maintained by Otto, Thornton, a small group of core developers, and a large community of contributors.[9]

Bootstrap 2

[edit]

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).[10] 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.[11]

Bootstrap 3

[edit]

On August 19, 2013, Bootstrap 3 was released. It redesigned components to use flat design and a mobile first approach.[12] 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.[13] Bootstrap 3 was also the first version released under the twbs organization on GitHub instead of the Twitter one.[14]

Bootstrap 4

[edit]

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

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[quantify] of utility classes
  • Improved form styling, buttons, drop-down menus, media objects and image classes

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).[19]

Bootstrap 5

[edit]

Bootstrap 5 was officially released on May 5, 2021.[20][21]

Major changes include:[22]

  • New offcanvas menu component
  • Removing dependence on jQuery in favor of vanilla JavaScript
  • Rewriting the grid to support responsive gutters and columns placed outside of rows
  • Migrating the documentation from Jekyll to Hugo
  • Dropping support for Internet Explorer[23]
  • Moving testing infrastructure from QUnit to Jasmine
  • Adding custom set of SVG icons[24]
  • Adding CSS custom properties
  • Improved API
  • Enhanced grid system
  • Improved customizing docs
  • Updated forms
  • RTL support
  • Built in darkmode support

See also

[edit]

References

[edit]
  1. ^ "Release 5.3.3". February 20, 2024. Retrieved February 20, 2024.
  2. ^ "bootstrap/LICENSE". Github.
  3. ^ "bootstrap/LICENSE (v3.0.3)". Github.
  4. ^ "Search · stars:>100000". GitHub. Retrieved December 4, 2022.
  5. ^ "Usage statistics and market share of Bootstrap for websites". w3techs.com. Retrieved January 24, 2023.
  6. ^ "Bootstrap Containers · Bootstrap v5.0".
  7. ^ 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.
  8. ^ Otto, Mark (August 19, 2011). "Bootstrap from Twitter". Developer Blog. Twitter. Archived from the original on February 23, 2017. Retrieved February 23, 2017.
  9. ^ "About". Bootstrap. August 19, 2011. Retrieved February 23, 2017.
  10. ^ 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.
  11. ^ Otto, Mark (September 29, 2012). "Onward". blog.getbootstrap.com.
  12. ^ "Bootstrap Blog - Bootstrap 3 released". August 19, 2013.
  13. ^ Otto, Mark (August 19, 2013). "Bootstrap 3 released". Archived from the original on October 21, 2016. Retrieved February 23, 2017.
  14. ^ "Bootstrap 3 plans". December 10, 2012.
  15. ^ Otto, Mark (October 29, 2014). "Bootstrap 3.3.0 released". Archived from the original on July 24, 2016. Retrieved February 23, 2017.
  16. ^ Otto, Mark (August 19, 2015). "Bootstrap 4 alpha". Archived from the original on January 23, 2017. Retrieved February 23, 2017.
  17. ^ Otto, Mark; Thornton, Jacob (August 10, 2017). "Bootstrap 4 Beta". Retrieved August 16, 2017.
  18. ^ "Bootstrap 4". blog.getbootstrap.com. January 18, 2018. Retrieved February 5, 2021.
  19. ^ "Supported browsers". Bootstrap. Retrieved February 23, 2017.
  20. ^ "Release Release v5.0.0 (#33647) · twbs/bootstrap". GitHub. Retrieved May 5, 2021.
  21. ^ "Bootstrap 5". blog.getbootstrap.com. May 5, 2021.
  22. ^ "Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap". GitHub. Retrieved September 29, 2019.
  23. ^ "v5: drop Internet Explorer support by XhmikosR · Pull Request #30377 · twbs/bootstrap". GitHub. Retrieved April 7, 2020.
  24. ^ "Bootstrap Icons". Retrieved November 7, 2022.
  25. ^ "Bootstrap-Flask". HelloFlask. Retrieved November 7, 2022.
  26. ^ "Bootstrap-Django". zelenij. Retrieved November 7, 2022.
[edit]
Wikimedia Commons has media related to Bootstrap (framework).
Retrieved from "https://en.wikipedia.org/w/index.php?title=Bootstrap_(front-end_framework)&oldid=1263044440"