A sample page designed with Bootstrap 3 in Google Chrome 34
|Publishing year||August 19, 2011|
( August 6, 2020 )
|operating system||Platform independence|
Bootstrap originally emerged from the project to further develop Twitter's internal analysis and management tools. At that time, the company was using a wide variety of libraries for surface development, which led to inconsistencies and high maintenance costs. In order to meet these challenges, the focus of the project was expanded:
"[...] 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. "
“[…] A very small group of developers and I sat down to design a new internal tool and saw the opportunity to make more of it. During the process, we realized that we were in the process of creating something that was much more far-reaching than just another internal tool. Months later, we had an early version of Bootstrap in our hands, which documented general design patterns and findings within the company. "
According to Otto, the idea of bringing designers and developers together plays an elementary role in the development: "From whiteboarding ideas to coding rough prototypes, collaborating across disciplines is what made Bootstrap successful for internal use at Twitter.", ("Vom Skizzieren From ideas to programming rough prototypes, it was the interdisciplinary collaboration that made Bootstrap so successful for internal use on Twitter ”).
The name Bootstrap is borrowed from the story of Hieronymus Carl Friedrich von Münchhausen , also known as "Baron Münchhausen", who, among other things, dished up the falsehood that he pulled himself out of a swamp by his own hair (strap) , instead of a hair Boots (boot) is used, which is also known as an English proverb. Since the bootstrap framework is the basis on which other parts of the website are built, the factual connection is established (see Bootstrapping_ (computer science) ).
Bootstrap was first used under real conditions on Twitter's first hackweek. Otto showed some colleagues how they can use the toolkit to accelerate the development of their projects. When the results were presented, it became clear that dozens of teams had used the framework. In this way, Bootstrap not only contributed to shortening the development time, but also to creating a uniform look and feel for the applications created during the Hackweek without the assistance of a dedicated designer.
In August 2011, Twitter decided to make the results available to the public as an open source project. Since then, Bootstrap has developed into a popular GitHub project with ≈50,000 forks , ≈105,000 likes and over ≈7,000 observers (as of March 2017).
Starting with version 2.0, Bootstrap also supports the design in terms of responsive web design . This means that the graphic structure of websites is dynamic and takes into account the properties of the device used (PC, tablet, mobile phone). Arranged elements are automatically adapted to the screen resolution or window size.
Structure and functionality
Bootstrap has a modular structure and essentially consists of Less stylesheets, which contain the individual components of the framework. These individual components are brought together by a central bootstrap file. With this structure, the developer can decide for himself which components are used in his project by adapting the bootstrap file.
Adjustments are possible to a limited extent using a central configuration stylesheet. This includes information on the font and size, color or the structure of the grid layout. More profound changes are possible by overwriting the LESS declarations from Bootstrap.
From version 2.0, the configuration of Bootstrap is also possible via a special “Customize” option in the documentation. The developer uses a form to select the desired components and, if necessary, adjust the values of various options to suit his needs. The package created afterwards already contains the fully compiled CSS stylesheet.
Basic structure: grid system and responsive web design
Bootstrap is delivered as standard with a 940 pixel wide, twelve column grid layout. Alternatively, the designer can use a variable-width layout. For both cases, the toolkit offers four variations in terms of responsive web design , which serve different resolutions and device types: mobile phones, portrait and landscape tablets, and PCs with low and high ( widescreen ) resolution. The width of the columns automatically adapts to the available window width.
Using the configuration style sheet, the developer has the option of adapting the number and width of the columns, the distance between the columns and the overall width of the layout to suit his needs.
With Release 4, the grid system has been adapted to the CSS Flexbox system in order to adapt more flexibly to the existing window size: The basic principle of the twelve-column grid was retained in Bootstrap 4, and the responsive grid was refined to five viewport widths. While the grid in Bootstrap 3 was essentially still implemented with the CSS property float , which was never intended for complex layouts, the CSS layout standard Flexbox allows the definition and arrangement of flexible boxes in Bootstrap 4. From version 4, browsers are Internet Explorer 9 and lower no longer supported due to lack of Flexport implementation.
Basic CSS stylesheet
Bootstrap contains a number of stylesheets which contain basic style definitions for all major HTML components. These ensure a uniform, modern appearance for text formatting, tables and form elements across browsers and systems. The developer benefits from the experience gained in the development and design of Twitter and can fall back on tried and tested design decisions and proven design patterns for the front end design. Bootstrap 4 has been expanded to include a wide range of new utility classes that can be used to define frames, fillets, colors, dimensions, etc.
In addition to the regular HTML elements, Bootstrap contains other frequently used interface elements. These include buttons with extended functionality (e.g. grouping buttons or buttons with dropdown options), navigation elements (navigation lists and bars, horizontal and vertical tabs, breadcrumb navigation , pagination , etc.), labels, extended typographical options, miniature views, formatting for notification messages and progress bars .
With Bootstrap 4, the cards component was introduced, which enables the integration of images, texts, lists, buttons and navigation bars in cards, the head and foot areas of which can be optically separated. With Flexbox, several cards can be placed next to each other at the same height. The unrelated cards of a deck of cards have the same as groups. The CSS property card-columns can be used to organize the cards in a similar way to content in the Pinterest app, but from top to bottom and from left to right.
The following example illustrates how it works. The HTML source code defines a simple search form and a list of results in the form of a table. The page consists of regular, semantically used HTML5 elements as well as some additional CSS class information according to the Bootstrap documentation.
- A description of the Hackweek concept in the official Twitter blog
- Bootstrap - the official website contains the documentation and download options
- German documentation - an unofficial German translation of the bootstrap documentation
- Bootstrap page at Github (English)
- Twitter Bootstrap tutorial. Help to all elements in the W3C (English)
- Release 4.5.2 . August 6, 2020 (accessed August 7, 2020).
- getbootstrap.com .
- Mark Otto: Bootstrap from Twitter. August 19, 2011, accessed August 17, 2015 .
- Mark Otto: Bootstrap in A List Apart # 342. January 17, 2012, accessed February 25, 2012 .
- Mark Otto: Building Twitter Bootstrap. January 17, 2012, accessed February 25, 2012 .
- pull oneself up by one's bootstraps - Wiktionary
- Bootstrap, from Twitter. Retrieved February 25, 2012 (official project page on GitHub).
- Mark Otto: Say hello to Bootstrap 2.0. January 31, 2012, archived from the original on February 3, 2012 ; accessed on February 25, 2012 (English).
- less / bootstrap.less at master from twitter / bootstrap. Retrieved September 12, 2014 (The bootstrap.less stylesheet in the Bootstrap repository on GitHub).
- less / variables.less at master from twitter / bootstrap. Retrieved February 25, 2012 (The variables.less stylesheet in the Bootstrap repository on GitHub).
- Customize and Download. Retrieved February 25, 2012 (The "Customize" option in the Bootstrap documentation).
- Scaffolding. Retrieved February 25, 2012 (description of the grid system in the Bootstrap documentation).
- Flexbox. Retrieved on March 24, 2017 (description of the Flexbox system in the Mozilla Developer Network).
- Base CSS. Retrieved February 25, 2012 (Description of Base CSS styling in the Bootstrap documentation).
- Alexander Neumann: Twitter releases the HTML5 framework Bootstrap 2.0. In: heise Developer. February 2, 2012, Retrieved February 25, 2012 .
- Dieter Petereit: Bootstrap: CSS- and HTML5-based WebApp-Toolkit from Twitter. In: t3n. August 23, 2011, accessed February 25, 2012 .
- Components. Retrieved February 25, 2012 (description of the additional components in the Bootstrap documentation).