بوت اسپرینگ 5 گرڈ: بہت چھوٹی ڈیوائس

ایکس اسمال ڈیوائس گرید مثال

ایکس اسمال چھوٹی درمیانی لارج ایکسرا لارج XXL
کلاس کا پیمانہ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
اسکرین کی چوڑائی <576px >=576px >=768px >=992px >=1200px >=1400px

چونکہ ہم ایک سادہ لائا آؤٹ میں دو ستون لگارہے ہیں، آپ چاہتے ہیں کہ ستونسبھیآلات تقسیم 25% / 75%.

ہم ان کلاس کو دو ستونوں میں شامل کریں گے:

<div class="col-3">....</div>
<div class="col-9">....</div>

یہ مثال سبھی آلات (بہت چھوٹی، چھوٹی، درمیانی، بڑی، بہت بڑی اور بہت بڑی) کا 25% / 75% تقسیم کردیگا。

ਮਾਡਲ

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>World Wide Fund for Nature (WWF), ਜਿਸ ਨੂੰ 1961 ਸਾਲ ਦੇ 29 ਅਪ੍ਰੈਲ ਨੂੰ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸ ਦਾ ਚਿੰਨ੍ਹ ਇੱਕ ਚਿਤਾਂਗ ਹੈ ...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980 ਵਿੱਚ, WWF ਸਰਕਾਰੀ ਤੌਰ 'ਤੇ ਚੀਨ ਆਈ, ਚੀਨ ਸਰਕਾਰ ਦੀ ਬੇਨਤੀ 'ਤੇ ਚਿਤਾਂਗ ਅਤੇ ਉਸ ਦੇ ਸਕਾਇਫ੍ਰੈਂਡ ਦੀ ਸੁਰੱਖਿਆ ਕਾਰਜ ਸ਼ੁਰੂ ਕੀਤਾ ਹੈ ...</p>
    </div>
  </div>
</div>

ਆਪਣੇ ਆਪ ਦੱਸੋ

توجہ:پیرا: دفعہ جی سی

ਕਿਫਾਇਤੀ ਤੌਰ 'ਤੇ 33.3% / 66.6% ਦੇ ਵੰਡ ਲਈ .col-4 ਅਤੇ .col-8ਕਿਫਾਇਤੀ ਤੌਰ 'ਤੇ 50% / 50% ਦੇ ਵੰਡ ਲਈ .col-6 ਅਤੇ .col-6):

ਮਾਡਲ

<!-- 33.3%/66.6% split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>World Wide Fund for Nature (WWF), ਜਿਸ ਨੂੰ 1961 ਸਾਲ ਦੇ 29 ਅਪ੍ਰੈਲ ਨੂੰ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸ ਦਾ ਚਿੰਨ੍ਹ ਇੱਕ ਚਿਤਾਂਗ ਹੈ ...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980 ਵਿੱਚ, WWF ਸਰਕਾਰੀ ਤੌਰ 'ਤੇ ਚੀਨ ਆਈ, ਚੀਨ ਸਰਕਾਰ ਦੀ ਬੇਨਤੀ 'ਤੇ ਚਿਤਾਂਗ ਅਤੇ ਉਸ ਦੇ ਸਕਾਇਫ੍ਰੈਂਡ ਦੀ ਸੁਰੱਖਿਆ ਕਾਰਜ ਸ਼ੁਰੂ ਕੀਤਾ ਹੈ ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>World Wide Fund for Nature (WWF), ਜਿਸ ਨੂੰ 1961 ਸਾਲ ਦੇ 29 ਅਪ੍ਰੈਲ ਨੂੰ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸ ਦਾ ਚਿੰਨ੍ਹ ਇੱਕ ਚਿਤਾਂਗ ਹੈ ...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>1980 ਵਿੱਚ, WWF ਸਰਕਾਰੀ ਤੌਰ 'ਤੇ ਚੀਨ ਆਈ, ਚੀਨ ਸਰਕਾਰ ਦੀ ਬੇਨਤੀ 'ਤੇ ਚਿਤਾਂਗ ਅਤੇ ਉਸ ਦੇ ਸਕਾਇਫ੍ਰੈਂਡ ਦੀ ਸੁਰੱਖਿਆ ਕਾਰਜ ਸ਼ੁਰੂ ਕੀਤਾ ਹੈ ...</p>
    </div>
  </div>
</div>

ਆਪਣੇ ਆਪ ਦੱਸੋ

ਸਵੈਚਾਲਿਤ ਲੇਆਉਟ ਸਤੰਭ

Bootstrap 5 ਵਿੱਚ, ਸਾਰੇ ਉਪਕਰਣਾਂ ਲਈ ਸਰਲ ਤਰੀਕੇ ਨਾਲ ਸਵੈਚਾਲਿਤ ਲੇਆਉਟ ਸਤੰਭ ਬਣਾਉਣ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈਸਮਾਨ ਚੌਦਾਈ ਦੇ ਸਤੰਭਤੋਂ ਹਟਾਓ .col-* ਸ਼ੱਦਾਂ ਹਟਾਓ, ਅਤੇ ਕੇਵਲ col ਐਲੀਮੈਂਟ ਉੱਤੇ ਵਰਤੋਂ ਕਰੋ .col ਵਰਗ। Bootstrap ਕਿੰਨੇ ਸਤੰਭ ਹਨ, ਅਤੇ ਹਰ ਸਤੰਭ ਨੂੰ ਇੱਕ ਜਿਸ ਦੀ ਚੌਦਾਈ ਮਿਲੇਗੀ ਹੈ:

<!-- ਦੋ ਸਤੰਭ: 50% ਚੌਦਾਈ -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<!-- ਚਾਰ ਸਤੰਭ: 25% ਚੌਦਾਈ -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

ਆਪਣੇ ਆਪ ਦੱਸੋ

ਅਗਲੇ ਚਾਪ ਵਿੱਚ ਛੋਟੇ ਉਪਕਰਣਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਵੰਡ ਪ੍ਰਤੀਸ਼ਤਾਵਾਂ ਜੋੜਨ ਦੇ ਤਰੀਕੇ ਵਿਖਾਇਆ ਜਾਵੇਗਾ。