বুটস্ট্রাপ ৫-এ কার্ডস (Cards) এবং প্যানেলস (Panels) হলো অত্যন্ত জনপ্রিয় এবং সহজে কাস্টমাইজযোগ্য উপাদান। যেখানে প্যানেলসকে পূর্বে বিভিন্ন বুটস্ট্রাপ ভার্সনে আলাদা উপাদান হিসেবে পরিচিত ছিল, বুটস্ট্রাপ ৫-এ সেগুলিকে কার্ডস নামে নতুনভাবে অন্তর্ভুক্ত করা হয়েছে। কার্ডস ব্যবহার করে আপনি কন্টেন্ট সেকশনে বিভিন্ন ধরনের তথ্য সুন্দরভাবে উপস্থাপন করতে পারেন।

কার্ডস (Cards)

কার্ডস হল একটি ফ্লেক্সিবল এবং কাস্টমাইজযোগ্য কন্টেইনার, যার মধ্যে নানা ধরনের কন্টেন্ট যেমন, টেক্সট, ইমেজ, লিংক, বাটন ইত্যাদি থাকতে পারে। কার্ডস সাধারণত card ক্লাস দিয়ে তৈরি করা হয়, এবং এর বিভিন্ন উপাদান যেমন, card-header, card-body, card-footer, card-title, card-text ইত্যাদি ব্যবহার করা যায়।

উদাহরণ: বুটস্ট্রাপ ৫ এর কার্ড

<div class="container mt-4">
    <div class="card" style="width: 18rem;">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
        <div class="card-body">
            <h5 class="card-title">কার্ড টাইটেল</h5>
            <p class="card-text">এটি একটি সাধারণ কার্ডের উদাহরণ।</p>
            <a href="#" class="btn btn-primary">আরও জানুন</a>
        </div>
    </div>
</div>

এখানে:

• card: একটি সাধারণ কার্ড তৈরি করতে এই ক্লাস ব্যবহার করা হয়েছে।
• card-img-top: কার্ডের উপরের অংশে একটি ইমেজ প্রদর্শন করতে এই ক্লাস ব্যবহার করা হয়েছে।
• card-body: কার্ডের মূল কন্টেন্টের জন্য ব্যবহৃত অংশ।
• card-title: কার্ডের শিরোনাম।
• card-text: কার্ডের বডি টেক্সট।
• btn btn-primary: বাটন যা ব্যবহারকারীকে অন্য পৃষ্ঠায় নিয়ে যাবে।

প্যানেলস (Panels)

বুটস্ট্রাপ ৫-এ প্যানেলস এখন সরাসরি কার্ডস হিসাবে সমাধান করা হয়েছে। আগের বুটস্ট্রাপ সংস্করণে প্যানেলস আলাদা একটি উপাদান ছিল, তবে এখন তা আরেকটি কার্ড টাইপ উপাদান হিসাবে অন্তর্ভুক্ত করা হয়েছে।

প্যানেলের পরিবর্তে কার্ডের ব্যবহার

বুটস্ট্রাপ ৫-এ প্যানেল তৈরির জন্য আপনি card উপাদানটি ব্যবহার করবেন, কারণ panel আর ব্যবহৃত হয় না। তবে, আপনি কার্ডে card-header এবং card-footer এর মাধ্যমে প্যানেল স্টাইলের উপাদান তৈরি করতে পারেন।

উদাহরণ: প্যানেল (কার্ড) তৈরি করা

<div class="container mt-4">
    <div class="card">
        <div class="card-header">
            প্যানেল হেডার
        </div>
        <div class="card-body">
            <h5 class="card-title">কার্ডের শিরোনাম</h5>
            <p class="card-text">এটি একটি প্যানেলের মতো কার্ড।</p>
        </div>
        <div class="card-footer text-muted">
            প্যানেল ফুটার
        </div>
    </div>
</div>

এখানে:

• card-header: কার্ডের উপরের অংশের হেডার হিসেবে ব্যবহৃত।
• card-footer: কার্ডের নীচের অংশের ফুটার।
• card-body: কার্ডের মূল কন্টেন্ট যেখানে টেক্সট এবং অন্যান্য উপাদান রাখা হয়।

কার্ড সাইজ এবং কাস্টমাইজেশন

বুটস্ট্রাপ ৫-এ আপনি কার্ডের সাইজ কাস্টমাইজ করতে পারেন। আপনি card এর জন্য সুনির্দিষ্ট সাইজ দিতে পারবেন, যেমন ছোট বা বড় আকারের কার্ড তৈরি করা।

উদাহরণ: বড় এবং ছোট কার্ড

<div class="container mt-4">
    <!-- Small Card -->
    <div class="card" style="width: 12rem;">
        <img src="https://via.placeholder.com/100" class="card-img-top" alt="Small Image">
        <div class="card-body">
            <h5 class="card-title">ছোট কার্ড</h5>
            <p class="card-text">এটি একটি ছোট কার্ডের উদাহরণ।</p>
        </div>
    </div>

    <!-- Large Card -->
    <div class="card mt-4" style="width: 24rem;">
        <img src="https://via.placeholder.com/200" class="card-img-top" alt="Large Image">
        <div class="card-body">
            <h5 class="card-title">বড় কার্ড</h5>
            <p class="card-text">এটি একটি বড় কার্ডের উদাহরণ।</p>
        </div>
    </div>
</div>

এখানে:

• ছোট এবং বড় কার্ডের জন্য বিভিন্ন প্রস্থ নির্ধারণ করা হয়েছে।

সারাংশ

বুটস্ট্রাপ ৫-এর কার্ডস অত্যন্ত শক্তিশালী এবং ফ্লেক্সিবল একটি উপাদান যা টেক্সট, ইমেজ, বাটন, লিঙ্ক ইত্যাদি একত্রে সাজাতে সাহায্য করে। এগুলি ব্যবহারে আপনি প্রোফাইল কার্ড, ব্লগ পোস্ট, প্রোডাক্ট প্রদর্শন ইত্যাদি তৈরি করতে পারেন। আগের বুটস্ট্রাপ ভার্সনগুলির প্যানেল কনসেপ্ট এখন কার্ডসের মাধ্যমে প্রবর্তিত, যা আরো উন্নত এবং কাস্টমাইজযোগ্য।

বুটস্ট্রাপ ৫-এ কার্ডস (Cards) একটি খুবই শক্তিশালী উপাদান, যা আপনি বিভিন্ন কনটেন্ট উপস্থাপনের জন্য ব্যবহার করতে পারেন। কার্ড হল একটি কন্টেইনার যা আপনার কনটেন্ট (যেমন: টেক্সট, ইমেজ, লিঙ্ক, বোতাম ইত্যাদি) সুন্দরভাবে প্রদর্শন করে। এটি সাধারণত ব্লগ পোস্ট, প্রোফাইল সেকশন, প্রোডাক্ট লিস্ট, নিউজ এলিমেন্ট ইত্যাদি উপস্থাপন করার জন্য ব্যবহৃত হয়।

বুটস্ট্রাপ ৫-এ কার্ডস ব্যবহার করতে card ক্লাস ব্যবহার করতে হয় এবং তার সাথে বিভিন্ন অতিরিক্ত ক্লাস যোগ করা হয় যা এর ডিজাইন এবং ফাংশনালিটি নিয়ন্ত্রণ করে।

বেসিক কার্ড

বেসিক কার্ড তৈরি করতে card ক্লাসটি ব্যবহার করা হয়। এর ভিতরে আপনি একাধিক উপাদান যেমন: card-body, card-title, card-text ইত্যাদি ব্যবহার করতে পারেন।

উদাহরণ: বেসিক কার্ড

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
  <div class="card-body">
    <h5 class="card-title">কার্ড শিরোনাম</h5>
    <p class="card-text">এটি একটি সাধারণ কার্ড। আপনি এর ভিতরে যেকোনো কনটেন্ট যোগ করতে পারেন।</p>
    <a href="#" class="btn btn-primary">আরও জানুন</a>
  </div>
</div>

এখানে:

• card: কার্ডের বেসিক কন্টেইনার।
• card-img-top: কার্ডের শীর্ষে একটি ইমেজ।
• card-body: কার্ডের কনটেন্টের জন্য ব্যবহৃত একটি কন্টেইনার।
• card-title: কার্ডের শিরোনাম।
• card-text: কার্ডের টেক্সট কন্টেন্ট।
• btn btn-primary: একটি বাটন যা কার্ডের মধ্যে থাকে।

কার্ড গ্রুপ

বুটস্ট্রাপ ৫-এ একাধিক কার্ড একসাথে গ্রুপ করে প্রদর্শন করতে card-group ক্লাস ব্যবহার করা হয়। এটি একসাথে কিছু কার্ড দেখাতে সহায়তা করে, এবং প্রতিটি কার্ডের আকার স্বয়ংক্রিয়ভাবে সমান হয়।

উদাহরণ: কার্ড গ্রুপ

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
    <div class="card-body">
      <h5 class="card-title">কার্ড ১</h5>
      <p class="card-text">এটি প্রথম কার্ড।</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
    <div class="card-body">
      <h5 class="card-title">কার্ড ২</h5>
      <p class="card-text">এটি দ্বিতীয় কার্ড।</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
    <div class="card-body">
      <h5 class="card-title">কার্ড ৩</h5>
      <p class="card-text">এটি তৃতীয় কার্ড।</p>
    </div>
  </div>
</div>

এখানে, তিনটি কার্ড একসাথে গ্রুপ করা হয়েছে এবং card-group ক্লাস দিয়ে তারা সমান আকারে প্রদর্শিত হবে।

কার্ড ডেক

card-deck ব্যবহার করে আপনি কার্ডগুলোর মধ্যে কিছু স্থান (margin) রাখতে পারেন, যা একটি সুন্দর স্পেসিং তৈরির জন্য সহায়ক। বুটস্ট্রাপ ৫-এ card-deck ক্লাসটি অপ্রচলিত হয়ে গেছে, তবে এটি card-group এর মতো একই কাজ করে, শুধুমাত্র card-deck ক্লাসে আরও বেশি স্পেসিং থাকে।

উদাহরণ: কার্ড ডেক

<div class="card-deck">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
    <div class="card-body">
      <h5 class="card-title">কার্ড ১</h5>
      <p class="card-text">এটি প্রথম কার্ড।</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
    <div class="card-body">
      <h5 class="card-title">কার্ড ২</h5>
      <p class="card-text">এটি দ্বিতীয় কার্ড।</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
    <div class="card-body">
      <h5 class="card-title">কার্ড ৩</h5>
      <p class="card-text">এটি তৃতীয় কার্ড।</p>
    </div>
  </div>
</div>

এখানে, card-deck ক্লাসটি কার্ডগুলোর মধ্যে স্বয়ংক্রিয়ভাবে একটি স্পেসিং তৈরি করবে।

কার্ডের কাস্টমাইজেশন

বুটস্ট্রাপ ৫-এ আপনি কার্ডে বিভিন্ন স্টাইলিং করতে পারেন, যেমন:

• card-header: কার্ডের শীর্ষে একটি হেডার যোগ করা।
• card-footer: কার্ডের নিচে একটি ফুটার যোগ করা।
• card-img-overlay: একটি ইমেজের ওপর টেক্সট বা কন্টেন্ট ওভারলে করা।

উদাহরণ: কার্ডের হেডার ও ফুটার

<div class="card" style="width: 18rem;">
  <div class="card-header">
    শিরোনাম
  </div>
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
  <div class="card-body">
    <h5 class="card-title">কার্ড শিরোনাম</h5>
    <p class="card-text">এটি একটি কার্ডের উদাহরণ।</p>
    <a href="#" class="btn btn-primary">আরও জানুন</a>
  </div>
  <div class="card-footer text-muted">
    ২ দিন আগে
  </div>
</div>

এখানে, card-header এবং card-footer যোগ করা হয়েছে।

সারাংশ

বুটস্ট্রাপ ৫ এর কার্ডস উপাদান খুবই শক্তিশালী এবং সহজে কাস্টমাইজযোগ্য। এটি বিভিন্ন ধরনের কনটেন্ট (যেমন: টেক্সট, ছবি, বাটন, লিঙ্ক ইত্যাদি) সুন্দরভাবে প্রদর্শন করতে ব্যবহার করা হয়। আপনি কার্ডে ইমেজ, শিরোনাম, বডি, ফুটার ইত্যাদি ব্যবহার করে নানা রকম কনটেন্ট উপস্থাপন করতে পারেন, এবং গ্রিড সিস্টেম বা কার্ড গ্রুপ ব্যবহার করে একাধিক কার্ড একসাথে সাজাতে পারেন।

বুটস্ট্রাপ ৫-এ কার্ড (Card) উপাদানটি একটি অত্যন্ত ফ্লেক্সিবল এবং ব্যবহারযোগ্য উপাদান, যা বিভিন্ন ধরনের কন্টেন্ট দেখানোর জন্য ব্যবহৃত হয়, যেমন ছবি, টেক্সট, লিঙ্ক, বাটন ইত্যাদি। বুটস্ট্রাপ ৫ এর কার্ড সিস্টেম সহজেই কাস্টমাইজ করা যায় এবং এটি সহজে রেসপন্সিভ হয়ে ওঠে।

এখানে আমরা সিম্পল কার্ড এবং কমপ্লেক্স কার্ড তৈরি করার পদ্ধতি আলোচনা করব।

সিম্পল কার্ড (Simple Card)

সিম্পল কার্ড সাধারণত একটি শিরোনাম, একটি টেক্সট এবং একটি ইমেজ বা চিত্র প্রদর্শন করে। এটি খুবই সহজ এবং বেসিক ডিজাইনে তৈরি করা হয়।

উদাহরণ: সিম্পল কার্ড

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">কার্ড শিরোনাম</h5>
    <p class="card-text">এটি একটি সিম্পল কার্ড উদাহরণ। এখানে একটি টেক্সট এবং একটি ছবি দেখানো হয়েছে।</p>
    <a href="#" class="btn btn-primary">আরও জানুন</a>
  </div>
</div>

এখানে:

• card: কার্ড উপাদানকে ডিফাইন করে।
• card-img-top: কার্ডের উপরের অংশে চিত্র বা ইমেজ যোগ করে।
• card-body: কার্ডের মূল অংশ, যেখানে টেক্সট, বাটন, শিরোনাম ইত্যাদি থাকে।
• btn btn-primary: একটি বাটন যা আপনাকে কোনো লিঙ্ক বা অ্যাকশন করতে সহায়তা করে।

কমপ্লেক্স কার্ড (Complex Card)

কমপ্লেক্স কার্ডগুলোর মধ্যে অতিরিক্ত উপাদান থাকে, যেমন ফিটারের জন্য লিঙ্ক, বাটন, তালিকা বা ডাটা প্রদর্শন। এটি সাধারণত বড় এবং ইনফর্মেটিভ কার্ড হয়, যা আরও বেশি কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়।

উদাহরণ: কমপ্লেক্স কার্ড

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">কমপ্লেক্স কার্ড শিরোনাম</h5>
    <p class="card-text">এটি একটি কমপ্লেক্স কার্ড উদাহরণ, যেখানে আরো বিস্তারিত কন্টেন্ট রয়েছে।</p>
    <h6>বিশেষ বৈশিষ্ট্য:</h6>
    <ul>
      <li>বৈশিষ্ট্য ১</li>
      <li>বৈশিষ্ট্য ২</li>
      <li>বৈশিষ্ট্য ৩</li>
    </ul>
    <a href="#" class="btn btn-success">আরও জানুন</a>
  </div>
  <div class="card-footer text-muted">
    কবে প্রকাশিত হয়েছে: ২৮ নভেম্বর, ২০২৪
  </div>
</div>

এখানে:

• card-footer: এটি কার্ডের ফুটার অংশ যেখানে অতিরিক্ত তথ্য বা লিঙ্ক প্রদর্শন করা হয়।
• ul এবং li: এটি একটি তালিকা (list) তৈরি করতে ব্যবহৃত হয়, যাতে কার্ডের ভিতরে কয়েকটি পয়েন্ট দেখানো যায়।
• btn btn-success: এটি একটি বাটন যা একটি অ্যাকশন বা লিঙ্কের সাথে যুক্ত।

কার্ড গ্রুপ (Card Groups)

বুটস্ট্রাপ ৫-এ, আপনি একাধিক কার্ডকে একত্রে একটি গ্রুপ হিসেবে সাজাতে পারেন। এতে আপনার কার্ডগুলো একসাথে সুন্দরভাবে দেখায় এবং রেসপন্সিভভাবে প্রদর্শিত হয়।

উদাহরণ: কার্ড গ্রুপ

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">কার্ড ১</h5>
      <p class="card-text">এটি একটি কার্ড ১ এর উদাহরণ।</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">কার্ড ২</h5>
      <p class="card-text">এটি একটি কার্ড ২ এর উদাহরণ।</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">কার্ড ৩</h5>
      <p class="card-text">এটি একটি কার্ড ৩ এর উদাহরণ।</p>
    </div>
  </div>
</div>

এখানে:

• card-group: একাধিক কার্ডকে একটি গ্রুপে সাজাতে ব্যবহৃত হয়।
• কার্ডগুলো একই সারিতে সুন্দরভাবে রেসপন্সিভভাবে দেখাবে এবং স্ক্রীনের আকার অনুযায়ী সাজানো যাবে।

সারাংশ

বুটস্ট্রাপ ৫-এ কার্ড একটি অত্যন্ত শক্তিশালী উপাদান, যা সহজে কাস্টমাইজ করা যায়। আপনি সিম্পল কার্ড থেকে শুরু করে কমপ্লেক্স কার্ড পর্যন্ত তৈরি করতে পারেন এবং এগুলিকে কার্ড গ্রুপ হিসেবে একত্রে প্রদর্শন করতে পারেন। এই কার্ডগুলো আপনার ওয়েবসাইটে ইন্টারেকটিভ এবং আকর্ষণীয় কন্টেন্ট প্রদর্শন করতে সহায়তা করবে।

বুটস্ট্রাপ ৫-এর Cards একটি অত্যন্ত শক্তিশালী এবং ফ্লেক্সিবল উপাদান যা বিভিন্ন ধরনের কন্টেন্ট প্রদর্শনের জন্য ব্যবহার করা যেতে পারে। এর মাধ্যমে আপনি সহজেই ইমেজ, টেক্সট, লিস্ট এবং অন্যান্য কন্টেন্ট একত্রে সুন্দরভাবে সাজাতে পারেন। বুটস্ট্রাপের কার্ডগুলি রেসপন্সিভ এবং কাস্টমাইজযোগ্য হওয়ায়, আপনি সহজেই বিভিন্ন ধরণের লেআউট তৈরি করতে পারেন।

ইমেজ সহ কার্ড (Card with Image)

কার্ডের মধ্যে ইমেজ যুক্ত করার জন্য card-img-top ক্লাস ব্যবহার করা হয়। এটি ইমেজটিকে কার্ডের উপরের অংশে প্রদর্শন করে।

উদাহরণ: ইমেজ সহ কার্ড

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
  <div class="card-body">
    <h5 class="card-title">কার্ড শিরোনাম</h5>
    <p class="card-text">এটি একটি সাধারণ কার্ড যা ইমেজ এবং টেক্সট যুক্ত।</p>
    <a href="#" class="btn btn-primary">বিস্তারিত</a>
  </div>
</div>

এখানে:

• card-img-top: ইমেজটিকে কার্ডের উপরের অংশে প্রদর্শন করে।
• card-body: কার্ডের কন্টেন্ট যেমন টেক্সট, বাটন ইত্যাদি এখানে রাখা হয়।

লিস্ট সহ কার্ড (Card with List)

বুটস্ট্রাপ ৫-এর কার্ডে আপনি লিস্ট আইটেমও যুক্ত করতে পারেন। এর জন্য list-group এবং list-group-item ক্লাস ব্যবহার করা হয়।

উদাহরণ: লিস্ট সহ কার্ড

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">লিস্ট সহ কার্ড</h5>
    <p class="card-text">এটি একটি কার্ড যা লিস্ট আইটেমগুলির সাথে সংযুক্ত।</p>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">আইটেম ১</li>
      <li class="list-group-item">আইটেম ২</li>
      <li class="list-group-item">আইটেম ৩</li>
    </ul>
    <a href="#" class="btn btn-primary mt-2">বিস্তারিত</a>
  </div>
</div>

এখানে:

• list-group: একটি লিস্ট গোষ্ঠী তৈরি করে যা কার্ডের ভিতরে ব্যবহৃত হয়।
• list-group-item: লিস্টের প্রতিটি আইটেম।

কন্টেন্ট সহ কার্ড (Card with Content)

বুটস্ট্রাপ ৫-এর কার্ডে কন্টেন্ট হিসেবে টেক্সট, বাটন, লিঙ্ক, টেবিল ইত্যাদি রাখা যায়। এটি একটি অত্যন্ত ফ্লেক্সিবল উপাদান যা কাস্টমাইজযোগ্য।

উদাহরণ: কন্টেন্ট সহ কার্ড

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">কার্ড কন্টেন্ট</h5>
    <h6 class="card-subtitle mb-2 text-muted">উপশিরোনাম</h6>
    <p class="card-text">এটি একটি কার্ড যা সাধারণ টেক্সট এবং অন্যান্য কন্টেন্ট ধারণ করতে পারে।</p>
    <a href="#" class="card-link">লিঙ্ক ১</a>
    <a href="#" class="card-link">লিঙ্ক ২</a>
  </div>
</div>

এখানে:

• card-title: কার্ডের প্রধান শিরোনাম।
• card-subtitle: উপশিরোনাম (যা সাধারণত ছোট ফন্ট সাইজে হয়)।
• card-text: কার্ডের মূল কন্টেন্ট।
• card-link: কার্ডের ভিতরে লিঙ্ক যুক্ত করা হয়েছে।

সারাংশ

বুটস্ট্রাপ ৫-এর Cards একটি অত্যন্ত শক্তিশালী উপাদান যা আপনি সহজেই কাস্টমাইজ করে ইমেজ, টেক্সট, লিস্ট এবং অন্যান্য কন্টেন্ট প্রদর্শন করতে পারেন। কার্ডটি রেসপন্সিভ এবং ফ্লেক্সিবল হওয়ায়, এটি যে কোনো ওয়েবসাইটে সুন্দরভাবে কাজ করবে। আপনি সহজেই ইমেজ সহ, লিস্ট সহ বা কন্টেন্ট সহ কার্ড তৈরি করতে পারেন, এবং এগুলোর সাইজ ও লেআউট গ্রিড সিস্টেম ব্যবহার করে কাস্টমাইজ করতে পারবেন।

বুটস্ট্রাপ ৫-এ কার্ড (Card) একটি অত্যন্ত জনপ্রিয় উপাদান যা ব্যবহারকারীদের ইন্টারেক্টিভ, সুন্দর এবং স্বচ্ছভাবে কন্টেন্ট প্রদর্শন করতে সহায়তা করে। কার্ড গ্রুপস (Card Groups) এবং কার্ড ডেকস (Card Decks) এর মাধ্যমে আপনি একাধিক কার্ডকে গ্রুপ বা ডেক আকারে প্রদর্শন করতে পারেন। এগুলি রেসপন্সিভ এবং কাস্টমাইজযোগ্য, যা ওয়েব পেজের ডিজাইনকে আরও সুন্দর ও ব্যবহারযোগ্য করে তোলে।

কার্ড গ্রুপস (Card Groups)

কার্ড গ্রুপস (Card Groups) ব্যবহার করা হয় একাধিক কার্ডকে একসাথে প্রদর্শন করার জন্য। এটি একটি সারিতে একাধিক কার্ড প্রদর্শন করতে সাহায্য করে, যেখানে প্রতিটি কার্ড সমান আকারে থাকে এবং একে অপরের থেকে আলাদা হয়ে থাকে। সাধারণত, card-group ক্লাস ব্যবহার করা হয় কার্ড গ্রুপ তৈরি করতে।

উদাহরণ: কার্ড গ্রুপস

<div class="container">
    <div class="card-group">
        <div class="card">
            <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
            <div class="card-body">
                <h5 class="card-title">কার্ড ১</h5>
                <p class="card-text">এটি একটি কার্ডের বেসিক উদাহরণ।</p>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
            <div class="card-body">
                <h5 class="card-title">কার্ড ২</h5>
                <p class="card-text">এটি আরেকটি কার্ড।</p>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
            <div class="card-body">
                <h5 class="card-title">কার্ড ৩</h5>
                <p class="card-text">এটি তৃতীয় কার্ড।</p>
            </div>
        </div>
    </div>
</div>

এখানে:

• card-group: এই ক্লাসটি সমস্ত কার্ডকে একসাথে গ্রুপ করে। এতে কার্ডগুলো সমান আকারে থাকে এবং একটি সারিতে সাজানো হয়।
• প্রতিটি card ট্যাগ একটি একক কার্ডের উপাদান।

কার্ড ডেকস (Card Decks)

কার্ড ডেকস (Card Decks) ব্যবহার করে আপনি একাধিক কার্ডকে সারি এবং কলামের মধ্যে ভাগ করতে পারেন, যাতে ওয়েব পেজে সুসংগঠিত এবং রেসপন্সিভ ডিজাইন হয়। card-deck ক্লাস ব্যবহার করে কার্ডগুলোকে একসাথে সাজানো হয়, এবং প্রতিটি কার্ডের আকার স্বয়ংক্রিয়ভাবে সামঞ্জস্যপূর্ণ হয়। এটি সাধারণত আরও বেশি কার্ডে ব্যবহৃত হয় এবং কার্ডগুলো পরস্পর থেকে আলাদা হয়ে থাকে।

উদাহরণ: কার্ড ডেকস

<div class="container">
    <div class="card-deck">
        <div class="card">
            <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
            <div class="card-body">
                <h5 class="card-title">কার্ড ১</h5>
                <p class="card-text">এটি একটি কার্ড ডেকের প্রথম কার্ড।</p>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
            <div class="card-body">
                <h5 class="card-title">কার্ড ২</h5>
                <p class="card-text">এটি একটি আরো সুন্দর কার্ড।</p>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image">
            <div class="card-body">
                <h5 class="card-title">কার্ড ৩</h5>
                <p class="card-text">এটি তৃতীয় কার্ড, এবং এটি গ্রুপ থেকে আলাদা।</p>
            </div>
        </div>
    </div>
</div>

এখানে:

• card-deck: এই ক্লাসটি কার্ডগুলোকে একত্রে সাজিয়ে একটি সুসংগঠিত ডেক তৈরি করে।
• কার্ডগুলোর আকার স্বয়ংক্রিয়ভাবে সামঞ্জস্যপূর্ণ হয়, যাতে প্রতিটি কার্ড সমান আকারে থাকে এবং সেগুলোর মধ্যে যথেষ্ট গ্যাপ থাকে।

পার্থক্য: কার্ড গ্রুপস এবং কার্ড ডেকস

• কার্ড গ্রুপস: কার্ডগুলো একসাথে গ্রুপ হয়ে একটি একক সারিতে প্রদর্শিত হয়। এতে কার্ডগুলো সমান আকারে থাকে, তবে সেগুলোর মাঝে কোনো গ্যাপ থাকে না।
• কার্ড ডেকস: কার্ডগুলোতে স্বয়ংক্রিয়ভাবে গ্যাপ থাকে এবং কার্ডগুলোর আকারও সমান থাকে, তবে সেগুলো কাস্টম গ্রিড সিস্টেমে সাজানো হয়। এটি সাধারণত বড় সাইজের ফর্ম্যাটে ব্যবহৃত হয়।

কার্ডের অন্যান্য কাস্টমাইজেশন

বুটস্ট্রাপ ৫ এ আপনি কার্ডগুলো আরও কাস্টমাইজ করতে পারেন, যেমন:

• কার্ড টাইটেল, টেক্সট এবং বাটন: কার্ডের শিরোনাম, বর্ণনা এবং বাটন ব্যবহার করে আপনি আরও কার্যকর কন্টেন্ট প্রদর্শন করতে পারেন।
• কার্ড ইমেজ: আপনি প্রতিটি কার্ডে একটি ছবি যোগ করতে পারেন।
• কার্ড হেডার এবং ফুটার: কার্ডে একটি হেডার এবং ফুটারও যোগ করা সম্ভব।

সারাংশ

বুটস্ট্রাপ ৫ এর কার্ড গ্রুপস এবং কার্ড ডেকস আপনাকে একাধিক কার্ডকে সুন্দরভাবে গ্রুপ করে বা ডেক আকারে প্রদর্শন করতে সহায়তা করে। এগুলি রেসপন্সিভ এবং কাস্টমাইজযোগ্য হওয়ায়, আপনি ওয়েব পেজে সুন্দর, ইন্টারেকটিভ এবং ব্যবহারযোগ্য ডিজাইন তৈরি করতে পারেন। কার্ড গ্রুপস এক সারিতে কার্ডগুলো সাজায়, যেখানে কার্ড ডেকস আরও বেশি আকারে এবং সুশৃঙ্খলভাবে কার্ডগুলো উপস্থাপন করে।