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


Bootstrap margin

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


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

Bootstrap margin ৬ রকম ভ্যলু ব্যবহার করা হয় । এখানে মনে রাখবেন 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



প্রথমে জেনেছেন Bootstrap মার্জিন m দ্বারা প্রকাশ করা হয় ।


নিচে ক্লাস গুলো বিস্তারিত আলোচনা করা হল : * এর জায়গায় ভ্যালু বসবে

mt-* mr-* mb-* ml-* mx-* my-* m-* mx-auto my-auto

mt-* - এই ক্লাস এর মাধ্যমে আপনি উপর দিক থেকে ফাকা জায়গা ছাড়তে পারেন । * এর জায়গায় 0, 1, 2, 3, 4, 5 ভ্যলু বসাবেন ।

0px discount from above.

4px discount from above.

8px discount from above.

16px discount from above.

24px discount from above.

48px discount from above.



mr-* - এই ক্লাস এর মাধ্যমে আপনি ডান দিক থেকে ফাকা জায়গা ছাড়তে পারেন । * এর জায়গায় 0, 1, 2, 3, 4, 5 ভ্যলু বসাবেন ।

0px discount from right.

4px discount from right.

8px discount from right.

16px discount from right.

24px discount from right.

48px discount from right.



mb-* - এই ক্লাস এর মাধ্যমে আপনি নিচের দিক থেকে ফাকা জায়গা ছাড়তে পারেন । * এর জায়গায় 0, 1, 2, 3, 4, 5 ভ্যলু বসাবেন ।

0px discount from bottom.

4px discount from bottom.

8px discount from bottom.

16px discount from bottom.

24px discount from bottom.

48px discount from bottom.

Bootstrap Margin responsive জানার জন্য এখানে ক্লিক করুন ।

ml-* - এই ক্লাস এর মাধ্যমে আপনি বাম দিক থেকে ফাকা জায়গা ছাড়তে পারেন । * এর জায়গায় 0, 1, 2, 3, 4, 5 ভ্যলু বসাবেন ।

0px discount from left.

4px discount from left.

8px discount from left.

16px discount from left.

24px discount from left.

48px discount from left.



mx-* - এই ক্লাস এর মাধ্যমে আপনি বাম দিক ও ডানদিক উভয় দিক থেকে সমান ফাকা জায়গা ছাড়তে পারেন । * এর জায়গায় 0, 1, 2, 3, 4, 5 ভ্যলু বসাবেন ।

0px discount on both right and left side.

4px discount on both right and left side.

8px discount on both right and left side.

16px discount on both right and left side..

24px discount on both right and left side..

48px discount on both right and left side..



my-* - এই ক্লাস এর মাধ্যমে আপনি উপরের দিক ও নিচেরদিক উভয় দিক থেকে সমান ফাকা জায়গা ছাড়তে পারেন । * এর জায়গায় 0, 1, 2, 3, 4, 5 ভ্যলু বসাবেন ।

0px discount on both top and bottom.

4px discount on both top and bottom.

8px discount on both top and bottom.

16px discount on both top and bottom.

24px discount on both top and bottom.

48px discount on both top and bottom.



m-* - এই ক্লাস এর মাধ্যমে আপনি চারিদিক থেকে সমান ফাকা জায়গা ছাড়তে পারেন । * এর জায়গায় 0, 1, 2, 3, 4, 5 ভ্যলু বসাবেন ।

0xp discount from all around.

4px discount from all around.

8px discount from all around.

16px discount from all around.

24px discount from all around.

48px discount from all around.



mx-auto - এই ক্লাস এর মাধ্যমে লেখা বা অবজেক্ট এর সাইজ চাওড়ায় (width) যত বড় হবে সেই অনুযায়ী বাম ও ডান দিক থেকে margin সেট হবে ।সাধারণত অবজেক্ট বা লেখাকে মাঝখানে দেখাতে সাহায্য করে।

width-100px.

width-150px

width-200px

width-250px.

width-280px.

width-300px.