బుట్స్ట్రాప్ 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>ప్రపంచ ప్రకృతి ఫండ్ (WWF), 1961 ఏప్రిల్ 29న స్థాపించబడినది, దాని ప్రతీకం ఒక పరిచయం ఉంది ...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980లో, WWF ఆధికారికంగా చైనాకు వచ్చి, చైనా ప్రభుత్వం ఆహ్వానం పెట్టినప్పుడు, పరిచయం చేస్తుంది ...</p>
    </div>
  </div>
</div>

స్వయంగా ప్రయత్నించండి

శ్రద్ధ చూపండి:మొత్తం 12 కంటే కన్నా తక్కువగా ఉండాలి (అన్ని 12 అనుకూలించే నియమాలను ఉపయోగించకుండా):

కొరకు 33.3% / 66.6% విభజన, మీరు ఉపయోగించాలి .col-4 మరియు .col-8కొరకు 50% / 50% విభజన, మీరు ఉపయోగించాలి .col-6 మరియు .col-6）：

ఉదాహరణ

<!-- 33.3%/66.6% విభజన -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>ప్రపంచ ప్రకృతి ఫండ్ (WWF), 1961 ఏప్రిల్ 29న స్థాపించబడినది, దాని ప్రతీకం ఒక పరిచయం ఉంది ...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980లో, WWF ఆధికారికంగా చైనాకు వచ్చి, చైనా ప్రభుత్వం ఆహ్వానం పెట్టినప్పుడు, పరిచయం చేస్తుంది ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% విభజన -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>ప్రపంచ ప్రకృతి ఫండ్ (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>

స్వయంగా ప్రయత్నించండి

చిన్న పరికరాలకు వివిధ విభజన శాతాలను చేర్చడానికి తదుపరి చివరి పరిచయం చేస్తుంది.