Bootstrap 4 Starter Template

Bootstrap 4 was released as a final public version. This essentially means you should prepare migrating from previous version and use the new version for building any new websites. Whether you are migrating or starting a new site, you should first learn the bare minimum or starter template. In this tutorial we will explain how to create base Bootstrap 4 starter template for starting your projects with simple examples.

Using Bootstrap 4 Starter Template

  1. Downloading Bootstrap source files
  2. Hosting Bootstrap 4 files on your server
  3. Using Bootstrap 4 starter template with CDN links
  4. Customizing Bootstrap 4 components
  5. Taking starter template further
  6. Using bundled script file in version 4
  7. Using static site generators

1. Downloading Bootstrap 4 Source Files

As an end user, there are two ways to make use of Bootstrap CSS and JavaScript files. One is to download the precompiled files and include them in your projects and the second is to make use of the CDN links.

You can learn more about getting Bootstrap files in getting started with Bootstrap 4 article.

2. Using Bootstrap Files on Your Own Server

You can download the precompiled CSS and JavaScript files from the GitHub repository. The zip file should have CSS and JS folders. Below are the files available inside CSS folders:

Bootstrap Precompiled CSS Files
Bootstrap Precompiled CSS Files

There are three versions of regular CSS files, minified versions and source map files.

  • Default CSS
  • Grid only version and
  • Reboot only version

On a production server it is recommended to use the minified version “bootstrap.min.css” for all your needs. The source map files are used to map between the source and the precompiled minified versions. You don’t need to use reboot, grid and map files for regular usage on the sites.

When you only use “bootstrap.min.css” file on your site, some browsers like Safari will show error or warning in developer console that source map file is missing. In order to fix the error, open the Bootstrap CSS file and remove the last line “/*# sourceMappingURL=bootstrap.min.css.map */“.

The JS folder will have only two files “bootstrap.js” and “bootstrap.bundle.js“. The “bootstrap.js” file does not include Popper script but the bundle version includes the Popper script files. But both the versions does not include jQuery script, hence you should include the jQuery separately.

Bootstrap 4 JavaScript Files
Bootstrap 4 JavaScript Files

With the above understanding the complete starter template for Bootstrap 4 should look like below:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
Add Your Content Here
<!-- Bootstrap 4 Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>

If you have noticed properly, there are many additional tags and scripts in the starter template.

  • Bootstrap uses HTML5 DOCTYPE for the templates. Hence, ensure to include <!DOCTYPE HTML> at the start of your HTML template in order to avoid unexpected behavior.
  • The viewport meta tag is used to ensure the responsiveness of the template based on the rendering device.
  • Add jQuery library before the “popper.min.js” and “bootstrap.min.js” scripts.
  • jQuery and Popper script files are not part of the download from GitHub, so you can just use the CDN link as explained in the next section.
  • Or you should download the jQuery from CDN link and Popper script from Popper site and upload them on your site’s “assets/js/” folder.
  • Remember jQuery and Popper scripts are essential for Bootstrap plugins to work properly.
  • Bootstrap uses the slim jQuery version, instead you can also use the standard library from Google.
  • Popper is a JavaScript library mainly used for positioning floating elements like tooltip component in Bootstrap 4.

Note we have used “assets/css/bootstrap.min.css” and “assets/js/bootstrap.min.js” as file path. It is a good habit to keep all CSS and JS files in separate folder so that it is easy to manage. This essentially means you should create corresponding folders on your server and upload the Bootstrap CSS and JS files manually. Also keep the images in separate “images” folder and HTML files on the root of your site. So the entire structure should look something like below on your server:

Bootstrap 4 Theme File Structure
Bootstrap 4 Theme File Structure

The “Theme Folder” in the above example is your site’s root folder which should be your domain or subdomain or subdirectory.

Bootstrap 4 alpha version was using Tether script for tooltip and popover positioning which is replaced by Popper from beta version.

Offer: Get 92% discount of Mobirise Bootstrap site builder.

3. Using Starter Template with CDN

Hosting all needed files on your server is way but it will impact the loading speed and hosting capacity. So, we recommend to use CDN links for CSS and JS files instead of hosting them on your own server. This will ensure the fast delivery of those static files and improve the page loading speed.

Below is a Bootstrap 4 starter template with CDN links for CSS and scripts. You can simply add content on the body section to start building your site or theme.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
Add Your Content Here...
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

4. Customizing Bootstrap Source Files

Using the complete template files are not required in all cases. For example, when you want to use only Bootstrap 4 buttons then you can only use the appropriate styles for the buttons. Bootstrap offers a customizer for the previous version 3.3.7 where you can choose what components are required and generate the precompiled files.

Customizing Bootstrap Files
Customizing Bootstrap Files

At this moment there is no customizer available for Bootstrap 4 version. We believe this will be available once the version 4 of Bootstrap 4 is stabilized.

5. Taking Starter Template Further

Now that you have your final starter template either hosted on your server or using CDN links. The next step is to add content and start building your site. Below is one simple example in which we have created different contextual buttons using default Bootstrap button classes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

The output should look like below on the browser:

Basic Bootstrap Buttons

Ideally there is no need of using jQuery, popper and Bootstrap script files for creating simple buttons which is controlled through CSS. We have shown the example for the sake of completeness of the starter template. Also when you add more components, the script files should be included.

6. Using Bootstrap Bundle Script Version

As explained above, Bootstrap 4 has a bundled script file combining “bootstrap.min.js” and “popper.min.js“. So if you want to use the bundled version then modify the starter template like below using “bootstrap.bundle.min.js” file.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
Add Your Content Here
<!-- Bootstrap 4 Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>

7. Using Static Site Generators

It is easy to create a static website using Bootstrap 4 starter template, but modifying multiple static files on a bigger site will consume lot of time. A single webpage contains different sections like header, main content, footer and sidebar. All sections other than the main content are used site wide with the same information. Static generators use the concept of partials by having the base templates for each of the sections like header, footer and sidebar. Finally all these base templates are assembled with the main body content on each pages separately.

Whenever there is a change required on the header, footer and sidebar, you can modify the base templates instead of modifying each and every page individually. When the site is ready you can generate the HTML, CSS and JavaScript files to upload them on your server.

One of the popular static site generator is Harp.js which you can install on your local machine for further development of the starter template. Remember Harp.js needs Node.js/NPM as a dependency hence you should have installed these components beforehand.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

Leave a Comment