କାର୍ଡଗୁଡ଼ିକ
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କାର୍ଡଗୁଡ଼ିକ ଏକ ନମନୀୟ ଏବଂ ବିସ୍ତାରିତ ବିଷୟବସ୍ତୁ ଧାରଣକାରୀ ସହିତ ଏକାଧିକ ପ୍ରକାର ଏବଂ ବିକଳ୍ପ ପ୍ରଦାନ କରିଥାଏ |
ବିଷୟରେ
ଏକ କାର୍ଡ ହେଉଛି ଏକ ନମନୀୟ ଏବଂ ବିସ୍ତାରିତ ବିଷୟବସ୍ତୁ ପାତ୍ର | ଏଥିରେ ହେଡର୍ ଏବଂ ଫୁଟର୍ ପାଇଁ ବିକଳ୍ପ, ବିଭିନ୍ନ ପ୍ରକାରର ବିଷୟବସ୍ତୁ, ପ୍ରସଙ୍ଗଗତ ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ଏବଂ ଶକ୍ତିଶାଳୀ ପ୍ରଦର୍ଶନ ବିକଳ୍ପ ଅନ୍ତର୍ଭୁକ୍ତ | ଯଦି ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ with ସହିତ ପରିଚିତ, କାର୍ଡଗୁଡିକ ଆମର ପୁରୁଣା ପ୍ୟାନେଲ୍, କୂଅ, ଏବଂ ଥମ୍ na ନେଲ୍ ସ୍ଥାନାନ୍ତର କରେ | ସେହି ଉପାଦାନଗୁଡ଼ିକ ସହିତ ସମାନ କାର୍ଯ୍ୟକାରିତା କାର୍ଡଗୁଡ଼ିକ ପାଇଁ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ଭାବରେ ଉପଲବ୍ଧ |
ଉଦାହରଣ |
କାର୍ଡଗୁଡ଼ିକ ଯଥାସମ୍ଭବ ମାର୍କଅପ୍ ଏବଂ ଶ yles ଳୀ ସହିତ ନିର୍ମିତ, କିନ୍ତୁ ତଥାପି ଏକ ଟନ୍ ନିୟନ୍ତ୍ରଣ ଏବଂ କଷ୍ଟମାଇଜେସନ୍ ବିତରଣ କରିବାରେ ସଫଳ ହୁଏ | ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ନିର୍ମିତ, ସେମାନେ ସହଜ ଆଲାଇନ୍ମେଣ୍ଟ ପ୍ରଦାନ କରନ୍ତି ଏବଂ ଅନ୍ୟ ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନଗୁଡ଼ିକ ସହିତ ଭଲ ଭାବରେ ମିଶ୍ରଣ କରନ୍ତି | ସେମାନଙ୍କର margin
ଡିଫଲ୍ଟ ଭାବରେ ନାହିଁ, ତେଣୁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ବ୍ୟବଧାନ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |
ନିମ୍ନରେ ମିଶ୍ରିତ ବିଷୟବସ୍ତୁ ଏବଂ ଏକ ସ୍ଥିର ମୋଟେଇ ସହିତ ଏକ ମ basic ଳିକ କାର୍ଡର ଉଦାହରଣ ଦିଆଯାଇଛି | ଆରମ୍ଭ କରିବାକୁ କାର୍ଡଗୁଡ଼ିକର କ fixed ଣସି ସ୍ଥିର ଓସାର ନାହିଁ, ତେଣୁ ସେମାନେ ସ୍ natural ାଭାବିକ ଭାବରେ ଏହାର ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନର ପୂର୍ଣ୍ଣ ଓସାର ପୂରଣ କରିବେ | ଆମର ବିଭିନ୍ନ ସାଇଜ୍ ଅପ୍ସନ୍ ସହିତ ଏହା ସହଜରେ କଷ୍ଟମାଇଜ୍ ହୋଇଛି |
କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
କ ewhere ଣସି ସ୍ଥାନକୁ ଯାଅ |<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
। ଯେତେବେଳେ ଆପଣ ଏକ କାର୍ଡ ମଧ୍ୟରେ ପ୍ୟାଡ୍ ହୋଇଥିବା ବିଭାଗ ଆବଶ୍ୟକ କରନ୍ତି ଏହାକୁ ବ୍ୟବହାର କରନ୍ତୁ |
<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 ଟ୍ୟାଗ୍ ସହିତ ଷ୍ଟାଇଲ୍ ହୋଇପାରେ |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
<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>
ଗୋଷ୍ଠୀ ତାଲିକା କର |
ଏକ ଫ୍ଲାସ୍ ତାଲିକା ଗୋଷ୍ଠୀ ସହିତ ଏକ କାର୍ଡରେ ବିଷୟବସ୍ତୁର ତାଲିକା ସୃଷ୍ଟି କରନ୍ତୁ |
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
<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>
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
<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>
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
<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 ଳୀ, ଏବଂ ଏକ ତାଲିକା ଗୋଷ୍ଠୀ - ସମସ୍ତେ ଏକ ସ୍ଥିର-ଓସାର କାର୍ଡରେ ଗୁଡ଼ାଇ |
କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
<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>
ହେଡର୍ ଏବଂ ଫୁଟର୍ |
ଏକ କାର୍ଡ ମଧ୍ୟରେ ଏକ ଇଚ୍ଛାଧୀନ ହେଡର୍ ଏବଂ / କିମ୍ବା ଫୁଟର୍ ଯୋଡନ୍ତୁ |
ସ୍ 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>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>
ସ୍ 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-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 ଣସି ସ୍ଥାନକୁ ଯାଅ |<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" href="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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>
ପ୍ରତିଛବିଗୁଡିକ
ଚିତ୍ରଗୁଡ଼ିକ ସହିତ କାମ କରିବା ପାଇଁ କାର୍ଡଗୁଡ଼ିକରେ କିଛି ବିକଳ୍ପ ଅନ୍ତର୍ଭୁକ୍ତ | କାର୍ଡର ଉଭୟ ମୁଣ୍ଡରେ “ଇମେଜ୍ କ୍ୟାପ୍” ଯୋଡିବା, କାର୍ଡ ବିଷୟବସ୍ତୁ ସହିତ ପ୍ରତିଛବିଗୁଡ଼ିକୁ ଓଭରଲିଂ କରିବା, କିମ୍ବା କେବଳ ଏକ କାର୍ଡରେ ପ୍ରତିଛବି ଏମ୍ବେଡ୍ କରିବା ବାଛନ୍ତୁ |
ପ୍ରତିଛବି କ୍ୟାପ୍ |
ହେଡର୍ ଏବଂ ଫୁଟର୍ ପରି, କାର୍ଡଗୁଡ଼ିକ ଉପର ଏବଂ ତଳ “ଇମେଜ୍ କ୍ୟାପ୍” ଅନ୍ତର୍ଭୂକ୍ତ କରିପାରିବ - ଏକ କାର୍ଡର ଉପର କିମ୍ବା ତଳ ଚିତ୍ରଗୁଡ଼ିକ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |
<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 ଳୀ କିମ୍ବା ଉପଯୋଗିତା ଆବଶ୍ୟକ କରିପାରନ୍ତି କିମ୍ବା ଆବଶ୍ୟକ କରିପାରନ୍ତି ନାହିଁ |
<div class="card bg-dark text-white">
<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">Last updated 3 mins ago</p>
</div>
</div>
ଭୂସମାନ୍ତର
ଗ୍ରୀଡ୍ ଏବଂ ୟୁଟିଲିଟି ଶ୍ରେଣୀର ଏକ ମିଶ୍ରଣ ବ୍ୟବହାର କରି, ମୋବାଇଲ୍ ଅନୁକୂଳ ଏବଂ ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପାୟରେ କାର୍ଡଗୁଡିକ ଭୂସମାନ୍ତର କରାଯାଇପାରିବ | ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଆମେ ଗ୍ରୀଡ୍ ଗୁଟରଗୁଡିକ ଅପସାରଣ କରୁ ଏବଂ ବ୍ରେକ୍ ପଏଣ୍ଟରେ କାର୍ଡକୁ ଭୂସମାନ୍ତର କରିବା ପାଇଁ କ୍ଲାସ୍ .g-0
ବ୍ୟବହାର କରୁ | ଆପଣଙ୍କ କାର୍ଡ ବିଷୟବସ୍ତୁ ଉପରେ ନିର୍ଭର କରି ଅଧିକ ସଂଶୋଧନ ଆବଶ୍ୟକ ହୋଇପାରେ |.col-md-*
md
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |
<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 ଳୀ |
କାର୍ଡଗୁଡ଼ିକ ସେମାନଙ୍କର ପୃଷ୍ଠଭୂମି, ସୀମା, ଏବଂ ରଙ୍ଗ କଷ୍ଟୋମାଇଜ୍ କରିବା ପାଇଁ ବିଭିନ୍ନ ବିକଳ୍ପ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |
ପୃଷ୍ଠଭୂମି ଏବଂ ରଙ୍ଗ |
କାର୍ଡର ରୂପ ବଦଳାଇବା ପାଇଁ ପାଠ୍ୟ ରଙ୍ଗ ଏବଂ ପୃଷ୍ଠଭୂମି ଉପଯୋଗୀତା ବ୍ୟବହାର କରନ୍ତୁ |
ପ୍ରାଥମିକ କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
ଦଳୀୟ କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
ସଫଳତା କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
ବିପଦ କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
ଚେତାବନୀ କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
ସୂଚନା କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
ହାଲୁକା କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
ଗା 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-dark 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-dark 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-dark 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>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |
ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .visually-hidden
ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |
ସୀମା
କେବଳ ଏକ କାର୍ଡର ପରିବର୍ତ୍ତନ ପାଇଁ ସୀମା ଉପଯୋଗୀତା ବ୍ୟବହାର କରନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି ଆପଣ ପ୍ୟାରେଣ୍ଟ୍ କିମ୍ବା କାର୍ଡର ବିଷୟବସ୍ତୁର ଏକ ସବ୍ସେଟ୍ ଉପରେ କ୍ଲାସ୍ 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">
<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
|
ସଫଳତା କାର୍ଡ ଆଖ୍ୟା |
କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |
<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
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |
କାର୍ଡ ଆଖ୍ୟା |
ଏହି କାର୍ଡରେ ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ଅଛି |
3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ସେହି ସମାନ ଉଚ୍ଚତା କ୍ରିୟା ଦେଖାଇବାକୁ ପ୍ରଥମ ଅପେକ୍ଷା ଏହି କାର୍ଡରେ ଅଧିକ ବିଷୟବସ୍ତୁ ଅଛି |
3 ମିନିଟ୍ ପୂର୍ବରୁ ଶେଷ ଅଦ୍ୟତନ |
<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>
ଫୁଟର୍ ସହିତ କାର୍ଡ ଗୋଷ୍ଠୀ ବ୍ୟବହାର କରିବାବେଳେ, ସେମାନଙ୍କର ବିଷୟବସ୍ତୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଲାଇନ୍ ଅପ୍ ହେବ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
କାର୍ଡ ଆଖ୍ୟା |
ଏହି କାର୍ଡରେ ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ଅଛି |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ସେହି ସମାନ ଉଚ୍ଚତା କ୍ରିୟା ଦେଖାଇବାକୁ ପ୍ରଥମ ଅପେକ୍ଷା ଏହି କାର୍ଡରେ ଅଧିକ ବିଷୟବସ୍ତୁ ଅଛି |
<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
ମଧ୍ୟମ ବ୍ରେକପଏଣ୍ଟ ଠାରୁ ଆରମ୍ଭ କରି ଏକାଧିକ ଧାଡିରେ ସମାନ ଓସାରରେ ଚାରୋଟି କାର୍ଡ ବିଭାଜନ କରିବା |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
କ���ର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
<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
ଏବଂ ଆପଣ ଚତୁର୍ଥ କାର୍ଡ ରାପ୍ ଦେଖିବେ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
<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%
ସାସରେ ସେଟ୍ କରିପାରିବେ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
କାର୍ଡ ଆଖ୍ୟା |
ଏହା ଏକ ସର୍ଟ କାର୍ଡ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ଲମ୍ବା କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
<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>
ଯେପରି କାର୍ଡ ଗୋଷ୍ଠୀ ସହିତ, କାର୍ଡ ଫୁଟର୍ଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଲାଇନ୍ ହୋଇଯିବ |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ଏହି ବିଷୟବସ୍ତୁ ଟିକିଏ ଲମ୍ବା ଅଟେ |
କାର୍ଡ ଆଖ୍ୟା |
ଏହି କାର୍ଡରେ ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ସହାୟକ ପାଠ୍ୟ ଅଛି |
କାର୍ଡ ଆଖ୍ୟା |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁକୁ ଏକ ପ୍ରାକୃତିକ ଲିଡ୍-ଇନ୍ ଭାବରେ ନିମ୍ନରେ ଥିବା ପାଠ୍ୟ ସହିତ ଏହା ଏକ ବ୍ୟାପକ କାର୍ଡ | ସେହି ସମାନ ଉଚ୍ଚତା କ୍ରିୟା ଦେଖାଇବାକୁ ପ୍ରଥମ ଅପେକ୍ଷା ଏହି କାର୍ଡରେ ଅଧିକ ବିଷୟବସ୍ତୁ ଅଛି |
<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
, ତେବେ ଆପଣ କେବଳ ମେସନ୍ରି ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିପାରିବେ | ମାନସ ବୁଟଷ୍ଟ୍ରାପରେ ଅନ୍ତର୍ଭୂକ୍ତ ନୁହେଁ , କିନ୍ତୁ ଆପଣଙ୍କୁ ଆରମ୍ଭ କରିବାରେ ସାହାଯ୍ୟ କରିବାକୁ ଆମେ ଏକ ଡେମୋ ଉଦାହରଣ କରିଛୁ |
ସାସ୍ |
ଭେରିଏବଲ୍ |
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$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;