First Bootstrap page
A first page combines the HTML5 skeleton, the CDN links, a container and a few components.
In this page:
Syntax
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<!-- content -->
</body>
</html>First Bootstrap page
Start from the standard HTML5 template with the viewport meta tag, add the Bootstrap CSS link, then build content with a container, a navbar, a jumbotron-style section and buttons. Save it as an .html file and open it in the browser.
Note:
Bootstrap's own starter template is the best skeleton to copy.
Example: First Bootstrap page
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<nav class="navbar navbar-dark bg-dark">
<div class="container"><a class="navbar-brand" href="#">My First Page</a></div>
</nav>
<div class="container py-5">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<h1 class="display-5 fw-bold">Welcome</h1>
<p class="fs-5">This page uses a navbar, a container, utilities and a button.</p>
<a class="btn btn-primary btn-lg" href="#">Get started</a>
</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Missing the doctype
- Forgetting the container
- Loading the CSS after your own CSS
Chapter Summary
- Use the HTML5 skeleton
- Add viewport and CSS link
- Build inside a container
- Add JS bundle for interactive parts
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: