Bootstrap is a

free and open-source Free and open-source software (FOSS) is a term used to refer to groups of software consisting of both free software and open-source software where anyone is freely licensed to use, copy, study, and change the software in any way, and the source ...

CSS framework 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 that users can view and interact with that website. Tools used for front-end development There are several ...

. It contains

HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaS ...

CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...

and (optionally)

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

-based design templates for

typography Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing ( leading), and ...

forms Form is the shape, visual appearance, or configuration of an object. In a wider sense, the form is the way something happens. Form also refers to: *Form (document), a document (printed or electronic) with spaces in which to write or enter data * ...

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, ...

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

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

GitHub GitHub, Inc. () is an Internet hosting service for software development and version control using Git. It provides the distributed version control of Git plus access control, bug tracking, software feature requests, task management, continuous ...

, with over 161,000 stars.

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 accessed using a web browser. Web applications are delivered on the World Wide Web to users with an active network connection. History In earlier computing models like client-serve ...

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 1993 ...

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

web browser A web browser is application software 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 screen. Browsers are used on ...

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 quote In graphic design, a pull quote (also known as a lift-out pull quote) is a key phrase, quotation, or excerpt that has been ''pulled'' from an article and used as a page layout graphic element, serving to entice readers into the article or to hig ...

s, and text with a highlight. Bootstrap also comes with several JavaScript components which do not require other libraries like

jQuery jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of Aug 2022, jQuery is used ...

. They provide additional user interface elements such as

dialog box The dialog box (also called dialogue box (non-U.S. English), message box or 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 ar ...

es,

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

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

History

Early beginnings

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

Twitter Twitter is an online social media and social networking service owned and operated by American company Twitter, Inc., on which users post and interact with 280-character-long messages known as "tweets". Registered users can post, like, and ...

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 hours. Th ...

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

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 produ ...

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 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: fewer than,: not as much. Computing * less (Unix), a Unix utility program * Less (stylesheet language), a dynamic stylesheet language * Large-Scale Scrum (LeSS), a product development framework that extends Scrum Othe ...

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, 201 ...

* 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 image, or the smallest point in an all points addressable display device. In most digital display devices, pixels are the smal ...

s unit in CSS to

root em An em (from English '' em quadrat'') is a unit in the field of typography, equal to the currently specified point size. For example, one em in a 16-point typeface is 16 points. Therefore, this unit is the same for all typefaces at a given point ...

s * 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 cross-platform 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 ...

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 current and ...

Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical user interface, graphical web browsers developed by Microsoft which was used in the Microsoft Wind ...

Opera Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a librett ...

, and

Safari A safari (; ) is an overland journey to observe wild animals, especially in eastern or southern Africa. The so-called "Big Five" game animals of Africa – lion, leopard, rhinoceros, elephant, and Cape buffalo – particularly form an importa ...

(except on Windows). It additionally supports back to

IE10 Internet Explorer 10 (IE10) is the tenth, and by now, discontinued, version of the Internet Explorer web browser and the successor to Internet Explorer 9, released by Microsoft on September 4, 2012, shortly after the completion of Windows Serv ...

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

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 Hugo or HUGO may refer to: Arts and entertainment * ''Hugo'' (film), a 2011 film directed by Martin Scorsese * Hugo Award, a science fiction and fantasy award named after Hugo Gernsback * Hugo (franchise), a children's media franchise based on ...

* Dropping support for

* Moving testing infrastructure from

QUnit QUnit is a JavaScript unit testing framework. Originally developed for testing jQuery, jQuery UI and jQuery Mobile, it is a generic framework for testing any JavaScript code. It supports client-side environments in web browsers, and server-s ...

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

* Adding custom set of SVG icons * Adding CSS custom properties * Improved API * Enhanced grid system * Improved customizing docs * Updated forms * RTL 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