Bootstrap 5 এর জন্য Custom Media Queries

Web Development - বুটস্ট্রাপ (Bootstrap 5) - Bootstrap 5 এর Image এবং Media Queries |

বুটস্ট্রাপ ৫ একটি রেসপন্সিভ ফ্রেমওয়ার্ক, যা বিভিন্ন স্ক্রীন সাইজের জন্য পূর্বনির্ধারিত মিডিয়া কুয়েরি প্রদান করে। তবে, কখনও কখনও আপনি বিশেষভাবে আপনার প্রয়োজন অনুযায়ী কাস্টম মিডিয়া কুয়েরি তৈরি করতে চাইবেন, যেমনঃ যখন আপনি অতিরিক্ত কাস্টমাইজেশন বা নির্দিষ্ট স্ক্রীন সাইজে আরও নির্দিষ্ট স্টাইল প্রয়োগ করতে চান।

বুটস্ট্রাপ ৫ তে আপনি CSS এ কাস্টম মিডিয়া কুয়েরি ব্যবহার করে আপনার ওয়েব পেজের রেসপন্সিভিটি আরও ভালোভাবে কাস্টমাইজ করতে পারেন।


মিডিয়া কুয়েরি কী?

মিডিয়া কুয়েরি (Media Query) CSS এর একটি শক্তিশালী ফিচার, যার মাধ্যমে আপনি বিভিন্ন ডিভাইসের স্ক্রীন সাইজ, রেজোলিউশন, অরিয়েন্টেশন ইত্যাদি অনুযায়ী স্টাইল অ্যাপ্লাই করতে পারেন। এটি রেসপন্সিভ ডিজাইন তৈরিতে বিশেষভাবে সাহায্য করে।

বুটস্ট্রাপ ৫-এ সাধারণত ৪টি মূল ব্রেকপয়েন্ট ব্যবহার হয়:

  • xs (Extra Small): ছোট ডিভাইস (ফোন)
  • sm (Small): ছোট ট্যাবলেট
  • md (Medium): মিডিয়াম ট্যাবলেট বা ল্যাপটপ
  • lg (Large): ডেস্কটপ

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


কাস্টম মিডিয়া কুয়েরি ব্যবহার করা

যেকোনো CSS ফাইলের মধ্যে আপনি কাস্টম মিডিয়া কুয়েরি লিখে নির্দিষ্ট স্ক্রীন সাইজের জন্য স্টাইল অ্যাপ্লাই করতে পারেন।

উদাহরণ: কাস্টম মিডিয়া কুয়েরি

/* মোবাইল ডিভাইসে (স্ক্রীন সাইজ 576px বা কম) */
@media (max-width: 576px) {
    body {
        background-color: lightblue;
    }

    .container {
        padding: 10px;
    }

    .custom-heading {
        font-size: 1.5rem;
    }
}

/* ট্যাবলেট ডিভাইসে (স্ক্রীন সাইজ 768px বা কম) */
@media (max-width: 768px) {
    .custom-heading {
        font-size: 2rem;
    }
}

/* ডেস্কটপ ডিভাইসে (স্ক্রীন সাইজ 992px বা বেশি) */
@media (min-width: 992px) {
    body {
        background-color: lightgreen;
    }

    .custom-heading {
        font-size: 2.5rem;
    }
}

এই কোডে, বিভিন্ন স্ক্রীন সাইজ অনুযায়ী background-color, padding, এবং font-size স্টাইলগুলো পরিবর্তিত হবে।


বুটস্ট্রাপ ৫-এর সঙ্গে কাস্টম মিডিয়া কুয়েরি ব্যবহার করা

বুটস্ট্রাপ ৫ ইতিমধ্যে অনেক ব্রেকপয়েন্ট এবং রেসপন্সিভ ক্লাস প্রদান করে থাকে, তবে আপনি যদি বিশেষভাবে কাস্টম মিডিয়া কুয়েরি ব্যবহার করতে চান, তাহলে সেই কাস্টম ব্রেকপয়েন্ট ব্যবহার করতে পারেন।

উদাহরণ: বুটস্ট্রাপ ৫ ক্লাসের সঙ্গে কাস্টম মিডিয়া কুয়েরি

/* বুটস্ট্রাপের জন্য কাস্টম মিডিয়া কুয়েরি */
@media (max-width: 600px) {
    .custom-container {
        width: 100%;
        padding: 15px;
    }

    .custom-button {
        font-size: 1rem;
        width: 100%;
    }
}

/* আরও বড় স্ক্রীন সাইজে (বিশেষ ব্রেকপয়েন্ট) */
@media (min-width: 1200px) {
    .custom-container {
        width: 80%;
        padding: 30px;
    }

    .custom-button {
        font-size: 1.5rem;
        width: auto;
    }
}

এই উদাহরণে .custom-container এবং .custom-button ক্লাসগুলোর জন্য স্ক্রীন সাইজ অনুযায়ী কাস্টম স্টাইল পরিবর্তন করা হচ্ছে।


কাস্টম মিডিয়া কুয়েরি এবং বুটস্ট্রাপ ৫-এর ব্রেকপয়েন্ট

বুটস্ট্রাপ ৫ এর প্রি-ডিফাইন্ড মিডিয়া কুয়েরি ব্রেকপয়েন্টগুলো হলো:

  • xs (Extra Small): স্ক্রীন সাইজ 0px বা তার নিচে (ডিফল্ট)
  • sm (Small): স্ক্রীন সাইজ 576px বা তার বেশি
  • md (Medium): স্ক্রীন সাইজ 768px বা তার বেশি
  • lg (Large): স্ক্রীন সাইজ 992px বা তার বেশি
  • xl (Extra Large): স্ক্রীন সাইজ 1200px বা তার বেশি
  • xxl (Extra Extra Large): স্ক্রীন সাইজ 1400px বা তার বেশি

এগুলো ব্যবহারের জন্য আপনি Bootstrap's Grid System এর কাস্টমাইজেশনের জন্য মিডিয়া কুয়েরি ব্যবহার করতে পারেন, যেমন:

@media (max-width: 992px) {
    .custom-container {
        margin-left: 15px;
    }
}

@media (min-width: 1200px) {
    .custom-container {
        margin-left: 30px;
    }
}

এই উদাহরণে, .custom-container এর মার্জিন স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করা হচ্ছে।


সারাংশ

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

Content added By
Promotion