What is Bootstrap?
Bootstrap enables front-end web developrs to quickly prototype their ideas or build an entire app with Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. The framework is compatible with the latest versions of all modern browsers. Bootstrap provides CSS design for HTML page layout, typography, buttons, form components, navigation and other components.
Bootstrap 3 vs Bootstrap 4
Bootstrap 4 is the latest version of Bootstrap which is fully responsive (primarily designed for mobile devices), faster and easier to customize thanks to Sass. Most of the components are redesigned in Bootstrap 4 like tables, forms, grids, navbars and more.
Bootstrap 4 officially support the latest, stable releases of all major browsers and platforms. If you need to support Internet Explore 8 or 9, use Bootstrap 3 which is the most stable version of Bootstrap. However, Bootstrap team has discontinued the development of version 3 which means there won't be any new feature addition in future.
Moreover, Bootstrap 4 does not support version 3 Glyphicons. Use Font Awesome icons instead.
Download Bootstrap 4
v4.1.0. There are multiple ways to include Bootstrap in your project.
Clone from GitHub
You can directly clone Bootstrap repository from GitHub:
# clone the repo $ git clone https://github.com/twbs/bootstrap # open directory $ cd bootstrap # fetch remote branches $ git fetch # switch to version 4 development branch $ git checkout v4-dev
Include CSS in
<body> closing tag like following:
<!DOCTYPE html> <html lang='en'> <head> ... <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> </head> <body> ... <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </body> </html>
Don't forget to add
#install with npm $ npm install bootstrap #install with RubyGems $ gem install bootstrap -v 4.1.0 #install with Bower $ bower install bootstrap#v4.1.0 #install with Composer $ composer require twbs/bootstrap:4.1.0 #install with NuGet PM> Install-Package bootstrap -Pre PM> Install-Package bootstrap.sass -Pre
Bootstrap 4 standards
Since Bootstrap 4 is "mobile-first" and follows HTML5 standards, it requires HTML5 doctype. You should always include HTML5 doctype at the start of your web page. If you do not include this, you may see weird styling behaviors on various browsers.
<!DOCTYPE html> <html lang="en"> ... </html>
Bootstrap is designed mobile first, a strategy in which the code is optimized for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Quick start: build your Bootstrap 4 web page
<!DOCTYPE> preamble, links required to CSS and JS files, as well as the viewport
Another option is to download any of our free themes and modify it. All our themes and UI kits come with Bootstrap and provides an excellent opportunity to quickly get started with it.
That's all folks. In this tutorial, we learned what is Bootstrap 4 and how to get started with it along with an example. In future tutorials, we will cover Bootstrap 4 layouts, content sections, components and utilities in details.