ডেভসংকেত

বুটস্ট্রাপ ৫

বুটস্ট্রাপ হলো একটি ফ্রি এবং ওপেন সোর্স সিএসএস ফ্রেমওয়ার্ক যা রেস্পন্সিভ মোবাইল ফাস্ট ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট করতে ব্যবহার করা হয়। যার সর্বশেষ সংস্করণ হলো বুটস্ট্রাপ v5.0.0-beta1, এটি খুবই দ্রুত ওয়েব পেজ ও ওয়েব অ্যাপ্লিকেশন তৈরী করার জন্যে এটা ব্যাপকভাবে ব্যাবহৃত ।

কন্ট্রিবিউটর

  • mdmahinpro
  • iamraufu
  • sh-sabbir
  • siddique000
  • asifadib

শেয়ার করুন

কন্টেইনার ক্লাস

  • রেস্পন্সিভ ফিক্স উইড

    <div class='container'>...</div>
  • ফুল উইড

    <div class='container-fluid'>...</div>

ভার্টিকাল অ্যালাইনমেন্ট

  • সব কলাম উপরে দেখানো

    <div class='row align-items-start'><div class='col'>...</div><div class='col'>...</div></div>
  • সব কলাম মাঝে দেখানো

    <div class='row align-items-center'><div class='col'>...</div><div class='col'>...</div></div>
  • সব কলাম নিচে দেখানো

    <div class='row align-items-end'><div class='col'>...</div><div class='col'>...</div></div>
  • একটি কলাম উপরে দেখানো

    <div class='row'><div class='col align-self-start'>...</div></div>
  • একটি কলাম মাঝে দেখানো

    <div class='row'><div class='col align-self-center'>...</div></div>
  • একটি কলাম নিচে দেখানো

    <div class='row'><div class='col align-self-end'>...</div></div>

ডিসপ্লে হেডিংস

  • ডিসপ্লে ওয়ান

    <h1 class='display-1'>Display 1</h1>
  • ডিসপ্লে টু

    <h2 class='display-2'>Display 2</h2>
  • ডিসপ্লে থ্রি

    <h3 class='display-3'>Display 3</h3>
  • ডিসপ্লে ফোর

    <h4 class='display-4'>Display 4</h4>
  • ডিসপ্লে ফাইভ

    <h5 class='display-5'>Display 5</h5>
  • ডিসপ্লে সিক্স

    <h6 class='display-6'>Display 6</h6>

ইমেজ ক্লাস

  • রাউন্ড কর্নার

    <img class='rounded'>
  • বৃত্ত আকার

    <img class='rounded-circle'>
  • লেফট অ্যালাইন

    <img class='float-start'>
  • রাইট অ্যালাইন

    <img class='float-end'>
  • সেন্টার অ্যালাইন

    <img class='d-block mx-auto'>
  • রিস্পন্সিভ ইমেজ

    <img class='img-fluid'>
  • রাউন্ড কর্নার এবং বর্ডার এক সাথে

    <img class='img-thumbnail'>

এলার্টস

  • প্রাথমিক

    <div class='alert alert-primary' role='alert'>A simple primary alert—check it out!</div>
  • মাধ্যমিক

    <div class='alert alert-secondary' role='alert'>A simple secondary alert—check it out!</div>
  • সাফল্য

    <div class='alert alert-success' role='alert'>A simple success alert—check it out!</div>>
  • বিপদ

    <div class='alert alert-danger' role='alert'>A simple danger alert—check it out!</div>
  • সতর্কতা

    <div class='alert alert-warning' role='alert'>A simple warning alert—check it out!</div>
  • তথ্য

    <div class='alert alert-info' role='alert'>A simple info alert—check it out!</div>
  • সামান্য

    <div class='alert alert-light' role='alert'>A simple light alert—check it out!</div>
  • অন্ধকার

    <div class='alert alert-dark' role='alert'>A simple dark alert—check it out!</div>
  • সংযুক্ত

    <div class='alert alert-link' role='alert'>A simple link alert—check it out!</div>
  • খারিজযোগ্য

    <div class='alert alert-dismissible' role='alert'>A simple dismissible alert—check it out!</div>

গ্রিড ক্লাস

  • স্ক্রীন প্রস্থ যখন ৫৭৬পিক্সেল এর ছোট

    <div class='col-'>...</div>
  • স্ক্রীন প্রস্থ যখন ৫৭৬পিক্সেল এর সমান বা বড়

    <div class='col-sm'>...</div>
  • স্ক্রীন প্রস্থ যখন ৭৬৮পিক্সেল এর সমান বা বড়

    <div class='col-md'>...</div>
  • স্ক্রীন প্রস্থ যখন ৯৯২পিক্সেল এর সমান বা বড়

    <div class='col-lg'>...</div>
  • স্ক্রীন প্রস্থ যখন ১২০০পিক্সেল এর সমান বা বড়

    <div class='col-xl'>...</div>
  • স্ক্রীন প্রস্থ যখন ১৪০০পিক্সেল এর সমান বা বড়

    <div class='col-xxl'>...</div>

হরিজেন্টাল অ্যালাইনমেন্ট

  • সব কলাম বামে দেখানো

    <div class='row justify-content-start'><div class='col'>...</div><div class='col'>...</div></div>
  • সব কলাম মাঝে দেখানো

    <div class='row justify-content-center'><div class='col'>...</div><div class='col'>...</div></div>
  • সব কলাম ডানে দেখানো

    <div class='row justify-content-end'><div class='col'>...</div><div class='col'>...</div></div>
  • সব কলাম ডানে বামে সমান গ্যাপে দেখানো

    <div class='row justify-content-around'><div class='col'>...</div></div>
  • সব কলাম এর মাঝে সমান গ্যাপে দেখানো

    <div class='row justify-content-between'><div class='col'>...</div></div>
  • সব কলাম সমান গ্যাপে দেখানো

    <div class='row justify-content-evenly'><div class='col'>...</div></div>

হেডিংস

  • হেডিং ওয়ান

    <p class='h1'>h1. Bootstrap heading</p>
  • হেডিং টু

    <p class='h1'>h1. Bootstrap heading</p>
  • হেডিং থ্রি

    <p class='h1'>h1. Bootstrap heading</p>
  • হেডিং ফোর

    <p class='h1'>h1. Bootstrap heading</p>
  • হেডিং ফাইভ

    <p class='h1'>h1. Bootstrap heading</p>
  • হেডিং সিক্স

    <p class='h1'>h1. Bootstrap heading</p>

টেবিল

  • টেবিল রো প্রাইমারি কালার

    <tr class='table-primary'>
  • টেবিল রো সেকেন্ডারি কালার

    <tr class='table-secondary'>
  • টেবিল রো সাক্সেস কালার

    <tr class='table-success'>
  • টেবিল রো ডেঞ্জার কালার

    <tr class='table-danger'>
  • টেবিল রো ওয়ার্নিং কালার

    <tr class='table-warning'>
  • টেবিল রো ইনফো কালার

    <tr class='table-info'>
  • টেবিল রো লাইট কালার

    <tr class='table-light'>
  • টেবিল রো ডার্ক কালার

    <tr class='table-dark'>
  • টেবিল স্ট্রাইপ দেখানো

    <table class='table table-striped'>
  • টেবিল হোভার দেখানো

    <table class='table table-hover'>
  • টেবিল রো তে একটিভ স্টাইল দেখানো

    <tr class='table-active'>
  • টেবিল সেল এ একটিভ স্টাইল দেখানো

    <td class='table-active'>
  • টেবিলে বর্ডার দেখানো

    <table class='table table-bordered'>
  • টেবিলের বর্ডার বাতিল করা

    <table class='table table-borderless'>
  • টেবিলের সাইজ ছোট করা

    <table class='table table-sm'>
  • টেবিলের ক্যাপশন এড করা

    <table class='table caption-top'><caption>List of users</caption>
  • টেবিলের সাইজ ছোট করা

    <table class='table table-sm'>

ডেভসংকেত সম্পর্কে

ডেভসংকেত এর লক্ষ্য হচ্ছে বাংলাতে একটা বড় চিটশিটের ভান্ডার গড়ে তোলা। এটা সম্পূর্ণ স্বাধীন এবং ওপেন সোর্স গিটহাব অর্গানাইজেশন।

স্পন্সর