ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
Check
in English

ಕಾರ್ಡ್‌ಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕಾರ್ಡ್‌ಗಳು ಬಹು ರೂಪಾಂತರಗಳು ಮತ್ತು ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದಾದ ವಿಷಯ ಧಾರಕವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಈ ಪುಟದಲ್ಲಿ

ಬಗ್ಗೆ

ಕಾರ್ಡ್ ಒಂದು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದಾದ ವಿಷಯ ಧಾರಕವಾಗಿದೆ. ಇದು ಹೆಡರ್‌ಗಳು ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳ ಆಯ್ಕೆಗಳು, ವೈವಿಧ್ಯಮಯ ವಿಷಯಗಳು, ಸಂದರ್ಭೋಚಿತ ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳು ಮತ್ತು ಶಕ್ತಿಯುತ ಪ್ರದರ್ಶನ ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ನಿಮಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 3 ಪರಿಚಯವಿದ್ದರೆ, ಕಾರ್ಡ್‌ಗಳು ನಮ್ಮ ಹಳೆಯ ಪ್ಯಾನೆಲ್‌ಗಳು, ಬಾವಿಗಳು ಮತ್ತು ಥಂಬ್‌ನೇಲ್‌ಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ. ಆ ಘಟಕಗಳಿಗೆ ಹೋಲುವ ಕಾರ್ಯವು ಕಾರ್ಡ್‌ಗಳಿಗೆ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳಾಗಿ ಲಭ್ಯವಿದೆ.

ಉದಾಹರಣೆ

ಕಾರ್ಡ್‌ಗಳನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಕಡಿಮೆ ಮಾರ್ಕ್‌ಅಪ್ ಮತ್ತು ಶೈಲಿಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಆದರೆ ಇನ್ನೂ ಒಂದು ಟನ್ ನಿಯಂತ್ರಣ ಮತ್ತು ಗ್ರಾಹಕೀಕರಣವನ್ನು ನೀಡಲು ನಿರ್ವಹಿಸುತ್ತದೆ. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಅವು ಸುಲಭವಾದ ಜೋಡಣೆಯನ್ನು ನೀಡುತ್ತವೆ ಮತ್ತು ಇತರ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕಗಳೊಂದಿಗೆ ಚೆನ್ನಾಗಿ ಮಿಶ್ರಣ ಮಾಡುತ್ತವೆ. ಅವರು marginಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಯಾವುದೇ ಹೊಂದಿಲ್ಲ, ಆದ್ದರಿಂದ ಅಗತ್ಯವಿರುವಷ್ಟು ಅಂತರ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ .

ಮಿಶ್ರ ವಿಷಯ ಮತ್ತು ಸ್ಥಿರ ಅಗಲದೊಂದಿಗೆ ಮೂಲ ಕಾರ್ಡ್‌ನ ಉದಾಹರಣೆ ಕೆಳಗೆ ಇದೆ. ಕಾರ್ಡ್‌ಗಳು ಪ್ರಾರಂಭಿಸಲು ಯಾವುದೇ ಸ್ಥಿರ ಅಗಲವನ್ನು ಹೊಂದಿಲ್ಲ, ಆದ್ದರಿಂದ ಅವು ನೈಸರ್ಗಿಕವಾಗಿ ಅದರ ಮೂಲ ಅಂಶದ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ತುಂಬುತ್ತವೆ. ನಮ್ಮ ವಿವಿಧ ಗಾತ್ರದ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಇದನ್ನು ಸುಲಭವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಲಾಗಿದೆ .

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>
    <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>

ಟ್ಯಾಗ್‌ಗೆ 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, ಪಠ್ಯವನ್ನು ಕಾರ್ಡ್‌ಗೆ ಸೇರಿಸಬಹುದು. ಸ್ಟ್ಯಾಂಡರ್ಡ್ HTML ಟ್ಯಾಗ್‌ಗಳೊಂದಿಗೆ ಪಠ್ಯವನ್ನು .card-textಸಹ ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು.

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>
ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಲಾಗಿದೆ
  • ಒಂದು ಐಟಂ
  • ಎರಡನೇ ಐಟಂ
  • ಮೂರನೇ ಐಟಂ
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>

ಅಡುಗೆಮನೆಯ ತೊಟ್ಟಿ

ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಕಾರ್ಡ್ ರಚಿಸಲು ಹಲವಾರು ವಿಷಯ ಪ್ರಕಾರಗಳನ್ನು ಮಿಶ್ರಣ ಮಾಡಿ ಮತ್ತು ಹೊಂದಿಸಿ ಅಥವಾ ಎಲ್ಲವನ್ನೂ ಅಲ್ಲಿ ಎಸೆಯಿರಿ. ಕೆಳಗೆ ತೋರಿಸಿರುವ ಚಿತ್ರ ಶೈಲಿಗಳು, ಬ್ಲಾಕ್‌ಗಳು, ಪಠ್ಯ ಶೈಲಿಗಳು ಮತ್ತು ಪಟ್ಟಿ ಗುಂಪು-ಎಲ್ಲವೂ ಸ್ಥಿರ-ಅಗಲ ಕಾರ್ಡ್‌ನಲ್ಲಿ ಸುತ್ತಿವೆ.

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>

ಕಾರ್ಡ್‌ನಲ್ಲಿ ಐಚ್ಛಿಕ ಹೆಡರ್ ಮತ್ತು/ಅಥವಾ ಅಡಿಟಿಪ್ಪಣಿ ಸೇರಿಸಿ.

ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಲಾಗಿದೆ
ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
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*>

ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಲಾಗಿದೆ
ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
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>
ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಲಾಗಿದೆ
ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
2 ದಿನಗಳ ಹಿಂದೆ
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ಪ್ರಾರಂಭಿಸಲು ಯಾವುದೇ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಹೊಂದಿಲ್ಲ, ಆದ್ದರಿಂದ ಹೇಳದ ಹೊರತು ಅವು 100% ಅಗಲವಾಗಿರುತ್ತದೆ. ಕಸ್ಟಮ್ CSS, ಗ್ರಿಡ್ ತರಗತಿಗಳು, ಗ್ರಿಡ್ ಸಾಸ್ ಮಿಕ್ಸಿನ್‌ಗಳು ಅಥವಾ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ನೀವು ಇದನ್ನು ಅಗತ್ಯವಿರುವಂತೆ ಬದಲಾಯಿಸಬಹುದು.

ಗ್ರಿಡ್ ಮಾರ್ಕ್ಅಪ್ ಬಳಸುವುದು

ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸಿ, ಅಗತ್ಯವಿರುವಂತೆ ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಸಾಲುಗಳಲ್ಲಿ ಕಾರ್ಡ್‌ಗಳನ್ನು ಸುತ್ತಿ.

ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
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 ಅನ್ನು ಬಳಸುವುದು

ಅಗಲವನ್ನು ಹೊಂದಿಸಲು ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳಲ್ಲಿ ಅಥವಾ ಇನ್‌ಲೈನ್ ಶೈಲಿಗಳಲ್ಲಿ ಕಸ್ಟಮ್ CSS ಬಳಸಿ.

ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
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>

ಪಠ್ಯ ಜೋಡಣೆ

ನೀವು ಯಾವುದೇ ಕಾರ್ಡ್‌ನ ಪಠ್ಯ ಜೋಡಣೆಯನ್ನು ತ್ವರಿತವಾಗಿ ಬದಲಾಯಿಸಬಹುದು—ಅದರ ಸಂಪೂರ್ಣ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳಲ್ಲಿ—ನಮ್ಮ ಪಠ್ಯದ ಅಲೈನ್ ತರಗತಿಗಳೊಂದಿಗೆ .

ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
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>

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ನ್ಯಾವ್ ಘಟಕಗಳೊಂದಿಗೆ ಕಾರ್ಡ್‌ನ ಹೆಡರ್ (ಅಥವಾ ಬ್ಲಾಕ್) ಗೆ ಕೆಲವು ನ್ಯಾವಿಗೇಷನ್ ಸೇರಿಸಿ .

ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
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>
ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ

ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್‌ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.

ಎಲ್ಲಿಯಾದರೂ ಹೋಗು
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>

ಚಿತ್ರದ ಮೇಲ್ಪದರಗಳು

ಚಿತ್ರವನ್ನು ಕಾರ್ಡ್ ಹಿನ್ನೆಲೆಗೆ ತಿರುಗಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕಾರ್ಡ್‌ನ ಪಠ್ಯವನ್ನು ಓವರ್‌ಲೇ ಮಾಡಿ. ಚಿತ್ರವನ್ನು ಅವಲಂಬಿಸಿ, ನಿಮಗೆ ಹೆಚ್ಚುವರಿ ಶೈಲಿಗಳು ಅಥವಾ ಉಪಯುಕ್ತತೆಗಳು ಬೇಕಾಗಬಹುದು ಅಥವಾ ಅಗತ್ಯವಿಲ್ಲದಿರಬಹುದು.

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>

ಕಾರ್ಡ್ ಶೈಲಿಗಳು

ಕಾರ್ಡ್‌ಗಳು ತಮ್ಮ ಹಿನ್ನೆಲೆಗಳು, ಗಡಿಗಳು ಮತ್ತು ಬಣ್ಣವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ವಿವಿಧ ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ.

ಹಿನ್ನೆಲೆ ಮತ್ತು ಬಣ್ಣ

v5.2.0 ರಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ

ನಮ್ಮ ಸಹಾಯಕರೊಂದಿಗೆ background-colorವ್ಯತಿರಿಕ್ತ ಮುಂಭಾಗವನ್ನು ಹೊಂದಿಸಿ . ಈ ಹಿಂದೆ ನಿಮ್ಮ ಆಯ್ಕೆಯ ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ಹಸ್ತಚಾಲಿತವಾಗಿ ಜೋಡಿಸುವ ಅಗತ್ಯವಿತ್ತು , ನೀವು ಬಯಸಿದಲ್ಲಿ ಅದನ್ನು ನೀವು ಇನ್ನೂ ಬಳಸಬಹುದು.color.text-bg-{color}.text-{color}.bg-{color}

ಶಿರೋಲೇಖ
ಪ್ರಾಥಮಿಕ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ದ್ವಿತೀಯ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಯಶಸ್ಸಿನ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಡೇಂಜರ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಎಚ್ಚರಿಕೆ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಮಾಹಿತಿ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಲೈಟ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಡಾರ್ಕ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

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

ಶಿರೋಲೇಖ
ಪ್ರಾಥಮಿಕ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ದ್ವಿತೀಯ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಯಶಸ್ಸಿನ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಡೇಂಜರ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಎಚ್ಚರಿಕೆ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಮಾಹಿತಿ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಲೈಟ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

ಶಿರೋಲೇಖ
ಡಾರ್ಕ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್‌ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.

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
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.

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>
    </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, ಕಾರ್ಡ್‌ಗಳಿಗೆ ಸೇರಿಸಿ. ನೀವು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಸಮಾನ ಎತ್ತರಗಳನ್ನು ಬಯಸಿದರೆ, ನೀವು Sass ನಲ್ಲಿ ಹೊಂದಿಸಬಹುದು $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
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಈ ಕಾರ್ಡ್ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿದೆ.

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಸಮಾನ ಎತ್ತರದ ಕ್ರಿಯೆಯನ್ನು ತೋರಿಸಲು ಈ ಕಾರ್ಡ್ ಮೊದಲನೆಯದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ವಿಷಯವನ್ನು ಹೊಂದಿದೆ.

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
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-ಮಾತ್ರ ತಂತ್ರವನ್ನು ಬಳಸಿದ್ದೇವೆ , ಆದರೆ ಈ ತಂತ್ರವು ಸಾಕಷ್ಟು ಅಹಿತಕರ ಅಡ್ಡ ಪರಿಣಾಮಗಳೊಂದಿಗೆ ಬಂದಿದೆ . ನೀವು ಈ ರೀತಿಯ ಲೇಔಟ್ ಅನ್ನು ಹೊಂದಲು ಬಯಸಿದರೆ , ನೀವು ಮ್ಯಾಸನ್ರಿ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಕಲ್ಲುಗಳನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಸೇರಿಸಲಾಗಿಲ್ಲ , ಆದರೆ ನೀವು ಪ್ರಾರಂಭಿಸಲು ಸಹಾಯ ಮಾಡಲು ನಾವು ಡೆಮೊ ಉದಾಹರಣೆಯನ್ನು ಮಾಡಿದ್ದೇವೆ .v5

CSS

ಅಸ್ಥಿರ

v5.2.0 ರಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವಿಕಾಸಗೊಳ್ಳುತ್ತಿರುವ CSS ಅಸ್ಥಿರ ವಿಧಾನದ ಭಾಗವಾಗಿ, .cardವರ್ಧಿತ ನೈಜ-ಸಮಯದ ಗ್ರಾಹಕೀಕರಣಕ್ಕಾಗಿ ಕಾರ್ಡ್‌ಗಳು ಈಗ ಸ್ಥಳೀಯ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. CSS ವೇರಿಯೇಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು Sass ಮೂಲಕ ಹೊಂದಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ Sass ಗ್ರಾಹಕೀಕರಣವು ಇನ್ನೂ ಬೆಂಬಲಿತವಾಗಿದೆ.

  --#{$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;