Ei tutorial-e amra Bootstrap 5 install kore prothom ekta page banabo — ekdom shorbo prothom step theke.

Step 1: Ekta HTML file toiri koro

Prothome tomar computer-e ekta folder banao (e.g. my-site) ar tar bhitor ekta file toiri koro naame index.html. Editor hishebe VS Code use korte paro (free).

Step 2: Basic HTML boilerplate lekha

File-er bhitor ei code paste koro:

<!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>
  </head>
  <body>
    <h1>Hello Bootstrap!</h1>
  </body>
</html>

Step 3: Bootstrap CSS add koro (CDN)

</head>-er thik age ei line add koro:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Ekhon browser-e file open korle Bootstrap-er font ar style automatic apply hoye jabe.

Step 4: Ekta container ar row banao

Body-r bhitor emon likho:

<div class="container py-4">
  <div class="row">
    <div class="col-md-6">Left side</div>
    <div class="col-md-6">Right side</div>
  </div>
</div>

container = layout box, row = ek line, col-md-6 = onno der modhye 50% width niye niba (medium screen theke).

Step 5: Ekta button add koro

<button class="btn btn-primary">Click me</button>

Class-gulo (btn, btn-primary) Bootstrap-er ready-made design. Nijer CSS lekhar dorkar nei!

Step 6: JS bundle add koro (last step)

</body>-er thik age:

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

Eta modal, dropdown, carousel — sob interactive component-er jonno dorkar.

Er por ki?

Ekhon tumi ready! CodeShikhi-r Components page theke ready-made design copy-paste kore nijer page-e use koro. Prottek component-e Live Preview + Copy button ache.

Getting Started with Bootstrap 5 — Step by Step Guide