বুটস্ট্রাপ ৫ একটি রেসপন্সিভ ফ্রেমওয়ার্ক, যা বিভিন্ন স্ক্রীন সাইজের জন্য পূর্বনির্ধারিত মিডিয়া কুয়েরি প্রদান করে। তবে, কখনও কখনও আপনি বিশেষভাবে আপনার প্রয়োজন অনুযায়ী কাস্টম মিডিয়া কুয়েরি তৈরি করতে চাইবেন, যেমনঃ যখন আপনি অতিরিক্ত কাস্টমাইজেশন বা নির্দিষ্ট স্ক্রীন সাইজে আরও নির্দিষ্ট স্টাইল প্রয়োগ করতে চান।
বুটস্ট্রাপ ৫ তে আপনি CSS এ কাস্টম মিডিয়া কুয়েরি ব্যবহার করে আপনার ওয়েব পেজের রেসপন্সিভিটি আরও ভালোভাবে কাস্টমাইজ করতে পারেন।
মিডিয়া কুয়েরি (Media Query) CSS এর একটি শক্তিশালী ফিচার, যার মাধ্যমে আপনি বিভিন্ন ডিভাইসের স্ক্রীন সাইজ, রেজোলিউশন, অরিয়েন্টেশন ইত্যাদি অনুযায়ী স্টাইল অ্যাপ্লাই করতে পারেন। এটি রেসপন্সিভ ডিজাইন তৈরিতে বিশেষভাবে সাহায্য করে।
বুটস্ট্রাপ ৫-এ সাধারণত ৪টি মূল ব্রেকপয়েন্ট ব্যবহার হয়:
বুটস্ট্রাপ ৫ ইতিমধ্যে এই মিডিয়া কুয়েরিগুলি অন্তর্ভুক্ত করেছে, তবে আপনি যদি নিজস্ব কাস্টম মিডিয়া কুয়েরি তৈরি করতে চান, তাহলে নিচে দেখানো পদ্ধতি অনুসরণ করতে পারেন।
যেকোনো 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
ক্লাসগুলোর জন্য স্ক্রীন সাইজ অনুযায়ী কাস্টম স্টাইল পরিবর্তন করা হচ্ছে।
বুটস্ট্রাপ ৫ এর প্রি-ডিফাইন্ড মিডিয়া কুয়েরি ব্রেকপয়েন্টগুলো হলো:
এগুলো ব্যবহারের জন্য আপনি Bootstrap's Grid System এর কাস্টমাইজেশনের জন্য মিডিয়া কুয়েরি ব্যবহার করতে পারেন, যেমন:
@media (max-width: 992px) {
.custom-container {
margin-left: 15px;
}
}
@media (min-width: 1200px) {
.custom-container {
margin-left: 30px;
}
}
এই উদাহরণে, .custom-container
এর মার্জিন স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করা হচ্ছে।
বুটস্ট্রাপ ৫ তে কাস্টম মিডিয়া কুয়েরি ব্যবহার করে আপনি আপনার ওয়েব পেজের রেসপন্সিভ ডিজাইন আরো নির্দিষ্টভাবে কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনি স্ক্রীন সাইজ অনুযায়ী স্টাইল পরিবর্তন করতে পারবেন, যা একটি ফ্লেক্সিবল এবং ডাইনামিক লেআউট তৈরি করতে সাহায্য করে।
Read more