ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
Check
in English

କାର୍ଡଗୁଡ଼ିକ

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କାର୍ଡଗୁଡ଼ିକ ଏକ ନମନୀୟ ଏବଂ ବିସ୍ତାରିତ ବିଷୟବସ୍ତୁ ଧାରଣକାରୀ ସହିତ ଏକାଧିକ ପ୍ରକାର ଏବଂ ବିକଳ୍ପ ପ୍ରଦାନ କରିଥାଏ |

ବିଷୟରେ

ଏକ କାର୍ଡ ହେଉଛି ଏକ ନମନୀୟ ଏବଂ ବିସ୍ତାରିତ ବିଷୟବସ୍ତୁ ପାତ୍ର | ଏଥିରେ ହେଡର୍ ଏବଂ ଫୁଟର୍ ପାଇଁ ବିକଳ୍ପ, ବିଭିନ୍ନ ପ୍ରକାରର ବିଷୟବସ୍ତୁ, ପ୍ରସଙ୍ଗଗତ ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ଏବଂ ଶକ୍ତିଶାଳୀ ପ୍ରଦର୍ଶନ ବିକଳ୍ପ ଅନ୍ତର୍ଭୁକ୍ତ | ଯଦି ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ with ସହିତ ପରିଚିତ, କାର୍ଡଗୁଡିକ ଆମର ପୁରୁଣା ପ୍ୟାନେଲ୍, କୂଅ, ଏବଂ ଥମ୍ na ନେଲ୍ ସ୍ଥାନାନ୍ତର କରେ | ସେହି ଉପାଦାନଗୁଡ଼ିକ ସହିତ ସମାନ କାର୍ଯ୍ୟକାରିତା କାର୍ଡଗୁଡ଼ିକ ପାଇଁ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ଭାବରେ ଉପଲବ୍ଧ |

ଉଦାହରଣ |

କାର୍ଡଗୁଡ଼ିକ ଯଥାସମ୍ଭବ ମାର୍କଅପ୍ ଏବଂ ଶ yles ଳୀ ସହିତ ନିର୍ମିତ, କିନ୍ତୁ ତଥାପି ଏକ ଟନ୍ ନିୟନ୍ତ୍ରଣ ଏବଂ କଷ୍ଟମାଇଜେସନ୍ ବିତରଣ କରିବାରେ ସଫଳ ହୁଏ | ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ନିର୍ମିତ, ସେମାନେ ସହଜ ଆଲାଇନ୍ମେଣ୍ଟ ପ୍ରଦାନ କରନ୍ତି ଏବଂ ଅନ୍ୟ ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନଗୁଡ଼ିକ ସହିତ ଭଲ ଭାବରେ ମିଶ୍ରଣ କରନ୍ତି | ସେମାନଙ୍କର marginଡିଫଲ୍ଟ ଭାବରେ ନାହିଁ, ତେଣୁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ବ୍ୟବଧାନ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |

ନିମ୍ନରେ ମିଶ୍ରିତ ବିଷୟବସ୍ତୁ ଏବଂ ଏକ ସ୍ଥିର ମୋଟେଇ ସହିତ ଏକ ମ basic ଳିକ କାର୍ଡର ଉଦାହରଣ ଦିଆଯାଇଛି | ଆରମ୍ଭ କରିବାକୁ କାର୍ଡଗୁଡ଼ିକର କ fixed ଣସି ସ୍ଥିର ଓସାର ନାହିଁ, ତେଣୁ ସେମାନେ ସ୍ natural ାଭାବିକ ଭାବରେ ଏହାର ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନର ପୂର୍ଣ୍ଣ ଓସାର ପୂରଣ କରିବେ | ଆମର ବିଭିନ୍ନ ସାଇଜ୍ ଅପ୍ସନ୍ ସହିତ ଏହା ସହଜରେ କଷ୍ଟମାଇଜ୍ ହୋଇଛି |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
html
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ବିଷୟବସ୍ତୁ ପ୍ରକାରଗୁଡିକ |

ଚିତ୍ର, ପାଠ୍ୟ, ତାଲିକା ଗୋଷ୍ଠୀ, ଲିଙ୍କ୍, ଏବଂ ଅନ୍ୟାନ୍ୟ ସହିତ କାର୍ଡଗୁଡିକ ବିଭିନ୍ନ ପ୍ରକାରର ବିଷୟବସ୍ତୁକୁ ସମର୍ଥନ କରେ | ଯାହା ସମର୍ଥିତ ତାହା ନିମ୍ନରେ ଦିଆଯାଇଛି |

ଶରୀର

ଏକ କାର୍ଡର ବିଲଡିଂ ବ୍ଲକ ହେଉଛି .card-body। ଯେତେବେଳେ ଆପଣ ଏକ କାର୍ଡ ମଧ୍ୟରେ ପ୍ୟାଡ୍ ହୋଇଥିବା ବିଭାଗ ଆବଶ୍ୟକ କରନ୍ତି ଏହାକୁ ବ୍ୟବହାର କରନ୍ତୁ |

ଏହା ଏକ କାର୍ଡ ବଡି ମଧ୍ୟରେ କିଛି ଟେକ୍ସଟ୍ |
html
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

.card-titleଏକ <h*>ଟ୍ୟାଗ୍ ଯୋଗ କରି କାର୍ଡ ଟାଇଟଲ୍ ବ୍ୟବହୃତ ହୁଏ | .card-linkସେହିପରି ଭାବରେ, ଏକ <a>ଟ୍ୟାଗ୍ ଯୋଗ କରି ଲିଙ୍କଗୁଡ଼ିକ ଯୋଡି ହୋଇ ପରସ୍ପର ପାଖରେ ରଖାଯାଏ |

.card-subtitleଏକ <h*>ଟ୍ୟାଗରେ ଏକ ଯୋଗ କରି ସବ୍ଟାଇଟ୍ ବ୍ୟବହାର କରାଯାଏ | ଯଦି .card-titleଏବଂ .card-subtitleଆଇଟମଗୁଡିକ ଏକ ଆଇଟମ୍ ରେ ସ୍ଥାନିତ ହୁଏ .card-body, କାର୍ଡ ଟାଇଟଲ୍ ଏବଂ ସବ୍ଟାଇଟ୍ ସୁନ୍ଦର ଭାବରେ ଆଲାଇନ୍ ହୋଇଯାଏ |

କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ସବ୍ଟାଇଟ୍ |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

କାର୍ଡ ଲିଙ୍କ୍ ଅନ୍ୟ ଏକ ଲିଙ୍କ୍ |
html
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

ପ୍ରତିଛବିଗୁଡିକ

.card-img-topକାର୍ଡର ଶୀର୍ଷରେ ଏକ ପ୍ରତିଛବି ରଖେ | ସହିତ .card-text, ପାଠ୍ୟ କାର୍ଡରେ ଯୋଗ କରାଯାଇପାରିବ | ଭିତରେ ଥିବା ଟେକ୍ସଟ୍ .card-textମଧ୍ୟ ଷ୍ଟାଣ୍ଡାର୍ଡ HTML ଟ୍ୟାଗ୍ ସହିତ ଷ୍ଟାଇଲ୍ ହୋଇପାରେ |

Placeholder Image cap

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

html
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ଗୋଷ୍ଠୀ ତାଲିକା କର |

ଏକ ଫ୍ଲାସ୍ ତାଲିକା ଗୋଷ୍ଠୀ ସହିତ ଏକ କାର୍ଡରେ ବିଷୟବସ୍ତୁର ତାଲିକା ସୃଷ୍ଟି କରନ୍ତୁ |

  • ଏକ ଆଇଟମ୍ |
  • ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
  • ଏକ ତୃତୀୟ ଆଇଟମ୍ |
html
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
ବ Feat ଶିଷ୍ଟ୍ୟ
  • ଏକ ଆଇଟମ୍ |
  • ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
  • ଏକ ତୃତୀୟ ଆଇଟମ୍ |
html
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • ଏକ ଆଇଟମ୍ |
  • ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
  • ଏକ ତୃତୀୟ ଆଇଟମ୍ |
html
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

ରୋଷେଇ ଘର

ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା କାର୍ଡ ସୃଷ୍ଟି କରିବାକୁ ଏକାଧିକ ବିଷୟବସ୍ତୁ ପ୍ରକାରକୁ ମିଶ୍ରଣ କରନ୍ତୁ ଏବଂ ମେଳ କରନ୍ତୁ, କିମ୍ବା ସେଠାରେ ସବୁକିଛି ପକାନ୍ତୁ | ନିମ୍ନରେ ପ୍ରଦର୍ଶିତ ହୋଇଛି ଚିତ୍ର ଶ yles ଳୀ, ବ୍ଲକ, ପାଠ୍ୟ ଶ yles ଳୀ, ଏବଂ ଏକ ତାଲିକା ଗୋଷ୍ଠୀ - ସମସ୍ତେ ଏକ ସ୍ଥିର-ଓସାର କାର୍ଡରେ ଗୁଡ଼ାଇ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

  • ଏକ ଆଇଟମ୍ |
  • ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
  • ଏକ ତୃତୀୟ ଆଇଟମ୍ |
html
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

ଏକ କାର୍ଡ ମଧ୍ୟରେ ଏକ ଇଚ୍ଛାଧୀନ ହେଡର୍ ଏବଂ / କିମ୍ବା ଫୁଟର୍ ଯୋଡନ୍ତୁ |

ବ Feat ଶିଷ୍ଟ୍ୟ
ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
html
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ଉପାଦାନଗୁଡ଼ିକରେ ଯୋଗ .card-headerକରି କାର୍ଡ ହେଡର୍ ଗୁଡିକ ଷ୍ଟାଇଲ୍ ହୋଇପାରିବ |<h*>

ବ Feat ଶିଷ୍ଟ୍ୟ
ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
html
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ଉଦ୍ଧୃତ

ଏକ ଜଣାଶୁଣା ଉଦ୍ଧୃତି, ଏକ ବ୍ଲକ୍କୋଟ୍ ଉପାଦାନରେ ଅନ୍ତର୍ଭୁକ୍ତ |

ଉତ୍ସ ଆଖ୍ୟାରେ କେହି ଜଣେ ପ୍ରସିଦ୍ଧ |
html
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
ବ Feat ଶିଷ୍ଟ୍ୟ
ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
html
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

ଆକାର

କାର୍ଡ widthଆରମ୍ଭ କରିବା ପାଇଁ କ specific ଣସି ନିର୍ଦ୍ଦିଷ୍ଟ ଅନୁମାନ କରେ ନାହିଁ, ତେଣୁ ଅନ୍ୟଥା ଉଲ୍ଲେଖ ନହେଲେ ସେଗୁଡିକ 100% ଚଉଡା ହେବ | କଷ୍ଟମ୍ CSS, ଗ୍ରୀଡ୍ କ୍ଲାସ୍, ଗ୍ରୀଡ୍ ସାସ୍ ମିଶ୍ରଣ, କିମ୍ବା ୟୁଟିଲିଟି ସହିତ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ଆପଣ ଏହାକୁ ପରିବର୍ତ୍ତନ କରିପାରିବେ |

ଗ୍ରୀଡ୍ ମାର୍କଅପ୍ ବ୍ୟବହାର କରି |

ଗ୍ରୀଡ୍ ବ୍ୟବହାର କରି, ଆବଶ୍ୟକ ଅନୁଯାୟୀ ସ୍ତମ୍ଭ ଏବଂ ଧାଡିରେ କାର୍ଡ ଗୁଡ଼ାଇ ରଖ |

ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
html
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

ଉପଯୋଗିତା ବ୍ୟବହାର

ଏକ କାର୍ଡର ମୋଟେଇକୁ ଶୀଘ୍ର ସେଟ୍ କରିବାକୁ ଆମର ହାତଗଣତି ଉପଲବ୍ଧ ଆକାରର ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |

କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

ବଟନ୍
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

ବଟନ୍
html
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

କଷ୍ଟମ୍ CSS ବ୍ୟବହାର କରି |

ଆପଣଙ୍କର ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ଗୁଡିକରେ କିମ୍ବା ଏକ ମୋଟେଇ ସେଟ୍ କରିବାକୁ ଇନଲାଇନ ଶ yles ଳୀରେ କଷ୍ଟମ୍ CSS ବ୍ୟବହାର କରନ୍ତୁ |

ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
html
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ପାଠ୍ୟ ଶ୍ରେଣୀବଦ୍ଧତା |

ତୁମେ ଶୀଘ୍ର ଯେକ any ଣସି କାର୍ଡର ଟେକ୍ସଟ୍ ଆଲାଇନ୍ମେଣ୍ଟ୍ - ଏହାର ସମ୍ପୂର୍ଣ୍ଣ କିମ୍ବା ନିର୍ଦ୍ଦିଷ୍ଟ ଅଂଶରେ - ଆମର ଟେକ୍ସଟ୍ ଆଲାଇନ୍ କ୍ଲାସ୍ ସହିତ ଶୀଘ୍ର ପରିବର୍ତ୍ତନ କରିପାରିବ |

ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
html
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ବୁଟଷ୍ଟ୍ରାପ୍ ର ନାଭ୍ ଉପାଦାନଗୁଡ଼ିକ ସହିତ ଏକ କାର୍ଡର ହେଡର୍ (କିମ୍ବା ବ୍ଲକ୍) ରେ କିଛି ନାଭିଗେସନ୍ ଯୋଡନ୍ତୁ |

ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
html
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ସୀସା ଭାବରେ ନିମ୍ନରେ ପାଠ୍ୟକୁ ସମର୍ଥନ କରିବା ସହିତ |

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
html
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ପ୍ରତିଛବିଗୁଡିକ

ଚିତ୍ରଗୁଡ଼ିକ ସହିତ କାମ କରିବା ପାଇଁ କାର୍ଡଗୁଡ଼ିକରେ କିଛି ବିକଳ୍ପ ଅନ୍ତର୍ଭୁକ୍ତ | କାର୍ଡର ଉଭୟ ମୁଣ୍ଡରେ “ଇମେଜ୍ କ୍ୟାପ୍” ଯୋଡିବା, କାର୍ଡ ବିଷୟବସ୍ତୁ ସହିତ ପ୍ରତିଛବିଗୁଡ଼ିକୁ ଓଭରଲିଂ କରିବା କିମ୍ବା ଚିତ୍ରକୁ କେବଳ କାର୍ଡରେ ଏମ୍ବେଡ୍ କରିବା ବାଛନ୍ତୁ |

ପ୍ରତିଛବି କ୍ୟାପ୍ |

ହେଡର୍ ଏବଂ ଫୁଟର୍ ପରି, କାର୍ଡଗୁଡ଼ିକ ଉପର ଏବଂ ତଳ “ଇମେଜ୍ କ୍ୟାପ୍” ଅନ୍ତର୍ଭୂକ୍ତ କରିପାରିବ - ଏକ କାର୍ଡର ଉପର କିମ୍ବା ତଳେ ଚିତ୍ରଗୁଡ଼ିକ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |

କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |

Placeholder Image cap
html
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

ପ୍ରତିଛବି ଓଭରଲେଜ୍ |

ଏକ ପ୍ରତିଛବିକୁ ଏକ କାର୍ଡ ପୃଷ୍ଠଭୂମିରେ ପରିଣତ କର ଏବଂ ତୁମର କାର୍ଡର ପାଠକୁ ଆଚ୍ଛାଦନ କର | ପ୍ରତିଛବି ଉପରେ ନିର୍ଭର କରି, ଆପଣ ଅତିରିକ୍ତ ଶ yles ଳୀ କିମ୍ବା ଉପଯୋଗିତା ଆବଶ୍ୟକ କରିପାରନ୍ତି କିମ୍ବା ଆବଶ୍ୟକ କରିପାରନ୍ତି ନାହିଁ |

Placeholder Card image
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |

html
<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ବିଷୟବସ୍ତୁ ପ୍ରତିଛବିର ଉଚ୍ଚତାଠାରୁ ବଡ଼ ହେବା ଉଚିତ୍ ନୁହେଁ | ଯଦି ବିଷୟବସ୍ତୁ ପ୍ରତିଛବିଠାରୁ ବଡ଼, ବିଷୟବସ୍ତୁ ଚିତ୍ର ବାହାରେ ପ୍ରଦର୍ଶିତ ହେବ |

ଭୂସମାନ୍ତର

ଗ୍ରୀଡ୍ ଏବଂ ୟୁଟିଲିଟି ଶ୍ରେଣୀର ଏକ ମିଶ୍ରଣ ବ୍ୟବହାର କରି, ମୋବାଇଲ୍ ଅନୁକୂଳ ଏବଂ ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପାୟରେ କାର୍ଡଗୁଡିକ ଭୂସମାନ୍ତର କରାଯାଇପାରିବ | ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଆମେ ଗ୍ରୀଡ୍ ଗୁଟରଗୁଡିକ ଅପସାରଣ କରୁ ଏବଂ ବ୍ରେକ୍ ପଏଣ୍ଟରେ କାର୍ଡକୁ ଭୂସମାନ୍ତର କରିବା ପାଇଁ କ୍ଲାସ୍ .g-0ବ୍ୟବହାର କରୁ | ଆପଣଙ୍କ କାର୍ଡ ବିଷୟବସ୍ତୁ ଉପରେ ନିର୍ଭର କରି ଅଧିକ ସଂଶୋଧନ ଆବଶ୍ୟକ ହୋଇପାରେ |.col-md-*md

Placeholder Image
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |

html
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

କାର୍ଡ ଶ yles ଳୀ |

କାର୍ଡଗୁଡ଼ିକ ସେମାନଙ୍କର ପୃଷ୍ଠଭୂମି, ସୀମା, ଏବଂ ରଙ୍ଗ କଷ୍ଟୋମାଇଜ୍ କରିବା ପାଇଁ ବିଭିନ୍ନ ବିକଳ୍ପ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ପୃଷ୍ଠଭୂମି ଏବଂ ରଙ୍ଗ |

V5.2.0 ରେ ଯୋଡା ଯାଇଛି |

ଆମର ସାହାଯ୍ୟକାରୀଙ୍କbackground-color ସହିତ ବିପରୀତ ପୃଷ୍ଠଭୂମି colorସହିତ ସେଟ୍ କରନ୍ତୁ | ପୂର୍ବରୁ ଏହା ଆପଣଙ୍କ ପସନ୍ଦ ଏବଂ ଷ୍ଟାଇଲିଂ ପାଇଁ ଉପଯୋଗିତାକୁ ମାନୁଆଲୀ ଯୋଡିବା ଆବଶ୍ୟକ ଥିଲା , ଯାହାକୁ ଆପଣ ଚାହିଁଲେ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ |.text-bg-{color}.text-{color}.bg-{color}

ଶୀର୍ଷଲେଖ
ପ୍ରାଥମିକ କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ଦଳୀୟ କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ସଫଳତା କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ବିପଦ କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ଚେତାବନୀ କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ସୂଚନା କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ହାଲୁକା କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ଗା ark କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

html
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |

ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .visually-hiddenଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |

ସୀମା

କେବଳ ଏକ କାର୍ଡର ପରିବର୍ତ୍ତନ ପାଇଁ ସୀମା ଉପଯୋଗୀତା ବ୍ୟବହାର କରନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି ଆପଣ ପ୍ୟାରେଣ୍ଟ୍ କିମ୍ବା କାର୍ଡର ବିଷୟବସ୍ତୁର ଏକ ସବ୍ସେଟ୍ ଉପରେ କ୍ଲାସ୍ border-colorରଖିପାରିବେ |.text-{color}.card

ଶୀର୍ଷଲେଖ
ପ୍ରାଥମିକ କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ଦଳୀୟ କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ସଫଳତା କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ବିପଦ କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ଚେତାବନୀ କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ସୂଚନା କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ହାଲୁକା କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ
ଗା ark କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

html
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ମିକ୍ସନ୍ ଉପଯୋଗୀତା |

ଆପଣ ଆବଶ୍ୟକ ଅନୁଯାୟୀ କାର୍ଡ ହେଡର୍ ଏବଂ ଫୁଟର୍ ଉପରେ ସୀମା ପରିବର୍ତ୍ତନ କରିପାରିବେ, ଏବଂ ସେଗୁଡିକୁ ମଧ୍ୟ ଅପସାରଣ background-colorକରିପାରିବେ .bg-transparent|

ଶୀର୍ଷଲେଖ
ସଫଳତା କାର୍ଡ ଆଖ୍ୟା |

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

html
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

କାର୍ଡ ଲେଆଉଟ୍ |

କାର୍ଡ ମଧ୍ୟରେ ବିଷୟବସ୍ତୁକୁ ଷ୍ଟାଇଲ୍ କରିବା ସହିତ, ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କାର୍ଡଗୁଡ଼ିକର ସିରିଜ୍ ରଖିବା ପାଇଁ କିଛି ବିକଳ୍ପ ଅନ୍ତର୍ଭୁକ୍ତ କରେ | ବର୍ତ୍ତମାନ ପର୍ଯ୍ୟନ୍ତ, ଏହି ଲେଆଉଟ୍ ବିକଳ୍ପଗୁଡ଼ିକ ଏପର୍ଯ୍ୟନ୍ତ ପ୍ରତିକ୍ରିୟାଶୀଳ ନୁହେଁ |

କାର୍ଡ ଗୋଷ୍ଠୀ |

ସମାନ ଓସାର ଏବଂ ଉଚ୍ଚତା ସ୍ତମ୍ଭ ସହିତ ଏକକ, ସଂଲଗ୍ନ ଉପାଦାନ ଭାବରେ କାର୍ଡ ପ୍ରଦର୍ଶନ କରିବାକୁ କାର୍ଡ ଗୋଷ୍ଠୀ ବ୍ୟବହାର କରନ୍ତୁ | କାର୍ଡ ଗୋଷ୍ଠୀଗୁଡ଼ିକ ଷ୍ଟାକ୍ ହୋଇ ଆରମ୍ଭ କରନ୍ତି ଏବଂ ବ୍ରେକପଏଣ୍ଟରୁ display: flex;ଆରମ୍ଭ ହେଉଥିବା ୟୁନିଫର୍ମ ଡାଇମେନ୍ସନ୍ ସହିତ ସଂଲଗ୍ନ ହେବାକୁ ବ୍ୟବହାର କରନ୍ତି |sm

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଏହି କାର୍ଡରେ ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ଅଛି |

3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ସେହି ସମାନ ଉଚ୍ଚତା କ୍ରିୟା ଦେଖାଇବାକୁ ପ୍ରଥମ ଅପେକ୍ଷା ଏହି କାର୍ଡରେ ଅଧିକ ବିଷୟବସ୍ତୁ ଅଛି |

3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |

html
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

ଫୁଟର୍ ସହିତ କାର୍ଡ ଗୋଷ୍ଠୀ ବ୍ୟବହାର କରିବାବେଳେ, ସେମାନଙ୍କର ବିଷୟବସ୍ତୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଲାଇନ୍ ଅପ୍ ହେବ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଏହି କାର୍ଡରେ ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ଅଛି |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ସେହି ସମାନ ଉଚ୍ଚତା କ୍ରିୟା ଦେଖାଇବାକୁ ପ୍ରଥମ ଅପେକ୍ଷା ଏହି କାର୍ଡରେ ଅଧିକ ବିଷୟବସ୍ତୁ ଅଛି |

html
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

ଗ୍ରୀଡ୍ କାର୍ଡ |

ଆପଣ ପ୍ରତି ଧାଡିରେ କେତେ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ (ଆପଣଙ୍କ କାର୍ଡରେ ଆବୃତ) ନିୟନ୍ତ୍ରଣ କରିବାକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ଏବଂ ଏହାର .row-colsଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ | ଉଦାହରଣ ସ୍ .ରୁପ, ଏଠାରେ .row-cols-1ଗୋଟିଏ ସ୍ତମ୍ଭରେ କାର୍ଡଗୁଡିକ ରଖିବା, ଏବଂ .row-cols-md-2ମଧ୍ୟମ ବ୍ରେକପଏଣ୍ଟ ଠାରୁ ଆରମ୍ଭ କରି ଏକାଧିକ ଧାଡିରେ ସମାନ ଓସାରରେ ଚାରୋଟି କାର୍ଡ ବିଭାଜନ କରିବା |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

html
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ଏହାକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ .row-cols-3ଏବଂ ଆପଣ ଚତୁର୍ଥ କାର୍ଡ ରାପ୍ ଦେଖିବେ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

html
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ଯେତେବେଳେ ତୁମେ ସମାନ ଉଚ୍ଚତା ଆବଶ୍ୟକ .h-100କରେ, କାର୍ଡରେ ଯୋଗ କର | ଯଦି ଆପଣ ଡିଫଲ୍ଟ ଭାବରେ ସମାନ ଉଚ୍ଚତା ଚାହୁଁଛନ୍ତି, ଆପଣ $card-height: 100%ସାସରେ ସେଟ୍ କରିପାରିବେ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଏହା ଏକ ସର୍ଟ କାର୍ଡ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

html
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ଯେପରି କାର୍ଡ ଗୋଷ୍ଠୀ ସହିତ, କାର୍ଡ ଫୁଟର୍ଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଲାଇନ୍ ହୋଇଯିବ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଏହି କାର୍ଡରେ ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ଅଛି |

Placeholder Image cap
କାର୍ଡ ଆଖ୍ୟା |

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ସେହି ସମାନ ଉଚ୍ଚତା କ୍ରିୟା ଦେଖାଇବାକୁ ପ୍ରଥମ ଅପେକ୍ଷା ଏହି କାର୍ଡରେ ଅଧିକ ବିଷୟବସ୍ତୁ ଅଛି |

html
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

ମାନସ

ମେସନ୍ରି ପରି ସ୍ତମ୍ଭର v4ଆଚରଣକୁ ଅନୁକରଣ କରିବା ପାଇଁ ଆମେ କେବଳ ଏକ CSS- କ techni ଶଳ ବ୍ୟବହାର କରିଥିଲୁ , କିନ୍ତୁ ଏହି କ que ଶଳଟି ଅନେକ ଅପ୍ରୀତିକର ପାର୍ଶ୍ୱ ପ୍ରତିକ୍ରିୟା ସହିତ ଆସିଥିଲା ​​| ଯଦି ଆପଣ ଏହି ପ୍ରକାରର ଲେଆଉଟ୍ କରିବାକୁ ଚାହୁଁଛନ୍ତି v5, ତେବେ ଆପଣ କେବଳ ମେସନ୍ରି ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିପାରିବେ | ମାନସ ବୁଟଷ୍ଟ୍ରାପରେ ଅନ୍ତର୍ଭୂକ୍ତ ନୁହେଁ , କିନ୍ତୁ ଆପଣଙ୍କୁ ଆରମ୍ଭ କରିବାରେ ସାହାଯ୍ୟ କରିବାକୁ ଆମେ ଏକ ଡେମୋ ଉଦାହରଣ କରିଛୁ |

CSS

ଭେରିଏବଲ୍ |

V5.2.0 ରେ ଯୋଡା ଯାଇଛି |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ବିକାଶଶୀଳ CSS ଭେରିଏବଲ୍ ପଦ୍ଧତିର ଏକ ଅଂଶ ଭାବରେ, କାର୍ଡଗୁଡ଼ିକ ବର୍ତ୍ତମାନ .cardବର୍ଦ୍ଧିତ ରିଅଲ୍ ଟାଇମ୍ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କରନ୍ତି | CSS ଭେରିଏବଲ୍ ପାଇଁ ମୂଲ୍ୟଗୁଡ଼ିକ ସାସ୍ ମାଧ୍ୟମରେ ସେଟ୍ ହୋଇଛି, ତେଣୁ ସାସ୍ କଷ୍ଟୋମାଇଜେସନ୍ ମଧ୍ୟ ସମର୍ଥିତ |

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};
  

ସାସ୍ ଭେରିଏବଲ୍ |

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;