What is Bootstrap?

Boostrap is an open source framework to create web applications with HTML, CSS & JavaScript. It is world most's popular and widely used framework to develop a responsive, mobile-first web application on the internet.

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

In order to use Bootstrap 4 in your project, you can either download the source code and include files in your project or use Bootstrap CDN to directly include compiled CSS & JavaScript. Bootstrap 4 is currently available in 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

dist folder includes compiled CSS bundles and JavaScript plugins which you can easily add into your project. This method is fairly advance way to include Bootstrap but it also provides an opportunity to mess around with source code.

Bootstrap CDN

If you do not want to play with source code and just need Bootstrap 4 in your project, Bootstrap CDN is the most easiest way to get started. It delivers the cached version of Bootstrap's compiled CSS & JavaScript.

Include CSS in <head> section of your page and JavaScript files just before <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 jQuery and Popper.js in your project if you use compiled Bootstrap JavaScript files.

Package Managers

You can include Bootstrap's source Sass and JavaScript files into your project via Bower, Composer, RubyGems, NuGet, or npm.

#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

Self Hosted

If you want to host Bootstrap 4 CSS and JavaScript files at your own server, go to download page and follow the instructions there.

Bootstrap 4 standards

1. HTML5 <DOCTYPE>

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>
2. Responsive <META> tag

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Quick start: build your Bootstrap 4 web page

Although, Bootstrap 4 developers provide few basic examples to start quick, but it is very simple to start from scratch as well. The first step is to download the Bootstrap (follow any of above download methods) CSS, JavaScript and fonts files and copy them in your project root directory. Bootstrap does not come with any HTML code but you can use the following template as a starter for your web page. This template includes the necessary <!DOCTYPE> preamble, links required to CSS and JS files, as well as the viewport <META> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  </head>
  <body>
    
		<!-- Add Your Content Here -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  </body>
</html>

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.

Conclusion

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.