0
0
Bootsrapmarkup~5 mins

Component-based framework philosophy in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Component-based frameworks help build websites by breaking the page into small, reusable parts. This makes building and fixing websites easier and faster.

When you want to reuse buttons or menus on many pages without rewriting code.
When building a website with many repeating sections like cards or alerts.
When working with a team so everyone can work on different parts without confusion.
When you want to keep your website organized and easy to update.
When you want to quickly change the look of many parts by editing just one component.
Syntax
Bootsrap
<div class="component-name">
  <!-- component content here -->
</div>
Bootstrap provides ready-made components like buttons, cards, and navbars using specific class names.
You add these classes to HTML elements to use the component styles and behavior.
Examples
This creates a blue button using Bootstrap's button component classes.
Bootsrap
<button class="btn btn-primary">Click me</button>
This shows a green alert box to give positive feedback to users.
Bootsrap
<div class="alert alert-success" role="alert">
  Success! Your action worked.
</div>
This creates a navigation bar at the top of the page with a light background.
Bootsrap
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
</nav>
Sample Program

This example shows a simple webpage using Bootstrap components: a colored header, a green button, a warning alert, a card with a title and button, and a footer. Each part is a reusable component styled by Bootstrap classes.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Components Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <header class="p-3 bg-primary text-white">
    <h1>My Website</h1>
  </header>
  <main class="container mt-4">
    <button class="btn btn-success mb-3">Save</button>
    <div class="alert alert-warning" role="alert">
      Warning! Check your input.
    </div>
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">This is a simple card component.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </main>
  <footer class="text-center p-3 mt-4 bg-light">
    &copy; 2024 My Website
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Bootstrap components use CSS classes to add style and behavior without writing extra CSS.

Using components keeps your code clean and easy to maintain.

Always include the Bootstrap CSS and JS files to make components work properly.

Summary

Components break a webpage into small, reusable parts.

Bootstrap provides many ready-to-use components with simple class names.

Using components saves time and keeps your website organized.