Bootstrap Get Started

In this chapter we make a first web page with Bootstrap 5. You only need a text editor and a browser. Bootstrap has a CSS file and a JavaScript file, and we link both from a CDN, so there is nothing to install.

The starter template

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My first Bootstrap page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, Bootstrap!</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

• <!doctype html> tells the browser to use the modern standards mode. Bootstrap needs it.
• The viewport meta tag makes the page responsive on phones.
• The CSS link goes in the head. The JavaScript bundle goes at the end of the body. The bundle file includes Popper, which is needed for dropdowns, tooltips and popovers.

A first example

<div class="container">
  <h1 class="display-5">Hello, Bootstrap!</h1>
  <p class="lead">This page uses the Bootstrap 5 CSS and JavaScript.</p>
  <button type="button" class="btn btn-primary">Primary button</button>
  <div class="alert alert-success mt-3" role="alert">It works. Bootstrap is loaded.</div>
</div>

The box above is a real preview, made with the same code. You can click on it.

Important rules

• Always write the <!doctype html> line, and the lang attribute on the html tag.
• Do not forget the viewport meta tag, or the page will not be responsive on mobile devices.
• Load the Bootstrap CSS before your own CSS file, so you can override it.
• You do not need jQuery with Bootstrap 5.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.