SNDP BAG 4 YOU
কম্পিউটার প্রোগ্রামিং শিখুন


বুটস্ট্র্যাপ Responsive Margin

মোবাইল, ট্যাবলেট, কম্পিউটার , ল্যাপটপ ও টিভি বিভিন্ন ডিভাইসে লেখা বা অবজেক্ট ভিন্ন ভিন্ন স্থানে ফাঁকা স্পেস দেখানোর জন্য Bootstrap এর কিছু নিদিষ্ট ক্লাস আছে যা নিচে আলোচনা করা হল । bootstrap লেখার জন্য class="Nm" ব্যবহার করতে হবে আর সেই class এর ভিতরে নিদিষ্ট class এর নাম লিখতে হবে যেটা আগে থেকে bootstrap এ লেখা আছে তার কাজ কি ।


বিভিন্ন ডিভাইস এর বিবরণ :

xs-এর সম্পূর্ণ নাম Extra Small Device. 0px থেকে 575px এর ডিভাইসকে এক্সট্রা স্মল ডিভাইস বলা হয়।

sm - এর সম্পূর্ণ নাম Small Device. 576px থেকে 767px এর ডিভাইসকে স্মল ডিভাইস বলা হয়।

md - এর সম্পূর্ণ নাম Medium Device. 768px থেকে 991px এর ডিভাইসকে মিডিয়াম ডিভাইস বলা হয়।

lg - এর সম্পূর্ণ নাম Large Device. 992px থেকে 1199px এর ডিভাইসকে লারজ ডিভাইস বলা হয়।

xl - এর সম্পূর্ণ নাম Extra Large Device. 1200px এর উপরের ডিভাইসকে এক্সট্রা লারজ ডিভাইস বলা হয়।

মার্জিন সম্পর্কে জানার জন্য এখানে ক্লিক করুন ।

Bootstrap Responsive margin ব্যবহৃত ক্লাস এর নাম গুলো নিচে দেওয়া হল :


উপরের মার্জিন জন্য :

.mt-sm-*.mt-md-*
.mt-lg-*.mt-xl-*


ডানদিকের মার্জিন জন্য :

.mr-sm-*.mr-md-*
.mr-lg-*.mr-xl-*


নিচেরদিকের মার্জিন জন্য :

.mb-sm-*.mb-md-*
.mb-lg-*.mb-xl-*


বামদিকের মার্জিন জন্য :

.ml-sm-*.ml-md-*
.ml-lg-*.ml-xl-*


চারিদিকের সমান মার্জিন জন্য :

.m-sm-*.m-md-*
.m-lg-*.m-xl-*


বামদিক ও ডানদিক উভয় দিকে সমান মার্জিন জন্য :

.mx-sm-*.mx-md-*
.mx-lg-*.mx-xl-*


উপর ও নিচে উভয় দিকে সমান মার্জিন জন্য :

.my-sm-*.my-md-*
.my-lg-*.my-xl-*


* জায়গায় ভ্যলু বাসাবেন । Bootstrap margin ৬ রকম ভ্যলু ব্যবহার করা হয় 0 থেকে 5 । এখানে মনে রাখবেন bootstrap px ব্যবহার করা হয় না । Bootstrap rem ব্যবহার করা হয় ।1rem = 16 px


0 --> 0rem --> 0px

1 --> .25rem --> 4px

2 --> .5rem --> 8px

3 --> 1rem --> 16px

4 --> 1.5rem --> 24px

5 --> 3rem --> 48px

.ml-sm-* .mx-auto   * এর জায়গায় ভ্যলু বসাবেন 0 থেকে 5 । কোন অবজেক্ট এর মধ্যে এই দুটি ক্লাস ব্যবহার করলে 0px থেকে 575px পর্যন্ত অবজেক্ট মাঝখানে দেখাবে এবং 576px থেকে অবজেক্ট বামদিকে কিছু ফাঁকা স্থান ছেড়ে দেখাবে।




.mr-sm-* .mx-auto   * এর জায়গায় ভ্যলু বসাবেন 0 থেকে 5 । কোন অবজেক্ট এর মধ্যে এই দুটি ক্লাস ব্যবহার করলে 0px থেকে 575px পর্যন্ত অবজেক্ট মাঝখানে দেখাবে এবং 576px থেকে অবজেক্ট ডানদিকে কিছু ফাঁকা স্থান ছেড়ে দেখাবে।




.ml-* .mx-sm-auto   * এর জায়গায় ভ্যলু বসাবেন 0 থেকে 5 । কোন অবজেক্ট এর মধ্যে এই দুটি ক্লাস ব্যবহার করলে 0px থেকে 575px পর্যন্ত অবজেক্ট বামদিকে দেখাবে কিছুটা ফাঁকা স্থান ছেড়ে এবং 576px থেকে অবজেক্টি মাঝখানে দেখাবে ।




.mx-auto mr-sm-* ml-md-*   * এর জায়গায় ভ্যলু বসাবেন 0 থেকে 5 । কোন অবজেক্ট এর মধ্যে এই তিনটি ক্লাস ব্যবহার করলে 0px থেকে 575px পর্যন্ত অবজেক্ট মাঝখানে দেখাবে, এবং 576px থেকে 767px পর্যন্ত অবজেক্ট ডানদিকে কিছু ফাঁকা স্থান ছেড়ে দেখাবে ও 768px এর উপরে ডিভাইসে অবজেক্ট বামদিকে কিছুটা ফাঁকা স্থান ছেড়ে দেখাবে ।