Introduction to Bootstrap
1. What is Bootstrap?
A Website is called "Responsive" If it is compatible with the devices with different screen sizes such as computers, tablets, mobiles.
Before 2013, a website wanted to be compatible with computers and mobiles, programmers had to write two different projects. The first project was a web application for computer or tablet users and the second project was a web application for the users of devices with small screens like mobiles. This actually caused difficulties in maintenance and upgrading of website because you had to do it for both projects. In addition, both of them had to be deployed on two different domains, for example:
- http://somewebsite.com
- http://mobile.somewesite.com
2013 is considered as the Year of "Responsive" web design because users are increasingly fond of small hand devices such as tablets and smartphones. The behavior of majority of users has changed. They gradually change into reading their news through mobile devices.
Bootstrap
Bootstrap is a free, open source framework, based on HTML, CSS & Javascript. It is created to build the website interfaces compatible with all equipment with different screen sizes.
The Bootstrap includes available basic things such as typography, forms, buttons, tables, navigation, modals, image carousels and others. It also has a lot of Components, Javascripts to support designing your Reponsive easily, in friendly manner and faster.
At present, the Bootstrap is one of frameworks used most in the world to create Responsive Websites. The Bootstrap has created a separate standard and is preferred by programmers. Basically, the Bootstrap has 3 advantages:
- Easy-to-use: Because the Bootstrap is built on HTML, CSS & Javascript.
- Responsive: The Bootstrap has built-in "Responsive Css" compatible with different devices, therefore, you only need to learn how to use them. This feature helps save a lot of time for users when creating friendly websites.
- Compatible with browsers: It is compatible with all browsers (Chrome, Firefox, Internet Explorer, Safari, Opera). However, for IE, Bootstrap 4 supports only IE10 or higher.
History of Bootstrap:
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.
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. 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.
Bootstrap Versions:
Version | Release dat | Main content |
1.0 | 19/08/2011 | The first version of Bootstrap, not supporting Mobile. |
2.0 | 31/01/2012 | Add 12-column Grid-Layout . Add some new components and change a few available components, not supporting Mobile. |
3.0 | 19/08/2013 | The components are redesigned by a flat design style and support Mobile devices for the first time. |
4.0 | 19/01/2018 | Bootstrap 4 almost completely rewritten from Bootstrap 3, and is evaluated to be much easier to use than the previous version. |
Bootstrap Tutorials
- Bootstrap Jumbotron Tutorial with Examples
- Bootstrap Dropdowns Tutorial with Examples
- Bootstrap Alerts Tutorial with Examples
- Bootstrap Buttons Tutorial with Examples
- Bootstrap Button Group Tutorial with Examples
- Bootstrap Popovers (Tooltips) Tutorial with Examples
- Bootstrap Spinners Tutorial with Examples
- Introduction to Bootstrap
- Bootstrap Grid System Tutorial with Examples
- Bootstrap Cards Tutorial with Examples
- Bootstrap Containers Tutorial with Examples
- Bootstrap Nav Tab/Pill Tutorial with Examples
- Bootstrap NavBars Tutorial with Examples
- Bootstrap Tables Tutorial with Examples
- Bootstrap Modal Tutorial with Examples
- Bootstrap Forms Tutorial with Examples
- Bootstrap Pagination Tutorial with Examples
- Bootstrap Badges Tutorial with Examples
- Bootstrap Input Group Tutorial with Examples
- Bootstrap List Groups Tutorial with Examples
- Bootstrap ProgressBars Tutorial with Examples
- Bootstrap Collapse and Accordion Tutorial with Examples
- Bootstrap Scrollspy Tutorial with Examples
- Bootstrap Breadcrumb Tutorial with Examples
- Bootstrap Carousel Tutorial with Examples
- Bootstrap Spacing Utilities Tutorial with Examples
- Bootstrap Border Utilities Tutorial with Examples
- Bootstrap Color Utilities Tutorial with Examples
- Bootstrap Text Utilities Tutorial with Examples
- Bootstrap Sizing Utilities Tutorial with Examples
- Bootstrap Position Utilities Tutorial with Examples
- Bootstrap Flex Utilities Tutorial with Examples
- Bootstrap Display Utilities Tutorial with Examples
- Bootstrap Visibility Utilities Tutorial with Examples
- Bootstrap Embed Utilities Tutorial with Examples
Show More