Bootstrap (formerly Twitter Bootstrap) is a

free and open-source Free and open-source software (FOSS) is software available under a Software license, license that grants users the right to use, modify, and distribute the software modified or not to everyone free of charge. FOSS is an inclusive umbrella term ...

CSS framework A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid (graphic design), grid. More functional frameworks also come with mor ...

directed at responsive, mobile-first

front-end web development Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website. Tools used for front-end development There are several tool ...

. It contains

HTML Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets ( ...

, CSS and (optionally)

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

-based design templates for

typography Typography is the art and technique of Typesetting, arranging type to make written language legibility, legible, readability, readable and beauty, appealing when displayed. The arrangement of type involves selecting typefaces, Point (typogra ...

, forms,

buttons A button is a fastener that joins two pieces of fabric together by slipping through a loop or by sliding through a buttonhole. In modern clothing and fashion design, buttons are commonly made of plastic but also may be made of metal, wood, o ...

navigation Navigation is a field of study that focuses on the process of monitoring and controlling the motion, movement of a craft or vehicle from one place to another.Bowditch, 2003:799. The field of navigation includes four general categories: land navig ...

, and other interface components. , Bootstrap is the 17th most starred project (4th most starred library) on

GitHub GitHub () is a Proprietary software, proprietary developer platform that allows developers to create, store, manage, and share their code. It uses Git to provide distributed version control and GitHub itself provides access control, bug trackin ...

, with over 164,000 stars. According to W3Techs, Bootstrap is used by 19.2% of all websites.

Features

Bootstrap is an HTML, CSS and JS library that focuses on simplifying the development of informative web pages (as opposed to

web application A web application (or web app) is application software that is created with web technologies and runs via a web browser. Web applications emerged during the late 1990s and allowed for the server to dynamically build a response to the request, ...

s). 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 element An HTML element is a type of HTML (HyperText Markup Language) document component, one of several types of HTML nodes (there are also text nodes, comment nodes and others). The first used version of HTML was written by Tim Berners-Lee in 199 ...

s. The result is a uniform appearance for prose, tables and form elements across

web browser A web browser, often shortened to browser, is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's scr ...

s. 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 box In computing, a dialog box (also simply dialog) is a graphical control element in the form of a small window that communicates information to the user and prompts them for a response. Dialog boxes are classified as " modal" or "modeless", dep ...

es,

tooltip The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hoverbox, hovering over a screen element or component, a text box displays information about that element, such as a description of a ...

s, 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. Twitter Bootstrap Under Firefox 32

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: * 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

Early beginnings

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at

Twitter Twitter, officially known as X since 2023, is an American microblogging and social networking service. It is one of the world's largest social media platforms and one of the most-visited websites. Users can share short text messages, image ...

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 A hackathon (also known as a hack day, hackfest, datathon or codefest; a portmanteau of '' hacking'' and ''marathon'') is an event where people engage in rapid and collaborative engineering over a relatively short period of time such as 24 or 48 h ...

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

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 Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfactio ...

, meaning the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (whether desktop, tablet, mobile phone). 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.

Bootstrap 3

On August 19, 2013, Bootstrap 3 was released. It redesigned components to use

flat design Flat design is a minimalist design language or design style commonly used in graphical user interfaces (GUI) (such as web applications and mobile apps), and also in graphical materials such as posters, arts, guide documents and publishing prod ...

and a mobile first approach. 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. Bootstrap 3 was also the first version released under the twbs organization on GitHub instead of the Twitter one.

Bootstrap 4

Otto announced Bootstrap 4 on October 29, 2014. The first alpha version of Bootstrap 4 was released on August 19, 2015. The first beta version was released on August 10, 2017. 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. Significant changes include: * Major rewrite of the code * Replacing

Less Less or LESS may refer to: Computing * less (Unix), a Unix utility program * Less (style sheet language), a dynamic style sheet language * Large-Scale Scrum (LeSS), a product development framework that extends Scrum Other uses * -less, a priv ...

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 iOS 6 is the sixth major release of the iOS mobile operating system developed by Apple Inc, being the successor to iOS 5. It was announced at the company's Worldwide Developers Conference on June 11, 2012, and was released on September 19, 2012 ...

* CSS Flexible Box support * Adding navigation customization options * Adding responsive spacing and sizing utilities * Switching from the

pixel In digital imaging, a pixel (abbreviated px), pel, or picture element is the smallest addressable element in a Raster graphics, raster image, or the smallest addressable element in a dot matrix display device. In most digital display devices, p ...

s 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

Google Chrome Google Chrome is a web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, iOS, iPadOS, an ...

Firefox Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements curr ...

Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated as IE or MSIE) is a deprecation, retired series of graphical user interface, graphical web browsers developed by Microsoft that were u ...

Opera Opera is a form of History of theatre#European theatre, Western theatre in which music is a fundamental component and dramatic roles are taken by Singing, singers. Such a "work" (the literal translation of the Italian word "opera") is typically ...

, and

Safari A safari (; originally ) is an overland journey to observe wildlife, wild animals, especially in East Africa. The so-called big five game, "Big Five" game animals of Africa – lion, African leopard, leopard, rhinoceros, African elephant, elep ...

(except on Windows). It additionally supports back to IE10 and the latest

Extended Support Release (ESR).

Bootstrap 5

Bootstrap 5 was officially released on May 5, 2021. Major changes include: * 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

* Moving testing infrastructure from QUnit to

Jasmine Jasmine (botanical name: ''Jasminum'', pronounced ) is a genus of shrubs and vines in the olive family of Oleaceae. It contains around 200 species native to tropical and warm temperate regions of Eurasia, Africa, and Oceania. Jasmines are wid ...

* Adding custom set of SVG icons * Adding CSS custom properties * Improved API * Enhanced grid system * Improved customizing docs * Updated forms * RTL support * Built in darkmode support

References

External links

* * {{Authority control 2011 software CSS frameworks Free software programmed in JavaScript HTML JavaScript libraries Software using the MIT license Twitter Web design Web development Responsive web design Mobile web