Contents

Chapter 1: Bootstrap 5.0

1. Introduction
2. Containers
3. Grid System
4. Colors
5. Tables
6. Image
7. Jumbotron
8. Alert
9. Button
10. Badges
11. Progress
12. Spinners
13. List-group
14. Cards
15. Dropdowns
16. Collapse
17. Navbar
18. Forms
19. Popover
20. Toasts
21. Utilities
22. Carousel

Compilation-of-Bootstrap-v5.0-Elements (Click Here)

 Bootstrap 5.0

1. Introduction
বুটস্ট্রেপ সাইটস্ট্রে অস্ট্রটাস্ট্রেটটে রেসপটিভ েস্ট্রে রেয়। রেোেস্ট্রে বােবাে রেঞ্জ েস্ট্রে তা আলাো েস্ট্রে েেস্ট্রত হয়না।
getbootstrap.com এই সাইস্ট্রট বুটস্ট্রেস্ট্রপে ইটলস্ট্রেন্ট োখা আস্ট্রে রেগুস্ট্রলা প্রস্ট্রয়াজন েস্ট্রতা আেো আোস্ট্রেে সাইস্ট্রট টনস্ট্রত
পাটে। টুইটাে টটস্ট্রে েখন ইটঞ্জটনয়ােো োজ েেস্ট্রতা তখন সাধােে োস্ট্রজে বাইস্ট্রে এেটা েটিটটশস্ট্রনে েস্ট্রতা হয় রপ্রাস্ট্রজক্ট
েোে, রসখাস্ট্রন এেটা টটে এই getbootstrap.com বানায়, আইটিয়াটা টেস্ট্রলা রে তাো েটে এেবাে লাইস্ট্রেেীটা ততেী েেস্ট্রত
পাস্ট্রে, আোস্ট্রেে CSS এে জনয, তাহস্ট্রল, রসটা বােবাে ইউজ েেস্ট্রত পােস্ট্রবা, োেে এটা অলস্ট্রেটি ভাস্ট্রলােস্ট্রতা েো আস্ট্রে,
হালো রেস্ট্রঞ্জ আবাে ইউজ েো োস্ট্রব। এেটা ওস্ট্রয়বসাইস্ট্রট রেসব েস্ট্রিাস্ট্রনন্ট থাস্ট্রে রেইনটল রসগুস্ট্রলা টেস্ট্রয় এেন লাইস্ট্রেেী
ততটে েস্ট্রেস্ট্রে োস্ট্রত শুধু এগুস্ট্রলা টেস্ট্রয়ই এেটা সু ন্দে েস্ট্রতা েেটিট ওস্ট্রয়বসাইট ততটে েো োয়। এটা আোস্ট্রেে অস্ট্রনে সেয়
বাটেস্ট্রয় রেয়।

এেটা learnbootstrap নাস্ট্রেে র াল্ডাে বাটনস্ট্রয় এে টভতে, index.html টিস্ট্রয়ট েেলাে। index.html এে টভতে, !
রেস্ট্রপ html এে বটি টনস্ট্রয় আসস্ট্রবা। রেইলটন বুটস্ট্রেপ হস্ট্রে টেেু CSS+HTML+JS এে সেটি। এখাস্ট্রন CDN ইউজ েেস্ট্রত
পাটে, contend delivery network. এজস্ট্রনয getbootstrap এখাস্ট্রন রেস্ট্রয়, getstarted এ রেলাে, এেপে, রেই CSS
টলিংে থােস্ট্রব রসটা েটপ েস্ট্রে টনলাে। title এে টনস্ট্রে টলিংেটা বসায় টনলাে।

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

integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous">

ওস্ট্রেে অস্ট্রনে জাভাটিপ্টও আেো সোসটে ইউজ েেস্ট্রবা, এজস্ট্রনয টনস্ট্রে JS রথস্ট্রে েটপ েোে অপশস্ট্রন রেস্ট্রপ েটপ েস্ট্রে
টনলাে। এটাস্ট্রে রপস্ট েেস্ট্রবা, আস্ট্রেে টলিংে অথথাৎ css এে টলিংস্ট্রেে টনস্ট্রে অথবা সবাে টনস্ট্রে বটিস্ট্রত।

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-

JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>

তাহস্ট্রল আোস্ট্রেে বুটস্ট্রেস্ট্রপ োস্ট্রনক্ট েো হস্ট্রয় রেস্ট্রলা। এখন বুটস্ট্রেপ 5 এে রেস্ট্রোন ইটলস্ট্রেন্ট সাস্ট্রপাটথ েেস্ট্রব। এভাস্ট্রব আলাো
েস্ট্রে রোি েটপ না েেস্ট্রত োইস্ট্রল আস্ট্রেে োজ েো োয়, তাে টনস্ট্রে Starter Template রেয়া আস্ট্রে, রেটা েূ লত এেই।
এভাস্ট্রব বুটস্ট্রেপ োস্ট্রনক্ট েস্ট্রে আস্ট্রেেবাে োস্ট্রনক্ট োড়া েু ইবাস্ট্রে এেটা রহিাে আে এেটা পযাোগ্রা টলস্ট্রখ োন েেস্ট্রল রেখা
োস্ট্রব, এটপয়াস্ট্রেি েু ইটা েু ইেেে।

y> CSS এি েোে সাস্ট্রথ সাস্ট্রথ এটপয়াস্ট্রেি রেঞ্জ হস্ট্রলও, JS এে োজ টে রসটা বুঝা োস্ট্রে না। রেটা পেবটতথস্ট্রত বুঝা োস্ট্রব,
রেখাস্ট্রন রোন ইটলস্ট্রেস্ট্রন্টে ওপে জাভাটিপ্ট েো আস্ট্রে। রসস্ট্রেস্ট্রে JS এে টলিংে োড়া োজ েেস্ট্রব না।
2. Containers
Starter Template এ JS এে টিপটগুলা বটি টযাস্ট্রেে টভতস্ট্রে আস্ট্রে, রেগুলা আেো ইউজ েস্ট্রেটেলাে রহি টযাস্ট্রেে টভতস্ট্রে,
বটি টযাস্ট্রেে টভতস্ট্রে থােস্ট্রল প্রথস্ট্রে েস্ট্রন্টন্ডগুলা রলাি েেস্ট্রব পস্ট্রে টিপটগুলা রলাি েেস্ট্রব। এস্ট্রত user েস্ট্রন েেস্ট্রব আোস্ট্রেে
সাইট অস্ট্রনে দ্রুত রলাি হস্ট্রে। োেে প্রথস্ট্রে টিপট রলাি হস্ট্রল টাইে রবটশ লাস্ট্রে। এখন পুস্ট্রোটা েটপ েস্ট্রে টনউ এেটা
html াইস্ট্রল টনই।

বুটস্ট্রেপ সিস্ট্রেথ জানস্ট্রত হস্ট্রল আোস্ট্রেে টেেু ক্লাস সিস্ট্রেথ জানা লােস্ট্রব, এেেস্ট্রধয এেটা হস্ট্রলা container class সিস্ট্রেথ
জানা। আবাে আোস্ট্রেে েটে রোন টনজস্ব টসএসএস এি েো লাস্ট্রে তাহস্ট্রল অবশযই রসটা এই bootstrap এে css টলিংস্ট্রেে
পস্ট্রে এি েেস্ট্রবা। রেটা লাস্ট্রস্ট থােস্ট্রব, রসটা লাস্ট্রস্ট এিাই হস্ট্রব, আে বুটস্ট্রেপ এে টিজাইনস্ট্রে ওভাে োইট েেস্ট্রত পােস্ট্রবা।
আবাে এখাস্ট্রন রেই টাইস্ট্রটলগুস্ট্রলা (containers, grid system...) রেওয়া থােস্ট্রব, রসগুস্ট্রলা টেস্ট্রয় getbootstrap.com এ
টেস্ট্রয় সােথ টেস্ট্রবা। তাহস্ট্রল এইসিস্ট্রেথ টিস্ট্রটইলস েস্ট্রল আসস্ট্রব। েূ লত এখাস্ট্রনে সবস্ট্রোি রসখান রথস্ট্রেই বাোই েস্ট্রে রনওয়া
টেেু টেেু ।

.container টলস্ট্রখ এন্টাে টেস্ট্রল এই ক্লাস টিস্ট্রয়ট হস্ট্রব div এে টভতস্ট্রে। style.css টনস্ট্রয় রসটা টলিংে েস্ট্রে টেলাে (link:css)।
এখন এটাস্ট্রে css এ টি াইন েেলােঃ padding: 20px; আে বিথাে টেলাে ২টপস্ট্রেল (container ক্লাস ওভােোইট)।
তাহস্ট্রল রেখা োস্ট্রে বাে রথস্ট্রে ১৫ টপস্ট্রেল আে িান রথস্ট্রে ১৫ টপস্ট্রেল অস্ট্রটা োটজথন হস্ট্রয় রেস্ট্রে।

X> টেন্তু েটে ক্লাস্ট্রসে নাে container না রেস্ট্রখ অনয টেেু োটখ তাহস্ট্রল আে এই োটজথনটা পাস্ট্রবা না।

 আস্ট্রেেটা ক্লাস আস্ট্রেঃ .container-fluid, which is width: 100% at all breakpoints

Y> VSCode রথস্ট্রে রোন রোি টপ্রন্ট েেস্ট্রত োইস্ট্রল এেটা এেটটনশন এি েস্ট্রে টনস্ট্রত হস্ট্রব। PrintCode এটা সোসটে
গুেল রথস্ট্রে বা soft এে এেটটশস্ট্রন টেস্ট্রয় এি েো োস্ট্রব। এেপে টপ্রন্ট েোে জস্ট্রনয f1 রেস্ট্রপ PrintCode টলখস্ট্রল/টসস্ট্রলক্ট
েেস্ট্রল টপ্রন্ট েোে েস্ট্রতা েস্ট্রে রসটআপ টনস্ট্রয় টনস্ট্রব।

3. Grid System
Container ক্লাস্ট্রসে টভতস্ট্রে প্রথস্ট্রে এেটা .row ক্লাস টনই, রেন এেপে েু ইটা .col ক্লাস টনই, আে েলাে ক্লাস্ট্রসে টভতস্ট্রে
প্রথস্ট্রে টলটখ This is column one পস্ট্রেে col ক্লাস্ট্রস টলটখ This is column two. তাহস্ট্রল ওস্ট্রয়বসাইটা েু ইভাস্ট্রে সোনভাস্ট্রব
ভাে হস্ট্রয় েু ইটা রো রেখাস্ট্রব। row আে col এস্ট্রেে বিথাে টেস্ট্রয় টেস্ট্রল টবষয়টা টভজুযয়াল হয়। এেপে অবশয width বস্ট্রল
টেস্ট্রয় েে রবটশ েস্ট্রে রনওয়া োয় grid. এভাস্ট্রব টনস্ট্রে নতুন েস্ট্রে row টিস্ট্রয়ট েস্ট্রে রেন col ইউজ েো োস্ট্রব। সস্ট্রবথাচ্চ ১২টা
েলাে েো োয় এেটা row রত। Container োড়াও েো োয়, container রনয়া হইস্ট্রে োস্ট্রত এটা রসন্ট্রালাইজ হয় োটজথন
েু ক্ত হস্ট্রয়। রো এে বিথাে োস্ট্রলা আে েলাস্ট্রেে বিথাে সবুজ।

আে এখাস্ট্রন ক্লাস .col না টেস্ট্রয় েটে .col-1 এটা রেওয়া হইস্ট্রতা, তাহস্ট্রল এভাস্ট্রব এস্ট্রতা বড় জায়ো না টনস্ট্রয়, ১২টা েলাস্ট্রেে
এেটা রেই পটেোন জায়ো টনস্ট্রতা অতটুে টনস্ট্রব। এভাস্ট্রব .col-2 .col-3 ইতযাটে ইউজ েো োস্ট্রব।
col-3 োস্ট্রন টতনটা েলাস্ট্রেে সোন জায়ো। তাইস্ট্রল এখন েু ইটা েলাে টনস্ট্রয় এেটায় ৫ টা আস্ট্রেেটায় ৭ টাে সোন জায়ো
টনস্ট্রয় টনস্ট্রবা তাহস্ট্রল ৭+৫ = ১২ টা হস্ট্রয় রেস্ট্রলা পুস্ট্রো জায়ো রনওয়া।

এখন সাস্ট্রপাজ পযাটিিং টেস্ট্রবা, তাহস্ট্রল বুটস্ট্রেস্ট্রপে অটেটজনাটল রেই পযাটিিং আস্ট্রে রসটা এখাস্ট্রন ইউজ েেস্ট্রবা। p- টলস্ট্রখ ০-৫
পেথন্ত হস্ট্রে পযাটিিং এে সাইজ। সাধােেত ১ rem সোন ১৬ টপস্ট্রেল, এভাস্ট্রব rem এে টহসাব। পযাটিিং টস্ট্রপ েোে জস্ট্রনয
টলখস্ট্রবা .pt, বটস্ট্রে েোে জস্ট্রনয .pb, রল স্ট্রটে জস্ট্রনয .pl আে োইস্ট্রটে জস্ট্রনয .pr। এভাস্ট্রব p-2 বা p-3 এটা টলখস্ট্রত হস্ট্রব
ক্লাস্ট্রসে টভতে।

এখন টনস্ট্রে আবাে রো টনলাে, এইবাে প্রথে েলাে টনস্ট্রবা, col-7 ও পস্ট্রেেটা col-5. তাহস্ট্রল এটা টেস্ট্রলা োটিত োেোে।
এবাে আস্ট্রেেটু রেসপটিভ েেস্ট্রত োই, রে স্মল বা টেটিয়াে টিভাইস্ট্রজে রেস্ট্রে েটে ২য় রো এে প্রথে েলাে col-7 না হস্ট্রয়
col-12 োস্ট্রন পুস্ট্রোটাই জুস্ট্রড় রেন থাস্ট্রে এেন েেস্ট্রত োই, তাহস্ট্রল রসটাও bootstrap এে োধযস্ট্রে আস্ট্রে রথস্ট্রে রেওয়া থাো
ক্লাস্ট্রসে োধযস্ট্রে েো োস্ট্রব।

<div class="col-12 col-sm-12 col-md-12 col-lg-7 p-3">

এখাস্ট্রন, .col-sm-12 োস্ট্রন স্মল টিভাইস্ট্রসে রেস্ট্রে পুস্ট্রোটা জুস্ট্রড় থােস্ট্রব টিস্ট্রনে, এেইভাস্ট্রব medium টিভাইস্ট্রসে রেস্ট্রে
.col-md-12 োস্ট্রন এখাস্ট্রনও পুস্ট্রোটা জুস্ট্রড় থােস্ট্রব, আে লাস্ট্রজথে রেস্ট্রে .col-lg-7 োস্ট্রন রসখাস্ট্রন আবাে টভন্নভাস্ট্রব ৭টা
থােস্ট্রব রেটা অটেটজনাল টিজাইন। আবাে এেট্রা স্মল এে জস্ট্রনয .col-12. এেটনস্ট্রত এস্ট্রতােে রেস্ট্রখটে রে, শুধু col বযবহাে
েেস্ট্রল অস্ট্রটাস্ট্রেটটে রেপটেোে জায়ো লাস্ট্রে তা টনস্ট্রয় রনয়, এেই রো-স্ট্রত এে বা এোটধে েলাে থােস্ট্রল। আবাে সাস্ট্রপাজ,
রোট টিস্ট্রনে রেস্ট্রে This is column-2 এই টলখাটা হাইি েস্ট্রে টেস্ট্রব, তাহস্ট্রল media only screen and (max-
width: 600px) { } এ .col-7{ visibility: hidden; }

Prac-BS-01 াইস্ট্রল Color+Responsive টাইস্ট্রটস্ট্রলে টনস্ট্রেে রো-েলাস্ট্রে, বুটস্ট্রেস্ট্রপে টি াইন্ড ক্লাস্ট্রসে োধযস্ট্রে োলাে রেওয়া
হইস্ট্রেঃ .bg-primary, .bg-warning টেন্তু ওপস্ট্রে টনস্ট্রে পেপে েু ই রো এে রসে েলাস্ট্রে এেই োলাে ইউজ েোয় আে
বিথাে না রেওয়ায়, রো েু ইটাস্ট্রে আলাো েো োস্ট্রে না, এজনয টনস্ট্রেে ব্লস্ট্রে .bg-gradient ইউজ েেস্ট্রবা। তাহস্ট্রল টনস্ট্রেে রো
এে ওই েলাস্ট্রেে বযােগ্রাউন্ড োলাে এেটু লাইট হস্ট্রব। েু ইটাস্ট্রে পাথথেয েো োস্ট্রব বিথাে োড়াই। এোড়া এটাস্ট্রে রেস্পটিভ
েো হইস্ট্রে এভাস্ট্রবঃ @media only screen and (max-width: 767 px) { } এখাস্ট্রন েযাস্ট্রেস্ট্রটে টভতে এেটা ব্লেস্ট্রে
display: none; এে োধযস্ট্রে ইটলটেস্ট্রনট েো হস্ট্রয়স্ট্রে। এখাস্ট্রন 768px হস্ট্রলা টেটিয়াে টিস্ট্রনে সাইজ। তাহস্ট্রল max-width
767 রেওয়াে জস্ট্রনয, টিন রোট েেস্ট্রত থােস্ট্রল েখনই এে েে হস্ট্রব তাহস্ট্রল ওই ব্লেটা ইটলটেস্ট্রনট হস্ট্রব। ইন েযা রসে টাইে,
@media only screen and (min-with: 768px){ } টেস্ট্রয় আস্ট্রেেটা ব্লেস্ট্রে display: none; রেওয়া হইস্ট্রে। স্ট্রল
ওইব্লেটা েখন টিস্ট্রে রোট হস্ট্রত হস্ট্রত এে েে হস্ট্রব তখন টভটজবল হস্ট্রব। অনযথায় বড় টিস্ট্রনে রেস্ট্রে হাইি থােস্ট্রব। তাহস্ট্রল
এেসাস্ট্রথ েু ইটা টভন্নটভন্ন অপাস্ট্রেশন এেসাস্ট্রথ েলস্ট্রব, েখন টিস্ট্রনে সাইজ 768px এ আসস্ট্রব। বাট েু ইটাস্ট্রতই এই রসে োন
ইউজ েেস্ট্রল, এেসাস্ট্রথ োজ েস্ট্রে না। রসস্ট্রেস্ট্রে এেটায় োন েটেস্ট্রয় 767 েস্ট্রে টেস্ট্রল োজটা এেসাস্ট্রথই হস্ট্রে। Run it.
4. Colors
এেেে োলাস্ট্রেে জনয এইেয়টা ক্লাস টি াইন
েো আস্ট্রে। এে োধযস্ট্রে বযােগ্রাউন্ড োলাে রেঞ্জ
েো োস্ট্রব। বযােগ্রাউন্ড োলাস্ট্রেে সাস্ট্রথ ইউজ েো
োস্ট্রব, .bg-gradient রেটা আস্ট্রে রেখলাে। আে
রটস্ট্রেে োলােও এেইভাস্ট্রব রেঞ্জ েো োস্ট্রব,
রসজস্ট্রনয, .text-primary বা text-secondary
এভাস্ট্রব টলখস্ট্রত হস্ট্রব। অথথাৎ রশষ অিংশটুেু োলাে
টি াইন েস্ট্রে আে রসটা রসে। এখাস্ট্রন এেটা
এোপল রেওয়া হস্ট্রলাঃ

<p class="text-light bg-dark">.text-light</p>

.m- এে োধযস্ট্রে োটজথন রেওয়া োয় রেভাস্ট্রব .p- এে োধযস্ট্রে পযাটিিং রেওয়া োয়। এোড়া োেটেস্ট্রে োটজথন না টেস্ট্রয় বটস্ট্রে
বা টস্ট্রপ রস্পটসট েভাস্ট্রব োটজথন টেস্ট্রত োইস্ট্রল .mt- বা .mb- এভাস্ট্রব ইউজ েেস্ট্রত হস্ট্রব। আে এে সাস্ট্রথ োন বসস্ট্রব সস্ট্রবথাচ্চ
পাে পেথন্তঃ .mb-5 োটজথন ওপে টনস্ট্রে হস্ট্রল .my-, িাস্ট্রন .ms- s for start, বাস্ট্রয় .me- e for end ইতযাটে আে িাস্ট্রন
বাস্ট্রয় mx-.

5. Tables
Tables টলস্ট্রখ getbootstrap.com এ সােথ টেস্ট্রয়, রেস্ট্রোন এেটা রটটবল টসস্ট্রলক্ট েস্ট্রে রসখান রথস্ট্রে োস্টোইজ েস্ট্রে টনস্ট্রত
হস্ট্রব।

Table টা রোন এেটা টিটভশন ব্লস্ট্রেে টভতস্ট্রে েেস্ট্রবা, রসস্ট্রেস্ট্রে div টযাস্ট্রে bg-info, text-dark, container-fluid এভাস্ট্রব
ক্লাস টি াইন েস্ট্রে টেস্ট্রত পােস্ট্রবা, স্ট্রল এটা সিূ েথ রটটবস্ট্রলে ওপস্ট্রেই প্রস্ট্রয়াজয হস্ট্রব। রোন এেটা োেস্ট্রন <caption>
</caption> এই ব্লস্ট্রে টাইস্ট্রটল টেস্ট্রয় রসটাস্ট্রে text-align টেস্ট্রয় রসন্টাস্ট্রে আনস্ট্রত োইস্ট্রল আসস্ট্রে না। এটা সটেস্ট্রয় p ব্লে
েস্ট্রে টেস্ট্রলই আবাে হস্ট্রে। এবাে রটটবলটাে রবটসে html োেোে বাটনস্ট্রয় র টল। এেটা রো এ, colspan = “2” েস্ট্রে
টেস্ট্রয়টে োস্ট্রত রটটবলটাস্ট্রে আস্ট্রেেটু েেস্ট্রিে েো োয়। এখন <table> </table> এই ব্লস্ট্রে class = table টলখস্ট্রলই
বুটস্ট্রেস্ট্রপে রটটবস্ট্রলে োেোে বস্ট্রস োস্ট্রব। এখন সাস্ট্রপাজ হযািটাস্ট্রে িােথ েস্ট্রে োখস্ট্রবা। তাহস্ট্রল <tr> <th>head1</th>
<th>head2</th> … </tr> এইসবগুলাস্ট্রে োট েস্ট্রে এস্ট্রন <thead> </thead> এে টভতস্ট্রে োখস্ট্রবা, আে thead এে
ক্লাস টেস্ট্রবাঃ table-dark। তাহস্ট্রল হযাস্ট্রিে োলাটেিং হস্ট্রয় রেস্ট্রলা সবগুলা এেসাস্ট্রথ। আস্ট্রেেটা ক্লাস আস্ট্রে , রেখাস্ট্রন colspan
েো হস্ট্রয়টেস্ট্রলা, রসটাস্ট্রে এেটু হাইলাইট েস্ট্রে োখস্ট্রত োইস্ট্রল ওইখাস্ট্রন ক্লাস ইউজ েেস্ট্রত হস্ট্রবঃ table-active. লাস্ট table
টযাস্ট্রে table-hover এটা েেস্ট্রবা। তাহস্ট্রল োউস টেস্ট্রয় পস্ট্রয়ন্ট েোে োধযস্ট্রে এটনস্ট্রেশস্ট্রনে েস্ট্রতা োজ েেস্ট্রব।
X> scope = “col” এেপে scope = “row” এইসব টে োস্ট্রজে?

Y> হযাস্ট্রিে েস্ট্রতা রটটবস্ট্রলে পুস্ট্রো বটিটাস্ট্রেও আবাে <tbody> </tbody> এই টযাস্ট্রেে টভতস্ট্রে োখা োয়। তাহস্ট্রল এইখাস্ট্রনও
হযাস্ট্রিে েস্ট্রতা ক্লাস ইউজ েস্ট্রে পুস্ট্রো বটিে োলাে রেঞ্জ েেস্ট্রত পাটে। রেেনঃ .table-light েো োয়। আবাে আস্ট্রেেটা
বযাপাে হস্ট্রলাঃ table tag এে বাইস্ট্রে অনয রোন টযাস্ট্রে table-hover ইউজ েেস্ট্রল রসটা আে োজ েেস্ট্রব না। রসস্ট্রেস্ট্রে
রসটা েস্ট্রে টনস্ট্রত হস্ট্রব।

[.anything means class. িট টেস্ট্রয় টেেু টলস্ট্রখ এন্টাে রপ্রস েেস্ট্রলই রসটা এেটা টিভ টযাস্ট্রে ক্লাস্ট্রসে নাে টহস্ট্রসস্ট্রব বস্ট্রস
োয়]

6. Image
.container-fluid এে টভতে h2 টনস্ট্রয় এেটা টাইস্ট্রটল টেলাে। এেপে এেটা .row টনস্ট্রয় এে টভতস্ট্রে েু ইটা .col ক্লাস।
প্রথে েলাস্ট্রে, <img> টযাস্ট্রেে টভতে, ইস্ট্রেজেু ক্ত েস্ট্রে পস্ট্রেে েলাস্ট্রে বনথনা। টেন্তু এই ইস্ট্রেজ অস্ট্রনে বড় হস্ট্রয় োস্ট্রে। এটাস্ট্রে
রেসপটিভ েস্ট্রে সটিে সাইস্ট্রজ আনাে জনয বুটস্ট্রেস্ট্রপে ক্লাস বস্ট্রল টেস্ট্রত হস্ট্রবঃ .img-fluid এটা বলস্ট্রত হস্ট্রব ইস্ট্রেজ টযাস্ট্রে।
হস্ট্রয় রেস্ট্রলা রবটসে োেোে। এেপে, ইস্ট্রেজটা আেও সাইজ টিে েস্ট্রে রোট েস্ট্রে টনস্ট্রত োইস্ট্রল ইস্ট্রেজ টযাস্ট্রেে েস্ট্রধযঃ width:
400rem; height: auto; এভাস্ট্রব েতটুেু টেস্ট্রল ভাস্ট্রলা রেখায় rem এ টনস্ট্রয় টনস্ট্রবা। টেন্তু এখন বড় টিস্ট্রনে রেস্ট্রে টিে আস্ট্রে,
টেন্তু রোট টিস্ট্রনে রেস্ট্রে রবটশ রোট হস্ট্রয় োস্ট্রে। তাহস্ট্রল েলাে টযাস্ট্রেঃ col-12 col-sm-12 col-md-12 col-lg-4 টেস্ট্রয়
টেলাে। তাহস্ট্রল শুধু বড়টিস্ট্রনে রেস্ট্রে টগ্রটিিং টসস্ট্রস্টস্ট্রে ৮-৪ এ ভাে হস্ট্রয় ইস্ট্রেজটা রোট জায়োয় বসস্ট্রব। বাটেটুেু রটে এে
জনয থােস্ট্রব। আে রোটটিস্ট্রনে রেস্ট্রে এেটা রো রথস্ট্রে েু ইটা রোস্ট্রত ভাে হস্ট্রয় োস্ট্রে। স্ট্রল ইস্ট্রেজ খুব এেটা রোট হস্ট্রয়
পেস্ট্রে না। এবাে োটজথন পযাটিিং এলাইনস্ট্রেন্ট রেভাস্ট্রব টনস্ট্রত হয় টনস্ট্রয় টনলাে। এেেস্ট্রধয, h2 রে ইনলাইন েস্ট্রে োঝখাস্ট্রন
আনস্ট্রত োই। তাহস্ট্রল এটাস্ট্রে আবাে আস্ট্রেেটা div এে টভতস্ট্রে োখস্ট্রত হস্ট্রব। রসখাস্ট্রন রটেট এলাইনস্ট্রেন্ট েস্ট্রে রসন্টাস্ট্রে টনস্ট্রয়
আসা োস্ট্রব। টেন্তু ইনলাইন েোে োেস্ট্রে h2 এে টভতস্ট্রে শুধু োটজথন টেস্ট্রয় টেিস্ট্রল আনস্ট্রত োইস্ট্রলঃ margin-left: 45 টেস্ট্রল
বড় টিস্ট্রনে রেস্ট্রে টেিস্ট্রল থাস্ট্রে, রোট টিস্ট্রনে রেস্ট্রে অস্ট্রনেটা বাে পাস্ট্রশ েস্ট্রল োয়। তাই নতুন েস্ট্রে আস্ট্রেেটা div টযাে
লােস্ট্রেই। আবাে, এটাস্ট্রে বযােগ্রাউন্ড োলাে টেস্ট্রয় বিথাে টেস্ট্রয় hover েেস্ট্রত োই। রসস্ট্রেস্ট্রে h2 এে সাস্ট্রথ class এে টভতস্ট্রে
েটে বযােগ্রাউন্ড োলাে, রটেট োলাে, বিথাে এইসবটেেু ই টেস্ট্রয় টেই। তাহস্ট্রল hover আে োজ েস্ট্রে না। রসজনয, h2 এে
সাস্ট্রথ শুধু োস্ট্রে টেস্ট্রবা এেটা আইটি বা ক্লাস। এেপে h2 এে টভতস্ট্রে রেই োলাে রভটেস্ট্রয়শন েেোে তা ওই আইটি টি াইন
েস্ট্রে েেস্ট্রবা। এেপে #id:hover { } এে টভতে ো টলখস্ট্রবা তা টিেেস্ট্রতা োজ েেস্ট্রব। অথথাৎ োউস টেস্ট্রয় পস্ট্রয়ন্ট েেস্ট্রল
রেঞ্জ হস্ট্রে। টবস্তাটেতঃ Prac-BS-01

 N-> েু ইটা েলাে টনস্ট্রয় এেপাস্ট্রশ েটব আস্ট্রেেপাস্ট্রশ বেথনা েেস্ট্রত রেস্ট্রল, রসটা সোনভাস্ট্রব েু ইভাস্ট্রে ভাে েস্ট্রে টেস্ট্রব।
টেন্তু ইস্ট্রেজটাে হাইট ওয়াইিথ রেঞ্জ েেস্ট্রল রসটা রোট হস্ট্রয় োস্ট্রে, টেন্তু তাও অস্ট্রনেটা জায়ো ধস্ট্রে োখস্ট্রে। এজনয
এইখাস্ট্রনে েলােস্ট্রে col-4 ইতযাটে উস্ট্রেখ েস্ট্রে টেস্ট্রবা, োস্ট্রত রসটা োোটতটেক্ত জায়ো নি না েস্ট্রে।
 N-> রেখাস্ট্রন hover েেস্ট্রত োই, রসখাস্ট্রন inline টিজাইন েেস্ট্রবা না।
 Display: inline েোে পস্ট্রে রোন টেেু স্ট্রে টেটিস্ট্রল আনস্ট্রত আস্ট্রেেটা টযাস্ট্রেে টভতস্ট্রে টনস্ট্রয় আসস্ট্রবা।
7. Jumbotron
Jumbotron েখন ইউজ েেস্ট্রবা? েখন রোনটেেু র াোস্ট্রসবল েেস্ট্রত োই ইতযাটে। BS-5.0 রত এটা নাই। 4.5 রথস্ট্রে টনস্ট্রয়
আসা লােস্ট্রব। টনস্ট্রেে টলিংস্ট্রে রেস্ট্রল পাওয়া োস্ট্রবঃ

https://getbootstrap.com/docs/4.5/components/jumbotron/

[স্ট্রেস্ট্রোন এেটা রটেস্ট্রিট েটপ েস্ট্রে এস্ট্রন রসটা োস্টোইজ েস্ট্রে ইউজ েো োস্ট্রব]। প্রথস্ট্রে এেটা div টযাে টনলাে, রসটাে
ক্লাস হস্ট্রত পাস্ট্রেঃ container বা container-fluid । রেন, এেটা হযািাে টেস্ট্রবা, রসস্ট্রেস্ট্রে h1-h6 এ এেধেস্ট্রেে ইস্ট্র ক্ট
থাস্ট্রে। এটা রথস্ট্রে আস্ট্রেেটু রেঞ্জ েেস্ট্রত আেো ক্লাস্ট্রসে টভতস্ট্রে ইউজ েেস্ট্রত পাটেঃ .display-x । এখাস্ট্রন x, 1-6 পেথন্ত
টবটভন্ন নাম্বাে হস্ট্রত পাস্ট্রে। ১ হস্ট্রে অস্ট্রনে বড় রেখাস্ট্রব, ৪ এ োঝাটে রেখা োয়। ৬ এ অস্ট্রনেটা রোট। আে ৭ টেস্ট্রল ক্লাস
োড়া রেেন রেখা োয় রতেন হস্ট্রয় পস্ট্রড়। টনস্ট্রে রেখা োস্ট্রে h2 টযাস্ট্রে display-4 ইউজ েেস্ট্রল রেেন ইস্ট্র ক্ট রেয়, আে রোন
ক্লাস োড়া রেেন রেখায়ঃ

এেপে, p টযাস্ট্রেে টভতে টেেু ইটলস্ট্রেন্ট টেলাে। এখন টপ টযাস্ট্রেে ক্লাস টেস্ট্রবা .lead তাহস্ট্রল, normally p টযাস্ট্রে রেেন ইস্ট্র ক্ট
রেয়, তােোইস্ট্রত টভন্ন এেটা ইস্ট্র ক্ট রেখা োস্ট্রব। টেেু টা বড় আে েে োড়।

এেপে hr টেস্ট্রয় রসেশন টেলাে েু ইটা। টনস্ট্রে নেেযাটল এেটা টপ টযাে টনস্ট্রয় আেও টেেু ইটলস্ট্রেন্ট, এেটনস্ট্রে এেটা বাটন।
বাটনটা সোসটে টিজাইন েস্ট্রে ততেী েেস্ট্রত এভাস্ট্রব a.btn.btn-primary.btn-lg টেস্ট্রয় এন্টাে রপ্রস েেস্ট্রল সু ন্দে এেটা
বাটন ততেী হস্ট্রয় োস্ট্রব এেবাস্ট্রে। hr রসেশস্ট্রনে েস্ট্রধয ওপস্ট্রে টনস্ট্রে পযাটিিং েেস্ট্রবা আস্ট্রেেটু েযাপ োখস্ট্রত। রসজস্ট্রনয .my-4
তাহস্ট্রল 4rem এ ওপস্ট্রে টনস্ট্রে এেসাস্ট্রথ োটজথন হস্ট্রয় োস্ট্রব।

8. Alert
সাধােেত রোন িাটা টিেেস্ট্রতা ইিাটথ হস্ট্রল, লটেন সােস্ট্রসস হস্ট্রল, বা বযােইস্ট্রন্ডে রোন অপাস্ট্রেশন টিেেস্ট্রতা না হস্ট্রল এলাটথ
রেখাস্ট্রত হয়।

এেটা div.container-fluid ক্লাস টনলাে। এে টভতস্ট্রে আস্ট্রেেটা div টযাে টনলাে। এেপে h4 টেস্ট্রয় এেটা রহটিিং টেলাে
Alert. এেপে p টযাস্ট্রেে টভতস্ট্রে Lorem25 টনস্ট্রয় hr টেস্ট্রয় আস্ট্রেেটা p টনস্ট্রয় এে টভতে Lorem10 টেলাে। এবাে ২য় div
এ ক্লাস টেলােঃ bg-success। তাহস্ট্রল েড়া সবুজ োলাস্ট্রেে এেটা বযােগ্রাউন্ড টিস্ট্রয়ট হস্ট্রব। আে রোন োটজথন রনই। এখন
েটে bg-success এে জায়োয় .alert টেই। তাহস্ট্রল অস্ট্রটা োটজথন টিস্ট্রয়ট হস্ট্রয় োস্ট্রব। এেপে bg-success রেস্ট্রট টেই, রসখাস্ট্রন
টলটখ .alert-success তাহস্ট্রল ওই েড়া সবুজ রেস্ট্রট টেস্ট্রয় হালো সবুজ বযােগ্রাউন্ড হস্ট্রব। টনস্ট্রেে p টযাস্ট্রেে ক্লাস্ট্রস mb-0 েস্ট্রে
টেই, তাহস্ট্রল টনস্ট্রেে োটজথন ০ হস্ট্রয় োস্ট্রব। আে রোটােুটট সব ততেী হস্ট্রয় রেস্ট্রলা alert এে জস্ট্রনয। আে েু ইটা টজটনসঃ div
টযাস্ট্রে role= “alert” আে h4 এ “alert-heading” এগুলাে ইউজ েেস্ট্রল ো না েেস্ট্রলও তাই োড়াস্ট্রে।
9. Button
নেেযাটল <button> </button> টেস্ট্রয় োঝখাস্ট্রন টেেু টলস্ট্রখটেস্ট্রলই এটাই বাটন হস্ট্রয় োয় রেইট html এ। এখন োইস্ট্রল এে
টভতস্ট্রে .btn টেস্ট্রয় টেস্ট্রল bootstrap এ টি াইন েো বাটস্ট্রন রূপান্তে হস্ট্রব। আেও ভাস্ট্রলােস্ট্রতা টভটজবল েেস্ট্রত .btn-
success ইতযাটে রোন বযােগ্রাউন্ড োলাে েু ক্ত েটে। এেপে .btn-lg এই ক্লাসটাও েু ক্ত েেস্ট্রল রেখা োস্ট্রে রবশ বড় এেটা
বাটন টিস্ট্রয়ট হইস্ট্রে। এেসাস্ট্রথ এইসবগুস্ট্রলা োজ েস্ট্রে র লস্ট্রতঃ button.btn.btn-primary.btn-lg টলস্ট্রখ এন্টাে। এখাস্ট্রন
.lg এে পটেবস্ট্রতথ .sm টেস্ট্রয় রোট .md টেস্ট্রয় টেটিয়াে সাইজ েো রেস্ট্রত পাস্ট্রে। আবাে টি াইনি hover েোে জস্ট্রনয .btn-
primary না টলস্ট্রখ .btn-outline-primary টলখস্ট্রল রসটাে বযােগ্রাউন্ড োলােস্ট্রলস থােস্ট্রব, আে োউস পস্ট্রয়ন্ট েেস্ট্রল রসটা
োলাে ু ল হস্ট্রয় এটনস্ট্রেস্ট্রটি েেস্ট্রব। এভাস্ট্রব .btn-outline-success ইতযাটে রেস্ট্রোন োলাস্ট্রে এটনস্ট্রেস্ট্রটি েোস্ট্রত পাটে।

রেস্ট্রোন এেটা বাটনস্ট্রে div ব্লস্ট্রেে .d-grid.gap-2 এই ক্লাস্ট্রসে েস্ট্রধয টনস্ট্রয় আসস্ট্রল রসটা এেটা ব্লে বাটন ততেী েেস্ট্রব।
পুস্ট্রো এেটা ব্লে জুস্ট্রড় এেটা বাটন। এখাস্ট্রন outline ওয়ালা lg বাটন ইতযাটে রেস্ট্রোন বাটনই েটপ েস্ট্রে টনস্ট্রয় আসস্ট্রল রসটা
রসভাস্ট্রব ব্লেআোস্ট্রে োজ েেস্ট্রব। এখাস্ট্রন আবাে .col-1 টু .col-12 েু ক্ত েেস্ট্রত পােস্ট্রবা। এখাস্ট্রন .col-6 েু ক্ত েেস্ট্রল ব্লে
সাইস্ট্রজে অস্ট্রধথে সেপটেোে েীর্থ এেটা বাটন টিস্ট্রয়ট হস্ট্রে। এটাস্ট্রে আবাে টেিস্ট্রল আনস্ট্রত োইস্ট্রল .mx-auto -এেসাস্ট্রথঃ
.d-grid.gap-2.col-6.mx-auto

আবাে বাটন টিস্ট্রজবলি েস্ট্রে রেওয়া োয় এভাস্ট্রব- class = “ ” এে পে টলস্ট্রখ টেস্ট্রবা disabled.

এেপে বাটনগ্রুপ টিস্ট্রয়ট েো োয়ঃ এেটা div রসেশন এ .btn-group ক্লাস টেস্ট্রয় এেটভতস্ট্রে েতগুলা বাটন টিস্ট্রয়ট হস্ট্রব
সবগুলাে এেটা গ্রুপ টিস্ট্রয়ট হস্ট্রব। রসস্ট্রেস্ট্রে বাটন সাইজ সব এেটেস্ট্রত হস্ট্রবঃ btn-lg, md, sm or default

10. Badges
রোন এেটা রটেটস্ট্রে ইউজাস্ট্রেে েৃ টিস্ট্রোেে েেস্ট্রত রনাটটট স্ট্রেশস্ট্রনে েস্ট্রতা badge ইউজ েো হয়। suppose, h2 রহিাস্ট্রেে
সাস্ট্রথ <span>New</span> এভাস্ট্রব বযাজ েু ক্ত েেস্ট্রত োই। তাহস্ট্রল span এে ক্লাস টেস্ট্রবা .badge তাহস্ট্রলই বযাজ ততেী
হস্ট্রয় োস্ট্রব। টেন্তু এখাস্ট্রন বযােগ্রাউন্ড োলােও সাো আে বযাস্ট্রজে োলােও সাো হওয়ায় বুঝা োস্ট্রে না। এজস্ট্রনয োলাে টেস্ট্রবা
.bg-danger তাহস্ট্রল এখাস্ট্রন এখন টলখাটাে পাস্ট্রশ রনাটটট স্ট্রেশস্ট্রনে েস্ট্রতা টেেু এেটা েৃ টিস্ট্রোেে হস্ট্রে। আবাে এখাস্ট্রন span
হস্ট্রে ইনলাইন ইটলস্ট্রেন্ট এজস্ট্রনয h2 এে পাস্ট্রশ বযবহাে েেস্ট্রল টলখাটা এেলাইস্ট্রন আসস্ট্রতস্ট্রে। টেন্তু badge ক্লাস বযবহাে
েোয় এখন ন্ট সাইজও অস্ট্রটাস্ট্রেটটে টনস্ট্রয় টনস্ট্রে এেেেে। আবাে ইনলাইন টযাে না টেস্ট্রয় েটে ব্লে ইটলস্ট্রেন্ট ইউজ েটে,
রেেন p or div তাহস্ট্রলও রসটা অস্ট্রটা ইনলাইন হস্ট্রয় োস্ট্রব। টেন্তু বযাজ ক্লাসটা সটেস্ট্রয় টনস্ট্রল আবাে ব্লে ইটলস্ট্রেন্ট হস্ট্রয় োয়।

11. Progress
েখন আেো রোনটেেু িাওনস্ট্রলাি রেই, অথবা রপাটথ টলও ওস্ট্রয়বসাইস্ট্রট রোন টিল েত পাস্ট্রসথন্ট আস্ট্রে রসটা রেখাস্ট্রত োই
তাহস্ট্রল রপ্রাস্ট্রগ্রস বাে লাস্ট্রে।

েটে div টযাস্ট্রেে টভতে .progress ক্লাস টেই, তাহস্ট্রল এেটা রহায়াইট বাে টিস্ট্রয়ট হস্ট্রব। এেপে এেটভতে আস্ট্রেেটা div
টযাে টনস্ট্রয় এে ক্লাস েটে রেই, .progress-bar আে এে স্টাইস্ট্রল েটে টলটখ width:25% তাহস্ট্রল ২৫% সেপটেোন বােটা
ট লাপ হস্ট্রব। এই ২৫% টলখাটাও েটে টভতস্ট্রে টলস্ট্রখ টেস্ট্রত োই, তাহস্ট্রল ওই div টযাস্ট্রে টলখস্ট্রবা 25%. এভাস্ট্রব, style টলস্ট্রখ
রেস্ট্রোন ভযালু পাস্ট্রসথস্ট্রন্টস্ট্রজ টলস্ট্রখ টেস্ট্রল রসইপটেোন ট লাপ হস্ট্রব। োইস্ট্রল এভাস্ট্রব স্টাইস্ট্রলে টভতে না টলস্ট্রখ সোসটে বুটস্ট্রেস্ট্রপে
ক্লাস টহস্ট্রসস্ট্রব .w-25, .w-50, .w-75 ইতযাটে রনওয়া োস্ট্রব। তস্ট্রব রসস্ট্রেস্ট্রে রেস্ট্রোন ভযালু .w-5 .w-15 ইতযাটে ইোেস্ট্রতা ভযালু
বযবহাে েো োস্ট্রব না। .progress এই ক্লাস্ট্রসে সাস্ট্রথ style = “height:20px” এভাস্ট্রব টলখস্ট্রল প্রস্ট্রগ্রসবাস্ট্রেে হাইট েস্ট্রন্ট্রাল
েস্ট্রে রেঞ্জ েো োস্ট্রব। আে .progress-bar এই ক্লাস্ট্রসে সাস্ট্রথ, আস্ট্রেে ক্লাস, bg-info, bg-warning ইতযাটে এেটা টেস্ট্রল
বযােগ্রাউস্ট্রন্ডে োলােও রেঞ্জ েস্ট্রে এপায়াস্ট্রেস্ট্রি পাথথেয আনা োস্ট্রব। বাই টি ল্ট bg-primary থাস্ট্রে। <progress> এই
টযাস্ট্রেে টভতস্ট্রে এোটধে <progress-bar> টনস্ট্রয় োলাে রেঞ্জ েস্ট্রে োটল্টোলাস্ট্রেে প্রস্ট্রগ্রসবাে ততটে েো োস্ট্রব। রসস্ট্রেস্ট্রে
width রেনশন েস্ট্রে টেস্ট্রত হস্ট্রব। এটা এে, style রথস্ট্রে েো রেস্ট্রত পাস্ট্রে, অথবা w-25, w-50 এভাস্ট্রব েো রেস্ট্রত পাস্ট্রে।
এখন style টেস্ট্রয় েেস্ট্রল রেস্ট্রোন ভযালু টনস্ট্রত পােস্ট্রবা, আে class রথস্ট্রে েেস্ট্রল টনটেথি েতগুস্ট্রলাে বাইস্ট্রে পােব না। এেপে
প্রস্ট্রগ্রসবাস্ট্রে আেও টেেু স্টাইল েু ক্ত েেস্ট্রত রেেন োইপি েেস্ট্রত .progress-bar এে সাস্ট্রথ টলখস্ট্রবা .progress-bar-
striped আে এই োইপি েু ক্ত বােস্ট্রে এটনস্ট্রেস্ট্রটি েেস্ট্রত আস্ট্রেে ক্লাস েু ক্ত েেস্ট্রত হস্ট্রব .progress-bar-animated

12. Spinners
টস্পনাে রেখাস্ট্রবা েখন রোনটেেু রলাটিিং হস্ট্রে রেেন ইউটটউস্ট্রব, এেেে ইস্ট্র ক্ট টেস্ট্রত। এেটা div টযাস্ট্রেে টভতে ক্লাস টনস্ট্রবা
.spinner-border তাহস্ট্রলই এেটা টসটপিং সাস্ট্রেথল ততেী হস্ট্রয় োস্ট্রব। এেটভতস্ট্রে েটে রোন span/p ইতযাটে টযাে টনস্ট্রয় েটে
টেেু টলটখ- loading… তাহস্ট্রল এই টলখাটা সহ টস্পন েেস্ট্রব। টলখাটা হাইি েস্ট্রে টেস্ট্রত ক্লাসঃ .visually-hidden ।
Spinner-border এে সাস্ট্রথ text-info, text-warning ইতযাটে টলস্ট্রখ োলাে রেঞ্জ েেস্ট্রত পাটে।

এেপে এেইভাস্ট্রব আস্ট্রেেটা div টযাে টনস্ট্রয় ক্লাসঃ .spinner-grow টেস্ট্রল আস্ট্রেে েেে টস্পনাে ততেী হস্ট্রব, অস্ট্রনেটা রেেটিথিং
েোে সেয়/লাইভ বুঝাস্ট্রত রেই টস্পনাে ইউজ েো হয় রসেেে। এখাস্ট্রনও text-danger বা text-primary টেস্ট্রল োলাে
রেঞ্জ হস্ট্রব। এবাে এটাস্ট্রে োঝখাস্ট্রন টনস্ট্রয় আসস্ট্রত, এই টস্পনাে-গ্রু-টাস্ট্রে আস্ট্রেেটা div টযাস্ট্রেে টভতে টনস্ট্রয় োই, রসখাস্ট্রন
েু ইটা ক্লাস টেস্ট্রবাঃ .d-flex .justify-content-center টেস্ট্রল রসটা োঝখাস্ট্রন েস্ট্রল আসস্ট্রব। রেস্ট্রোন এেটা টেস্ট্রয় এস্ট্রেস্ট্রে হস্ট্রব
না। আস্ট্রেেটা পদ্ধটত হস্ট্রলা, style টেস্ট্রয় text-alignment: center টেস্ট্রয় োঝখাস্ট্রন আনা অথবা ক্লাস্ট্রসে টভতস্ট্রেই .text-
center টেস্ট্রয়। োইস্ট্রহাে, োঝখাস্ট্রন আনাে পে, div টযাস্ট্রেে টভতস্ট্রে, <strong>Loading</strong> এভাস্ট্রব strong টযাস্ট্রেে
ইউজ েেস্ট্রত পাটে... তাহস্ট্রল টলখাটাে পাস্ট্রশ টস্পনােটা রেখাস্ট্রে। টেন্তু টস্পনাস্ট্রেে সাস্ট্রথ েটে োটজথন রেই ms-auto ক্লাস্ট্রসে
টভতে তাহস্ট্রল টলখাটা হাস্ট্রতে বাস্ট্রে আে টস্পনােটা িাস্ট্রন েস্ট্রল োস্ট্রব এেসাটেস্ট্রত।

সাইজ রোট েেস্ট্রত spinner-border এে সাস্ট্রথ .spinner-border-sm ক্লাস। অথবা রোট টেিংবা বড় েেস্ট্রত স্টাইস্ট্রলে
টভতে রস্পটসট েভাস্ট্রব উস্ট্রেখ েস্ট্রে রেয়া রেস্ট্রত পাস্ট্রে।

style="width: 3rem; height: 3rem;"

সবস্ট্রশস্ট্রষ রেটখ বাটস্ট্রনে টভতস্ট্রে টেভাস্ট্রব টস্পনাে লাোস্ট্রনা রেস্ট্রত পাস্ট্রে। এেটা বাটন টিস্ট্রয়ট েস্ট্রে এেটভতস্ট্রে এেটা টস্পনাে
টনস্ট্রয় রসটাস্ট্রে রোট েস্ট্রে টেই। তাহস্ট্রল টিেিাে রেখাস্ট্রব। আে েটে বাটন লাজথ হয় তাহস্ট্রল টস্পনােটা রেেন আস্ট্রে রতেন
োখস্ট্রলই ভাস্ট্রলা রেখায়।

13. List-group
টলস্ট টিস্ট্রয়ট েেস্ট্রত পাটে, ভাটটথেযাটল বা হোইজন্টাটল। হোইজন্টাল টলস্ট বযবহাে েো রেস্ট্রত পাস্ট্রে রনটভস্ট্রেশন বাে ততেী
েেস্ট্রত।
প্রথেত টসিল html টেস্ট্রয় এেটা আনঅিথােি গ্রুপ টিস্ট্রয়ট েটে। <ul> </ul> এে টভতে <li> </li> টেস্ট্রয় েু এেটা
আইস্ট্রটে। এখন ul এে ক্লাস রেই .list-group তাহস্ট্রল আইস্ট্রটস্ট্রেে আস্ট্রেে টাটলগুলা ভযাটনশ হস্ট্রয় রেস্ট্রলা। এবাে আইস্ট্রটেগুলাে
(<li>) সাস্ট্রথ ক্লাস েু ক্ত েেস্ট্রবা: .list-group-item তাহস্ট্রল এেটা টসিল BS এ টলস্ট েো হস্ট্রয় রেস্ট্রলা। এখাস্ট্রন বযােগ্রাউন্ড
োলাে অনয োলাস্ট্রেে টেস্ট্রলা, টেন্তু টলস্ট েু ক্ত েোে পস্ট্রে টলস্ট্রস্টে বযােগ্রাউন্ড অস্ট্রটা সাো হস্ট্রয় রেস্ট্রে।

এখন, রোন এেটা আইস্ট্রটেস্ট্রে হাইলাইট েেস্ট্রত, .list-group-item এে পাস্ট্রশ .active টলস্ট্রখ টেস্ট্রল ব্লু বযােগ্রাউন্ড হস্ট্রয়
হাইলাইট হস্ট্রব। আবাে রোন আইস্ট্রটেস্ট্রে টিস্ট্রসবলি েেস্ট্রত, ক্লাস্ট্রস .disabled টলখস্ট্রত হস্ট্রব। এস্ট্রেস্ট্রে .active এে সাস্ট্রথ
টলখস্ট্রল রোন োজ হয় না। অনয আইস্ট্রটস্ট্রেে সাস্ট্রথ টলখস্ট্রল োজ েস্ট্রে টিেেস্ট্রতা। োস্ট্রন এেটা আইস্ট্রটে এেইসাস্ট্রথ এটক্টভ এবিং
টিস্ট্রসবল্ড হস্ট্রত পাস্ট্রে না। এবাে, সবগুস্ট্রলাে সাস্ট্রথ আস্ট্রেেটা ক্লাস েু ক্ত েটেঃ .list-group-item-action তাহস্ট্রল এখন োউস
টেস্ট্রয় পস্ট্রয়ন্ট েেস্ট্রল রসটা হালো িােথ হস্ট্রয় হাইলাইট হস্ট্রয় অস্ট্রনেটা টক্লস্ট্রেবল টবহযাভ েেস্ট্রব, এেেুযয়াটল টক্লস্ট্রেবল না।
এস্ট্রেস্ট্রেও এইক্লাস েু ক্ত েোে পে রেগুস্ট্রলা আইস্ট্রটে এই টবহযাভ েেস্ট্রব নাঃ এে, এটক্টভ আইস্ট্রটে, রসটা অলস্ট্রেটি হাইলাইট।
আে টিস্ট্রসবল্ড আইস্ট্রটে, রসটাস্ট্রে হাইলাইট েোে প্রস্ট্রয়াজন রনই।

এখন এেেুয়াটল টলিংে েু ক্ত েস্ট্রে টক্লস্ট্রেবল েোে জস্ট্রনয, এভাস্ট্রব <li> না টেস্ট্রয় <a> ইউজ েেস্ট্রত হস্ট্রব আে href = “ ” এে
টভতে টলিংে টেস্ট্রয় টেস্ট্রত হস্ট্রব। বাটে সব রসে।

এখন নতুন এেটা টলস্ট টনস্ট্রয় .list-group এে পাস্ট্রশ .list-group-flush টেস্ট্রল বিথাে রলস হস্ট্রয় োস্ট্রব। এটা ভাস্ট্রলােস্ট্রতা
বুঝা োস্ট্রে না, রেস্ট্রহতু বযােগ্রাউন্ড সাো না। তাই বযােগ্রাউস্ট্রন্ডে োলাে টেেুভ েস্ট্রে টেই। তাহস্ট্রল েু ইটাে পাথথেয ভাস্ট্রলােস্ট্রতা
টভযজুয়ালাইজ হস্ট্রব।

আবাে লেযনীয় এখাস্ট্রন ul পাটল্টস্ট্রয় ol টেস্ট্রলই টেন্তু আে অিথাে টলস্ট হস্ট্রয় োস্ট্রে না। রসজস্ট্রনয, .list-group এে সাস্ট্রথ .list-
group-numbered এই ক্লাসও েু ক্ত েো লােস্ট্রব। এস্ট্রেস্ট্রে, রেই টলস্টটা a টযাে টেস্ট্রয় েু ক্ত েো হইটেস্ট্রলা, রসটা বাস্ট্রে
অনযগুলা টিেেস্ট্রতা নাম্বাটেিং হইস্ট্রে। a টযােেু ক্ত টলস্টস্ট্রে টিেেস্ট্রতা নাম্বাটেিং েেস্ট্রত এে আস্ট্রে টপস্ট্রে <li> </li> েু ক্ত েো
লােস্ট্রব। এেপে a টযাস্ট্রেে ক্লাসগুলা বাে টেস্ট্রয় style টেস্ট্রবা, text-decoration: none; color: black; তাহস্ট্রল এটাও
অনযগুলাে েস্ট্রতা আেেে েেস্ট্রব, এস্ট্রেস্ট্রে এেট্রা এটা টলিংেেু ক্ত টক্লস্ট্রেবল।

এবাে আটস, বনথনাসহ নাম্বাটেিং েস্ট্রে টলস্ট েোে পদ্ধটত রেখস্ট্রত। আস্ট্রেে রোিটা েটপ েস্ট্রে টনস্ট্রবা। রসখাস্ট্রনে প্রথস্ট্রে li এে
টভতস্ট্রেে রটেটটা এেটা div টযাস্ট্রে টনস্ট্রবা। এটাস্ট্রে রবাল্ড েেস্ট্রত ক্লাস টেস্ট্রবাঃ .fw-bold আস্ট্রেেটা div টযাে টনস্ট্রয় এই div
টযােটাস্ট্রে টভতস্ট্রে টনস্ট্রবা। আে প্রথে div টযাস্ট্রেে টভতে আে ২য় div টযাস্ট্রেে রশস্ট্রষ বেথনা টলখস্ট্রবা রোট েস্ট্রে। তাহস্ট্রল রসভ
েেস্ট্রল, প্রথস্ট্রে নাম্বাে, এেপস্ট্রে রবাল্ড টাইস্ট্রটল, এেপস্ট্রে বেথনা। রবাল্ড টাইস্ট্রটলটা ওপস্ট্রে টনস্ট্রয় নাম্বাস্ট্রেে সাস্ট্রথ এেই লাইস্ট্রন
োখস্ট্রত, .list-group-item এে সাস্ট্রথ .d-flex ক্লাস েু ক্ত েটে। তাহস্ট্রলই েু ইটা টলখা টিেেস্ট্রতা বস্ট্রস রেস্ট্রলা। টেন্তু নাম্বাস্ট্রেে
সাস্ট্রথ এস্ট্রেবাস্ট্রে রর্স্ট্রষ। তাই এেটু রস্পস টেস্ট্রত ১ে div টযাস্ট্রে ms-2 োটজথন টনস্ট্রয় টনস্ট্রবা। এভাস্ট্রব বাটে আইস্ট্রটেগুস্ট্রলাও
বেথনােু ক্ত েস্ট্রে টলটখ।

এখন বযাজ েু ক্ত েেস্ট্রবা। সবাে রশস্ট্রষ, <li> এে টভতে, <span> </span> টেস্ট্রয় বযাস্ট্রজে টলখা সরূপ ওই েযাস্ট্রনস্ট্রলে
সাবিাইবাে সিংখযা টলখলাে 1.92M। এখন ক্লাস্ট্রস টলখলাে .badge তাহস্ট্রল টলখাটাই েস্ট্রল রেস্ট্রলা! োেে bagde এে েস্ট্রধয
টলখাে োলাে থাস্ট্রে সাো। তাই .bg-danger টেলাে বযােগ্রাউন্ড এখন টভটজবল হস্ট্রে। টেন্তু এখাস্ট্রন ে 1.92M রটেটা ওপস্ট্রে
আে বযাস্ট্রজে বযােগ্রাউন্ড োলাে ওপস্ট্রে টনস্ট্রে েু ইজায়ো জুস্ট্রড়। তাই .d-flex এে সাস্ট্রথ েটে টলটখ .align-item-start তাহস্ট্রলই
বযােগ্রাউন্ড োলাে শুধু ওপস্ট্রে েস্ট্রল আসস্ট্রব, টিেেস্ট্রতা। আবাে .bg-danger এে সাস্ট্রথ েটে টলটখ .rounded-pill তাহস্ট্রল
রোল হস্ট্রয় আেও সু ন্দে রেখাস্ট্রব বযাজটা। এটা এস্ট্রেবাস্ট্রে েূ ল টলখাটাে সাস্ট্রথ রলস্ট্রে আস্ট্রে। এস্ট্রে সবাে রশস্ট্রষ োখস্ট্রত, আে েূ ল
টলখাটা হাস্ট্রতে বাস্ট্রয় োখস্ট্রত, .align-item-start এে সাস্ট্রথ .justify-content-between টলখস্ট্রবা। তাস্ট্রত েস্ট্রে বযাজটা িাস্ট্রন
রলাটটিং হস্ট্রয় রেস্ট্রে। টেন্তু েূ ল রটেগুস্ট্রলাও টেটিস্ট্রল এস্ট্রস রেস্ট্রে। এখন, div টযাস্ট্রে ms-2 এে সাস্ট্রথ me-auto টলখস্ট্রল টিেেত
এস্ট্রস রেস্ট্রলা। তাহস্ট্রলই বযাজেু ক্ত েস্ট্রে বনথনাসহ টলস্ট েো হস্ট্রয় রেস্ট্রলা।

14. Cards
Card হস্ট্রে এেনঃ ওপস্ট্রে এেটা ইস্ট্রেজ, এেটা টাইস্ট্রটল, টেেু রিসটিপশন, আে সাস্ট্রথ বাটনওয়ালা রেটা এেটা টলিংে েযাটে
েস্ট্রে-

এেটা img টযাে এে টভতে এেটা ইস্ট্রেজ টনলাে। h5 টেস্ট্রয় এেটা টাইস্ট্রটল টেলাে। আে p টযাে টনস্ট্রয় টেেু রিটিপশন
টেলাে, এেপে এেটা a টযাে টনস্ট্রয় .btn .btn-primary ক্লাস টেস্ট্রয় বাটন টিস্ট্রয়ট েেলাে। তাহস্ট্রল োন েেস্ট্রল রেখা োস্ট্রে-
এগুস্ট্রলা আলাো আলাোভাস্ট্রব আসস্ট্রে। সবগুলাস্ট্রে এেটা div টযাস্ট্রে টনস্ট্রয় ক্লাস টহস্ট্রসস্ট্রব .card টেস্ট্রল রেখা োস্ট্রব এখন সবগুলা
এেসাস্ট্রথ এেটা গ্রুপ হস্ট্রয়স্ট্রে। টেন্তু অস্ট্রনে বড় তাই বযবহাস্ট্রেে অস্ট্রনেটাই অস্ট্রোেয! তাই, .card এে পস্ট্রে style টহস্ট্রসস্ট্রব
টেস্ট্রবা width: 18rem; তাহস্ট্রল রোট হস্ট্রয় টেস্ট্রয় এেটা োিথ রশস্ট্রপ আসস্ট্রব। রেখস্ট্রত ভাস্ট্রলা লােস্ট্রে। টেন্তু রোন োটজথন এইসব
টেেু রেওয়া রনই। রেওয়াে প্রস্ট্রয়াজনও রনই, োেে ইস্ট্রেস্ট্রজে পে রথস্ট্রে সবগুস্ট্রলাস্ট্রে এেটা div টযাস্ট্রে টনস্ট্রয় ক্লাস টহস্ট্রসস্ট্রব
.card-body টেস্ট্রল এখন সবটেেু টিেিাে হস্ট্রয় রেস্ট্রে। বযবহাস্ট্রেে জস্ট্রনয রেটি।

এেপে োটে এটাস্ট্রে োঝখাস্ট্রন আনাে জস্ট্রনয, এেটাই োিথ ইউজ েেস্ট্রবা, োঝখাস্ট্রন। এজস্ট্রনয style এ width: 18rem; এে
সাস্ট্রথ margin:0 auto; টলখস্ট্রল োঝখাস্ট্রন েস্ট্রল আসস্ট্রব। তােপে টনস্ট্রেও টেেু টা োটজথন টনস্ট্রয় টনলােঃ margin-bottom:
10px;

তােপে, এইবাে োটে, টতনটা োিথ টতনটা েলাে টনস্ট্রয় এেই রো রত টনস্ট্রয় টনস্ট্রবা। তাহস্ট্রল েথােীটত .row টনস্ট্রয় এে টভতে
টতনটা .col টনস্ট্রয় এে টভতে ওপস্ট্রে োস্ট্রিথে রেই োেোে রেখলাে েটপ েস্ট্রে রপস্ট েস্ট্রে টেস্ট্রবা (েটবগুলা রেঞ্জ েস্ট্রে)। এবাে
রেখস্ট্রত পাটে, এেটা গ্রুস্ট্রপে েস্ট্রতা হস্ট্রলও েটবগুলা রোট বড় হস্ট্রয় রেস্ট্রে, টলখাগুলা রোট বড় হস্ট্রয় রেস্ট্রে ইতযাটে। এজস্ট্রনয
েটবগুলাে সবগুলা এেই সাইজ েস্ট্রে টনস্ট্রবা স্ট্রটাশপ রথস্ট্রেঃ 14 x 14 centimeter + 300 resolution. এখন েটবগুলা
এেই লাইস্ট্রন আস্ট্রে, রসে সাইস্ট্রজে হওয়ায়, তস্ট্রব আটটথস্ট্রেলগুলা েে রবটশ আস্ট্রে, এজস্ট্রনয <br> রেস্ট্রপ রেস্ট্রপ সোন েস্ট্রে
র লস্ট্রত পাটে রেগুস্ট্রলাে সাইজ এেটু রোট, অথবা আটটথস্ট্রেল রোট েস্ট্রে।
আবাে style রথস্ট্রে width: 18rem; এটা েুস্ট্রে টেস্ট্রত পাটে, রসখাস্ট্রন .row এে সাস্ট্রথ টলখস্ট্রত পাটেঃ .row-cols-md-3
তাহস্ট্রলও টতনটা এেসাটেস্ট্রত বস্ট্রস োস্ট্রব সু ন্দে েস্ট্রে। আবাে রোট েেস্ট্রল এখাস্ট্রন োিথগুলা ওপস্ট্রে টনস্ট্রে বস্ট্রস োস্ট্রব এেটা
েস্ট্রে।

োস্ট্রিথে টনস্ট্রে, এে বা এোটধে টলিংে বসাস্ট্রত পাটেঃ a টযাে টনস্ট্রয় এে ক্লাস টেস্ট্রবাঃ .card-link তাহস্ট্রল নেেযাল টলিংস্ট্রেে
েস্ট্রতাই, শুধু ওপস্ট্রে োউস পস্ট্রয়ন্ট েেস্ট্রল hover হস্ট্রয় রটেট রিস্ট্রোস্ট্রেশন রেঞ্জ হস্ট্রব। আবাে সাবটাইস্ট্রটল বসাস্ট্রত পাটে, েূ ল
টাইস্ট্রটস্ট্রলে টনস্ট্রে। h5 টেস্ট্রয় েূ ল টাইস্ট্রটল টেস্ট্রয়টেলাে। এেটনস্ট্রে h6 টেস্ট্রয় টাইস্ট্রটল টেলাে আে এে ক্লাস টেলােঃ .text-muted
–রটেটগুলা লাইট োলাস্ট্রেে হস্ট্রয় রেস্ট্রলা। এবাে টলস্ট েু ক্ত েেস্ট্রবা। <ul> টেস্ট্রয় আনওয়ািথাি টলস্ট টিস্ট্রয়ট েস্ট্রে, েথােীটত
গ্রুপ .list-group, আে আইস্ট্রটস্ট্রেে সাস্ট্রথ .list-group-item টেস্ট্রয় রসভ েেস্ট্রবা। এখাস্ট্রন রেখাোস্ট্রে বিথােসহ টিস্ট্রয়ট হইস্ট্রে।
এখাস্ট্রন োস্ট্রজ টেস্ট্রব- .list-group-flush এই বিথাে োড়া ক্লাসটট। এেপে আইস্ট্রটস্ট্রেে সাস্ট্রথ .list-group-item-action
ইতযাটে রেভাস্ট্রব েু ক্ত েেস্ট্রল টলস্টটট ভাস্ট্রলা লােস্ট্রব রসভাস্ট্রব েু ক্ত েস্ট্রে োস্ট্রবা।

**

নতুন এেটা োিথ বানাস্ট্রবাঃ এেটা .container-fluid টনস্ট্রয় এে টভতস্ট্রে োজ েটে- সোসটে টলটখ ওপস্ট্রে Quote, এেটনস্ট্রে
p টযাে টনস্ট্রয় এেটা েুস্ট্রটশন, এেটনস্ট্রে োস্ট্রোে নাে। তাহস্ট্রল ওপস্ট্রে টনস্ট্রে ইটলস্ট্রেন্টগুস্ট্রলা টিেেস্ট্রতা টলখা হস্ট্রয় রেস্ট্রলা। এই
সবগুলাস্ট্রে (.container-fluid এে টভতস্ট্রে ো আস্ট্রে) এেটা .card এই টযাস্ট্রেে টভতস্ট্রে আনস্ট্রবা। তাহস্ট্রল বস্ট্রেে টভতস্ট্রে েস্ট্রল
আসস্ট্রলা। ‘Quote’ এই টাইস্ট্রটলটাস্ট্রে এেটা div টযাস্ট্রে এস্ট্রন ক্লাস টেস্ট্রবা .card-header তাহস্ট্রল োস্ট্রিথে ওপস্ট্রে টেস্ট্রে
বযােগ্রাউন্ড লাইট হস্ট্রয় েূ ল টাইস্ট্রটল েু ক্ত হস্ট্রলা। এেটনস্ট্রে ো আস্ট্রে সবগুলাস্ট্রে .card-body এে টভতস্ট্রে রেস্ট্রখ টেস্ট্রল এগুস্ট্রলােও
োটজথন বস্ট্রস টেস্ট্রয় এেটা োস্ট্রিথে েূ ল োেোে ততেী হস্ট্রলা।

এেপে .card-body এে টভতস্ট্রে ো আস্ট্রে, তা রতা এেটা েুস্ট্রটশন, তাই টনস্ট্রে রথস্ট্রে ো ইটলস্ট্রেন্ট আস্ট্রে, এগুলাস্ট্রে
<blockquote> এই টযাস্ট্রেে টভতস্ট্রে আনস্ট্রবা। তাস্ট্রত েৃ শযত পটেবতথন আসস্ট্রব না েতেে, blockquote টযাস্ট্রেে ক্লাস্ট্রস
.blockquote েু ক্ত েেস্ট্রবা না। এখন blockquote এে টভতস্ট্রে আস্ট্রে p টযাে এেপস্ট্রে ো আস্ট্রে তাস্ট্রে <footer> এই টযাস্ট্রেে
টভতস্ট্রে আটন। রোন পটেবতথন হয় নাই, শুধু এটা ব্লে ইটলস্ট্রেন্ট বস্ট্রল ওপস্ট্রে টনস্ট্রে োটজথন রবস্ট্রড় রেস্ট্রলা। টেন্তু এখন footer
এে সাস্ট্রথ ক্লাস টেই .blockquote-footer তাহস্ট্রলই টিেেস্ট্রতা বস্ট্রস রেস্ট্রে সব, সাস্ট্রপাজ রোস্ট্রটশনটা রোন বইস্ট্রয় আস্ট্রে, তাহস্ট্রল
প্রথে েুস্ট্রটশন রেস্ট্রলা এেপে ু টাস্ট্রে এস্ট্রস বক্তাে নাে আে বইস্ট্রয়ে নাে েু ক্ত হস্ট্রলা। বইস্ট্রয়ে নাে ইটাটলে েস্ট্রে টেস্ট্রত োই।
তাহস্ট্রল এে আস্ট্রে পস্ট্রে <cite> </cite> এই টযাে েু ক্ত েেস্ট্রত হস্ট্রব।

োস্ট্রিথে ু টােও েু ক্ত েো োয়, রেভাস্ট্রব রহিাে েু ক্ত েেলাে। টলখলাে টনস্ট্রে 2 days ago এইটলখাটাস্ট্রে এেটা div টযাস্ট্রেে
টভতস্ট্রে টনস্ট্রয়, ক্লাসঃ card-footer তাহস্ট্রলই ু টাে হস্ট্রয় রেস্ট্রলা। োলােটা আেও লাইট েোে জস্ট্রনযঃ text-muted. এখাস্ট্রন,
.card-footer এটা অবশযই .card-body টযাস্ট্রেে পস্ট্রে হইস্ট্রত হস্ট্রব। এে টভতস্ট্রে টেস্ট্রল হস্ট্রব না।

15. Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
রেস্ট্রহতু dropdown এটা এেটা বাটনই, রেটা োপস্ট্রল টলস্ট অব টলিংে রবে হস্ট্রয় আস্ট্রস, তাই এটা েেস্ট্রত রেস্ট্রল প্রথস্ট্রে এেটা
বাটন টনস্ট্রত হস্ট্রবঃ button.btn.btn-secondary বাটস্ট্রনে নাে টেলােঃ GO TO. এই বাটন োপস্ট্রল টেেু টলস্ট অব টলিংে েস্ট্রল
আসস্ট্রব, তাই রসটা েেস্ট্রত এেটা আনঅিথােি টলস্ট টনস্ট্রবা- <ul> এে টভতস্ট্রে <li> টেস্ট্রয় আইস্ট্রটে টনস্ট্রবা। টেন্তু li এটা রতা
টলিংে না, তাই <li> </li> এে োঝখাস্ট্রন a টযাে টনস্ট্রবা, তাহস্ট্রল href= “” এে টভতস্ট্রে টেেু টেস্ট্রল এেটা টলিংেসহ টলস্ট হস্ট্রয়
রেস্ট্রলা। তাহস্ট্রল এই টলিংে অব টলস্ট আে বাটন সবগুস্ট্রলাস্ট্রে এেসাস্ট্রথ .dropdown ক্লাস্ট্রস টনস্ট্রয় আসস্ট্রবা। টেেু রেঞ্জ হয়টন।
button এে আস্ট্রেেটা ক্লাস টেস্ট্রবাঃ .dropdown-toggle তাহস্ট্রল এেটা এযাস্ট্রো ততেী হস্ট্রব, রেটা ইটন্ডস্ট্রেট েেস্ট্রে, এটা
োপস্ট্রল টেেু এেটা টলস্ট রবে হস্ট্রয় আসস্ট্রব। এেপে টলস্টগুলাস্ট্রে রশা েেস্ট্রত, <ul> এে ক্লাস টেস্ট্রবাঃ .dropdown-menu
তােপস্ট্রেও টেেু োজ েেস্ট্রে না। এেপস্ট্রে, এে টভতস্ট্রেে li, তাে টভতস্ট্রেে a – এই টযাস্ট্রেে ক্লাস টেস্ট্রবাঃ .dropdown-item
এখন, এখন োজ েোে েথা োেে টলস্টগুলা োস্ট্রয়ব হস্ট্রয় রেস্ট্রে টনে রথস্ট্রে। টেন্তু োজ েেস্ট্রে না। োেে বাটন এে টভতে
টলখস্ট্রত হস্ট্রবঃ button-bs-toggle= “dropdown”. এখন বাটন োপস্ট্রল টলিংেগুস্ট্রলা রবে হস্ট্রয় আসস্ট্রব। এখাস্ট্রন ul এে সাস্ট্রথ
.dropdown-menu টলখস্ট্রলই আইস্ট্রটেগুস্ট্রলা হাইি হয়, আে li এে সাস্ট্রথ .dropdown-item টলখস্ট্রল Decoration রেঞ্জ
হয়, আে পযাটিিং ইতযাটে েু ক্ত হয়।

রসপাস্ট্রেস্ট্রটি টলিংে েু ক্ত েো োয়, এজস্ট্রনয li.dropdown-item টলস্ট্রখ আস্ট্রেেটা আইস্ট্রটে টনলাে রেটা রসপাস্ট্রেস্ট্রটি থােস্ট্রব।
এেপে আলাো েেস্ট্রত hr টেলাে এটাে আস্ট্রে। রেখা োস্ট্রব আলাো হস্ট্রয়স্ট্রে বাট োঝখাস্ট্রন রসপাস্ট্রেশন অস্ট্রনে রবটশ। এজস্ট্রনয
hr এে সাস্ট্রথ class টনস্ট্রবাঃ .dropdown-divider

Dropdown-split: এখাস্ট্রন েু ইটা বাটন থােস্ট্রব, এেটায় টক্লে েেস্ট্রল ওই টলিংস্ট্রে েস্ট্রল োস্ট্রব, আস্ট্রেেটা এস্ট্রোেেু ক্ত বাটন,
রসটা টক্লে েেস্ট্রল বাটে টলিংে অব টলস্ট ওস্ট্রপন হস্ট্রব। এজস্ট্রনয আস্ট্রেে সবটেেু েটপ েস্ট্রে টনস্ট্রে বসাই। GoTo এই বাটস্ট্রনে
ওপস্ট্রে এেটা বাটন রনই এিংেে টযাে ইউজ েস্ট্রে োস্ট্রত বাটস্ট্রনে সাস্ট্রথ টলিংে েু ক্ত েো োয়। a.btn.btn-secondary ।
তােপে টলিংেও েু ক্ত েস্ট্রে টেই href= “link”, এই বাটস্ট্রনে নাে টেস্ট্রবা Home রেটা টলিংে অব টলস্ট্রস্টে এেটা আইস্ট্রটে,
টলিংে অব টলস্ট রথস্ট্রে রসটা রেস্ট্রট টেস্ট্রবা। এখন .dropdown এইক্লাসটা পালস্ট্রট .btn-group এটা ইউজ েটে। নাহস্ট্রল,
বাটন েু ইটাে োঝখাস্ট্রন াে থােস্ট্রব। গ্রুপ েেস্ট্রল এেসাস্ট্রথ রলস্ট্রে থােস্ট্রব। আে টনস্ট্রেে বাটস্ট্রনে সাস্ট্রথ .dropdown-split
ক্লাস েু ক্ত েটে, পাশাপাটশ বাটস্ট্রনে নাে রেস্ট্রট টেই। তাহস্ট্রল শুধু এস্ট্রো হস্ট্রয় এটা আস্ট্রেেটা বাটন, তােপাস্ট্রশ Home বাটন।
এস্ট্রোস্ট্রত টক্লে েেস্ট্রল, বাটে টলস্ট গুস্ট্রলা রশা েেস্ট্রব।

রোন োেস্ট্রে টিেেস্ট্রতা েোে পস্ট্রেও েটে dropdown/অনয রোন ইটলস্ট্রেন্ট োজ না েস্ট্রে, তাে োস্ট্রন বুটস্ট্রেস্ট্রপে JS োস্ট্রনক্ট
েোটা টিে েস্ট্রতা হয়টন। টনস্ট্রে থাো টলিংে েু ইটটে েস্ট্রধয রেস্ট্রোন এেটট ওস্ট্রপন বাটেটট অ থাো লােস্ট্রব। হয়,

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-

JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>

অথবা টনস্ট্রেে েু ইটা,

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-

SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-
j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>

16. Collapse
The collapse JavaScript plugin is used to show and hide content.

এেটা বাটন টিস্ট্রয়ট েটে, button.btn.btn-primary. এে এেটা নাে টেই। টাস্ট্রেথট হস্ট্রলা, এটা টক্লে েেস্ট্রল এেটা োিথ
আনহাইি হস্ট্রয় সােস্ট্রন আসস্ট্রব। তাহস্ট্রল োিথটট টিস্ট্রয়ট েটেঃ .card.card-body এে টভতস্ট্রে ো টলখাে টলখস্ট্রবা। তাহস্ট্রল বাটন
আে োিথটট টভটজবল হস্ট্রলা েূ ল োেোস্ট্রে। এবাে োিথবটিটা div টযাে সহ, োট েস্ট্রে এস্ট্রন, .collapse টেস্ট্রয় এেটা div
এে ক্লাস টিস্ট্রয়ট েস্ট্রে এে টভতস্ট্রে োটখ। োিথটট হাইি হস্ট্রয় রেস্ট্রলা। বাটস্ট্রনে োধযস্ট্রে এস্ট্রে আনহাইি েেস্ট্রত এে এেটা
আইটি নাে টেস্ট্রবা, class= “collapse” এে সাস্ট্রথ, সাস্ট্রপাজ id= “coll”। তােপে button টযাস্ট্রেে টভতে, data-bs-toggle=
“collapse” এটা টলখস্ট্রত হস্ট্রব, সাস্ট্রথ আইটিটাে োধযস্ট্রে টাস্ট্রেথটও েেস্ট্রত হস্ট্রব এভাস্ট্রবঃ data-bs-target = “#coll” এখাস্ট্রন,
অবশযই টাস্ট্রেথট রসটাপ েেস্ট্রত রেস্ট্রল, আইটিে নােটা # সহ রেনশন েেস্ট্রত হস্ট্রব। এখন েটে বাটনটায় টক্লে েো হয়, তাহস্ট্রল
োস্ট্রিথে বটি আনহাইি হস্ট্রয় আস্ট্রস। টেন্তু োস্ট্রিথে ওপে রোন োটজথন-টপ এিাই েো হয় নাই, তাই েযাপ নাই, বাটন রথস্ট্রে
োস্ট্রিথে টিস্ট্রস্টি বাড়াস্ট্রত বাটনটা এেটা p টযাস্ট্রেে টভতস্ট্রে টনস্ট্রয় আটস। তাহস্ট্রলই হস্ট্রয় রেস্ট্রলা collapse বাটন।

Multi-collapse: এটাও রসে এেই, রসেভাস্ট্রব বাটন টিস্ট্রয়ট েস্ট্রে, এে টনস্ট্রে েু ই বা অটধে p টযাে টনলাে (তাহস্ট্রল br টেস্ট্রয়
রস্পস রেওয়া লােস্ট্রব না।) এে টভতস্ট্রে div টযাে টনস্ট্রয় class = “collapse multicollapse” টেলাে। এখাস্ট্রন id না ইউজ
েস্ট্রে ক্লাস্ট্রসে োধযস্ট্রে েেস্ট্রতটে, তাই রসই ক্লাস্ট্রসে এেটা ইোেস্ট্রতা নাে টেলােঃ multicollapse. তাহস্ট্রল বাটস্ট্রনে টভতস্ট্রেও
data-bs-target= “.multicollapse” এভাস্ট্রব িট টেস্ট্রয় টলখস্ট্রত হস্ট্রব। আবাে collapse এটা বুটস্ট্রেস্ট্রপে ক্লাস, ইউজ রতা
েোই লােস্ট্রব নাহস্ট্রল রসটা হাইি হস্ট্রব না। ওই div এে টভতস্ট্রে আস্ট্রেেটা div টনস্ট্রয় এে ক্লাস .card.card-body টেলাে।
এখাস্ট্রন ২টা োিথ ইটলস্ট্রেন্টই spacing এে জস্ট্রনয p টযাস্ট্রেে টভতস্ট্রে আস্ট্রে। <p> <div><div> </p>

17. Navbar
রোন এেটা বাটন টিস্ট্রজবল েোে োেে টে? হয়স্ট্রতা রোন এেজন ইউজাে লেইন েস্ট্রে নাই, তাই তােজস্ট্রনয আেো ওই
বাটনটা টিস্ট্রজবল োখস্ট্রত পাটে।

<nav> </nav> টযাে টনলাে। এেটভতস্ট্রে a.navbar-brand টনলাে, টাইস্ট্রটল টেলাে Navbar বা রসই ওস্ট্রয়বসাইস্ট্রটে নাে।
তাহস্ট্রল টলিংে আোস্ট্রে রসটা রশা েেস্ট্রতস্ট্রে। navbar-brand রেওয়ায় আন্ডােলাইন েস্ট্রল রেস্ট্রে, আে সাইস্ট্রজ টলখাটা বড়
হস্ট্রয়স্ট্রে। এখন nav এই টযাস্ট্রেে টভতস্ট্রে ক্লাস টেবঃ .navbar তাহস্ট্রল ওপস্ট্রে টনস্ট্রে রনটভস্ট্রেশন বাে হওয়াে জস্ট্রনয আস্ট্রেেটু
রবটশ রস্পস টনস্ট্রয় টনস্ট্রব। এেপে .bg-dark টেলাে, তাহস্ট্রল োস্ট্রলা বযােগ্রাউন্ড ততেী হস্ট্রয় রেস্ট্রলা। এেপে .navbar-dark
টেস্ট্রল টভতস্ট্রেে টলখাগুলা white হস্ট্রয় োস্ট্রব (উস্ট্রল্টা ভাস্ট্রব হয়, dark white)। রেখা োস্ট্রে, a টযাস্ট্রেে টভতস্ট্রে রেই Navbar
টাইস্ট্রটল টেটেলাে, রসটাে সােস্ট্রন রোন রস্পস না টনস্ট্রয়ই শুরু হইস্ট্রে। তাই, a টযােটাস্ট্রে .container-fluid এই টযাস্ট্রেে
টভতস্ট্রে টনস্ট্রয় আসস্ট্রল রেখা োস্ট্রব, সােস্ট্রন রস্পস েু ক্ত হস্ট্রয় রেস্ট্রে। বাটে সবটেেু এই .container-fluid এে টভতস্ট্রেই েেস্ট্রবা।
এবাে োটে, Navbar এই টাইস্ট্রটস্ট্রলে আস্ট্রে রসই ওস্ট্রয়বসাইস্ট্রটে লস্ট্রো েু ক্ত েেস্ট্রবা। তাহস্ট্রল, <a> এে পস্ট্রে আে Navbar
এই টলখাটাে আস্ট্রে img টযাে টনলাে। src এে টভতস্ট্রে ইস্ট্রেস্ট্রজে টলিংে টেলাে, width= “24” height= “24” টনলাে img
টযাস্ট্রেে টভতস্ট্রে। পাশাপাটশ, class টহস্ট্রসস্ট্রব .align-text-top এটা েু ক্ত েেস্ট্রল, ইস্ট্রেজটা খাটনেটা ওপস্ট্রে উস্ট্রি োস্ট্রব। রনভবাস্ট্রে
ইস্ট্রেজ েু ক্ত েেস্ট্রত GBS.com এ এভাস্ট্রব এলাইন েস্ট্রে টেস্ট্রয়স্ট্রে।

a টযাস্ট্রেে টনস্ট্রে আস্ট্রেেটা a টযাে টনলাে, টাইস্ট্রটল টেলাে Home. রটেট রিস্ট্রোস্ট্রেশন রনভবাস্ট্রেে বাটে অনযসব টলখাে সাস্ট্রথ
েযাে েস্ট্রে নাই। রসজস্ট্রনয, এখাস্ট্রন class টেলােঃ .nav-link এটা টেস্ট্রল, রিেটস্ট্রিস্ট্রোস্ট্রেশন রেঞ্জ হস্ট্রয় োস্ট্রব। এবাে এটাস্ট্রে
<ul> </ul> এে টভতস্ট্রে এেটা <li> </li> টনস্ট্রয় এে টভতস্ট্রে োটখ আে, ul এে ক্লাস টহস্ট্রসস্ট্রব .navbar-nav টেই। তাহস্ট্রল
োলােটাও নীল রথস্ট্রে white এ রেঞ্জ হস্ট্রব বাটেসব রনভবাে টলখাে েস্ট্রতা।

ওপে রথস্ট্রে Home টাইস্ট্রটস্ট্রলে a টযােটাস্ট্রে েটপ েস্ট্রে এস্ট্রন টনস্ট্রে বসাই। এটাে টাইস্ট্রটল রেঞ্জ েস্ট্রে টেলাে Contact. এে li
এ class েু ক্ত েটে, .dropdown আে a টযাস্ট্রেে টভতে, .nav-link এে সাস্ট্রথ .dropdown-toggle েু ক্ত েটে। তাহস্ট্রল
এেটা এযস্ট্রো েু ক্ত হস্ট্রব সাস্ট্রথ, বুঝাস্ট্রে এটা এেটা টলস্ট অব টলিংে। এই a টযােটাে টিে টনস্ট্রে, <ul> টেস্ট্রয় আনওয়ািথাি টলস্ট
টিস্ট্রয়ট েটে, ul এে টভতে েু ইটা li আে প্রস্ট্রতযেটা li এে টভতে a টযাে, টাইস্ট্রটল েথািস্ট্রে Email, Call। এই োেোে
টনস্ট্রয়, ul এে ক্লাস .dropdown-menu আে a টযাস্ট্রেে ক্লাস .dropdown-item টেই। টেন্তু তােপস্ট্রেও টলিংে অব টলস্ট
ওস্ট্রপন হস্ট্রে না, তাই ওপস্ট্রে Contact টাইস্ট্রটলেু ক্ত a টযাস্ট্রেে সাস্ট্রথ data-bs-toggle = “dropdown” েু ক্ত েেস্ট্রলই এখন,
Contact োপস্ট্রল টলস্ট ওস্ট্রপন হস্ট্রব। লেযেীয়, Contact োপস্ট্রল রনটভস্ট্রেশনবােও বড় হস্ট্রয় োস্ট্রে।

এখন, সবগুলা unordered list: Home, Contact, সবগুলাস্ট্রে এেটা div টযাস্ট্রেে টভতস্ট্রে টনস্ট্রয় আটস, রেখা োস্ট্রে, তাস্ট্রতই
সবগুলা হাস্ট্রতে িানপাস্ট্রশ ওপস্ট্রে টনস্ট্রে হস্ট্রয় রেস্ট্রে, এেসাটেস্ট্রত থাোে পটেবস্ট্রতথ। এবাে এই div এে ক্লাস েটে রেই, .navbar-
collapse তাহস্ট্রল টলস্টগুস্ট্রলা বাে পাস্ট্রশ েস্ট্রল আসস্ট্রব। এবাে আেও এেটা ক্লাস টেলাে .collapse, সবগুলা হাইি হস্ট্রয় রেস্ট্রলা।
এে এেটা id টেলাে, োস্ট্রত এই আইটিে এে োধযস্ট্রে সবগুলাস্ট্রে আবাে আনহাইি েেস্ট্রত পাটে। সাস্ট্রপাজ, id =
“NavbarDropdown” . এই div টযাস্ট্রেে ওপস্ট্রে, <button> টনলাে এেটা রসখাস্ট্রন, টযাস্ট্রেে টভতে, data-bs-toggle =
“collapse” আে data-bs-target = “#NavbarDropdown” টেস্ট্রল রেখা োস্ট্রে এেটা রোট বাটস্ট্রনে েস্ট্রতা রসটা টক্লে
েেস্ট্রল টলস্টগুলা ওস্ট্রপন হস্ট্রে। এবাে button এে ক্লাস েটে টেই, .navbar-toggler তাহস্ট্রল ওই বাটনটা আস্ট্রেেটু বড়
হস্ট্রলা। এেপে, <button> </button> এে টভতস্ট্রে এেটা span টযাে টনস্ট্রয় এে ক্লাস েটে টেই, .navbar-toggler-icon
তাহস্ট্রল, আইেনসহ বাটন টিস্ট্রয়ট হস্ট্রলা। এটট এস্ট্রতােে আেো েেলাে, র াস্ট্রনে োউজাস্ট্রেে রেস্ট্রে রেভাস্ট্রব োজ েেস্ট্রব,
এবাে nav টযাস্ট্রেে টভতে েটে টলটখ, .navbar-expand-lg তাহস্ট্রল োউজাে রোট েেস্ট্রল ওই টলস্ট হাইি হস্ট্রয় থােস্ট্রব।
বাটস্ট্রন োপস্ট্রল টলস্ট রবে হস্ট্রয় আসস্ট্রব। আে োউজাস্ট্রেে বড় টিস্ট্রনে রেস্ট্রে, এেসাটেস্ট্রত থােস্ট্রব টলস্টগুস্ট্রলা। এখাস্ট্রন আেও
রেখা োস্ট্রে, এেসাটেস্ট্রত েখন েস্ট্রল আসস্ট্রতস্ট্রে হাস্ট্রতে িানপাস্ট্রশ (প্রথস্ট্রে েোে সেয় হাস্ট্রতে বাে পাস্ট্রশ টেস্ট্রলা।) তখন, এেটাে
সাস্ট্রথ আস্ট্রেেটা ইটলস্ট্রেস্ট্রন্টে টিস্ট্রস্টি খুব েে, এস্ট্রেবাস্ট্রে োপাোপা, তাই, <ul> এে টভতে, .navbar-nav এে সাস্ট্রথ আস্ট্রেেটা
ক্লাস .ps-5 পযাটিিং েু ক্ত েেস্ট্রবা। তাহস্ট্রল টিস্ট্রস্টি েু ক্ত হস্ট্রয় রোটােুটট এেটা ভাস্ট্রলা রশস্ট্রপ েস্ট্রল আসস্ট্রে।

navbar টাস্ট্রে ওপস্ট্রে টনস্ট্রয় োওয়া হস্ট্রলা, এটাে পটজশন sticky েেস্ট্রত, স্টাইস্ট্রল রেস্ট্রয় position: sticky; top: 0; েেস্ট্রলই
হস্ট্রব। বাট সেসযা হস্ট্রে, টেেু টেেু আইস্ট্রটে এটাে ওপস্ট্রে উস্ট্রি োস্ট্রে িল েেস্ট্রল। bootstrap এ টিেেস্ট্রতা টস্টে েেস্ট্রত
োইস্ট্রল <nav> এে সাস্ট্রথ ক্লাস টহস্ট্রসস্ট্রব, .sticky-top েু ক্ত েেস্ট্রলই হস্ট্রব।

nav এই টযাস্ট্রেে সাস্ট্রথ .sticky-top না টেস্ট্রয় .fixed-top টেস্ট্রল রসটা ওই জায়োস্ট্রতই ট েি হস্ট্রয় থাস্ট্রে। রসস্ট্রেস্ট্রে ওটা
অস্ট্রটাস্ট্রেটটে ওপস্ট্রে েস্ট্রল োয়, টনস্ট্রে নাোস্ট্রত হস্ট্রল োটজথন-টপ এিাই েেস্ট্রত হস্ট্রব। এোড়া nav এে সাস্ট্রথ opacity: 80% এটা
স্টাইল টহস্ট্রসস্ট্রব এি েেস্ট্রল ভাস্ট্রলা ইস্ট্র ক্ট পাওয়া োয়, রেস্ট্রহতু ওটা টস্টটে, তাই রেখা োস্ট্রব ইটলস্ট্রেন্টগুস্ট্রলা ওটাে টভতস্ট্রে ঢুস্ট্রে
োস্ট্রে। a টযাস্ট্রেে .navbar-bard এে সাস্ট্রথ .p-3 েু ক্ত েেস্ট্রল, োেটেে রথস্ট্রে ওস্ট্রয়বসাইস্ট্রটে নাে এেটা জায়ো টনস্ট্রয় টনস্ট্রব,
হাইলাইট হস্ট্রব। আস্ট্রে রেেন বােবাে ul টনস্ট্রয় এে টভতস্ট্রে li টনস্ট্রয় আইস্ট্রটে েু ক্ত েস্ট্রেটে, রসভাস্ট্রব না েস্ট্রে এেবাে ul টনস্ট্রয়
ul-এে ক্লাস .navbar-nav , পস্ট্রে এেবাে েস্ট্রে li টনস্ট্রয় li-এে ক্লাস .nav-item এে টভতে, a টনস্ট্রয় a-এে ক্লাস .nav-
link এভাস্ট্রব এস্ট্রেেপে এে আইস্ট্রটে েু ক্ত েেস্ট্রত পােস্ট্রবা। রসস্ট্রেস্ট্রে রেখাস্ট্রব, রে এেটাে টনস্ট্রে টনস্ট্রে এভাস্ট্রব েু ক্ত হইস্ট্রতস্ট্রে,
তাই ওপস্ট্রে nav এে টভতে, .navbar-expand-lg েু ক্ত েটে। তাহস্ট্রল এেসাটেস্ট্রত েস্ট্রল আসস্ট্রব।

সােথ আইস্ট্রটে বসাস্ট্রত, form টনই, action এে টভতস্ট্রে টেেু টেস্ট্রত হস্ট্রব না, এে টভতে, input টযাে টনস্ট্রবা। type= “search”.
তাহস্ট্রল রোট এেটা সােথবে ততেী হস্ট্রব। এে ক্লাস .form-control টনস্ট্রল বেটা আেও বড় হস্ট্রলা। placeholder = “Search”
টলখস্ট্রল বস্ট্রেে টভতে Search টলখাটা আবো েস্ট্রে রেখাস্ট্রব। টক্লে েেস্ট্রল েস্ট্রল োস্ট্রব। এে টনস্ট্রে button টযাে েু ক্ত েটে, ক্লাস
.btn.btn-outline-success আে টাইপ type= “submit”। রেখা োস্ট্রে, বাটনটট টনস্ট্রে েস্ট্রল আসস্ট্রে। তাহস্ট্রল form এে
ক্লাস টহস্ট্রসস্ট্রব, .d-flex টলখস্ট্রলই এেলাইস্ট্রন েস্ট্রল আসস্ট্রব। এবাে রেখা োস্ট্রে, ইনপুট বে আে বাটস্ট্রনে েস্ট্রধয রোন টিস্ট্রস্টি
রনই। তাই, input এে টভতে, .me-2 টলটখ। তাহস্ট্রল রশষ রথস্ট্রে বাটস্ট্রনে সাস্ট্রথ টেেু টিস্ট্রস্টি ততেী হস্ট্রব।

এবাে অস্ট্রনে ওস্ট্রপ্র ul এে ক্লাস রেখাস্ট্রন .navbar-nav আস্ট্রে রসখাস্ট্রন .me-auto েু ক্ত েেস্ট্রল রেই আইস্ট্রটেগুস্ট্রলা রশস্ট্রষ টেস্ট্রলা
রসগুস্ট্রলা, আস্ট্রে েস্ট্রল আসস্ট্রব শুরুস্ট্রত।

ওপস্ট্রেে রনটভস্ট্রেশন বাে ততেী েেস্ট্রত, nav টনস্ট্রয় এে ক্লাস, .navbar.navbar-light টনলাে, এেটভতস্ট্রে form টযাে টনলাে
ক্লাস .container-fluid োস্ট্রত টভতস্ট্রে input আইস্ট্রটে টনস্ট্রল রসটা পুস্ট্রোটা জায়ো োভাে েস্ট্রে। তােপস্ট্রে টনলাে input,
এখাস্ট্রন বাইটি ল্ট type= “text” ই থােস্ট্রব। class টহস্ট্রসস্ট্রব .form-control েু ক্ত েেস্ট্রবা। placeholder= “Username”
টেলাে। এখন nav এে style এ background-color এ #e3f2fd টেস্ট্রল এেটা হালো আোশী োলাে ইনপুট বস্ট্রেে
োেটেস্ট্রে েৃ শযোন হয়। ইনপুট এে ওপস্ট্রে এেটা span টনস্ট্রয় @ টাইস্ট্রটল টেলাে, আে এে ক্লাস .input-group-text টেলাে।
টেন্তু রসটা হস্ট্রয়স্ট্রেস্ট্রলা ওপস্ট্রে টনস্ট্রে। এেটসটেয়াস্ট্রল আনস্ট্রত, span আে এে টনস্ট্রেে input রে, div.input-group এ আনস্ট্রলই
ওপস্ট্রেে েস্ট্রতা রনটভস্ট্রেশনবাে ততেী হস্ট্রয় োস্ট্রে।

শুধু এেেে সােথ বানাস্ট্রনা অলস্ট্রেটি রেস্ট্রখটে, এেটা .container-fluid টনস্ট্রয় এেটভতে form টনলাে, input টনলাে, type=
“search” আে ক্লাস .form-control তাহস্ট্রল লম্বা এেটা ইনপুট বে টিস্ট্রয়ট হস্ট্রলা। এে placeholder সোন “Search”
টেস্ট্রল টলখাটা আবো হস্ট্রয় বস্ট্রেে টভতে থােস্ট্রব। টনস্ট্রে টনলাে বাটন, এে ক্লাস .btn.btn-outline-success টনলাে। তাহস্ট্রল
বাটন আে সােথ বে ওপস্ট্রে টনস্ট্রে হস্ট্রয় রেস্ট্রে, তাহস্ট্রল form এে ক্লাস .d-flex টেস্ট্রলই এেসাটেস্ট্রত েস্ট্রল আসস্ট্রব। রেস্ট্রহতু input
এে সাস্ট্রথ সােথ বস্ট্রেে টিস্ট্রস্টি রনই, তাই, input এে ক্লাস্ট্রস .me-2 েু ক্ত েটে।
18. Forms
Forms এে টেেু টেেু 4.5 এ রপলাে, রেগুলা 5.0 এ রনই। রসজস্ট্রনয ওপস্ট্রেে টলিংে রথস্ট্রে 5.0 রে 4.5 বাটনস্ট্রয় টেস্ট্রলই আস্ট্রেে
িেুস্ট্রেন্টস-এ েস্ট্রল োস্ট্রব।

এেটা েথ বানাস্ট্রবা, রেখাস্ট্রন Email address: এভাস্ট্রব টলখা থােস্ট্রব এে সাস্ট্রথ এেই লাইস্ট্রন ইস্ট্রেইল রেওয়াও থােস্ট্রব।
ইস্ট্রেইলটা বসস্ট্রব রিইন রটেট এে েস্ট্রতা, ো বুঝাস্ট্রে এটা পটেবতথন েো োস্ট্রব না, ট েি। এেটা <label> </label> টযাে
টনস্ট্রয় এে টভতস্ট্রে টলখলাে, Email address: । এে টনস্ট্রে টলখলােঃ <input> এখাস্ট্রন value = “example@emal.com”
এেেে ভযালু টেস্ট্রয় টেলাে। রেখাস্ট্রব, এেটা বস্ট্রেে টভতে এই ভযালু টা আস্ট্রে, ইউজাে োইস্ট্রল ভযালু টা রেঞ্জ েেস্ট্রত পােস্ট্রব।
এখন েটে এে সাস্ট্রথ আেও টলটখ readonly তাহস্ট্রল ইউজাে আে রেঞ্জ েেস্ট্রত পােস্ট্রব না। বাট এখনও বিথােসহ বেটা েস্ট্রয়
রেস্ট্রে। এখন input টযাস্ট্রে আেও এেটা এটট্রটবউট ক্লাস্ট্রস এি েটেঃ .form-control-plaintext তাহস্ট্রল ইস্ট্রেলটা
রিইনস্ট্রটস্ট্রেে েস্ট্রতা অনযসব টলখাে েস্ট্রতা েস্ট্রে আসস্ট্রলা। টেন্তু এটা আবাে এেলাইন টনস্ট্রে েস্ট্রল রেস্ট্রে, ব্লে ইটলস্ট্রেন্ট হস্ট্রয়।
এজস্ট্রনয, এেটা .row ক্লাস টনস্ট্রয় label টযাে আে input টযােগুস্ট্রলা টনস্ট্রয় টনই টভতস্ট্রে। label টযােটাে সাস্ট্রথ .col-2 ক্লাস
েু ক্ত েটে, আে input টযােস্ট্রে আবাে োট েস্ট্রে .col-10 ক্লাস বাটনস্ট্রয় রসই div টযাস্ট্রেে টভতে োটখ। এবাে এেলাইস্ট্রন
েু ইটাই আসস্ট্রে, বাট এেটু ওপস্ট্রে টনস্ট্রে হস্ট্রয় রেস্ট্রে। এখন label এে ক্লাস্ট্রস এ েটে আেও .col-form-label েু ক্ত েস্ট্রে টেই,
তাহস্ট্রল এটা এেলাইস্ট্রন হস্ট্রয় রেস্ট্রলা। সবাে টনস্ট্রে এস্ট্রস .form-text টলস্ট্রখ টেেু এেটা টলখস্ট্রল সাস্ট্রপাজ, “We’ll never share
your email with anyone” এভাস্ট্রব টলখস্ট্রল, এই ক্লাস এি েোে জস্ট্রনয স্ট্রন্টে সাইজ রোট হস্ট্রয় োস্ট্রব, োলাে লাইট হস্ট্রয়
োস্ট্রব।

এবাে পাসওয়ািথ টনস্ট্রবা ইউজাস্ট্রেে োে রথস্ট্রে, <label> Password: </label> এভাস্ট্রব রলস্ট্রভস্ট্রলে টাইস্ট্রটল টেলাে। টনস্ট্রে
input টযাে টনলাে, type = “password” । তাহস্ট্রল পাসওয়ািথ োপস্ট্রল রসটা িট িট েস্ট্রে রশা েস্ট্রে টাইপ েোে সেয়,
টেন্তু বেটট আোস্ট্রে রোট, এটাস্ট্রে ু ল সাইস্ট্রজ টনস্ট্রয় রেস্ট্রত, class টহস্ট্রসস্ট্রব, .form-control েু ক্ত েটে ইনপুট টযাস্ট্রেে টভতস্ট্রে।
এবাে label টযাস্ট্রেে টভতস্ট্রে .form-label েু ক্ত েটে, রলস্ট্রভস্ট্রলে ওপস্ট্রে টনস্ট্রে জায়ো বাড়স্ট্রব টেেু । পুস্ট্রো রলস্ট্রবল আে ইনপুটস্ট্রে
.mb-3 োটজথস্ট্রনে টভতস্ট্রে টনস্ট্রয় আটস, টনস্ট্রে আেও টেেু জায়ো বাড়স্ট্রব। পাসওয়াস্ট্রিথে এে সাস্ট্রথ required েু ক্ত েস্ট্রে টেস্ট্রল,
তাহস্ট্রল পস্ট্রে সাবটেট বাটন ইউজ েোে পস্ট্রে, পাসওয়ািথ ট লাপ না েস্ট্রে সাবটেট েেস্ট্রত োইস্ট্রল বলস্ট্রব টেস ট ল্ডস আে
টেস্ট্রোয়ািথ।

এেধেস্ট্রেে ইনপুট টনস্ট্রবা, রেখাস্ট্রন ইউজাে এেটা টলস্ট রথস্ট্রে টসস্ট্রলক্ট েস্ট্রে টেস্ট্রব জায়োে নাে। এজস্ট্রনয এেটা <label> টযাে
টনস্ট্রয় এে েস্ট্রধয টাইস্ট্রটল টেলাে, Select any: এেপে টনস্ট্রে <select> </select> টযাে টনস্ট্রয়, এেটভতস্ট্রে <option>
</option> রেন এে টভতস্ট্রে অপশনগুস্ট্রলা টলস্ট্রখ টেলাে। এস্ট্রত োেথেে েথ টিস্ট্রয়ট হস্ট্রলা, বাট এটাস্ট্রতও ইনপুট বস্ট্রেে জায়ো
রোট, রসজস্ট্রনয এে ক্লাস েটে টেই, .form-control তাহস্ট্রল বড় হস্ট্রয় োস্ট্রব ইনপুস্ট্রটে বেটট। েথােীটত label এে সাস্ট্রথ
.form-label েু ক্ত েস্ট্রে টেই।

এেটনস্ট্রে textarea েু ক্ত েেস্ট্রবা। রসজস্ট্রনয, label টনলাে এেইভাস্ট্রব। আে textarea এই টযাে টনস্ট্রল অস্ট্রটা cols= “30”
rows = “10” েু ক্ত হস্ট্রয় োস্ট্রব। রসগুস্ট্রলা বাে টেস্ট্রয় .form-control েু ক্ত েটে, আে আস্ট্রেেটু প্রস্ট্রে বড় েেস্ট্রত rows= “3”
টনই।
Radio: এেটা input টযাে টনলাে, এে type টেলাে radio । এে টনস্ট্রে label টযাে টনস্ট্রয় টলখলাে Male. তাহস্ট্রল এেটা
রোট রবটসে html রেেবাটন টিস্ট্রয়ট হস্ট্রলা। এখন input এে সাস্ট্রথ েটে ক্লাস েু ক্ত েটে, .form-check-input তাহস্ট্রল
এখনোে রোল রেেবাটনটা রলা েেস্ট্রব, আোস্ট্রে বড় হস্ট্রব। এে টনস্ট্রে রসেভাস্ট্রব Female এে জস্ট্রনয টিস্ট্রয়ট েটে। রেখাোস্ট্রে
েু ইটা এেলাইস্ট্রন হস্ট্রয় রেস্ট্রে, আে বাটন েু ইটাই টসস্ট্রলক্ট েো োস্ট্রে। োটে আলাো লাইস্ট্রন, আে রেস্ট্রোন এেটা টসস্ট্রলক্ট েেস্ট্রত।
তাহস্ট্রল, েু ইটাে input এ রসে নাে টেলাে- name = “gender-check” । এখন রেস্ট্রোন এেটা টসস্ট্রলক্ট েো োস্ট্রব। এেপে
male আে female েু ইটা েু ই div ব্লস্ট্রে োট েস্ট্রে টনস্ট্রয় োই। এখন আলাো লাইস্ট্রন রেখাস্ট্রব। টেন্তু লাইন টিস্ট্রস্টি অস্ট্রনে
েে। এজস্ট্রনয div টযাস্ট্রে েস্ট্রধয ক্লাস টিস্ট্রয়ট েটে েটে- .form-check তাহস্ট্রল, টিস্ট্রস্টি টিস্ট্রয়ট হস্ট্রব েু ইটাে েস্ট্রধয। এেপে
male এে input এ checked েু ক্ত েটে েটে তাহস্ট্রল, রসটা টি ল্টভাস্ট্রব টসস্ট্রলক্ট হস্ট্রয় থােস্ট্রব। এবাে থািথ আস্ট্রেেটা অপশন
আস্ট্রেে অপশন রথস্ট্রে েটপ েস্ট্রে েু ক্ত েটে Second Gender. এটায় input এে সাস্ট্রথ .disabled েু ক্ত েেস্ট্রল রসটা আে
টসস্ট্রলক্ট েো োস্ট্রব না। েটেও রেস্ট্রখ অনয অপশস্ট্রনে েস্ট্রতাই টসস্ট্রলস্ট্রক্টবল েস্ট্রন হস্ট্রে, এজস্ট্রনয এটায় label এে সাস্ট্রথ .form-
check-label েু ক্ত েেস্ট্রল বাটনটা disabled থাোয় টলখাগুলাও লাইট োলাস্ট্রেে হস্ট্রয় োস্ট্রব। অনয label টযাস্ট্রে এই অপশন
েু ক্ত েটে নাই, োেে রসখাস্ট্রন েু ক্ত েো না েো এেই রেজাল্ট রেয়, শুধু ইনপুস্ট্রট disabled থােস্ট্রল এেপস্ট্রেে রলস্ট্রবস্ট্রলে
সাস্ট্রথ েু ক্ত েেস্ট্রল রেঞ্জ হয়।

Large screen এ এেসাটেস্ট্রত েু ই ইনপুট, আে টেিল/স্ট্রোট screen এে রেস্ট্রে ভাে হস্ট্রয় েু টট ওপে টনে হস্ট্রয় োওয়াঃ
রসজস্ট্রনয, .row ক্লাস টনস্ট্রয়, এেটভতস্ট্রে েু টট .col-md-6 টনস্ট্রয় তােটভতে label + input টযাে টনস্ট্রয় েথােীটত আস্ট্রেে তটেোয়
েথ বানাস্ট্রনা োস্ট্রব (input এে সাস্ট্রথ .form-control েস্ট্রে)। তস্ট্রব টগ্রটিিং টসস্ট্রস্টস্ট্রেে রোট্ট এেট্রা যাটসটলটট। আেও সু টবধা
আস্ট্রে, এেটা .col-7 টনলাে এেপস্ট্রে শুধু .col ক্লাস টিস্ট্রয়ট েস্ট্রে েস্ট্রে ইনপুট টনলাে। তাহস্ট্রল .col-7 এে পস্ট্রে বাটেগুস্ট্রলাে
জস্ট্রনয অস্ট্রটা জায়ো টসস্ট্রলক্ট েস্ট্রে টনস্ট্রব, েতটুেু লাস্ট্রে। রস্পটশ াই েস্ট্রে ১২ ট লাপ েস্ট্রে টেস্ট্রত হস্ট্রব না। আে placeholder
সোন টেস্ট্রয় টলস্ট্রখ টেস্ট্রল রসটা টহন্ট টহস্ট্রসস্ট্রব োজ েেস্ট্রব রে ইনপুট বেটা টেস্ট্রসে।

Form-check: এেটা input টনলাে এেটা label টনলাে। input এ type টেলাে checkbox . তাহস্ট্রল এেটা রোট রেেবে
বাস্ট্রে এটপয়াে হস্ট্রব, রবটসে html এ। এইখাস্ট্রন input এে সাস্ট্রথ ক্লাস টেই, .form-check-input তাহস্ট্রল, রেেবেটা সাইস্ট্রজ
বড় হস্ট্রব। এটা ইউজ েো োয়, রেেন I agree on the terms and conditions এেেে জায়োয়।

XX-> <form> </form> এেেে ওপস্ট্রে টনস্ট্রে না রেস্ট্রখও েথ ততেী েো োয় বুটস্ট্রেস্ট্রপে ক্লাস্ট্রস। বাট এখাস্ট্রন রবশ সেসযা
রেখা োয়। রেেনঃ সাস্ট্রপাজ, button.btn.btn-success এেেে বাটন ততেী েস্ট্রে type= “submit” টেলাে, আে এেটা
টাইস্ট্রটল টেলাে বাটস্ট্রনে (Submit). এখন email এই ইনপুস্ট্রটে েস্ট্রধয required টেলাে। তাও submit োপস্ট্রল েস্ট্রন হস্ট্রে
োজ হস্ট্রেনা। এেেুয়যাটল োজ হস্ট্রে না। পুস্ট্রো েথটাস্ট্রে form টযাস্ট্রেে টভতস্ট্রে টনস্ট্রয় আসস্ট্রল এবাে required রেওয়াে পস্ট্রে
রসটা না টেস্ট্রয় সাবটেট েেস্ট্রল বলস্ট্রব ওই ট ল্ড ট লাপ েেস্ট্রত।

19. Popover
এেটা বাটন টনস্ট্রবাঃ button.btn.btn-danger.btn-lg রেন, এেটভতস্ট্রে টলখলাে, data-bs-toggle = “popover” তাহস্ট্রল
পপওভাে েোে জস্ট্রনয বাটনটা ততেী হস্ট্রয় রেস্ট্রলা, এবাে data-bs-content = “anything” টলস্ট্রখ টেস্ট্রল রসটা পপওভাে হস্ট্রয়
আসস্ট্রব, বাটনটায় টক্লে েেস্ট্রল। আবাে title = “popover-title” এেন টেস্ট্রয় টেস্ট্রল, টাইস্ট্রটলসহ িায়লে বেটা আসস্ট্রব ।
আবাে, এগুস্ট্রলাে টেেু ই োজ েেস্ট্রব না েটে না শুরুস্ট্রত এই টিপ্টটা েু ক্ত েস্ট্রে টেই সাস্ট্রথ। এটা পপওভাে োস্ট্রত োজ েস্ট্রে
রসজস্ট্রনয টলখা হস্ট্রয়স্ট্রেঃ

20. Toasts
এেটা বাটন টনস্ট্রবাঃ button.btn.btn-lg.btn-primary বাটস্ট্রনে টভতস্ট্রে ািংশন েল েেস্ট্রবাঃ onclick = “Toasty()”
এখাস্ট্রন Toasty() ািংশনটা আোস্ট্রেেস্ট্রেই টিস্ট্রয়ট েস্ট্রে টনস্ট্রত হস্ট্রব। রসটা পস্ট্রে েেটে। এেটা Toast টিস্ট্রয়ট েস্ট্রে টনই।
রসজস্ট্রনয .toast-header ক্লাস্ট্রসে টভতে, এেটা img টযাে টনই, রেখাস্ট্রন রোট এেটা png এি েটে, Strong টযাস্ট্রেে টভতে
এেটা টাইস্ট্রটল টেই, Toast-header এেপে small টযাস্ট্রেে টভতে রোট ও লাইট োলাস্ট্রেে টেেু এেটা টলটখঃ “11 mins
ago” এেপস্ট্রে button.btn-close টিস্ট্রয়ট েটে। তাহস্ট্রল এেটা রক্লাজ েোে জস্ট্রনয বাটন টিস্ট্রয়ট হস্ট্রলা। টেন্তু এই বাটনটা
টে রক্লাজ েেস্ট্রব না বস্ট্রল টেস্ট্রল এটট োজ েেস্ট্রব না। এজস্ট্রনয এেসাস্ট্রথ data-bs-dismiss = “toast” তাহস্ট্রল রহিাে টিস্ট্রয়ট
েো হস্ট্রয় রেস্ট্রলা। েটেও সবগুস্ট্রলা টজটনস এেসাস্ট্রথ হস্ট্রয় রেস্ট্রে। img টযাস্ট্রে .me-2 এি েেস্ট্রল ইস্ট্রেজ রথস্ট্রে strong টাইস্ট্রটলটা
এেটু েূ স্ট্রে হস্ট্রব। এেপে strong টযাস্ট্রে .me-auto েু ক্ত েটে। তাহস্ট্রল টাইস্ট্রটলটা শুরুস্ট্রত আে এেপস্ট্রেে small টযাস্ট্রেে
টলখাগুলা সবাে রশস্ট্রষ েস্ট্রল োস্ট্রব। আে এখনও close বাটনটা োজ েেস্ট্রে না। োেে রটাস্ট টিস্ট্রয়ট েো হয়টন এখনও।
রটাস্ট টিস্ট্রয়ট েোে আস্ট্রে, এে বটি টিস্ট্রয়ট েস্ট্রে টনই .toast-body টেস্ট্রয় । এে টভতস্ট্রে েযাস্ট্রসজ টেস্ট্রয় তােপে, toast-
header আে .toast-body েু ইটাস্ট্রে .toast ক্লাস্ট্রসে টভতে োখস্ট্রল এটা অস্ট্রটা হাইি হস্ট্রয় রেস্ট্রলা। টেন্তু টনস্ট্রে জায়ো াো
থােস্ট্রতস্ট্রে, এজস্ট্রনয .toast এে সাস্ট্রথ .hide েু ক্ত েটে। তাহস্ট্রল আে াো থােস্ট্রব না। এটটস্ট্রে বাটস্ট্রন টক্লে েস্ট্রে আবাে
আনহাইি েেস্ট্রত হস্ট্রল এে সাস্ট্রথ আেও id েু ক্ত েেস্ট্রত হস্ট্রব। টেলাে id= “EpicToast” তাহস্ট্রল রটাস্ট টিস্ট্রয়ট হস্ট্রয়স্ট্রে।
এটটস্ট্রে োন েেস্ট্রত টনস্ট্রেে েস্ট্রতা েস্ট্রে টিপ্ট টলখস্ট্রব হস্ট্রব।
এই টিপ টলস্ট্রখ টেস্ট্রল EpicToast আইটিে জস্ট্রনয Toasty() ািংশনটা োন েেস্ট্রব। এখন এেটু পটজশন টিে েো েেোে।
এজস্ট্রনয .toast.hide এই পুস্ট্রো টিটভশনটা রেখাস্ট্রন রটাস্ট্রস্টে রহিাে আে বটি আস্ট্রে, পুস্ট্রোটাস্ট্রে .position-fixed টিটভশস্ট্রন
টনস্ট্রয় আসলাে। তস্ট্রব এখন আে োজ েেস্ট্রে না। োেে পটজশন ট েি েস্ট্রে টেস্ট্রল রসটা রোথায় ট েি হস্ট্রব এটাও বস্ট্রল
টেস্ট্রত হস্ট্রব। টেলাে .bottom-0 তাহস্ট্রল সবাে টনস্ট্রে রেখাস্ট্রব বাটস্ট্রন টক্লে েেস্ট্রল। আে এে সাস্ট্রথ আেও .end-0 েু ক্ত েেস্ট্রল
রসটা এে রোনায় রেখাস্ট্রব। তাে সাস্ট্রথ আেও p-3 েু ক্ত েেস্ট্রল োেটেস্ট্রে টেেু টা েযাপ থােস্ট্রব, রসই েযাস্ট্রপ এে শযাস্ট্রিা ইতযাটেই
রেখস্ট্রত পাওয়া োস্ট্রব।

21. Utilities
Border:

এেটা span টযাে টনলাে। এে ক্লাস টেলাে .box আে box ক্লাসস্ট্রে স্টাইলটশস্ট্রট টি াইন েেস্ট্রবা এভাস্ট্রবঃ width: 70px;
রেন, height: 70px; রেন border: 3px solid black; তাহস্ট্রল রসভ েেস্ট্রল রেখস্ট্রবা, রোন বে এখনও টিস্ট্রয়ট হয়টন।
এজস্ট্রনয .box ক্লাস্ট্রস টলখস্ট্রবাঃ display: inline-block; তাহস্ট্রল বে আোে টিস্ট্রয়ট হস্ট্রলা। এেপে স্টাইস্ট্রল আেও টলখস্ট্রবাঃ
margin: 6px; তাহস্ট্রল শুরু রথস্ট্রে এেটা টিস্ট্রস্টি, টনস্ট্রে রথস্ট্রে এেটা টিস্ট্রস্টি আে পাশাপাটশ অস্ট্রনেগুস্ট্রলা বে টিস্ট্রয়ট হস্ট্রল
রসখান রথস্ট্রেও টিস্ট্রস্টি থােস্ট্রব। এবাে span টযাস্ট্রেে টভতস্ট্রে .border-top-0 টেস্ট্রল টস্ট্রপ বিথাে হস্ট্রব না। আে .border-
end-0 টেস্ট্রল রল স্ট্রট বিথাে হস্ট্রব না ইতযাটে। এভাস্ট্রব রোনটেস্ট্রে হস্ট্রব রোনটেস্ট্রে হস্ট্রব না, টি াইন েস্ট্রে টেস্ট্রল োজ েেস্ট্রব।
style টশস্ট্রট box ক্লাস্ট্রসে টভতে বিথাে উস্ট্রেখ না েস্ট্রে েটে span টযাস্ট্রে ক্লাস টহস্ট্রসস্ট্রব .border.border-3 েু ক্ত েটে তাহস্ট্রল
এভাস্ট্রব 3-depth এে বিথােেু ক্ত হস্ট্রব রগ্র োলাস্ট্রেে।

Responsive float class

Div টযাস্ট্রে টেেু রটেট টনই, এেপে এে ক্লাস েু ক্ত েটে .float-sm-end তাহস্ট্রল, এেট্রা স্মল টিভাইস্ট্রস টলখাটা বাস্ট্রে থােস্ট্রব,
োউজােটা আস্ট্রেেটু ইস্ট্রন্টন্ড েস্ট্রে বড় েেস্ট্রত থােস্ট্রল েখন ৫৭৬ টপস্ট্রেস্ট্রলে সোন বা বড় হস্ট্রব তখন রটেট িাস্ট্রন রলাস্ট্রয়ট
হস্ট্রয় আসস্ট্রব। এেইভাস্ট্রব .foat-md-end টেস্ট্রল টেটিয়াে টিস্ট্রনে সোন অথথাৎ ৭৬৮ টপস্ট্রেস্ট্রলে সোন বা বড় হস্ট্রল িাস্ট্রন েস্ট্রল
আসস্ট্রব। এেইভাস্ট্রব .float-lg-end (লাজথ টিনঃ ৯৯২) আে .float-xl-end (এেট্রা লাজথঃ ১২০০)। তােপে .float-none
টেস্ট্রল না টেস্ট্রল রসটা আে রলাস্ট্রয়ট েেস্ট্রব না। সেসেয় বাস্ট্রেই থােস্ট্রব।

Horizontal Centering

Div টযাস্ট্রে টেেু রটেট টনস্ট্রয় এে সাইজ েস্ট্রে টেলাে style = “width: 300px” এেপে ক্লাস্ট্রস .mx-auto েস্ট্রে টেস্ট্রল টলখাটা
টেিস্ট্রল েস্ট্রল আসস্ট্রব। আেও টেেু টিজাইন েেস্ট্রত .bg-warning টেলাে। .p-3 টেস্ট্রল টলখাটাে োেপাস্ট্রশ টেেু জায়ো াো
হস্ট্রব। আে স্টাইস্ট্রল text-align: justify; টেস্ট্রল এেটা বস্ট্রেে েস্ট্রতা হস্ট্রব টলখাটা, আে অবশযই োঝখাস্ট্রন থােস্ট্রব পুস্ট্রোটা।

Shadows

সাো বযােগ্রাউস্ট্রন্ড শযাস্ট্রিা টেস্ট্রল রসটা ভাস্ট্রলােস্ট্রতা বুঝা োয়। তাই এেটা container ব্লে টনস্ট্রয় বযােগ্রাউন্ড সাো েস্ট্রে টনলাে
or .bg-light ক্লাস ইউজ েেলাে। div টযাস্ট্রে টেেু টলখলাে। এে ক্লাস্ট্রস .shadow-lg টেলাে, তাহস্ট্রল এেটা রোট ব্লস্ট্রেে
োেটেস্ট্রে বড় েস্ট্রে শযাস্ট্রিা টিস্ট্রয়ট হস্ট্রলা। ব্লেটাে তের্থযপ্রস্ত বাড়াস্ট্রত, .p-4 ইউজ েেলাে। এস্ট্রত শযাস্ট্রিা অস্ট্রনেেূ ে জায়ো টনস্ট্রয়
টনস্ট্রব, তাই টনস্ট্রেে ইটলস্ট্রেস্ট্রন্টে সাস্ট্রথ টিস্ট্রস্টি বাটড়স্ট্রয় টিে োখস্ট্রত, .mb-4 ইউজ েেলাে। তােপে োইস্ট্রল .bg-white টলখস্ট্রল
বযােগ্রাউন্ড োলাে টপউে রহায়াইট হস্ট্রয় োস্ট্রব। তােপে এইখাস্ট্রনে div ব্লে েটপ েস্ট্রে, অনযে .shadow ইউজ েেস্ট্রল টি ল্ট
শযাস্ট্রিা। .shadow-sm ইউজ েেস্ট্রল রোট শযাস্ট্রিা টিস্ট্রয়ট হস্ট্রব। আে .shadow-none টলখস্ট্রল রোন শযাস্ট্রিা টিস্ট্রয়ট হস্ট্রব না।

Aspect-Ratio

এেটা ইউটটস্ট্রবে এস্ট্রম্বস্ট্রিি টভটিও এস্ট্রন েটপ েস্ট্রে div টযাস্ট্রেে টভতে োখলাে। div টযাস্ট্রেে টভতে .ratio.ratio-21x9
টলখস্ট্রল এই রেটশও রেইস্ট্রন্টইন েস্ট্রে এস্ট্রম্বস্ট্রিি টভটিও রশা েেস্ট্রব। এেেে আেও টে টে রেটশও ইউজ েো োয় তাে এেটা
টলস্ট হস্ট্রলাঃ

 21x9 এটা আড়াআটড়ভাস্ট্রব বড়, টেন্তু হাইস্ট্রট অস্ট্রনেটা োপা

 16x9 এটা ওপস্ট্রে টনস্ট্রে েু ইটেস্ট্রেই বড়।
 4x3 এটা আেও লাজথ হস্ট্রয় োয়।
 1x1 এটা সবোইস্ট্রত লাজথ।

Finally আস্ট্রেেটা সেসযাে সলভ েেস্ট্রত হস্ট্রব। রনভবাে রোট েেস্ট্রল, রে বাটন টিস্ট্রয়ট হয়, রসখান রথস্ট্রে টক্লে েস্ট্রে েযানু য
রবে েেস্ট্রত রেস্ট্রল টলখাগুলা হস্ট্রয় োয়, সাো আে বযােগ্রাউন্ড োলােহীন। স্ট্রল আে টেেু ই েৃ শযোন হয়না। এটা আস্ট্রে রখয়াল
েো হয়টন। এটা হস্ট্রে .navbar-nav এে টভতস্ট্রে সবগুলা link এে টলস্ট আস্ট্রে। এটা আবাে আস্ট্রেেটা টিটভশস্ট্রনে টভতস্ট্রে
আস্ট্রেঃ .navbar-collapse । এেসাস্ট্রথ .bg-dark টেস্ট্রয় তােপে .px-3 তােপে, pb-3 টেস্ট্রয় তাহস্ট্রল টভটজটবটলটট বাড়াস্ট্রনা
োয়, এভাস্ট্রব। েটেও রনভবােটা অপাটসটট েটেস্ট্রয় রেওয়ায়, টেেু টা এখনও অস্পি রোট টিস্ট্রনে রেস্ট্রে। োেে টভতস্ট্রে টলখা
রেখা োস্ট্রে। অপাটসটট সটেস্ট্রয় টেস্ট্রবা এেন হস্ট্রল অথবা ৯০% েস্ট্রে টেস্ট্রল আেও স্পি হস্ট্রে।

22. Carousel
ইস্ট্রেজ এেটটে ওপে আস্ট্রেেটট স্লাইি েেস্ট্রব। তাে ওপস্ট্রে টাইস্ট্রটল পযাোগ্রা ইতযাটে থােস্ট্রব। এটাই েযাস্ট্রোস্ট্রসল। এটট
বানাস্ট্রত .carousel.slide ক্লাস টেস্ট্রয় টিটভশন টনস্ট্রয়, এই টযাস্ট্রেে টভতে data-bs-ride = “carousel” টলখস্ট্রত হস্ট্রব। সাস্ট্রথ
েতেে পে পে অস্ট্রটাস্ট্রেটটে স্লাইি েেস্ট্রব এটটও বস্ট্রল টেস্ট্রত হস্ট্রবঃ data-inerval= “3000” োস্ট্রন ৩ রসস্ট্রেন্ড। এই টিটভশস্ট্রনে
টভতস্ট্রে আস্ট্রেেটিটভশন .carousel-inner খুস্ট্রল তাে টভতস্ট্রে, .carousel-item.active খুস্ট্রল র টল। তাে টভতে style টনস্ট্রয়
ইস্ট্রেজ েু ক্ত েটেঃ background-image: url(img/port-shant); এখাস্ট্রন active বুঝাস্ট্রে এটাই প্রথে ইস্ট্রেজ। প্রথস্ট্রে
এেটাে সাস্ট্রথ এেনভাস্ট্রব active েু ক্ত েেস্ট্রবা, পস্ট্রেে েস্ট্রয়েটা আইস্ট্রটে টনস্ট্রয় রসগুস্ট্রলাে সাস্ট্রথ আে active টলখস্ট্রবা না।

েূ ল োেোে ততেী হস্ট্রলও ইস্ট্রেজ রেখাস্ট্রে না েূ ল ওস্ট্রয়বসাইস্ট্রট। এজস্ট্রনযঃ css রথস্ট্রে .carousel-item ক্লাসস্ট্রে টি াইন
েেস্ট্রবা এভাস্ট্রবঃ height: 32rem; তাহস্ট্রল এেটা ধূ সে রলআউট ততেী হস্ট্রয়স্ট্রে। এবাে background-image রেখাস্ট্রন আস্ট্রে
রসখাস্ট্রন ক্লাস টেই, .bg-img আে এই ক্লাসস্ট্রে css এ টি াইন েটেঃ position: absolute; bottom: 0; left: 0; top: 0;
right: 0; তাহস্ট্রল এখন ইস্ট্রেজটা রশা েেস্ট্রতস্ট্রে ওস্ট্রয়বসাইস্ট্রট। টেন্ত ৩২ rem হস্ট্রত টেস্ট্রয় এটট সাইি রথস্ট্রে েস্ট্রয়েজায়োয়
টেটপট হস্ট্রয়স্ট্রে। এটট েূ ে েেস্ট্রত, background-size: cover; টলখস্ট্রলই পুস্ট্রো জায়োটা ইস্ট্রেজ টনস্ট্রয় টনস্ট্রব টেটপট োড়া।
এেপে, opacity: 0.5; টেস্ট্রল ইস্ট্রেজটা টেেু টা ব্লাে হস্ট্রয় োস্ট্রব। তােপে, background-position: center; টলখস্ট্রল খুব
সাোনয রেঞ্জ হস্ট্রয় ইস্ট্রেজটা রসন্টাস্ট্রে আসস্ট্রব। লাস্ট এটট্রটবউট না ইউজ েেস্ট্রলও খুব পাথথেয রোস্ট্রখ পড়স্ট্রব না। এবাে,
.carousel-item এই ক্লাস্ট্রস আস্ট্রেে এটট্রটবউট background-color: #777; টলখস্ট্রে ইস্ট্রেজটায় এেটা োস্ট্রলা ব্লাে ইস্ট্র ক্ট
ততেী হস্ট্রব। এস্ট্রেবাস্ট্রে ব্লাে হস্ট্রয় সাো না হস্ট্রয় টেেু টা োস্ট্রলা হস্ট্রল ইস্ট্রেজটা আস্ট্রেে োইস্ট্রত রবটাে টভটজবল হয়।

এস্ট্রতােস্ট্রন এেটা ইস্ট্রেজ রেখাস্ট্রনা রেস্ট্রে। এবাে ইস্ট্রেজ এেটা স্লাইি েস্ট্রে আস্ট্রেেটা আসাে জস্ট্রনয .carousel-inner এে
টভতস্ট্রে ২য় .carousel-item েু ক্ত েটে এেইভাস্ট্রব। এবাে active টলখাটা থােস্ট্রব না শুধু । টক্লে েস্ট্রে এে ইস্ট্রেজ রথস্ট্রে অনয
ইস্ট্রেস্ট্রজ োওয়াে বাটনও ততেী েস্ট্রে োটখ, রসটট েেস্ট্রত এবাে .carousel-inner এে বাইস্ট্রে এবিং carousel এে টভতস্ট্রে
button.carousel-control-prev টেস্ট্রয় এন্টাে েটে। এেটভতস্ট্রে টাস্ট্রেথট েস্ট্রে টেস্ট্রত হস্ট্রব রোন েযাস্ট্রোস্ট্রসল এটাস্ট্রে। রসজস্ট্রনয
.carousel.slide এই টিটভশস্ট্রনে এেটা আইটি নাে টেইঃ id = “myCarousel” . এেপে, button এে েস্ট্রধয, data-bs-
target = “#myCarousel” আে data-bs-slide = “prev” টেই। তাহস্ট্রল রসভ েেস্ট্রল টক্লে েোে এেটা অবো সৃ ি হস্ট্রব
ইস্ট্রেস্ট্রজে বাে পাস্ট্রশ। টেন্তু বাটস্ট্রনে রোন নাে বা আইেন না থাোয় আবাে োই আইেন েু ক্ত েটে, <button> </button>
এে োঝখাস্ট্রন span টযাে টনস্ট্রয় এে ক্লাস টেই, .carousel-control-prev-icon তাহস্ট্রলই আইেন েু ক্ত হস্ট্রয় এেইস্ট্রেজ রথস্ট্রে
আস্ট্রেে ইস্ট্রেস্ট্রজ োওয়াে োস্তা ততেী হস্ট্রব। রসেভাস্ট্রব এে টনস্ট্রে button.carousel-control-next েু ক্ত েটে, এখাস্ট্রন রসে
আস্ট্রেে েস্ট্রতা শুধু prev এে জায়োয় next েু ক্ত েস্ট্রে েেস্ট্রবা। তাহস্ট্রল ইস্ট্রেস্ট্রজে েু ইসাইস্ট্রি েু ই আইেন ততেী হইস্ট্রে। আে
আইেন রেস্ট্রপ রেস্ট্রপ এে ইস্ট্রেজ রথস্ট্রে আস্ট্রেে ইস্ট্রেস্ট্রজ োওয়া োইস্ট্রতস্ট্রে। টেন্তু এটটও েস্ট্রথি না। োস্ট্রত অস্ট্রটাস্ট্রেটটে হয় োজটা
টতনস্ট্রসস্ট্রেন্ড পে পে রসজস্ট্রনয এবাে, .carousel-inner এে ওপস্ট্রে আস্ট্রেেটা টিটভশন .carousel-indicators েু ক্ত েটে।
তাে টভতস্ট্রে েু ইটা বাটন টনস্ট্রবা। প্রথে বাটন টনস্ট্রয় তাে টভতে, data-bs-target= “#myCarousel” টনস্ট্রবা, আে data-bs-
slide-to = “0” টলস্ট্রখ class= “active” টলস্ট্রখ বাটন এটা রশষ। এেপস্ট্রেে বাটস্ট্রন রসেভাস্ট্রব data-bs-target টেস্ট্রয় data-
bs-slide-to= “1” টেস্ট্রয় বাটন ওটাও রশষ। ওখাস্ট্রন active টেস্ট্রত হস্ট্রব না। োেে ইস্ট্রেজগুস্ট্রলাে েস্ট্রধয শুধু এেটাই এটক্টভ
থােস্ট্রব। এভাস্ট্রব েু ই োে েয় ইোেস্ট্রতা ইস্ট্রেজ েু ক্ত েস্ট্রে েযাস্ট্রোস্ট্রসল বানাস্ট্রনা োস্ট্রব।

এবাে এই েযাস্ট্রোসল ইস্ট্রেজগুস্ট্রলাে েস্ট্রধয ইটলস্ট্রেন্ট েু ক্ত েেস্ট্রবা। রেখাস্ট্রন <div> </div> টযাে ইউজ েস্ট্রে বযােগ্রাউন্ড ইস্ট্রেজ
েু ক্ত েো হইস্ট্রে তাে টনস্ট্রে (অবশযই </div> এটাে বাইস্ট্রে নাহস্ট্রল ইস্ট্রেজ রেেেে ব্লাে েস্ট্রে রেওয়া হইস্ট্রে রসে এটট্রটবউট
টাইস্ট্রটস্ট্রলে েস্ট্রধযও েস্ট্রল আসস্ট্রব)। তাহস্ট্রল .car-elem টেস্ট্রয় এেটা টিটভশন টনলাে। এে টভতস্ট্রে, h2 টেস্ট্রয় টাইস্ট্রটল টেলাে
Prac-BS-04 আে p টেস্ট্রয় েস্ট্রয়েলাইন পযাোগ্রা টলখলাে আে এে টনস্ট্রে টলঙ্গওয়ালা বাটন েু ক্ত েটে। a.btn.btn-
primary.btn-lg টলস্ট্রখ এন্টাে। আে এে টাইস্ট্রটল Carousel. এবাে রসভ েেস্ট্রল রেখস্ট্রবাঃ টলখাগুস্ট্রলা োস্ট্রলা এবিং ঝাপসা।
েটবে ওপস্ট্রেে টলখা সাো োলাস্ট্রেে হস্ট্রল েৃ শযোন হস্ট্রব। তাই, .carousel-item এে েস্ট্রধয আস্ট্রেেটা এটট্রটবউট েু ক্ত েটেঃ
color: white; তাহস্ট্রল টলখাগুলা সাো হস্ট্রলা। আে এেপে .car-elem টেস্ট্রয় রসখাস্ট্রন position: absolute; টেস্ট্রয় টেস্ট্রল,
টলখাগুলা ঝাপসা রথস্ট্রে এখন রটাটাটল স্পি হস্ট্রয় উিস্ট্রলা। এেপে bottom: 0; টেস্ট্রল টলখাগুলা টনস্ট্রে রলস্ট্রে োস্ট্রব। left: 0;
টেস্ট্রল িাস্ট্রন েস্ট্রল োস্ট্রব, আবাে right: 0; টেস্ট্রল িাস্ট্রন এেেেথাে হস্ট্রয় োস্ট্রব টলখাগুলা। padding-bottom: 50px; টেস্ট্রল টনস্ট্রে
টেেু টা জায়ো হস্ট্রব, তস্ট্রব বাে সাইস্ট্রি এস্ট্রেবাস্ট্রে টেস্ট্রশ আস্ট্রে। এবাে .car-elem এে সাস্ট্রথ .container ক্লাস েু ক্ত েেস্ট্রল
োেপাশ রথস্ট্রে পযাটিিং হস্ট্রয় টিে জায়োয় েস্ট্রল আসস্ট্রব।

[.carousel-item এ রেস্ট্রয় আস্ট্রেে এটট্রটবউট position: relative; এটা রেওয়া না রেওয়া রসে োজ েেস্ট্রতস্ট্রে। েটেও এটাে
এেটা অথথ থাোে েথা।]

{end}