বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম একটি শক্তিশালী টুল যা ওয়েবসাইট বা অ্যাপ্লিকেশনের লেআউট তৈরি করতে সহায়তা করে। এটি ১২-কলাম ভিত্তিক এবং রেসপন্সিভ ডিজাইন নিশ্চিত করে। গ্রিড সিস্টেমটি ব্যবহার করে বিভিন্ন সাইজের ডিসপ্লে ডিভাইসে কন্টেন্টের সঠিকভাবে প্রদর্শন নিশ্চিত করা যায়।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম মূলত দুটি উপাদান ব্যবহার করে কাজ করে:
বুটস্ট্রাপের গ্রিড সিস্টেম ১২টি কলাম দ্বারা বিভক্ত, যার মাধ্যমে আপনি যেকোনো লেআউট তৈরি করতে পারেন। একেকটি কলাম প্রয়োজনীয় স্পেস নিয়ে কন্টেন্টের প্রদর্শন নিশ্চিত করে।
container ক্লাস ব্যবহার করে ওয়েবসাইটের কন্টেন্টের সীমা নির্ধারণ করা হয়। এটি পৃষ্ঠার কন্টেন্টকে সেন্টার করে এবং একে নির্দিষ্ট প্রস্থে সীমাবদ্ধ করে। দুই ধরনের কন্টেইনার রয়েছে:
<div class="container">
<div class="row">
<div class="col">
প্রথম কলাম
</div>
<div class="col">
দ্বিতীয় কলাম
</div>
</div>
</div>
এই উদাহরণে একটি container ডিভ ব্যবহার করা হয়েছে, যা দুটি কলাম (div) ধারণ করছে। প্রতিটি কলাম একই আকারের।
বুটস্ট্রাপ ৫ এ কলামগুলির আকার নির্ধারণ করা হয় বিভিন্ন সাইজ ক্লাস ব্যবহার করে, যেমন:
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
প্রথম কলাম
</div>
<div class="col-12 col-md-6 col-lg-4">
দ্বিতীয় কলাম
</div>
<div class="col-12 col-lg-4">
তৃতীয় কলাম
</div>
</div>
</div>
এই উদাহরণে, ছোট স্ক্রীনে (কল-১২) তিনটি কলাম পুরো প্রস্থ নেবে, মাঝারি স্ক্রীনে দুটি কলাম এবং বড় স্ক্রীনে তিনটি কলাম একাধিক সাইজে প্রসারিত হবে।
বুটস্ট্রাপ ৫ এ, কলামগুলোর আকার স্বয়ংক্রিয়ভাবে সমন্বিত হতে পারে যদি আপনি একটি নির্দিষ্ট আকার না দেন। উদাহরণস্বরূপ, একটি কলাম col ক্লাস ব্যবহার করলে, এটি তার প্রাপ্য স্থান পূর্ণ করবে।
<div class="container">
<div class="row">
<div class="col">
প্রথম কলাম (অটো সাইজ)
</div>
<div class="col">
দ্বিতীয় কলাম (অটো সাইজ)
</div>
</div>
</div>
এই উদাহরণে, দুটি কলাম একে অপরের সাথে সমানভাবে সাইজ হবে, প্রতিটি কলাম তার স্থান পূর্ণ করতে চাইবে।
আপনি চাইলে একাধিক কলামকে একত্রিত করে একটানা বিশাল কলাম তৈরি করতে পারেন। একাধিক কলামকে একত্রিত করার জন্য আপনি প্রস্থ নির্ধারণ করতে পারেন। উদাহরণস্বরূপ, দুইটি কলাম একসাথে col-8 এবং col-4 হলে, তারা একসাথে ১২টি কলামকে পূর্ণ করবে।
<div class="container">
<div class="row">
<div class="col-8">
বড় কলাম
</div>
<div class="col-4">
ছোট কলাম
</div>
</div>
</div>
এখানে প্রথম কলামটি ৮টি কলাম প্রস্থ নেবে এবং দ্বিতীয় কলামটি ৪টি কলাম প্রস্থ নেবে।
বুটস্ট্রাপ ৫ এ আপনি g- ক্লাস ব্যবহার করে গ্রিডের মধ্যে গ্যাপ বা স্পেসিং কাস্টমাইজ করতে পারেন। যেমন:
<div class="container">
<div class="row g-3">
<div class="col-4">
কলাম ১
</div>
<div class="col-4">
কলাম ২
</div>
<div class="col-4">
কলাম ৩
</div>
</div>
</div>
এখানে, g-3 ক্লাস দিয়ে গ্রিডের মধ্যে গ্যাপ দেওয়া হয়েছে।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম আপনাকে ওয়েবসাইটের লেআউট তৈরি করার জন্য শক্তিশালী, রেসপন্সিভ এবং কাস্টমাইজেবল টুল প্রদান করে। এটি দ্রুত ওয়েবসাইট ডিজাইন তৈরি করতে সহায়ক, কারণ আপনি বিভিন্ন ডিভাইসের জন্য আটো-অ্যাডজাস্টিং কলাম এবং সাইজিং ব্যবহার করতে পারেন।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান যা ওয়েব ডিজাইন এবং ডেভেলপমেন্টে দ্রুত, রেসপন্সিভ, এবং কার্যকরী লেআউট তৈরির জন্য ব্যবহৃত হয়। এটি HTML এবং CSS এর একটি কার্যকরী কাঠামো যা ওয়েবসাইটের কন্টেন্টকে বিভিন্ন ডিভাইসের জন্য উপযুক্তভাবে প্রদর্শন করতে সহায়তা করে। গ্রিড সিস্টেমের মাধ্যমে আপনি কন্টেন্টকে বিভিন্ন কলামে ভাগ করে সুন্দরভাবে সাজাতে পারেন, যা ইউজার এক্সপেরিয়েন্স (UX) উন্নত করে এবং ওয়েবসাইটের পারফরম্যান্স বৃদ্ধি করে।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেমের সবচেয়ে বড় সুবিধা হলো এটি রেসপন্সিভ ডিজাইন নিশ্চিত করে। অর্থাৎ, ওয়েবসাইটের কন্টেন্ট স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুসারে মানিয়ে নেয়। এটি ব্যবহারকারীদের মোবাইল, ট্যাবলেট, এবং ডেস্কটপের মতো বিভিন্ন ডিভাইসে একই মানের অভিজ্ঞতা প্রদান করে।
গ্রিড সিস্টেমের মাধ্যমে আপনি একটি ওয়েব পেজের বিভিন্ন অংশকে উপযুক্ত আকারে সাজাতে পারবেন, যা স্ক্রীনের আকার অনুসারে পরিবর্তিত হবে। উদাহরণস্বরূপ, ছোট স্ক্রীনে একটি কলাম পুরো প্রস্থ নেবে, কিন্তু বড় স্ক্রীনে সেই কলামগুলো ভাগ হয়ে যাবে এবং উপযুক্ত আকারে প্রদর্শিত হবে।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম একটি ফ্লেক্সিবল এবং ফ্লুইড লেআউটের জন্য উপযুক্ত। আপনি গ্রিডের কলামগুলোকে কাস্টমাইজ করে সেগুলোর সাইজ এবং অবস্থান পরিবর্তন করতে পারেন। এটি লেআউট ডিজাইনকে আরও নমনীয় এবং পরিস্কার করে তোলে, কারণ গ্রিড সিস্টেমের মাধ্যমে আপনি সহজেই বিভিন্ন উপাদান এবং কন্টেন্ট ব্লকগুলোর মধ্যে সমন্বয় করতে পারেন।
গ্রিড সিস্টেমের মাধ্যমে আপনি ডাইনামিক কন্টেন্ট (যেমন, লিস্ট, টেবিল, ছবি, ভিডিও ইত্যাদি) সঠিকভাবে প্রদর্শন করতে পারেন। গ্রিড সিস্টেমের সাহায্যে বিভিন্ন কন্টেন্ট টুকরোগুলিকে বিভিন্ন কলামে ভাগ করা যায়, যা কন্টেন্টের প্রদর্শন শৈলীকে আরো সুন্দর এবং ব্যবহারযোগ্য করে তোলে।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম একাধিক লেআউট ডিজাইনের জন্য পূর্বনির্ধারিত স্টাইল এবং ক্লাস সরবরাহ করে। এর ফলে, ডেভেলপারদের কোডের কমপ্লেক্সিটি কমাতে সহায়তা হয়। ডেভেলপাররা সহজেই কাস্টম CSS লিখে গ্রিড সিস্টেমের সাথে সঙ্গতিপূর্ণ লেআউট তৈরি করতে পারে।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম ১২টি কলামে বিভক্ত, যার মাধ্যমে আপনি ওয়েব পেজের কন্টেন্টকে ১২টি কলামে ভাগ করে নির্দিষ্ট প্রস্থে সাজাতে পারেন। প্রতিটি কলাম নির্দিষ্ট প্রস্থের হবে এবং একে অন্যের সাথে সমন্বিতভাবে প্রদর্শিত হবে।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেমের রেসপন্সিভ ক্লাস (যেমন, col-sm-, col-md-, col-lg-) ব্যবহার করে আপনি বিভিন্ন ডিভাইসে কন্টেন্টের প্রস্থ কাস্টমাইজ করতে পারেন। প্রতিটি ক্লাস নির্দিষ্ট ডিভাইসের জন্য কলামের সাইজ নির্ধারণ করে, যাতে সেগুলি মোবাইল, ট্যাবলেট, এবং ডেস্কটপ স্ক্রীনে সঠিকভাবে প্রদর্শিত হয়।
বুটস্ট্রাপ ৫ এ Flexbox সাপোর্ট যোগ করা হয়েছে, যা গ্রিড সিস্টেমের ফ্লেক্সিবিলিটি এবং লেআউটের নিয়ন্ত্রণ আরও শক্তিশালী করে তোলে। Flexbox এর সাহায্যে কলামগুলো সহজেই সোজা বা অনুভূমিকভাবে সাজানো যায় এবং কলামগুলোর আকার পরিবর্তন করা আরও সহজ হয়ে গেছে।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম ওয়েব ডিজাইনের ক্ষেত্রে একটি অপরিহার্য টুল। এটি রেসপন্সিভ ডিজাইন নিশ্চিত করার পাশাপাশি, লেআউটের নমনীয়তা, ডাইনামিক কন্টেন্ট প্রদর্শন, এবং কোডের সহজতর রচনা করে। এর মাধ্যমে ডেভেলপাররা দ্রুত এবং কার্যকরী ওয়েব পেজ তৈরি করতে পারে, যা প্রতিটি ডিভাইসে সুন্দরভাবে প্রদর্শিত হবে।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম একটি ১২-কোলাম ভিত্তিক কাঠামো, যা ওয়েব পেজের কন্টেন্টকে বিভিন্ন ডিভাইসে রেসপন্সিভভাবে উপস্থাপন করতে ব্যবহৃত হয়। গ্রিড সিস্টেমের এই ১২টি কলামের মাধ্যমে আপনি ওয়েব পেজের কন্টেন্টকে যে কোন সাইজের কলামে ভাগ করতে পারবেন। গ্রিড সিস্টেমের রেসপন্সিভনেস (Responsive) নিশ্চিত করার জন্য ব্রেকপয়েন্টস ব্যবহার করা হয়। ব্রেকপয়েন্টস হল সাইজ-ভিত্তিক বিভাজন, যা মোবাইল, ট্যাবলেট, এবং ডেস্কটপ স্ক্রীনে কন্টেন্টকে উপযুক্তভাবে প্রদর্শন করে।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেমের মূল কাঠামো হলো ১২ কলাম। আপনি ১২টি কলামকে বিভিন্ন ভাবে মিশিয়ে, যে কোনো ধরনের লেআউট তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি ৩টি কলাম দিয়ে একটি লেআউট তৈরি করতে পারেন, যেখানে প্রতিটি কলাম ৪টি অংশে বিভক্ত থাকবে (যেমন col-4), অথবা আপনি একটি কলামকে পুরো প্রস্থ দিতে পারেন (col-12)।
<div class="container">
<div class="row">
<div class="col-4">
প্রথম কলাম (৪ কলাম)
</div>
<div class="col-4">
দ্বিতীয় কলাম (৪ কলাম)
</div>
<div class="col-4">
তৃতীয় কলাম (৪ কলাম)
</div>
</div>
</div>
এই উদাহরণে, ১২টি কলামকে তিনটি সমান অংশে ভাগ করা হয়েছে, প্রতিটি কলাম ৪টি অংশ গ্রহণ করবে (৪ + ৪ + ৪ = ১২)। এর মাধ্যমে আপনি কন্টেন্টের লেআউট সহজেই কাস্টমাইজ করতে পারবেন।
ব্রেকপয়েন্টস হল ওয়েব ডিজাইনের একটি সিস্টেম যা বিভিন্ন ডিভাইসের স্ক্রীন সাইজের জন্য কন্টেন্ট প্রদর্শনের আকার এবং ভিউ নির্ধারণ করে। বুটস্ট্রাপ ৫ এ বিভিন্ন ব্রেকপয়েন্টের মাধ্যমে আপনি ওয়েবসাইটের লেআউটকে মোবাইল, ট্যাবলেট, এবং ডেস্কটপ স্ক্রীনের জন্য কাস্টমাইজ করতে পারেন। বুটস্ট্রাপ ৫ এর ব্রেকপয়েন্টগুলো হলো:
ব্রেকপয়েন্টের মাধ্যমে আপনি কন্টেন্টের আকার এবং লেআউট নির্ধারণ করতে পারেন যাতে প্রতিটি ডিভাইসে ওয়েব পেজটি সঠিকভাবে প্রদর্শিত হয়।
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
বিভিন্ন সাইজের জন্য কলাম
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
বিভিন্ন সাইজের জন্য কলাম
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
বিভিন্ন সাইজের জন্য কলাম
</div>
</div>
</div>
এই উদাহরণে, একাধিক ব্রেকপয়েন্টের মাধ্যমে কলামের আকার পরিবর্তিত হচ্ছে:
বুটস্ট্রাপ ৫ এর ১২-কোলাম গ্রিড সিস্টেম ওয়েবসাইটের কন্টেন্টকে ফ্লেক্সিবল এবং রেসপন্সিভভাবে উপস্থাপন করতে সাহায্য করে। এটি ১২টি কলামকে একাধিক ব্রেকপয়েন্টের মাধ্যমে উপযুক্তভাবে ভাগ করে, যাতে ওয়েব পেজের কন্টেন্ট ছোট স্ক্রীন থেকে বড় স্ক্রীনে সঠিকভাবে প্রদর্শিত হয়। এর মাধ্যমে আপনি প্রতিটি স্ক্রীনের জন্য কাস্টম লেআউট ডিজাইন করতে পারেন এবং একাধিক ডিভাইসে একই অভিজ্ঞতা প্রদান করতে সক্ষম হন।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেমের সাহায্যে আপনি সহজেই রেসপন্সিভ গ্রিড লেআউট তৈরি করতে পারেন, যা বিভিন্ন স্ক্রীন সাইজে স্বয়ংক্রিয়ভাবে মানিয়ে যায়। এই সিস্টেমে ১২টি কলাম ব্যবহার করা হয়, এবং আপনি এগুলিকে বিভিন্ন সাইজের ডিভাইসের জন্য কাস্টমাইজ করতে পারবেন। এই প্রক্রিয়ায় মোবাইল, ট্যাবলেট, এবং ডেস্কটপের জন্য পৃথক লেআউট তৈরি করা সম্ভব হয়।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেমের মাধ্যমে ব্রেকপয়েন্ট ব্যবহার করে আপনি বিভিন্ন কলামের সাইজ নির্ধারণ করতে পারেন, যাতে ওয়েব পেজের কন্টেন্ট প্রতিটি স্ক্রীনে সুন্দরভাবে প্রদর্শিত হয়। নিচে রেসপন্সিভ গ্রিড লেআউট তৈরির বিভিন্ন পদ্ধতি নিয়ে আলোচনা করা হলো।
গ্রিড সিস্টেমে, ওয়েব পৃষ্ঠার কন্টেন্টকে container বা container-fluid এর মধ্যে রাখা হয়, এবং সেগুলোকে row দিয়ে গ্রুপ করা হয়। তারপর, কন্টেন্টকে col- (কলাম) ক্লাসের সাহায্যে ভাগ করা হয়।
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4">
প্রথম কলাম
</div>
<div class="col-12 col-sm-6 col-md-4">
দ্বিতীয় কলাম
</div>
<div class="col-12 col-md-4">
তৃতীয় কলাম
</div>
</div>
</div>
এই উদাহরণে:
col-12: সমস্ত স্ক্রীনে প্রতিটি কলাম পুরো প্রস্থ নেবে (১২টি কলাম)।col-sm-6: ছোট স্ক্রীনে প্রতিটি কলাম অর্ধেক প্রস্থ নেবে (৬টি কলাম)।col-md-4: মাঝারি স্ক্রীনে প্রতিটি কলাম ৩টি সমান অংশে ভাগ হবে (৪টি কলাম)।এইভাবে, গ্রিডের কলামগুলোর সাইজ বিভিন্ন স্ক্রীন সাইজ অনুযায়ী পরিবর্তিত হবে।
নিচে একটি উদাহরণ দেওয়া হলো, যেখানে আমরা বিভিন্ন স্ক্রীনে বিভিন্ন আকারের গ্রিড তৈরি করেছি। এর মাধ্যমে আপনি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য আলাদা লেআউট তৈরি করতে পারবেন।
<div class="container">
<div class="row">
<div class="col-12 col-sm-4 col-md-4 col-lg-3">
কলাম ১
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-3">
কলাম ২
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-3">
কলাম ৩
</div>
</div>
</div>
এখানে:
এই উদাহরণে, গ্রিড সিস্টেমটি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য আলাদা আকারের লেআউট প্রদান করে।
একটি আরো জটিল উদাহরণ হিসেবে, ধরুন আমরা একটি চার কলামের লেআউট তৈরি করতে চাই:
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
কলাম ১
</div>
<div class="col-12 col-sm-6 col-md-3">
কলাম ২
</div>
<div class="col-12 col-sm-6 col-md-3">
কলাম ৩
</div>
<div class="col-12 col-sm-6 col-md-3">
কলাম ৪
</div>
</div>
</div>
এখানে:
ধরুন আপনি একটি একক কলাম লেআউট তৈরি করতে চান, যা ছোট স্ক্রীনে পূর্ণ প্রস্থ নেবে এবং বড় স্ক্রীনে সামান্য কম প্রস্থে প্রদর্শিত হবে:
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
একক কলাম
</div>
</div>
</div>
এখানে:
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেমে ব্রেকপয়েন্ট ব্যবহার করে আপনি সহজেই রেসপন্সিভ গ্রিড লেআউট তৈরি করতে পারেন। এটি বিভিন্ন স্ক্রীন সাইজের জন্য ওয়েব পেজের কন্টেন্টকে সঠিকভাবে প্রদর্শন করতে সহায়তা করে। সঠিকভাবে গ্রিড সিস্টেম ব্যবহার করলে ওয়েবসাইটটি মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসে সুন্দরভাবে কাজ করবে।
বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেমের মধ্যে Offset, Order, এবং Nested Grid ব্যবহার করার মাধ্যমে আপনি আপনার ওয়েব পেজের লেআউটকে আরও কাস্টমাইজ এবং ফ্লেক্সিবল করতে পারেন। এই ফিচারগুলো আপনাকে গ্রিডের কলামগুলোর অবস্থান এবং সজ্জা পরিবর্তন করতে সাহায্য করবে, যাতে ওয়েবসাইটের লেআউট আরও দৃষ্টিনন্দন ও কার্যকরী হয়। নিচে এসব বৈশিষ্ট্য কীভাবে কাজ করে তা বিস্তারিতভাবে আলোচনা করা হলো।
Offset হল একটি বৈশিষ্ট্য যা কলামের শুরুতে শূন্যস্থান (মার্জিন) তৈরি করতে ব্যবহৃত হয়। এটি গ্রিড সিস্টেমে কলামের অবস্থান পরিবর্তন করার জন্য ব্যবহার করা হয়, যাতে কলামগুলো সঠিক জায়গায় শুরু হয় না এবং আরও ফ্লেক্সিবল লেআউট তৈরি করা যায়।
<div class="container">
<div class="row">
<div class="col-4">
কলাম ১
</div>
<div class="col-4 offset-4">
কলাম ২ (অফসেট ৪)
</div>
</div>
</div>
এখানে, দ্বিতীয় কলামের মধ্যে offset-4 ব্যবহার করা হয়েছে, যার মানে হচ্ছে, দ্বিতীয় কলামটি প্রথম কলামের পর ৪টি কলাম শূন্যস্থান নিয়ে শুরু হবে। এর ফলে দ্বিতীয় কলামটি মাঝখানে অবস্থান করবে।
এছাড়া, আপনি সাইজের ভিত্তিতে বিভিন্ন ব্রেকপয়েন্টে offset ব্যবহার করতে পারেন:
<div class="container">
<div class="row">
<div class="col-6 col-md-4 offset-md-4">
কলাম ১ (অফসেট বড় স্ক্রীনে)
</div>
</div>
</div>
এখানে, ছোট স্ক্রীনে কলামটি col-6 হবে এবং বড় স্ক্রীনে এটি col-md-4 offset-md-4 হবে, যেখানে ৪টি কলাম শূন্যস্থান থাকবে।
Order ক্লাসের মাধ্যমে আপনি গ্রিডের কলামগুলোর প্রদর্শনের ক্রম পরিবর্তন করতে পারেন। এর সাহায্যে আপনি একটি কলামের স্থান বদলে দিতে পারেন, যা আপনাকে লেআউট কাস্টমাইজেশনে সাহায্য করে।
<div class="container">
<div class="row">
<div class="col-4 order-3">
কলাম ১ (অর্ডার ৩)
</div>
<div class="col-4 order-1">
কলাম ২ (অর্ডার ১)
</div>
<div class="col-4 order-2">
কলাম ৩ (অর্ডার ২)
</div>
</div>
</div>
এখানে, আমরা order-1, order-2, এবং order-3 ক্লাস ব্যবহার করে কলামগুলোর প্রদর্শনের ক্রম পরিবর্তন করেছি। সাধারণভাবে যেভাবে কলামগুলো প্রদর্শিত হতো, আমরা সেটি বদলে দিয়ে একটি নতুন ক্রম তৈরি করেছি।
Order ক্লাসের মানে হলো আপনি কোনো নির্দিষ্ট কলামকে অন্যান্য কলামের আগে বা পরে স্থাপন করতে পারেন। এটি বিশেষত Mobile-first Design এ খুবই সহায়ক, যেখানে মোবাইল স্ক্রীনে কোনো উপাদান প্রথমে দেখা প্রয়োজন হতে পারে, তবে ডেস্কটপে আলাদা ক্রমে।
Nested Grid ব্যবহার করে আপনি একটি গ্রিডের মধ্যে আরেকটি গ্রিড তৈরি করতে পারেন। এটি একটি খুবই শক্তিশালী ফিচার, যেটির মাধ্যমে আপনি আরও জটিল এবং কাস্টমাইজড লেআউট তৈরি করতে পারবেন। Nested Grid সিস্টেমে, আপনি অভ্যন্তরীণ গ্রিডকে প্রধান গ্রিডের কলামের মধ্যে রাখতে পারবেন।
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="row">
<div class="col-6">
নেস্টেড কলাম ১
</div>
<div class="col-6">
নেস্টেড কলাম ২
</div>
</div>
</div>
<div class="col-12 col-md-6">
কলাম ২
</div>
</div>
</div>
এখানে, প্রথম কলামের মধ্যে row এবং col-6 ব্যবহার করে একটি নেস্টেড গ্রিড তৈরি করা হয়েছে। এটি মূলত প্রধান গ্রিডের ভিতরে আরেকটি সাব-গ্রিড তৈরি করে, যেখানে দুটি ছোট কলাম রয়েছে।
col- ক্লাস থাকতে হবে।বুটস্ট্রাপ ৫ এর Offset, Order, এবং Nested Grid ফিচারগুলো ওয়েব লেআউট ডিজাইনকে আরও নমনীয় এবং কাস্টমাইজযোগ্য করে তোলে। Offset ব্যবহারের মাধ্যমে কলামগুলির মধ্যে শূন্যস্থান তৈরি করা যায়, Order ব্যবহারের মাধ্যমে কলামগুলোর প্রদর্শনের ক্রম পরিবর্তন করা সম্ভব হয়, এবং Nested Grid ব্যবহারের মাধ্যমে আপনি আরও জটিল লেআউট ডিজাইন করতে পারেন। এই বৈশিষ্ট্যগুলো ব্যবহার করে আপনার ওয়েব পেজের লেআউট আরও উন্নত এবং ফ্লেক্সিবল করা সম্ভব।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
