বুটস্ট্র্যাপ কার্ড
বুটস্ট্র্যাপ কার্ড এর সবচেয়ে জনপ্রিয় কম্পোনেন্টের একটি, এবং সঠিক কারণও আছে। এটা একটি খুব ফ্লেক্সিবল মিডিয়া কন্টেইনার হিসেবে কাজ করে, এবং এর কিছু খুব সুন্দর প্রিসেট স্টাইলিং এবং ফরম্যাটিং রয়েছে।
কার্ড কন্টেন্ট যেকোনো কিছু হতে পারে: টেক্সট, ইমেজ, লিংক, বাটন, লিস্ট, এবং এটার হেডার (header) এবং ফুটার (footer) ও থাকতে পারে।
বুটস্ট্র্যাপ কার্ডের বেসিক
বুটস্ট্র্যাপ কার্ড ফ্লেক্সবক্স (flexbox) দিয়ে তৈরি হয়ে এবং ডিফল্টভাবে তাদের কন্টেইনিং এলিমেন্টের প্রস্থ পর্যন্ত ফ্যাঁসায়। যদি আমরা আলাদা প্রস্থ নির্দিষ্ট করতে চাই, তবে আমরা либо কার্ড এলিমেন্টের ওপর বুটস্ট্র্যাপের width ইউটিলিটি ক্লাস ব্যবহার করতে পারি, অথবা কার্ডকে একটি কন্টেইনিং এলিমেন্টে র্যাপ (wrap) করে, এবং বুটস্ট্র্যাপের কলাম ক্লাস দিয়ে সেটা সাইজ করতে পারি।
চলুন কিছু উদাহরণ দেখি:
<div class="container-fluid bg-light"> <div class="card p-4 m-4">card 1</div> <div class="card p-4 m-4">card 2</div> <div class="card p-4 m-4">card 3</div> <div class="card-group m-4"> <div class="card p-4">card 4</div> <div class="card p-4">card 5</div> <div class="card p-4">card 6</div> </div> <div class="card-deck m-4"> <div class="card p-4 m-4">card 7</div> <div class="card p-4 m-4">card 8</div> <div class="card p-4 m-4">card 9</div> </div> </div>
বুটস্ট্র্যাপের রুল অফ থাম্ব (rule of thumb) হচ্ছে
ট্যাগের ভিতরের সব কিছুকে একটি CONTAINER এলিমেন্টে র্যাপ করা, যা এর ভিতরের সব কিছু রেসপন্সিভ (responsive) করে দেয়।এর মানে হলো এটা বর্তমান স্ক্রিন সাইজ অনুযায়ী সাইজ এবং লেআউট শিফট করবে।
আমাদের উদাহরণে, আমরা CONTAINER-FLUID ব্যবহার করেছি, যা এলিমেন্টকে ফুল-প্রস্থ (full-width) করে দেয়, CONTAINER-এর বিপরীতে, যা হরিজন্টাল মার্জিন যোগ করে এবং পেজের মাঝপথে সেন্টার করে।
এরপর, আমাদের প্রথম তিনটি কার্ড সেট। এরা কোনো প্যারেন্ট এলিমেন্ট ছাড়া আছে কন্টেইনার ছাড়া, তাই এরা ডিফল্ট কার্ড বিহেভিয়ার দেখায় এবং স্ক্রিনশটে দেখানো মত 탑 থেকে বটম পর্যন্ত সাজানো থাকে:
কোড স্নিপেটে আপনি যা p-4 এবং m-4 দেখছেন, সেটা রিপ্রেজেন্ট করে সবদিকে ১.৫ rem প্যাডিং (padding) এবং সবদিকে ১.৫ rem মার্জিন (margin)।
বুটস্ট্র্যাপ সাইজিং ইউটিলিটি মান:
- 0 = 0 rem;
- 1 = 0.25 rem;
- 2 = 0.5 rem;
- 3 = 1 rem;
- 4 = 1.5 rem;
- 5 = 3 rem;
তারপর আছে কার্ড ৪, ৫, এবং ৬, যেগুলো CARD-GROUP ক্লাসযুক্ত একটি
শেষে, কার্ড ৭, ৮, এবং ৯ র্যাপ করা আছে CARD-DECK ক্লাসযুক্ত একটি
ম্যানুয়ালি কার্ড সাইজ করা
ম্যানুয়ালি সাইজড কার্ড করার আগে, চলুন বুটস্ট্র্যাপের লেআউট এবং ব্রেকপয়েন্ট সিস্টেম সম্পর্কে কিছু জানি।
বুটস্ট্র্যাপ কলাম (Columns)
বুটস্ট্র্যাপ পেজকে ১২টি কলামে ভাগ করে দিয়ে সহজ লেআউট ডেভেলপমেন্ট করে।
এখানে একটি কুইক ডেমো ভিজ্যুয়ালাইজ করার জন্য:
<div class="row"> <div class="col border p-5">column 1</div> <div class="col border p-5">column 2</div> <div class="col border p-5">column 3</div> <div class="col border p-5">column 4</div> <div class="col border p-5">column 5</div> <div class="col border p-5">column 6</div> <div class="col border p-5">column 7</div> <div class="col border p-5">column 8</div> <div class="col border p-5">column 9</div> <div class="col border p-5">column 10</div> <div class="col border p-5">column 11</div> <div class="col border p-5">column 12</div> </div>
প্রথমে আমাদের কলামের জন্য একটি র্যাপার (wrapper) আছে যাকে ROW বলা হয়, যা মূলত কলামের জন্য একটি ফ্লেক্সবক্স কন্টেইনার। আমরা একটি এলিমেন্টের সাইজিং ডিক্লেয়ার করি COL-SCREEN SIZE BREAKPOINT-NUMBER OF COLUMNS TO OCCUPY লিখে।
উপরের উদাহরণে, আমরা ব্রেকপয়েন্ট দিনি কারণ আমরা চাই সকল স্ক্রিন সাইজে এই সাইজিং適用 হোক, এবং কলামের সংখ্যাও দিনি কারণ এটি ডিফল্টভাবে COL-1 হয়, তাই আমরা স্বাভাবিক ১২টি কলাম পাই। এটা কেমন দেখে:
বুটস্ট্র্যাপ ব্রেকপয়েন্ট (Breakpoints):
বুটস্ট্র্যাপ একটি মোবাইল-ফার্স্ট (mobile-first) ফ্রেমওয়ার্ক, অর্থাৎ বুটস্ট্র্যাপ দিয়ে ডেভেলপমেন্ট করার সময় আপনি মোবাইল লেআউটকে প্রায়োরিটি দেন এবং তারপর বড় স্ক্রিনের দিকে যান। এর সকল ক্লাস প্রদত্ত ব্রেকপয়েন্ট থেকে শুরু করে বড় স্ক্রিনগুলোতে এলিমেন্টকে প্রভাবিত করে।
Extra small (xs) হলো ডিফল্ট, তাই ব্রেকপয়েন্ট সম্পূর্ণভাবে опуচার করা, যেমন P-4, একই P-XS-4 লেখার সমান, যা XS স্ক্রিন সাইজ এবং সেটার বড় সব স্ক্রিনে প্রয়োগ হয়।
অন্য কথায়, আপনি সকল স্ক্রিনে ইফেক্টিভ একটি রুল চাইলে ব্রেকপয়েন্ট опуচার করুন।
যদি আমরা উদাহরণের প্যাডিংকে মিডিয়াম স্ক্রিন সাইজ এবং তার উপরে ০.৫ rem-এ কমাতে চাই, তবে আমরা একই এলিমেন্টে P-MD-2 ক্লাস যোগ করব।
ব্রেকপয়েন্ট পিক্সেল মান:
- xs – স্ক্রিন সাইজ ৫৭৬ পিক্সেলের নিচে। এটি ডিফল্ট।
- sm – স্ক্রিন সাইজ ৫৭৬ পিক্সেল এবং তার উপরে।
- md – স্ক্রিন সাইজ ৭৬৮ পিক্সেল এবং তার উপরে।
- lg – স্ক্রিন সাইজ ৯৯২ পিক্সেল এবং তার উপরে।
- xl – স্ক্রিন সাইজ ১২০০ পিক্সেল এবং তার উপরে।
এখন এটা ব্যবহার করে আমাদের লেআউটকে স্ক্রিন সাইজ অনুযায়ী চেঞ্জ করব:
<div class="row"> <div class="col-5 col-md-7"> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> </div> <div class="col-7 col-md-5"> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> </div> </div>
আবার, আমাদের ROW র্যাপার আছে, এবং তারপর একটি
৭৬৭ পিক্সেল প্রস্থে, আমাদের বাম
আমরা ১ পিক্সেল বাড়িয়ে ৭৬৮ এ যাওয়ায় সেগুলো বিপরীত হয়ে যায়:
কার্ড সাব-কম্পোনেন্টস (Card Subcomponents)
চলুন কার্ডের সম্পূর্ণ ক্ষমতা ব্যবহার করি সব সাব-কম্পোনেন্ট ট্রাই করে।
হেডার এবং ফুটার সহ কার্ড
<div class="card"> <div class="card-header text-center p-4">I'm a header</div> <div class="card-body"> <p class="card-text"> first paragraph </p> <p class="card-text"> second paragraph </p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> <a href="#" class="card-link">Link 3</a> </div> <div class="card-footer"> Footer of a Bootstrap card </div> </div>
আমরা একটি কার্ড তৈরি করেছি সেন্টার্ড কার্ড হেডার সহ, যার একটি বর্ডার এবং হালকা ধূসর ব্যাকগ্রাউন্ড, এবং এর নিচে একটি কার্ড বডি, যা এটাকে কিছু প্যাডিং দেয়।
বডিতে, আমাদের কিছু প্যারাগ্রাফ আছে CARD-TEXT দিয়ে কিছু অ্যালাইনমেন্টের জন্য, এবং কিছু লিংক আছে CARD-LINK দিয়ে, যাতে সেগুলো নীল রঙের এবং একসাথে লেআউট হয়।
শেষে, আমরা একটি কার্ড ফুটার তৈরি করেছি যা হেডারের মত স্টাইলিং পায়, কিন্তু এইবার টেক্সট সেন্টার করিনি।
ইমেজ ক্যাপ (Image Cap) সহ কার্ড
এবার, আমরা কার্ডে একটি ইমেজ ক্যাপ যোগ করব, কার্ড বডিতে টাইটেল এবং সাবটাইটেল, এবং লিংক সহ একটি লিস্ট গ্রুপ:
<div class="card"> <img src="https://via.placeholder.com/100" alt="" class="card-img-top" /> <div class="card-body"> <h3 class="card-title">card title in the card's body</h3> <h4 class="card-subtitle mb-4">card subtitle</h4> <p>list group with links inside:</p> <ul class="list-group"> <li class="list-group-item"> <a href="#" class="card-link">List link 1</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 2</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 3</a> </li> </ul> </div> </div>
আমি ইমেজের জন্য একটি খুব হ্যান্ডি টুল ব্যবহার করছি jota placeholder নামে সুপরিচিত। এন্ডের নম্বরটি ইমেজের পিক্সেল প্রস্থ x উচ্চতা, কিন্তু এখানে সেটা ইগনোর হয় কারণ CARD-IMG-TOP ইমেজকে কার্ডের ফুল প্রস্থে স্ট্রেচ (stretch) বা شرিংক (shrink) করে। টাইটেল এবং সাবটাইটেল কিছু সুন্দর ফরম্যাটিং পায়, এবং আমরা বুটস্ট্র্যাপের অরিয়েন্টেশন ইউটিলিটি প্যাডিং এবং মার্জিনের জন্য ব্যবহার করেছি। সাবটাইটেলে যেটা MB-4 দেখছেন সেটা মানে মার্জিন বটম (margin bottom)।
বুটস্ট্র্যাপ প্যাডিং এবং মার্জিন অরিয়েন্টেশন:
- pt/mt – প্যাডিং/মার্জিন টপ
- pb/mb – প্যাডিং/মার্জিন বটম
- pl/ml – প্যাডিং/মার্জিন লেফট
- pr/mr – প্যাডিং/মার্জিন রাইট
- py/my – প্যাডিং/মার্জিন y-অক্ষ (টপ এবং বটম)
- px/mx – প্যাডিং/মার্জিন x-অক্ষ (লেফট এবং রাইট)
তারপর আছে একটি লিস্ট গ্রুপ যা আবার লিস্ট এবং এর যেকোনো এলিমেন্টকে হালকা, রাউন্ডেড বর্ডার দিয়ে এনক্যাপসুলেট (encapsulate) করে। এখানে আমাদের রেজাল্ট:
বটম ইমেজ ক্যাপ (Bottom Image Cap)
বুটস্ট্র্যাপে CARD-IMG-BOTTOM নেই, কিন্তু আমরা সহজে এটি "ফেক" (fake) করতে পারি কার্ডের নিচে একটি div তৈরি করে এবং তার ভিতরে রাখে।
<div class="card"> <div class="card-body"> <p class="card-text"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas unde corporis sed nam ad eius, pariatur, consectetur modi asperiores dolorem id quaerat eos quod nesciunt repudiandae aut temporibus rerum possimus. </p> </div> <img src="https://via.placeholder.com/100" alt="" class="card-img-top" /> </div>
আমি পুরনো লোরেম ইপসাম (lorem ipsum) ও ভালো মেজারমেন্টের জন্য যোগ করলাম।
সাইড ইমেজ ক্যাপ (Side Image Cap)
আমরা এটাকে হরিজন্টাল ও করতে পারি কার্ডের ভিতরে একটি ROW র্যাপার যোগ করে যাতে হরিজন্টালি লেআউট হয়, এবং তারপর COL ব্যবহার করে ইমেজ এবং বাকি কার্ডের সাইজ ডিফাইন করে:
<div class="card"> <div class="row"> <img src="https://via.placeholder.com/100" alt="" class="card-img-top col-6" /> <div class="card-body col-6"> <h3 class="card-title">card title in the card's body</h3> <h4 class="card-subtitle mb-4">card subtitle</h4> <p>list group with links inside:</p> <ul class="list-group"> <li class="list-group-item"> <a href="#" class="card-link">List link 1</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 2</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 3</a> </li> </ul> </div> </div> </div>
আমরা শুধু কার্ডের সকল কন্টেন্টকে
এবং ইমেজ এবং কার্ড বডি দুটোতে COL-6 যোগ করলাম কার্ডকে ৫০-৫০ করার জন্য।
ব্যাকগ্রাউন্ড হিসেবে কার্ড ইমেজ (Card Image as a Background)
আমরা পুরো কার্ডের ওপর একটি ইমেজ স্ট্রেচ করে দিতে পারি এবং টেক্সট, লিস্ট, লিংক ইত্যাদি তার ওপর লেয়ার (lay) করতে পারি। এটা করলে -এ CARD-IMG ক্লাস দিয়ে এবং বাকি সব কিছু CARD-IMG-OVERLAY ক্লাসযুক্ত একটি
<div class="card"> <img src="https://via.placeholder.com/100" alt="" class="card-img" /> <div class="card-img-overlay"> <h4 class="card-title">Overlay Title</h4> <p class="card-text"> Image text overlay </p> <p>second paragraph</p> <p>third paragraph</p> <p>fourth paragraph</p> <div class="btn-group w-100"> <button class="btn btn-primary">blue</button> <button class="btn btn-info">teal</button> <button class="btn btn-danger">red</button> <button class="btn btn-dark">black</button> <button class="btn btn-success">green</button> </div> </div> </div>
এখানে আমরা প্রথমবারের মতো_WIDTH ইউটিলিটি ব্যবহার করলাম। BTN-GROUP-এ W-100।
বুটস্ট্র্যাপ প্রস্থ এবং উচ্চতা ইউটিলিটি:
w/h-25/50/75/100 – width/height 25%/50%/75%/100%
আমাদের কেসে এটি ১০০% মাইনাস সেম প্যাডিং যা CARD-BODY প্রয়োগ করে, সেটা এখানে CARD-IMG-OVERLAY দিয়ে প্রয়োগ হয়েছে।
কার্ড কলাম (Card Columns)
একটি অপশন আরো রয়েছে কার্ডগুলোকে কলামে লেআউট করার জন্য যাতে সেগুলো 탑 থেকে বটম পর্যন্ত যায়, এবং কলাম ফুল হলে নতুন একটা শুরু হয়।
<div class="card-columns"> <div class="card"> <h3 class="card-title text-center p-2">Title of card 1</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 2</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 3</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 4</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> </div>
আমরা শুধু সকল কার্ডকে
বুটস্ট্র্যাপ কার্ড স্টাইলিং (Styling Bootstrap Cards)
যখন বুটস্ট্র্যাপ কার্ড স্টাইলিংয়ে আসে, আমরা তাদের ব্যাকগ্রাউন্ড এবং টেক্সট রঙ, সাথে বর্ডারের রঙ এবং লুক চেঞ্জ করতে পারি।
স্টাইলগুলো পুরো কার্ডে, এর আলাদা সাব-কম্পোনেন্টে, বা দুটোই একসাথে প্রয়োগ করা যায়। এখানে কিছু স্টাইলড কার্ড দেখুন:
<div class="card bg-primary"> <div class="card-header"><h3>Header 1</h3></div> <div class="card-body"> <p>Body 1</p> </div> <div class="card-footer"><p>Footer 1</p></div> </div> <div class="card bg-success text-white"> <div class="card-header"><h3>Header 2</h3></div> <div class="card-body"> <p>Body 2</p> </div> <div class="card-footer text-danger"><p>Footer 2</p></div> </div> <div class="card bg-info text-dark border-danger"> <div class="card-header"><h3>Header 3</h3></div> <div class="card-body"> <p>Body 3</p> </div> <div class="card-footer"><p>Footer 3</p></div> </div> <div class="card border-primary bg-dark text-white"> <div class="card-header border-success"><h3>Header 4</h3></div> <div class="card-body text-danger"> <p>Body 4</p> </div> <div class="card-footer bg-warning text-info"><p>Footer 4</p></div> </div>
প্রথম কার্ডে ব্লু ব্যাকগ্রাউন্ড (BG-PRIMARY) আছে কার্ডটাইতে, পুরো কার্ডকে স্টাইল করে।
দ্বিতীয় কার্ডে সবুজ ব্যাকগ্রাউন্ড (BG-SUCCESS) এবং সাদা টেক্সট (TEXT-WHITE) আছে পুরো কার্ডে, কিন্তু ফুটারে লাল টেক্সট (TEXT-DANGER), প্যারেন্ট এলিমেন্টের TEXT-WHITE ওভাররাইড (override) করে।
তৃতীয় কার্ডে গাঢ় নীল ব্যাকগ্রাউন্ড (BG-INFO), কালো টেক্সট (TEXT-DARK) এবং লাল বর্ডার (BORDER-DANGER)।
শেষে, চতুর্থ কার্ডে নীল বর্ডার (BORDER-PRIMARY), কালো ব্যাকগ্রাউন্ড (BG-DARK), এবং সাদা টেক্সট (TEXT-WHITE) পুরো কার্ডে।
হেডারে সবুজ বর্ডার (BORDER-SUCCESS), বডিতে লাল টেক্সট (TEXT-DANGER), এবং ফুটারে হলদে ব্যাকগ্রাউন্ড (BG-WARNING) এবং গাঢ় নীল টেক্সট (TEXT-INFO)।
এখানে আমাদের রেইনবো কার্ডগুলো:
সারসংক্ষেপ (To recap)
বুটস্ট্র্যাপ কার্ড একটি খুব পাওয়ারফুল কম্পোনেন্ট অনেক অপশনের সাথে। এগুলো কার্ড-ডেক (card-deck) এ গ্রুপ করা যায় একটি আলাদা, একজুট পুরোর জন্য, বা কার্ড-গ্রুপ (card-group) এ ফিউজ (fuse) করা যায় একটি একক এন্টিটিতে। এগুলো রো (row) এ ছড়িয়ে দেয়া যায়, বা কার্ড-কলাম (card-columns) এ একটি আলাদা লুকে।
এরা ইমেজ, লিস্ট এবং লিংক হোস্ট করতে পারে, সব বিভিন্ন লেআউটে।
এরাও নিজস্ব হেডার এবং ফুটার থাকতে পারে, সকল প্রিসেট স্টাইল এবং ফরম্যাটিংসহ, কিন্তু আমাদের কাস্টমাইজ করার জন্য খোলা।
এরা অবিশ্বাস্যভাবে ফ্লেক্সিবল, এবং সম্ভবত বুটস্ট্র্যাপের সাথে কত কম সেটআপে, কত কম সময়ে কত কিছু করা যায় সেটার সবচেয়ে ভালো উদাহরণ।
