After completing the 30-chapters module, jump in the Projects Section.

• কোর্সটি কাদের জন্য?
• Prerequisite
• কোর্সটি যেভাবে সাজানো হয়েছে

• এই কোর্সটিতে যেকেউ অংশগ্রহণ করতে পারবে। শিখার জন্য মনের ইচ্ছাটাই আসল!
• Course টি মূলত Beginner-friendly. যারা Web Programming এ নতুন তাদেরকে উদ্দেশ্য করেই Course টি সাজানো।

• HTML ও CSS

• এই পুরো Article কে একটা বই মনে করতে পারো। কোর্সটি 30 টি Chapter এ ভাগ করা হয়েছে। প্রতিটি Chapter এ Bootstrap এর বিভিন্ন Topics নিয়ে আলোচনা করা হয়েছে।
• প্রতিটা Chapter এর Module সাজানো হয়েছে ক্রমানুসারে । উদাহরণস্বরূপ, Chapter-05 এর টপিকসগুলো শিখতে হলে অবশ্যই তোমাকে Chapter-04 শেষ করে আসতে হবে। একইভাবে Chapter-04 শিখতে হলে তোমাকে Chapter-03 শেষ করে আসতে হবে ।
• প্রতিটা Chapter এর Topics এর Written Explanation/Article এর সাথে সাথে Video Explanation-ও দেয়া আছে। যাতে শিক্ষার্থীরা খুব সহজেই টপিকসগুলো আত্মস্থ করতে পারে।

Course Design

Bootstrap এর পুরো Course টিকে ৬ টি ভাগে ভাগ করা হয়েছে। নিচে Course Design টা Table আঁকারে দেয়া হলো।

• What is Bootstrap?
• Why Use Bootstrap?
• Installation Method
  • Way-01: CDN
  • Way-02: Downloading Compiled CSS and JS
  • Way-03: Install via Package Manager
• Breakpoints
• Bootstrap Containers
• Bootstrap Grid

Bootstrap হলো একটি front-end framework যার মাধ্যমে খুব সহজে Mobile-first এবং Responsive web design করা যায়।

• Mobile-first approach: অর্থাৎ Design করার ক্ষেত্রে এই Framework মোবাইল এর কথা আগে চিন্তা করে।
• Responsive Design: Responsive Web Design করার জন্য Bootstrap খুবই কার্যকরী, বলা যেতে পারে Bootstrap এর প্রধান Feature-ই হলো Responsive Design করা।
• Time Saving: মাথায় কোন Prototype বা Design idea আছে? Bootstrap দিয়ে খুব সহজেই Prototype থেকে Design করে ফেলা যায়, যা Developers দের অনেক সময় বাঁচিয়ে দেয়।

Bootstrap আমরা কয়েকভাবে ব্যবহার করতে পারি। নিচে Bootstrap ব্যবহার করার কয়েকটি উপায় আলোচনা করা হলোঃ

• নিচের লিংক দুটি কপি করুন এবং আপনার Project এ Paste করুন।

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

• Bootstrap এর compiled CSS and JS files ডাউনলোড করে আপনার project এ include করুন।
• এখানে ক্লিক করে Download করুন।

• Using Node Package Manager: npm install [email protected]
• Using RubyGems Package Manager: gem install bootstrap -v 5.3.2

Note: Update version install করতে Bootstrap এর Official Documentation Visit করতে পারেন। https://getbootstrap.com/

• Breakpoints হলো Customizable Widths যেটা আপনার Responsive Layout বিভিন্ন Devices এ কেমন Behave করবে সেটা নির্ধারণ করে। এজন্য Breakpoints কে responsive design এর building blocks বলা হয়।

Bootstrap Breakpoints

• Container এর কাজ হলো Elements কে Contain করা। কোন Elements কে Contain করা, Padding দেয়া এবং Alignment করার জন্য আমরা Container ব্যবহার করতে পারি।

• Bootstrap এ 3 ধরনের Container আছেঃ

  1. .container, যা প্রতেক Breakpoints এ max-width set করে।
  2. .container-{breakpoints}, এর অর্থ ঐ Breakpoint না পাওয়া পর্যন্ত width: 100%
  3. .container-fluid, এর অর্থ width: 100% সব Breakpoint এ।

• CSS Flexbox দিয়ে তৈরি। 12 Column-based Layout System.
• যেকোনো Shape এর Layout তৈরি করা যায়।
• Bootstrap Grid System তার Contents বা Elements সমূহকে Layout এবং Align করার জন্য Bootstrap Container, Rows and Columns ব্যবহার করে।

• যদি Column এর Width (যেমনঃ col-6) না দেয়া হয়, তাহলে Bootstrap সেগুলোকে সমান আকারে ভাগ করে দেয়।

• আর যদি একটা Column এর Width দেয়া হয় যেমন col-6 এবং বাকিগুলো না দেয়া হয়, তাহলে বাকিগুলোর জন্য যে জায়গা বাকি থাকে তা সমান ভাগে ভাগ করে নেয়।

Code:

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Code:

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

• col-{breakpoint}-auto এটা দেয়া হলে ঐ Breakpoint এ Content কে জায়গা দিতে যতটুকু Width দরকার, তততুকু Width নিবে।

Code:

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

• ধরলাম আমরা যদি দুইটা কলাম .col-md-8 এবং .col-md-4 দেই, তাহলে তারা md breakpoint এর আগে Stacked (একটার উপর আরেকটা) থাকবে। যখনি md breakpoint এ পৌঁছবে তখনই তারা Horizontal (একটার পাশে আরেকটা ) হয়ে যাবে।

Code:

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Note: এই বিষয়গুলো বুঝার জন্য Screen ছোট বড় করে দেখুন

• নিচে আরও একটি উদাহরন দেয়া হলোঃ

Code:

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

• Bootstrap Columns
• Vertical Alignment
• Horizontal Alignment
• Column Breaks
• Reordering
• Offsetting Columns

• Bootstrap Column-ও Grid এর মতো Flexbox ব্যবহার করে তৈরি করা হয়েছে।
• Alignment এবং Ordering করার জন্য আমরা Column ব্যবহার করতে পারি।
• Non-grid Element এ .col class ব্যবহার করে কিভাবে Width নিয়ে কাজ করা যায়, সেটাও আমরা দেখবো।

• align-items-* class ব্যবহার করে Vertically Align করা যায়। এই ক্লাস row তে ব্যবহার করতে হয়।

<div class="container text-center">
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

• আমরা চাইলে .align-self-* ব্যবহার করে প্রত্যেক Column ধরে ধরে তার Alignment Change করতে পারি। সেক্ষেত্রে যে Column এ Chaange করতে চাই সেই Column তে ক্লাস দিতে হবে।

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

• justify-content-* class ব্যবহার করে Horizontally Align করা যায়। এই ক্লাস row তে ব্যবহার করতে হয়।

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

• আমরা যদি Column এর মধ্যে ব্রেক দিতে চাই, তাহলে ছোট্ট একটা ট্রিক খাঁটাতে হবে, আর সেটা হলো <div class="w-100"></div> ব্যবহার করতে হবে।
• এছাড়া আমরা চাইলে নির্দিষ্ট breakpoint এও Column break করতে পারি। যেমনঃ <div class="w-100 d-none d-md-block"></div>

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

• আবার চাইলে একটা Specific Breakpoint এও break করা যায়। যেমনঃ

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

• .order- class ব্যবহার করে আমরা Column এর Visual Order বদলাতে পারি। order-1 থেকে order-5 পর্যন্ত আছে। এছাড়া order-first এবং order-last ক্লাসও আছে। এগুলো responsive class অর্থাৎ এই ক্লাসগুলোর সাথে আমরা breakpointsও দিতে পারি, যেমনঃ order-md-2

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

• আপনি দুটি উপায়ে গ্রিড কলাম অফসেট বা Left Margin করতে পারেন: Bootstrap এর responsive .offset গ্রিড ক্লাস এবং মার্জিন ইউটিলিটি।

• Bootstrap Gutter এর মাধ্যমে আমরা Columns এ Horizontally এবং Vertically Padding দিতে পারি। gx-* দিয়ে Horizontally এবং gy-* দিয়ে Vertically Padding দিতে পারি।

• What is Reboot Concept in Bootstrap?
  • By Default কি কি Reboot করা হলো?
  • Heading এ যা Reboot করা হলো
  • Paragraph এ যা Reboot করা হলো
  • Link এ যা Reboot করা হলো
• Bootstrap Typography

• Bootstrap অনেক HTML Elements এর By default আচরণকে কিছুটা নিজেদের মত করে পরিবর্তন করে দিয়েছে। এই Concept টাকেই Reboot বলা হচ্ছে।
• শুধু HTML ফাইলে Element টা ব্যবহার করলেই আমরা সেই পরিবর্তনগুলো দেখতে পাবো, এরজন্য অতিরিক্ত কোন Class ব্যবহার করতে হবে না। তবে আমরা চাইলে Bootstrap এর Class ব্যবহার করে নিজেদের মত Style করতেই পারি!

যেমন, সব Heading Elements (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) থেকে margin-top removed করে দেয়া হয়েছে।

• box-sizing: border-box এইটা প্রত্যেকটা element এবং তাদের *::before এবং *::after এ সেট করে দেয়া হয়েছে।
• <html> element এ কোন base font-size দেয়া হয়নি। base font size সাধারণত 16px থাকে (browser default).
• Body তে font-size: 1rem সেট করা থাকে। অর্থাৎ যদি html element এ base font-size যদি 16px হয়, তাহলে body তেও সেই 16px থেকে যায়।
• Body তে globally একটা font-family, font-weight, line-height, background-color (#fff) এবং color সেট করা হয়।
• সবচেয়ে মজার যে বিষয় তা হলো Bootstrap ভিন্ন ভিন্ন Devices এবং OS এ ভিন্ন ভিন্ন font-family set করে। যেমন, macOS এবং iOS এর ক্ষেত্রে -apple-system, windows এর ক্ষেত্রে Segoe UI, Android এর ক্ষেত্রে Roboto, Linux এর ক্ষেত্রে Noto Sans ব্যবহার করা হয়, এর সাথে সাথে কিছু fallback font-ও ব্যবহার করা হয়। তারমানে বুঝা গেলো একজন Developer Code শুরু করার আগেই Bootstrap smartly তারহয়ে অনেক কিছু Reset করে দেয়!

• margin-top removed.
• margin-bottom: 0.5rem সেট করা হয়েছে।

• margin-top removed.
• margin-bottom: 1rem সেট করা হয়েছে।

• link এ Underline সহ একটা color থাকে।
• link visited হলে এর color পরিবর্তন হবে না।

• opacity: 0.25 সেট করা থাকে।
• border-color এর কালার color এর মাধ্যমে Inherit করে। অর্থাৎ <hr> এর Parent এর text color যদি green হয়, তাহলে <hr> এর border color-ও green হবে।

• margin-top removed.
• margin-bottom: 1rem সেট করা হয়েছে।
• Nested lists এর কোন margin-bottom নেই।

• <fieldset> থেকে border, margin এবং padding removed করা হয়েছে।
• <label> কে display: inline-block করা হয়েছে যাতে margin ব্যবহার করা যায়।
• <input>, <select>, <textarea> এবং <button> একটা Basic Style দেয়া হয়েছে।
• Button Element এ cursor: pointer সেট করে দেয়া হয়েছে।

• Bootstrap Typography সেকশনে আমরা Font, Font Size, Line Height, Heading, Display ইত্যাদি বিষয় নিয়ে আলোচনা করবো।

• HTML এ h1 থেকে h6 পর্যন্ত সবগুলো heading elements available. এছাড়া কোন element যদি heading element নাও হয়, তবুও আমরা heading element এর size দিতে পারি .h1, .h2, .h3, .h4, .h5, .h6 এই ক্লাসগুলো ব্যবহার করে। যেমন, আমারা যদি একটি p element এ h1 এর ক্লাস ব্যবহার করি তাহলে p element এর font size, h1 element এর মতো size হয়ে যাবে। যেমনঃ

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

• Traditional Heading এর চেয়েও যদি বড় Font Size দরকার হয় সেক্ষেত্রে আমরা Display Heading ব্যবহার করতে পারি। যেমনঃ

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Output:

• কোন Quote এর সাথে যদি আমরা Source-ও লিখতে চাই তাহলে প্রথমে <figure> element এর মধ্যে <blockquote> ও <figcaption> দিতে হবে। নিচে উদাহরন দেয়া হলোঃ

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Output:

• কোন ইমেজে .img-fluid এই ক্লাস দিলে ঐ ইমেজটিতে max-width: 100%; and height: auto; Apply হয়ে যায়।
• .img-thumbnail class ব্যবহার করলে ইমেজের border 1px rounded হয়ে যায়।

Images কে 3 ভাবে Align করা যায়ঃ

• Using .float-start and .float-end

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

• Using .text-start, .text-end and .text-center

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

• Image একটা Inline-element, তাই Image কে প্রথমে block element বানিয়ে অতঃপর mx-auto করলে Center এ চলে যাবে।

<img src="..." class="rounded mx-auto d-block" alt="...">

• .table class ব্যবহার করলেই Bootstrap নিজের মতো সুন্দর একটা Layout দিবে।

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Output:

• Bootstrap দিয়ে আমরা Row, Column এবং পুরো Table কে কালার দিতে পারি।

<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Output:

• বিভিন্ন ক্লাস ও তাদের কাজ

Table Group Divider Example:

• <caption> element add করে আমরা Table এর Caption দিতে পারি। নিচে উদাহরন দেয়া হলোঃ

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Output:

• Caption যদি উপরে দিতে চান, তাহলে আমরা <table> element এ caption-top ক্লাস ব্যবহার করতে হবে। যেমনঃ

<table class="table caption-top">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Output: []

• .table-responsive class ব্যবহার করে আমরা Responsive Table তৈরি করতে পারি। ফলে Table এর Space না থাকলে Scrollbar অ্যাড হয়ে যাবে। যেমনঃ

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

• .figure class <figure> element এ, .figure-img <img> element এ এবং .figure-caption element <figcaption> elment এ দিয়ে আমরা কোন Image এর সাথে Caption অ্যাড করতে পারি। ফলে Bootstrap নিজের মতো কিছু Style দিয়ে দেয়। যেমনঃ

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Output:

• Form Control
• Select
• Checks and Radios
• Range
• Input Group
• Floating Labels
• Layout
• Validation
• Assignments

• Accordion
• Alerts
• Badges
• Breadcrumbs
• Button
• Button Group
• Assignments for Chapter 5
  • Assignment 1
  • Assignment 2
  • Assignment 3
  • Assignment 4

• Bootstrap দিয়ে Accordion তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

• Bootstrap দিয়ে Alerts তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

• Bootstrap দিয়ে Breadcrumb তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

• Bootstrap দিয়ে Button তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

• Bootstrap দিয়ে Button Group তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

• Bootstrap Card
• Bootstrap Carousel
• Bootstrap Close Button
• Bootstrap Collapse
• Bootstrap List Group
• Bootstrap Navbar and Dropdowns
• Bootstrap Navs and Tabs
• Assignments

• Bootstrap দিয়ে Card তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

Bootstrap দিয়ে Carousel তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

Bootstrap দিয়ে Close Button তৈরি করতে btn-close Class টি ব্যবহার করতে হয়।

• Bootstrap দিয়ে Collapse তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

• Bootstrap দিয়ে List Group তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

• Actionable List Group with Hover তৈরি করার জন্য <li> element এর পরিবর্তে <a> অথবা <button> element ব্যবহার করা হয়। Hover Effect এর জন্য প্রতিটা item এ list-group-item-action এই ক্লাস Add করতে হয়।

• Bootstrap দিয়ে Navbar তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

• Bootstrap এ .nav component টা Flexbox দিয়ে তৈরি। তাই এই element এ flexbox এর ক্লাস যেমন justify-content-center এগুলা কাজ করবে।
• Bootstrap দিয়ে Navs with Tabs তৈরি করতে যে যে Classes এবং Attributes লাগে তা নিচে দেয়া হলোঃ

Assignment 1: Bootstrap Card Layout Create a webpage that displays a grid of Bootstrap cards. Each card should include:

• An image at the top.
• Card title and a brief description.
• A button that links to a related page.
• Apply different styles (e.g., colors, borders) to at least two of the cards.
• Ensure the cards are responsive and stack vertically on smaller screens.

Assignment 2: Bootstrap Carousel Build a simple image carousel using Bootstrap. Requirements:

• Include at least 3 images in the carousel.
• Add navigation arrows to navigate between images.
• Implement automatic sliding with a delay of 3 seconds between slides.
• Display indicators (dots) at the bottom to show the current slide.
• Make sure the carousel is responsive and adjusts to various screen sizes.

Assignment 3: Bootstrap Collapse Create an FAQ (Frequently Asked Questions) page using Bootstrap's collapse component. Requirements:

• List a set of common questions and answers.
• Implement a collapsible accordion-style layout for the questions.
• Ensure that only one answer is visible at a time (when one question is expanded, others should collapse).
• Customize the design of the accordion to make it visually appealing.

Assignment 4: Bootstrap Navbar Design a responsive navigation bar for a restaurant website. Requirements:

• Include a logo or restaurant name on the left side.
• Create a dropdown menu for different sections (e.g., Menu, About Us, Contact).
• Add a search bar on the right side.
• Ensure that the navigation bar collapses into a mobile-friendly menu when the screen size is reduced.

Assignment 5: Bootstrap Tabs Build a product details page with tabs for description, specifications, and reviews. Requirements:

• Use Bootstrap tabs to switch between the different sections.
• Populate each tab with relevant content (dummy text is acceptable).
• Add an active tab indicator.
• Customize the appearance of the tabs to match the overall design.

Assignment 6: Bootstrap List Group and Close Button Develop a to-do list application using Bootstrap's list group and close button components. Requirements:

• Create a list of tasks with close buttons for each task.
• When the close button is clicked, the task should be removed from the list.
• Allow users to add new tasks using an input field and a "Add Task" button.

Assignment 7: Bootstrap Dropdowns Design a navigation menu for a blog website using Bootstrap dropdowns. Requirements:

• Include dropdown menus for categories, tags, and sorting options.
• Populate the dropdowns with sample categories, tags, and sorting choices.
• Ensure that the dropdowns display properly and open/close on user interaction.

Assignment 8: Bootstrap Navs Build a multi-page website with a navigation menu using Bootstrap navs. Requirements:

• Create a navigation menu that links to at least three different pages.
• Implement a navigation bar that highlights the active page.
• Customize the appearance of the navigation menu to match the website's theme.

• Bootstrap এর Offcanvas, by default hidden থাকে। কোন একটা Button ক্লিক করলে এটা দেখা যাবে, আমরা চাইলে সেটা করতে পারি। Button টি অবশ্যই Offcanvas এর বাইরে তৈরি করতে হবে। কারন আমরা একটু আগেই বলেছি, Offcanvas hidden থাকে, তাই এর ভিতরে যা কিছুই দিবো না কেন, কোন কিছুই দেখা যাবে না।
• Offcanvas তৈরি করতে প্রয়োজনীয় ক্লাস

• প্রয়োজনীয় কিছু ক্লাস

• Website এর Content Loading এর পূর্বমুহূর্তে Placeholder display করার প্রয়োজন হয়। Placeholder ছাড়া Website অসম্পূর্ণ মনে হয়।
• Server থেকে Data না আসা পর্যন্ত আমরা এরকম Placeholder দিয়ে রাখতে পারি, সেক্ষেত্রে দেখতে যেমন সুন্দর হয়, তেমনি User-friendly হয়।
• প্রয়োজনীয় কিছু ক্লাস

Click the following image to view Project

Open in CodePen

Coming Soon...

Source Codes