Source

କାର୍ଡଗୁଡ଼ିକ

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

ବିଷୟରେ

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

ଉଦାହରଣ |

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

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

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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। ଯେତେବେଳେ ଆପଣ ଏକ କାର୍ଡ ମଧ୍ୟରେ ପ୍ୟାଡ୍ ହୋଇଥିବା ବିଭାଗ ଆବଶ୍ୟକ କରନ୍ତି ଏହାକୁ ବ୍ୟବହାର କରନ୍ତୁ |

ଏହା ଏକ କାର୍ଡ ବଡି ମଧ୍ୟରେ କିଛି ଟେକ୍ସଟ୍ |
<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, କାର୍ଡ ଟାଇଟଲ୍ ଏବଂ ସବ୍ଟାଇଟ୍ ସୁନ୍ଦର ଭାବରେ ଆଲାଇନ୍ ହୋଇଯାଏ |

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

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

କାର୍ଡ ଲିଙ୍କ୍ ଅନ୍ୟ ଏକ ଲିଙ୍କ୍ |
<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 ଟ୍ୟାଗ୍ ସହିତ ଷ୍ଟାଇଲ୍ ହୋଇପାରେ |

ପ୍ରତିଛବି କ୍ୟାପ୍ [100% x180]

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

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

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

  • କ୍ରାସ୍ ଜଷ୍ଟୋ ଓଡିଓ |
  • Dapibus ac facilisis in
  • ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
ବ Feat ଶିଷ୍ଟ୍ୟ
  • କ୍ରାସ୍ ଜଷ୍ଟୋ ଓଡିଓ |
  • Dapibus ac facilisis in
  • ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

ରୋଷେଇ ଘର

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

ପ୍ରତିଛବି କ୍ୟାପ୍ [100% x180]
କାର୍ଡ ଆଖ୍ୟା |

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

  • କ୍ରାସ୍ ଜଷ୍ଟୋ ଓଡିଓ |
  • Dapibus ac facilisis in
  • ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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 ଣସି ସ୍ଥାନକୁ ଯାଅ |
<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 ଣସି ସ୍ଥାନକୁ ଯାଅ |
<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>
ଉଦ୍ଧୃତ

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଙ୍ଗ୍ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଏରାଟ କରନ୍ତୁ |

ଉତ୍ସ ଆଖ୍ୟାରେ କେହି ଜଣେ ପ୍ରସିଦ୍ଧ |
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
ବ Feat ଶିଷ୍ଟ୍ୟ
ସ୍ title ତନ୍ତ୍ର ଆଖ୍ୟା ଚିକିତ୍ସା |

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

କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |
<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 ଣସି ସ୍ଥାନକୁ ଯାଅ |
<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>

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

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

କାର୍ଡ ଆଖ୍ୟା |

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

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

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

ବଟନ୍
<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 ଣସି ସ୍ଥାନକୁ ଯାଅ |
<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 ଣସି ସ୍ଥାନକୁ ଯାଅ |
<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-right" 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 ଣସି ସ୍ଥାନକୁ ଯାଅ |
<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" 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" href="#">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 ଣସି ସ୍ଥାନକୁ ଯାଅ |
<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" href="#">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>

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

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

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

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

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

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

କାର୍ଡ ଆଖ୍ୟା |

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

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

100% x180
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</div>

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

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

100% x270
କାର୍ଡ ଆଖ୍ୟା |

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

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

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <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">Last updated 3 mins ago</p>
  </div>
</div>

କାର୍ଡ ଶ yles ଳୀ |

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

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

କାର୍ଡର ରୂପ ବଦଳାଇବା ପାଇଁ ପାଠ୍ୟ ଏବଂ ପୃଷ୍ଠଭୂମି ଉପଯୋଗୀତା ବ୍ୟବହାର କରନ୍ତୁ |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="card text-white 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-white 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-white 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-white 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-white 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-white 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 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-white 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>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |

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

ସୀମା

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 text-warning">
    <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 text-info">
    <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|

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

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

<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;ସେମାନଙ୍କର ୟୁନିଫର୍ମ ଆକାର ହାସଲ କରିବାକୁ ବ୍ୟବହାର କରନ୍ତି |

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

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

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

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

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

କାର୍ଡ ଡେକ୍ସ

ସମାନ ଓସାର ଏବଂ ଉଚ୍ଚତା କାର୍ଡର ଏକ ସେଟ୍ ଆବଶ୍ୟକ ଯାହାକି ପରସ୍ପର ସହିତ ସଂଲଗ୍ନ ହୋଇନାହିଁ? କାର୍ଡ ଡେକ୍ସ ବ୍ୟବହାର କରନ୍ତୁ |

100% x200
କାର୍ଡ ଆଖ୍ୟା |

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

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

100% x200
କାର୍ଡ ଆଖ୍ୟା |

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

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

100% x200
କାର୍ଡ ଆଖ୍ୟା |

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

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

100% x180
କାର୍ଡ ଆଖ୍ୟା |

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

କାର୍ଡ ସ୍ତମ୍ଭ

କାର୍ଡଗୁଡିକ କେବଳ CSS ସହିତ ମେସନ୍ରି ପରି ସ୍ତମ୍ଭରେ ସଂଗଠିତ ହୋଇପାରିବ .card-columns| columnସହଜ ଆଲାଇନ୍ମେଣ୍ଟ ପାଇଁ ଫ୍ଲେକ୍ସବକ୍ସ ବଦଳରେ CSS ଗୁଣ ସହିତ କାର୍ଡଗୁଡ଼ିକ ନିର୍ମାଣ କରାଯାଇଛି | କାର୍ଡଗୁଡିକ ଉପରୁ ତଳ ଏବଂ ବାମରୁ ଡାହାଣକୁ ଅର୍ଡର ହୋଇଛି |

ମୁଣ୍ଡ ଉପରକୁ! କାର୍ଡ ସ୍ତମ୍ଭ ସହିତ ଆପଣଙ୍କର ମାଇଲେଜ୍ ଭିନ୍ନ ହୋଇପାରେ | ସ୍ତମ୍ଭଗୁଡିକରେ କାର୍ଡ ଭାଙ୍ଗିବାକୁ ରୋକିବା ପାଇଁ, ଆମେ ସେଗୁଡିକୁ ସେଟ୍ କରିବା ଉଚିତ display: inline-blockଯେହେତୁ column-break-inside: avoidଏପର୍ଯ୍ୟନ୍ତ ବୁଲେଟ୍ ପ୍ରୁଫ୍ ସମାଧାନ ନୁହେଁ |

100% x160
କାର୍ଡ ଟାଇଟଲ୍ ଯାହା ଏକ ନୂଆ ଧାଡିରେ ଗୁଡ଼ାଏ |

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

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଙ୍ଗ୍ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଏରାଟ କରନ୍ତୁ |

ଉତ୍ସ ଆଖ୍ୟାରେ କେହି ଜଣେ ପ୍ରସିଦ୍ଧ |
100% x160
କାର୍ଡ ଆଖ୍ୟା |

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

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

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଙ୍ଗ୍ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ posuere erat

ଉତ୍ସ ଆଖ୍ୟାରେ କେହି ଜଣେ ପ୍ରସିଦ୍ଧ |
କାର୍ଡ ଆଖ୍ୟା |

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

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

100% x260

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଙ୍ଗ୍ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଏରାଟ କରନ୍ତୁ |

ଉତ୍ସ ଆଖ୍ୟାରେ କେହି ଜଣେ ପ୍ରସିଦ୍ଧ |
କାର୍ଡ ଆଖ୍ୟା |

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

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

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <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 class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 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>

କିଛି ଅତିରିକ୍ତ କୋଡ୍ ସହିତ କାର୍ଡ ସ୍ତମ୍ଭଗୁଡିକ ବିସ୍ତାର ଏବଂ କଷ୍ଟମାଇଜ୍ ହୋଇପାରିବ | .card-columnsସ୍ତମ୍ଭ ସଂଖ୍ୟା ବଦଳାଇବା ପାଇଁ ପ୍ରତିକ୍ରିୟାଶୀଳ ସ୍ତରର ଏକ ସେଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଆମେ ବ୍ୟବହାର କରୁଥିବା ସମାନ CSS - CSS ସ୍ତମ୍ଭ ବ୍ୟବହାର କରି ଶ୍ରେଣୀର ଏକ ବିସ୍ତାର ନିମ୍ନରେ ପ୍ରଦର୍ଶିତ ହୋଇଛି |

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}