0
0
Bootsrapmarkup~5 mins

Why Bootstrap exists

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Bootstrap exists to help people build good-looking websites quickly without needing to write a lot of CSS from scratch.

You want to create a website fast with ready-made styles.
You need your website to look good on phones, tablets, and computers without extra work.
You are new to web design and want easy tools to make buttons, menus, and layouts.
You want your website to work well on different browsers without fixing many style problems.
You want to use a popular system that many developers know and support.
Syntax
Bootsrap
No special code syntax because Bootstrap is a CSS and JavaScript library you add to your project.

Bootstrap is added by linking its CSS and JS files in your HTML.

It provides classes you add to HTML elements to style them easily.

Examples
This line adds Bootstrap's styles to your webpage.
Bootsrap
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
This button uses Bootstrap classes to look styled and clickable.
Bootsrap
<button class="btn btn-primary">Click me</button>
Sample Program

This simple webpage uses Bootstrap to style text and a button. It looks good on phones and computers without extra CSS.

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">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container mt-5">
    <h1 class="text-center text-primary">Welcome to Bootstrap</h1>
    <p class="lead text-center">This page uses Bootstrap to look nice on all devices.</p>
    <div class="d-flex justify-content-center">
      <button class="btn btn-success">Click Me</button>
    </div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Bootstrap saves time by giving you ready styles for common elements like buttons, headings, and layouts.

It uses a grid system to help arrange content nicely on different screen sizes.

Remember to include Bootstrap's CSS link in your HTML to use its features.

Summary

Bootstrap helps build websites faster with ready-made styles.

It makes websites look good on phones, tablets, and desktops automatically.

You use Bootstrap by adding its CSS and applying special classes to your HTML elements.