বুটস্ট্র্যাপ কার্ড কম্পোনেন্ট

বুটস্ট্র্যাপ কার্ড

বুটস্ট্র্যাপ কার্ড এর সবচেয়ে জনপ্রিয় উপাদানগুলির মধ্যে একটি, এবং ভাল কারণ সহ। এগুলি একটি খুব নমনীয় মিডিয়া ধারক হিসাবে কাজ করে এবং কিছু সুন্দর প্রিসেট স্টাইলিং এবং ফর্ম্যাটিং রয়েছে৷

কার্ডের বিষয়বস্তু টেক্সট, ছবি, লিঙ্ক, বোতাম, তালিকা থেকে যেকোনো কিছু হতে পারে এবং এতে হেডার এবং ফুটারও থাকতে পারে।

বুটস্ট্র্যাপ কার্ড বেসিক

বুটস্ট্র্যাপ কার্ডগুলি ফ্লেক্সবক্স দিয়ে তৈরি করা হয় এবং ডিফল্টরূপে তাদের ধারণকারী উপাদানের প্রস্থ পর্যন্ত প্রসারিত হয়। যদি আমরা একটি ভিন্ন প্রস্থ নির্দিষ্ট করতে চাই, আমরা হয় কার্ডের উপাদানে বুটস্ট্র্যাপের প্রস্থের ইউটিলিটি ক্লাস ব্যবহার করতে পারি, অথবা আমরা কার্ডটিকে একটি ধারণকারী উপাদানে মোড়ানো করতে পারি এবং বুটস্ট্র্যাপের কলাম ক্লাসের সাথে এটিকে আকার দিতে পারি।

আসুন কয়েকটি উদাহরণ দেখি:

<div class="container-fluid bg-light">
      <div class="card p-4 m-4">card 1</div>
      <div class="card p-4 m-4">card 2</div>
      <div class="card p-4 m-4">card 3</div>
 
      <div class="card-group m-4">
        <div class="card p-4">card 4</div>
        <div class="card p-4">card 5</div>
        <div class="card p-4">card 6</div>
      </div>
 
      <div class="card-deck m-4">
        <div class="card p-4 m-4">card 7</div>
        <div class="card p-4 m-4">card 8</div>
        <div class="card p-4 m-4">card 9</div>
      </div>
    </div>

বুটস্ট্র্যাপের নিয়মটি হল এর ভিতরে থাকা সমস্ত কিছুকে একটি কনটেইনার এলিমেন্টে মোড়ানো, যা এর ভিতরের সমস্ত কিছুকে প্রতিক্রিয়াশীল করে তোলে।

এর মানে হল যে এটি বর্তমান স্ক্রীনের আকার অনুযায়ী আকার এবং বিন্যাস পরিবর্তন করবে।

আমাদের উদাহরণে, আমরা কনটেইনার-ফ্লুইড ব্যবহার করেছি, যা উপাদানটিকে পূর্ণ-প্রস্থ করে তোলে, শুধুমাত্র কনটেইনারের বিপরীতে, যা অনুভূমিক মার্জিন যোগ করে এবং এটিকে পৃষ্ঠায় কেন্দ্র করে।

এর পরে, আমাদের তিনটি কার্ডের প্রথম সেট রয়েছে। তাদের কন্টেইনার ব্যতীত অন্য কোনও মূল উপাদান নেই তাই তাদের ডিফল্ট কার্ড আচরণ রয়েছে এবং আমরা স্ক্রিনশটে যেভাবে দেখি সেভাবে উপরে থেকে নীচে সাজানো হয়েছে:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

কোড স্নিপেটে আপনি যে p-4 এবং m-4 দেখছেন তা যথাক্রমে 1.5 rem-এর সব দিকে একটি প্যাডিং এবং 1.5 rem-এর সব দিকে একটি মার্জিন উপস্থাপন করে৷

বুটস্ট্র্যাপ সাইজিং ইউটিলিটি মান:

0 =0 রেম;

1 =0.25 রেম;

2 =0.5 রেম;

3 =1 রেম;

4 =1.5 রেম;

5 =3 রেম;

তারপর আমাদের কাছে 4, 5, এবং 6 কার্ড আছে, যেগুলো CARD-GROUP ক্লাসের সাথে

এ মোড়ানো। তারা ঠিক BTN-GROUP শ্রেণীর মতো আচরণ করে। তারা একটি অনুভূমিক ফ্লেক্সবক্স লেআউটে একসাথে যুক্ত হয় এবং পুরো গ্রুপে একটি বৃত্তাকার সীমানা যোগ করা হয়।

সবশেষে, কার্ড 7, 8, এবং 9 কার্ড-ডেক ক্লাসের সাথে একটি

এ মোড়ানো হয়, যা তাদের একটি অনুভূমিক ফ্লেক্সবক্সে যুক্ত করে, কিন্তু সেগুলিকে দৃশ্যত আলাদা উপাদান হিসাবে ছেড়ে দেয়।

ম্যানুয়ালি সাইজিং কার্ড

আমরা কিছু ম্যানুয়ালি আকারের কার্ড করার আগে, আসুন বুটস্ট্র্যাপের লেআউট এবং ব্রেকপয়েন্ট সিস্টেম সম্পর্কে কিছুটা শিখি।

বুটস্ট্র্যাপ কলাম

সহজ লেআউট বিকাশের জন্য বুটস্ট্র্যাপ পৃষ্ঠাটিকে 12টি কলামে বিভক্ত করে৷

এটিকে কল্পনা করার জন্য এখানে একটি দ্রুত ডেমো রয়েছে:

<div class="row">
        <div class="col border p-5">column 1</div>
        <div class="col border p-5">column 2</div>
        <div class="col border p-5">column 3</div>
        <div class="col border p-5">column 4</div>
        <div class="col border p-5">column 5</div>
        <div class="col border p-5">column 6</div>
        <div class="col border p-5">column 7</div>
        <div class="col border p-5">column 8</div>
        <div class="col border p-5">column 9</div>
        <div class="col border p-5">column 10</div>
        <div class="col border p-5">column 11</div>
        <div class="col border p-5">column 12</div>
      </div>

প্রথমে আমাদের কাছে কলামগুলির জন্য একটি মোড়ক রয়েছে যাকে একটি ROW বলা হয়, যা তাদের জন্য একটি ফ্লেক্সবক্স কন্টেইনার। আমরা দখল করতে কলামের COL-স্ক্রীন সাইজ ব্রেকপয়েন্ট-সংখ্যা লিখে একটি উপাদানের আকার ঘোষণা করি।

আমাদের উপরের উদাহরণে, আমরা ব্রেকপয়েন্ট প্রদান করিনি কারণ আমরা এই সাইজিং চাই স্ক্রিনের আকার যাই হোক না কেন, এবং কলামের সংখ্যা না হোক কারণ এটি ডিফল্ট COL-1 বাদ দিলে আমরা আমাদের স্বাভাবিক 12টি কলাম পাই। এটি দেখতে কেমন তা এখানে:

বুটস্ট্র্যাপ ব্রেকপয়েন্ট:

বুটস্ট্র্যাপ হল একটি মোবাইল-প্রথম ফ্রেমওয়ার্ক, যার অর্থ হল বুটস্ট্র্যাপের সাথে বিকাশ করার সময় আপনি মোবাইল লেআউটগুলিকে অগ্রাধিকার দেন এবং আপনার পথে উপরের দিকে কাজ করেন৷ এর সমস্ত ক্লাস প্রদত্ত ব্রেকপয়েন্ট থেকে এবং উপরের দিকে উপাদানটিকে প্রভাবিত করে।

অতিরিক্ত ছোট হল ডিফল্ট তাই ব্রেক পয়েন্ট সম্পূর্ণভাবে বাদ দেওয়া, যেমন P-4, P-XS-4 লেখার মতই যা এটি XS স্ক্রীন সাইজ এবং সমস্ত বড় আকারে প্রয়োগ করবে।

অন্য কথায়, আপনি যদি এমন একটি নিয়ম চান যা সমস্ত স্ক্রিনে কার্যকর হয় তবে ব্রেকপয়েন্টটি বাদ দিন।

আমরা যদি উদাহরণ থেকে প্যাডিংকে মাঝারি স্ক্রীন সাইজ থেকে 0.5 রেম পর্যন্ত কমাতে চাই, তাহলে আমরা একই উপাদানে P-MD-2 ক্লাস যোগ করব।

ব্রেকপয়েন্ট পিক্সেল মান:

xs – 576 পিক্সেলের নিচে স্ক্রীনের আকার। এটি ডিফল্ট।
sm – 576 পিক্সেল এবং তার উপরে থেকে পর্দার আকার।
md – 768 পিক্সেল এবং তার উপরে থেকে পর্দার আকার।
lg – 992 পিক্সেল এবং তার উপরে থেকে পর্দার আকার।
xl – 1200 পিক্সেল এবং তার উপরে স্ক্রীনের আকার।

এখন স্ক্রিনের আকারের উপর নির্ভর করে আমাদের লেআউট পরিবর্তন করতে এটি ব্যবহার করা যাক:

<div class="row">
        <div class="col-5 col-md-7">
          <div class="card p-4">left column card</div>
          <div class="card p-4">left column card</div>
          <div class="card p-4">left column card</div>
          <div class="card p-4">left column card</div>
        </div>
        <div class="col-7 col-md-5">
          <div class="card p-4">right column card</div>
          <div class="card p-4">right column card</div>
          <div class="card p-4">right column card</div>
          <div class="card p-4">right column card</div>
        </div>
      </div>

আবার, আমাদের ROW র‍্যাপার আছে, এবং তারপরে একটি

COL-5 COL-MD-7-এ সেট করা হয়েছে, যার মানে এটি ছোট স্ক্রীন সাইজ থেকে এবং উপরের দিকে 5টি কলাম দখল করবে, কিন্তু যত তাড়াতাড়ি এটি মাঝারি পর্দার আকারে পৌঁছাবে , এটি 7 কলামে পরিবর্তিত হবে। এর পরে আমাদের কাছে একটি

আছে বিপরীত, COL-7 COL-MD-5, তারা উভয়ই কয়েকটি কার্ডে পূর্ণ। আমি স্ক্রিনশটে স্ক্রীনের আকার ধরলাম যাতে আপনি দেখতে পারেন কিভাবে এটি পরিবর্তন হয়:

767 পিক্সেল প্রস্থ, আমাদের বাম

5 কলাম চওড়া এবং ডান 7।

আমরা 1 পিক্সেল 768 এ যাই এবং তারা বিপরীতে পরিবর্তিত হয়:

কার্ড সাবকম্পোনেন্টস

আসুন এখন কার্ডের সমস্ত সাব-কম্পোনেন্ট ব্যবহার করে তাসের সম্পূর্ণ শক্তি ব্যবহার করি।

হেডার এবং ফুটার সহ কার্ড

<div class="card">
            <div class="card-header text-center p-4">I'm a header</div>
            <div class="card-body">
              <p class="card-text">
                first paragraph
              </p>
              <p class="card-text">
                second paragraph
              </p>
              <a href="#" class="card-link">Link 1</a>
              <a href="#" class="card-link">Link 2</a>
              <a href="#" class="card-link">Link 3</a>
            </div>
            <div class="card-footer">
              Footer of a Bootstrap card
            </div>
          </div>

আমরা একটি কেন্দ্রীভূত কার্ড শিরোনাম সহ একটি কার্ড তৈরি করেছি, যার একটি সীমানা এবং একটি হালকা ধূসর পটভূমি রয়েছে এবং এটির নীচে একটি কার্ড বডি রয়েছে যা এটিকে কিছু প্যাডিং দেয়।

বডিতে, আমাদের কাছে কিছু সারিবদ্ধকরণের জন্য CARD-TEXT সহ কয়েকটি অনুচ্ছেদ এবং CARD-LINK-এর সাথে কয়েকটি লিঙ্ক রয়েছে, তাই সেগুলি নীল রঙের এবং একে অপরের পাশে রাখা হয়েছে৷

শেষে, আমরা একটি কার্ড ফুটার তৈরি করেছি যার শিরোনামটির মতো একই স্টাইলিং রয়েছে, কিন্তু আমরা এবার পাঠ্যটিকে কেন্দ্রে রাখিনি।

ইমেজ ক্যাপ সহ কার্ড

এইবার, আমরা কার্ডে একটি ইমেজ ক্যাপ, কার্ডের বডিতে একটি শিরোনাম এবং সাবটাইটেল এবং তালিকা আইটেম হিসাবে লিঙ্ক সহ একটি তালিকা গ্রুপ যুক্ত করব:

<div class="card">
            <img
              src="https://via.placeholder.com/100"
              alt=""
              class="card-img-top"
            />
            <div class="card-body">
              <h3 class="card-title">card title in the card's body</h3>
              <h4 class="card-subtitle mb-4">card subtitle</h4>
 
              <p>list group with links inside:</p>
              <ul class="list-group">
                <li class="list-group-item">
                  <a href="#" class="card-link">List link 1</a>
                </li>
                <li class="list-group-item">
                  <a href="#" class="card-link">List link 2</a>
                </li>
                <li class="list-group-item">
                  <a href="#" class="card-link">List link 3</a>
                </li>
              </ul>
            </div>
          </div>

আমি চিত্রগুলির জন্য একটি খুব সহজ টুল ব্যবহার করছি যাকে প্লেসহোল্ডার বলা হয়। শেষে নম্বরটি হল ছবির পিক্সেল প্রস্থ x উচ্চতা, কিন্তু কার্ড-আইএমজি-টপ কার্ডের পুরো প্রস্থে ছবিটি প্রসারিত (বা সঙ্কুচিত) করার কারণে এটি এখানে উপেক্ষা করা হয়েছে। শিরোনাম এবং সাবটাইটেল কিছু সুন্দর বিন্যাস পায়, এবং আমরা প্যাডিং এবং মার্জিনের জন্য বুটস্ট্র্যাপের একটি অভিযোজন ইউটিলিটি ব্যবহার করেছি। সাবটাইটেলে আপনি যে MB-4 দেখতে পাচ্ছেন সেটি মার্জিন নিচের অংশকে বোঝায়।

বুটস্ট্র্যাপ প্যাডিং এবং মার্জিন ওরিয়েন্টেশন:

pt/mt – প্যাডিং/মার্জিন টপ
pb/mb – প্যাডিং/মার্জিন নীচে
pl/ml – প্যাডিং/মার্জিন বাকি
pr/mr – প্যাডিং/মার্জিন ডান
py/my – প্যাডিং/মার্জিন y অক্ষ (উপর এবং নীচে)
px/mx – প্যাডিং/মার্জিন x অক্ষ (বাম এবং ডান)

তারপরে আমাদের কাছে একটি তালিকা গ্রুপ রয়েছে যা আবার তালিকাটিকে এনক্যাপসুলেট করে এবং এটি একটি হালকা, বৃত্তাকার সীমানা সহ পৃথক উপাদান। এখানে আমাদের ফলাফল:

নীচের চিত্র ক্যাপ

বুটস্ট্র্যাপে কোনও কার্ড-আইএমজি-বটম নেই, তবে আমরা কার্ডের নীচে একটি ডিভ তৈরি করে এবং এর ভিতরে একটি বুটস্ট্র্যাপ কার্ড কম্পোনেন্ট

<div class="card">
            <div class="card-body">
              <p class="card-text">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
                unde corporis sed nam ad eius, pariatur, consectetur modi
                asperiores dolorem id quaerat eos quod nesciunt repudiandae aut
                temporibus rerum possimus.
              </p>
            </div>
            <img
              src="https://via.placeholder.com/100"
              alt=""
              class="card-img-top"
            />
          </div>

আমি ভাল পরিমাপের জন্য ভাল পুরানো লোরেম ইপসাম যোগ করেছি।

সাইড ইমেজ ক্যাপ

আমরা আমাদের কার্ডের ভিতরে একটি ROW র‍্যাপার যোগ করে এটিকে অনুভূমিকভাবে আউট করতে এবং তারপরে চিত্রের আকার এবং কার্ডের বাকি অংশ নির্ধারণ করতে COL ব্যবহার করে এটিকে অনুভূমিক করতে পারি:

<div class="card">
            <div class="row">
              <img
                src="https://via.placeholder.com/100"
                alt=""
                class="card-img-top col-6"
              />
              <div class="card-body col-6">
                <h3 class="card-title">card title in the card's body</h3>
                <h4 class="card-subtitle mb-4">card subtitle</h4>
 
                <p>list group with links inside:</p>
                <ul class="list-group">
                  <li class="list-group-item">
                    <a href="#" class="card-link">List link 1</a>
                  </li>
                  <li class="list-group-item">
                    <a href="#" class="card-link">List link 2</a>
                  </li>
                  <li class="list-group-item">
                    <a href="#" class="card-link">List link 3</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

আমরা কার্ডের সমস্ত বিষয়বস্তু একটি

-এ মোড়ানো করেছি

এবং কার্ডটিকে 50-50 করতে ইমেজ এবং কার্ডের বডিতে COL-6 যোগ করেছে।

কার্ডের ছবি একটি পটভূমি হিসাবে

আমরা পুরো কার্ডের উপর একটি ইমেজ প্রসারিত করতে পারি এবং এর উপরে পাঠ্য, তালিকা, লিঙ্ক ইত্যাদি রাখতে পারি। আমরা কে CARD-IMG-এর একটি ক্লাস দিয়ে এবং তারপর বাকি সব কিছুকে CARD-IMG-ওভারলে ক্লাসের সাথে

-এ রেখে এটি করি। এর ভিতরে, আমরা উপাদানগুলিকে কনফিগার করি যা আমরা চাই।

<div class="card">
            <img
              src="https://via.placeholder.com/100"
              alt=""
              class="card-img"
            />
            <div class="card-img-overlay">
              <h4 class="card-title">Overlay Title</h4>
              <p class="card-text">
                Image text overlay
              </p>
              <p>second paragraph</p>
              <p>third paragraph</p>
              <p>fourth paragraph</p>
              <div class="btn-group w-100">
                <button class="btn btn-primary">blue</button>
                <button class="btn btn-info">teal</button>
                <button class="btn btn-danger">red</button>
                <button class="btn btn-dark">black</button>
                <button class="btn btn-success">green</button>
              </div>
            </div>
          </div>

এখানে আমরা প্রথমবারের মতো প্রস্থ ইউটিলিটি ব্যবহার করেছি। BTN-GROUP-এ W-100।

বুটস্ট্র্যাপ প্রস্থ এবং উচ্চতা উপযোগিতা:

w/h-25/50/75/100 – প্রস্থ/উচ্চতা 25%/50%/75%/100%

আমাদের ক্ষেত্রে এটি 100% বিয়োগ একই প্যাডিং যা CARD-BODY প্রযোজ্য, যা এখানে CARD-IMG-ওভারলে দ্বারা প্রয়োগ করা হয়েছে৷

কার্ড কলাম

কলামগুলিতে কার্ডগুলি রাখার এই বিকল্পটিও রয়েছে যাতে তারা প্রথমে উপরে থেকে নীচে যায় এবং শুধুমাত্র যখন কলামটি পূর্ণ হয় তখনই তারা একটি নতুন শুরু করে।

<div class="card-columns">
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 1</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 2</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 3</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 4</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
      </div>

আমরা সহজভাবে আমাদের সমস্ত কার্ড একটি

এ মোড়ানো এবং আমরা নিম্নলিখিতগুলি পাই:

স্টাইলিং বুটস্ট্র্যাপ কার্ড

বুটস্ট্র্যাপ কার্ড স্টাইল করার ক্ষেত্রে, আমরা তাদের পটভূমি এবং পাঠ্যের রঙ, সেইসাথে তাদের সীমানার রঙ এবং চেহারা পরিবর্তন করতে পারি।

স্টাইলগুলি পুরো কার্ডে প্রয়োগ করা যেতে পারে, এটি আলাদা উপকূল, বা উভয়ই। চেক আউট করার জন্য এখানে কয়েকটি স্টাইল করা কার্ড রয়েছে:

<div class="card bg-primary">
          <div class="card-header"><h3>Header 1</h3></div>
          <div class="card-body">
            <p>Body 1</p>
          </div>
          <div class="card-footer"><p>Footer 1</p></div>
        </div>
        <div class="card bg-success text-white">
          <div class="card-header"><h3>Header 2</h3></div>
          <div class="card-body">
            <p>Body 2</p>
          </div>
          <div class="card-footer text-danger"><p>Footer 2</p></div>
        </div>
        <div class="card bg-info text-dark border-danger">
          <div class="card-header"><h3>Header 3</h3></div>
          <div class="card-body">
            <p>Body 3</p>
          </div>
          <div class="card-footer"><p>Footer 3</p></div>
        </div>
        <div class="card border-primary bg-dark text-white">
          <div class="card-header border-success"><h3>Header 4</h3></div>
          <div class="card-body text-danger">
            <p>Body 4</p>
          </div>
          <div class="card-footer bg-warning text-info"><p>Footer 4</p></div>
        </div>

প্রথম কার্ডটিতেই একটি নীল ব্যাকগ্রাউন্ড (BG-PRIMARY) রয়েছে, পুরো কার্ডটি স্টাইল করে।

দ্বিতীয় কার্ডের পুরো কার্ডে সবুজ পটভূমি (BG-SUCCESS) এবং সাদা টেক্সট (টেক্সট-সাদা), কিন্তু ফুটারে লাল টেক্সট (টেক্সট-ডেঞ্জার), প্যারেন্ট এলিমেন্টের টেক্সট-সাদা ওভাররাইড করে।

তৃতীয় কার্ডটিতে একটি গাঢ় নীল পটভূমি (BG-INFO), কালো টেক্সট (টেক্সট-ডার্ক) এবং একটি লাল বর্ডার (বর্ডার-ডেঞ্জার) রয়েছে।

অবশেষে, চতুর্থ কার্ডটিতে একটি নীল বর্ডার (BORDER-PRIMARY), একটি কালো পটভূমি (BG-DARK) এবং পুরো কার্ডে সাদা টেক্সট (টেক্সট-সাদা) রয়েছে।

হেডারে একটি সবুজ বর্ডার (BORDER-SUCCESS), বডিতে লাল টেক্সট (টেক্সট-ডেঞ্জার), এবং একটি হলুদ ব্যাকগ্রাউন্ড (BG-WARNING) এবং ফুটারে গাঢ় নীল টেক্সট (টেক্সট-ইনফো)।

আমাদের রংধনু কার্ডগুলি দেখতে কেমন তা এখানে:

রিক্যাপ করতে

বুটস্ট্র্যাপ কার্ডটি অনেকগুলি বিকল্প সহ একটি শক্তিশালী উপাদান। এগুলিকে একটি পৃথক, সমন্বিত সমগ্রের জন্য একটি কার্ড-ডেকে বা একটি একক সত্তায় ফিউজ করার জন্য একটি কার্ড-গ্রুপে গোষ্ঠীভুক্ত করা যেতে পারে। এগুলি একটি সারিতে বা কার্ড-কলামে আলাদা চেহারার জন্য ছড়িয়ে দেওয়া যেতে পারে।

তারা বিভিন্ন লেআউটে ছবি, তালিকা এবং লিঙ্ক হোস্ট করতে পারে।

তাদের নিজস্ব শিরোনাম এবং ফুটারও থাকতে পারে, সমস্তই প্রিসেট শৈলী এবং বিন্যাস সহ, কিন্তু কাস্টমাইজ করার জন্য আমাদের জন্য উন্মুক্ত৷

এগুলি অবিশ্বাস্যভাবে নমনীয়, এবং সম্ভবত আপনি বুটস্ট্র্যাপ দিয়ে, এত অল্প সময়ের মধ্যে, আগের সেটআপের মাধ্যমে কতটা সম্পন্ন করতে পারেন তার সেরা উদাহরণগুলির মধ্যে একটি৷