Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint.
Originally released on August 19, 2011, we’ve since had over twenty releases, including two major rewrites with v2 and v3.
With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet.
Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
Bootstrap 4 is completely free to download and use!
Bootstrap is a free front-end framework for faster and easier web development.
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
Bootstrap also gives you the ability to easily create responsive designs.
There are two ways to start using Bootstrap 4 on your own web site.
You can:
1. Include Bootstrap 4 from a CDN.
Example:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/
bootstrap/4.4.1/css/bootstrap.min.css">
2. Download Bootstrap 4 from getbootstrap.com
Bootstrap 4 uses HTML elements and CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
Bootstrap 4 is mobile-first
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
Need of Bootstrap
1. It contains mobile first styles throughout the entire library, instead of using them in the separate files.
2. With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation.
3. It is supported by all popular browsers and its responsive CSS adjusts to Desktops, Tablets and Mobiles.
4. Provides a clean and uniform solution for building an interface for developers.
5. It contains beautiful and functional built-in components which are easy to customize.
6. It is an open source and provides web based customization.
| BOOTSTRAP3 | BOOTSTRAP4 |
|---|---|
| Bootstrap3 has 4 tier grid system (xs, sm, md, lg) | Bootstrap4 has 5 tier grid system (xs, sm, md, lg, xl) |
| Bootstrap3 has .img-responsive class | Bootstrap has .img-fluid class |
| Bootstrap3 uses classes for media objects, such as .media, .media-body, .media-object, .media-heading, .media-right, .media-left, .media-list and .media-body | Bootstrap4 uses just .media class for media objects |
| Bootstrap3 displays the checkboxes and radio buttons by using .radio, .radio-inline, .checkbox, or .checkbox-inline classes | Bootstrap4 displays the checkboxes and radio buttons by using .form-check, .form-check-label, .form-check-input, or .form-check-inline classes |
| Bootstrap3 fix the navbar to top or bottom by using .navbar-fixed-top and .navbar-fixed-bottom classes | Bootstrap4 fix the navbar to top or bottom by using .fixed-top and .fixed-bottom classes |
| Bootstrap3 uses .item class for carousel items. | Bootstrap4 uses .carousel-item class for carousel items. |
| In Bootstrap3 .btn-xs class is available | In Bootstrap4 only .btn-sm and .btn-lg classes are available and dropped the .btn-xs class |
| Bootstrap3 doesn't include .nav-inline class. | Bootstrap4 includes navs as inline by using the .nav-inline class. |
We have explore history of Bootstrap in brief and some basic concept of Bootstrap . We explained Why there is need of migration of Bootstrap3 older version to Bootstrap4 , more importantly differences between Bootstrap3 and Bootstrap4. Also discuss the modified classes of Bootstrap4. We covered some really interesting things of Bootstrap4, Which is very usefull for any website or webapp or mobileapp. Friends this is just a start , some more will be surely in Future , Your advice for any improvement and feedback is important for me.
