Bootstrap 5 కార్డ్

కార్డ్

Bootstrap 5 లో కార్డ్లు కాంటెన్స్ చుట్టూ బ్రీడ్‌గు కార్డ్లు, దాని లోపలి విషయం చుట్టూ కొంత అంతరం ఉంటుంది. ఇది హెడర్, ఫూటర్, విషయం, రంగు మొదలైన వివిధ ఎంపికలను కలిగి ఉంటుంది.

బేసిక్ కార్డ్

బేసిక్ కార్డ్ అనేది ఉంది బేసిక్ కార్డ్ అనేది బ్రీడ్‌గు కార్డ్ ఉంటుంది, దాని లోపలి విషయం చుట్టూ కొంత అంతరం ఉంటుంది. ఇది హెడర్, ఫూటర్, విషయం, రంగు మొదలైన వివిధ ఎంపికలను కలిగి ఉంటుంది. .card .card-body క్లాస్ ఉపయోగించడం ద్వారా సృష్టించబడిన కార్డ్లో విషయం ఉంటుంది:

ఉదాహరణ

లింకులకు ఏర్పాటు చేసి నీలి మరియు హోవర్ ప్రభావాలను చేర్చండి.
  <div class="card-body">బేసిక్ కార్డ్</div>
</div>

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

హెడర్ మరియు ఫూటర్

.card-header కార్డ్కు శీర్షికను జోడించడానికి క్లాస్ ఉపయోగించండి:.card-footer కార్డ్కు ఫూటర్ను జోడించడానికి క్లాస్ ఉపయోగించండి:

ఉదాహరణ

లింకులకు ఏర్పాటు చేసి నీలి మరియు హోవర్ ప్రభావాలను చేర్చండి.
  <div class="card-header">హెడర్</div>
  <div class="card-body">విషయం</div>
  <div class="card-footer">ఫూటర్</div>
</div>

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

కాన్టెక్స్ట్ కార్డ్

కార్డ్కు బ్యాక్‌గ్రౌండ్ రంగును జోడించడానికి కాన్టెక్స్ట్ క్లాసులను ఉపయోగించండి:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

ఉదాహరణ

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

శీర్షిక, వచనం మరియు లింకులు

ఉపయోగించండి .card-title కార్డ్ శీర్షికను ఏ శీర్షిక అంశానికి జోడించండి. ఉంటే క్లాస్ ఉపయోగించడం ద్వారా తొలగించండి. అంశం ఉంది .card-body చివరి లేదా ఏక పిల్లి కింది అంశం (లేదా ఏక పిల్లి అంశం) .card-text .card-text క్లాస్ ఉపయోగించడం ద్వారా తొలగించండి. <p>ఎలిమెంట్ ప్రక్కప్పుడు అందించండి. .card-link

ఉదాహరణ

లింకులకు ఏర్పాటు చేసి నీలి మరియు హోవర్ ప్రభావాలను చేర్చండి.
  <div class="card-body">
    <div class="card">
    <h4 class="card-title">కార్డ్ శీర్షిక</h4>
    <p class="card-text">కొన్ని ఉదాహరణ టెక్స్ట్. కొన్ని ఉదాహరణ టెక్స్ట్.</p>
    <a href="#" class="card-link">కార్డ్ లింకు</a>
  </div>
</div>

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

<a href="#" class="card-link">మరొక లింకు</a>

కార్డ్ చిత్రం .card-img-top లేదా .card-img-bottom కార్డ్ కు జోడించండి <img>చిత్రాన్ని కార్డ్ పైకి లేదా క్రిందకు చొందించవచ్చు.

చూపించండి, మేము .card-body బాహ్యంగా చిత్రాన్ని జోడించాము మరియు మొత్తం వెడల్పును క్రిందకు తీసుకున్నాము:

ఉదాహరణ

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="కార్డ్ చిత్రం">
  <div class="card-body">
    <h4 class="card-title">బిల్ గేట్స్</h4>
    <p class="card-text">బిల్ గేట్స్ ఒక ప్రోగ్రామర్ మరియు ఇంజనీర్ ఉంది. కొన్ని ప్రకారాలు టెక్స్ట్. కొన్ని ప్రకారాలు టెక్స్ట్.</p>
    <a href="#" class="btn btn-primary">పరిశీలించండి వ్యక్తిగత పేజీ</a>
  </div>
</div>

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

కార్డ్ చిత్రం ఓవర్లే

చిత్రాన్ని కార్డ్ బ్యాక్గ్రౌండ్ గా మార్చి ఉపయోగించండి .card-img-overlay చిత్రం పైకి టెక్స్ట్ జోడించండి:

ఉదాహరణ

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="కార్డ్ చిత్రం">
  <div class="card-img-overlay">
    <h4 class="card-title">బిల్ గేట్స్</h4>
    <p class="card-text">కొన్ని ప్రకారాలు టెక్స్ట్. కొన్ని ప్రకారాలు టెక్స్ట్.</p>
    <a href="#" class="btn btn-primary">పరిశీలించండి వ్యక్తిగత పేజీ</a>
  </div>
</div>

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