0
0
Bootsrapmarkup~5 mins

First Bootstrap page

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Bootstrap helps you quickly make good-looking websites without much work. It gives ready styles and layouts so your page looks nice on all devices.

You want a simple, clean website fast without designing styles yourself.
You need your page to look good on phones, tablets, and computers automatically.
You want to use buttons, forms, and grids that already look professional.
You are learning web design and want to see how a styled page works.
You want to save time by using a popular style framework.
Syntax
Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>Hello, Bootstrap!</h1>
    <p>This is your first Bootstrap page.</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Use the container class to center and add space around your content.
Include Bootstrap CSS in the <head> and Bootstrap JS before the closing </body> tag.
Examples
A simple container with heading and paragraph styled by Bootstrap.
Bootsrap
<div class="container">
  <h1>Welcome!</h1>
  <p>This page uses Bootstrap styles.</p>
</div>
A blue Bootstrap button using the btn and btn-primary classes.
Bootsrap
<button class="btn btn-primary">Click me</button>
Adds margin on top using Bootstrap spacing utility mt-5.
Bootsrap
<div class="container mt-5">
  <h2>More space on top</h2>
</div>
Sample Program

This page shows a blue navigation bar on top, a heading, a paragraph, and a green button. It uses Bootstrap classes for colors, spacing, and layout.

Bootsrap
<!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.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">MySite</a>
    </div>
  </nav>
  <main class="container mt-4">
    <h1>Welcome to Bootstrap!</h1>
    <p>This is your first page using Bootstrap styles and layout.</p>
    <button class="btn btn-success">Get Started</button>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Always include the viewport meta tag for proper mobile scaling.

Use Bootstrap classes to quickly add colors, spacing, and layout without writing CSS.

You can customize Bootstrap later, but start simple to learn how it works.

Summary

Bootstrap helps you build nice-looking pages fast with ready styles.

Include Bootstrap CSS and JS files from a CDN to start using it.

Use Bootstrap classes like container, btn, and navbar to style your page easily.