বুটস্ট্র্যাপ জাম্বট্রন এবং পেজ হেডার

জাম্বট্রন তৈরির পদ্ধতি

কোন স্পেশাল কন্টেন্ট বা তথ্যের প্রতি ইউজারের মনোযোগ আকর্ষণের জন্য ওয়েবপেজে বড় স্পেস বা বক্সকে নির্দেশ করাই হচ্ছে জাম্বট্রন।

জাম্বট্রনের ব্যাকগ্রাউন্ড কালার সাধারনত গ্রে হয়ে থাকে এবং এর কর্নারগুলো একটু রাউন্ড আকৃতির হয়।

জাম্বট্রনের ভেতরে যেই টেক্সটগুলো থাকে সেগুলো সেগুলোর ফন্টসাইজও স্বয়ংক্রিয়ভাবে বড় হয়ে থাকে।

টিপসঃ জাম্বট্রনের ভেতরে আপনি ভ্যালিড HTML এর ইলিমেন্ট এবং বুটস্ট্র্যাপের অন্যান্য ইলিমেন্ট ও ক্লাস ব্যবহার করতে পারবেন।

জাম্বট্রন তৈরির জন্য .jumbotron ক্লাসসহ <div> ইলিমেন্ট ব্যবহার করতে হয়।

কন্টেইনারের মধ্যে জাম্বট্রন তৈরির পদ্ধতি

আপনি যদি এরকম চান যেন জাম্বট্রন স্ক্রিনের একটি নির্দিষ্ট সীমার বাইরে বিস্তৃত না হয়, তাহলে জাম্বট্রনকে আপনার নির্দিষ্ট করা <div class="container"> এর ভেতরে সেট করতে হবেঃ

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

ফলাফল : কন্টেইনারের মধ্যে জাম্বট্রন তৈরি

কন্টেইনারের বাহিরে জাম্বট্রন তৈরির পদ্ধতি

জাম্বট্রনকে ডিফল্টভাবে স্ক্রিনে শো করাতে চাইলে <div class="container"> এর বাইরে জাম্বট্রনকে সেট করতে হবেঃ

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for 
  developing responsive,
  mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

ফলাফল : কন্টেইনারের বাহিরে জাম্বট্রন তৈরি

পেজের হেডার তৈরির পদ্ধতি

পেজ হেডার অনেকটা সেকশন ডিভাইডারের মতো .page-header ক্লাস হেডিং লাইনের নিচে একটি লম্বা দাগের মতো অনুভূমিক লাইন তৈরি করে একইসাথে কিছু ইলিমেন্টের চারদিকে কিছুটা স্পেস দখল করে।

পেজ হেডারের উদাহরণঃ

পেজ হেডার তৈরির জন্য <div> ইলিমেন্টের ক্লাস .page-header হতে হবেঃ

<div class="page-header">
  <h1>Example Page Header</h1>
</div>

ফলাফল : পেজ হেডার