Day 1: Bootstrap 4 CDN and Starter Template

Introduction Day 2: Bootstrap 4 Grid

Hello and welcome to the first day of the 14 days of Bootstrap 4 series 🙂 Today we will make the first step towards using Bootstrap 4!

In order to see the Bootstrap 4 capabilities and use it, you will need to import the Bootstrap 4 CSS and JS files into your HTML file. In this article you will find how to use the Bootstrap 4 CDN or download your files locally. You might have heard the phrase “how to install Bootstrap 4” before but there really isn’t anything to install. Getting started with Bootstrap 4 will just mean adding links to your page.

The article will be divided into the following parts:

Bootstrap 4 CDN
Downloading Bootstrap 4 Files Locally
Using a Package Manager
Additional Required Tags for Your Page
Ok, Now What?
- Bootstrap 4 Reboot
Further Reading

Let’s get the party started!

Photo credit to YaroFlasherfor his shot.

Bootstrap 4 CDN

In order to use the Bootstrap 4 components, you need to import the CSS and JS files into your application. The fastest way is to use the Bootstrap 4 CDN. CDN is short “content delivery network”. You can read more about CDNs and how they work here.

You will need to add the CSS file between the <head></head> tags:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

And you will need to add the JavaScript libraries inside <script></script>tags at the end of the document. The Bootstrap 4 Javascript relies on jQuery and PopperJs, so you first need to import these 2.

<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Taking into consideration all of the things mentioned above, we get the following template. You can use it as a Bootstrap 4 starter template in each of the following days (you first set up this structure and then add components).

<!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.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Downloading Bootstrap 4 Files Locally

If you don’t want to depend on CDNs, you can download the necessary files and include them (using your local path). You can get the Bootstrap source files from here. Once you have your CSS and JS, you will need to import them like in the case of the CDN, only you will use your local path:

<!-- for css -->
<link rel="stylesheet" href="path/to/file/bootstrap.min.css">

<!-- for javascript -->
<script type="text/javascript" src="path/to/file/bootstrap.min.js"></script>

Using a Package Manager

If you are familiar with package managers, you can try one of the following. If you haven’t used one before skip to the next section for now.

Additional Required Tags for Your Page

You should be sure you have the following tags in your page (already included in the starter template):

HTML5 doctype – if you don’t have it, some unpredictable behaviour may occur.

<!doctype html>

the responsive meta tag.

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

This is ensures that the page displays correctly on mobile and that you will be able to zoom on in.

Ok, Now What?

Is starting a project with Bootstrap 4 different from creating a normal HTML file? Yes, because you will be able to add multiple pre-built components while creating your page. But also because Bootstrap 4 will overwrite the default browser styling that is displayed in a simple HTML file. This means that you will not have to add any special classes or components in order to start seeing changes.

Bootstrap 4 Reboot

Let’s start with a very simple example. I will write some simple HTML elements: headings, paragraphs, links, tables and links. The code will be the same for both files (with and without Bootstrap 4):

<h4>Heading</h4>
<h1>Hello, World!</h1>

<h4>Paragraph</h4>
<p>This is a paragraph.</p>

<h4>Link</h4>
<a href="#a">This is a link!</a>

<h4>Table</h4>
<table>
    <caption>
      This is an example table, and this is its caption to describe the contents.
    </caption>
    <thead>
      <tr>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody> 
</table>

<h4>List</h4>
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li
</ul>

And the results will be different:

See the Pen HTML Starter Template by cristina (@cristinaconacel) on CodePen.

This is how the simple HTML page looks like.

See the Pen Bootstrap 4 Starter Template by cristina (@cristinaconacel) on CodePen.

And this is how the Bootstrap 4 page looks like.

If you look closely at the two examples, you will be able to see some differences:

the fonts are different;
the default spacing varies;
the styling for the link looks different.

Of course, these differences are not ground-breaking and you could easily write them yourself in a CSS file. But when you start creating complex pages, writing the CSS yourself becomes a much more difficult task.

You would need to test your code on all browsers and devices and make sure it is responsive. You would also need to design your components with a hierarchy in mind that will not make classes redundant. It is possible that you would end up trying to recreate what Bootstrap 4 is already doing. So it is much easier to go with their already implemented and tested library.

In the next days we will take a look at the most important parts of Bootstrap 4. We will see why they are useful and how to use them, so you don’t have to “reinvent the wheel”.