Basic Usage

go.raybo.org/49jH

Speaker Notes:

This version of bootstrap has a lot of different installation options. Let's go through them.

Installation Options

Speaker Notes:

  1. The fastest way is to use CDNs. A CDN is a content delivery network or a server that hosts libraries like Bootstrap. When using one of these links, the browser checks to see if there's already a copy from when you visited another site.

  2. You can also install Bootstrap by downloading the pre-compiled CSS and JavaScript files. That works well if you want to work without an internet connection.

  3. You can also download the source files. That means all of the files that the developers used to create bootstrap, which means the original sass files and documentation. You probably only want to do this if you want to contribute to the project or customize bootstrap.

1.The last way is to use a package manager. That means using something like webpack, parcel, npm or others. It's meant for advanced users who want to really customize things.

There's also a special project called the NPM Starter Kit, which you can download at this link. It's an attempt to create a Github repo that you can use as a starter kit, but it's under heavy development.

CDN Template 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" />
    <title>Bootstrap 5 Site</title>
  </head>
  <body>
    <main class="container">
      <h1>Headline</h1>
    </main>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

I normally use the CDN links, unless I know I'm going to work offline. Here's a basic template you can use with the CSS and JavaScript installed.

I sneaked in a copy of Bootstrap Icons in here, which I really enjoy, but it's also optional, so feel free to remove it. I almost always have a tag like the main tag here with a class of container which sets up the basic bootstrap grid and some text.