Source

ಕಾರ್ಡ್‌ಗಳು

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

ಬಗ್ಗೆ

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

ಉದಾಹರಣೆ

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

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

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

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

ಟ್ಯಾಗ್‌ಗೆ 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 ಟ್ಯಾಗ್‌ಗಳೊಂದಿಗೆ ಶೈಲಿ ಮಾಡಬಹುದು.

Placeholder Image cap

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

<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">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>
ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಲಾಗಿದೆ
  • ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
  • ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
  • ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್
<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>

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

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

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

  • ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
  • ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
  • ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್
<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">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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ಚಿತ್ರಗಳು

ಚಿತ್ರಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಕಾರ್ಡ್‌ಗಳು ಕೆಲವು ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಕಾರ್ಡ್‌ನ ಎರಡೂ ತುದಿಯಲ್ಲಿ "ಇಮೇಜ್ ಕ್ಯಾಪ್ಸ್" ಅನ್ನು ಸೇರಿಸುವುದರಿಂದ, ಕಾರ್ಡ್ ವಿಷಯದೊಂದಿಗೆ ಚಿತ್ರಗಳನ್ನು ಓವರ್‌ಲೇ ಮಾಡುವುದು ಅಥವಾ ಕಾರ್ಡ್‌ನಲ್ಲಿ ಚಿತ್ರವನ್ನು ಎಂಬೆಡ್ ಮಾಡುವುದರಿಂದ ಆರಿಸಿಕೊಳ್ಳಿ.

ಚಿತ್ರ ಕ್ಯಾಪ್ಸ್

ಹೆಡರ್‌ಗಳು ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳಂತೆಯೇ, ಕಾರ್ಡ್‌ಗಳು ಮೇಲಿನ ಮತ್ತು ಕೆಳಗಿನ “ಇಮೇಜ್ ಕ್ಯಾಪ್‌ಗಳನ್ನು” ಒಳಗೊಂಡಿರಬಹುದು - ಕಾರ್ಡ್‌ನ ಮೇಲ್ಭಾಗ ಅಥವಾ ಕೆಳಭಾಗದಲ್ಲಿರುವ ಚಿತ್ರಗಳು.

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

Placeholder Image cap
<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-top" alt="...">
</div>

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

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

Placeholder Card image
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

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

ವಿಷಯವು ಚಿತ್ರದ ಎತ್ತರಕ್ಕಿಂತ ದೊಡ್ಡದಾಗಿರಬಾರದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ವಿಷಯವು ಚಿತ್ರಕ್ಕಿಂತ ದೊಡ್ಡದಾಗಿದ್ದರೆ ವಿಷಯವನ್ನು ಚಿತ್ರದ ಹೊರಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

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

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

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

ಕಾರ್ಡ್‌ನ ನೋಟವನ್ನು ಬದಲಾಯಿಸಲು ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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;ತಮ್ಮ ಏಕರೂಪದ ಗಾತ್ರವನ್ನು ಸಾಧಿಸಲು ಬಳಸುತ್ತವೆ.

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

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>

ಅಡಿಟಿಪ್ಪಣಿಗಳೊಂದಿಗೆ ಕಾರ್ಡ್ ಗುಂಪುಗಳನ್ನು ಬಳಸುವಾಗ, ಅವರ ವಿಷಯವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಾಲಿನಲ್ಲಿರುತ್ತದೆ.

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

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

ಕಾರ್ಡ್ ಡೆಕ್ಗಳು

ಒಂದಕ್ಕೊಂದು ಜೋಡಿಸದ ಸಮಾನ ಅಗಲ ಮತ್ತು ಎತ್ತರದ ಕಾರ್ಡ್‌ಗಳ ಸೆಟ್ ಬೇಕೇ? ಕಾರ್ಡ್ ಡೆಕ್ಗಳನ್ನು ಬಳಸಿ.

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

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

ಕಾರ್ಡ್ ಗುಂಪುಗಳಂತೆಯೇ, ಡೆಕ್‌ಗಳಲ್ಲಿನ ಕಾರ್ಡ್ ಅಡಿಟಿಪ್ಪಣಿಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಾಲಿನಲ್ಲಿರುತ್ತವೆ.

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

<div class="card-deck">
  <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>

ಕಾರ್ಡ್ ಕಾಲಮ್ಗಳು

ಕಾರ್ಡ್‌ಗಳನ್ನು ಮ್ಯಾಸನ್ರಿ ತರಹದ ಕಾಲಮ್‌ಗಳಲ್ಲಿ ಸುತ್ತುವ ಮೂಲಕ ಕೇವಲ CSS ನೊಂದಿಗೆ ಆಯೋಜಿಸಬಹುದು .card-columns. columnಸುಲಭವಾದ ಜೋಡಣೆಗಾಗಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನ ಬದಲಿಗೆ CSS ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಕಾರ್ಡ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲಾಗಿದೆ . ಕಾರ್ಡ್‌ಗಳನ್ನು ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಮತ್ತು ಎಡದಿಂದ ಬಲಕ್ಕೆ ಆದೇಶಿಸಲಾಗುತ್ತದೆ.

ತಲೆ ಎತ್ತಿ! ಕಾರ್ಡ್ ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಮೈಲೇಜ್ ಬದಲಾಗಬಹುದು. ಕಾರ್ಡ್‌ಗಳು ಕಾಲಮ್‌ಗಳಾದ್ಯಂತ ಒಡೆಯುವುದನ್ನು ತಡೆಯಲು, ನಾವು ಅವುಗಳನ್ನು ಇನ್ನೂ ಬುಲೆಟ್‌ಪ್ರೂಫ್ ಪರಿಹಾರವಲ್ಲ display: inline-blockಎಂದು ಹೊಂದಿಸಬೇಕು.column-break-inside: avoid

Placeholder Image cap
ಹೊಸ ಸಾಲಿಗೆ ಸುತ್ತುವ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಸಂಖ್ಯೆಯು ಹಿಂದಿನದು.

ಮೂಲ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಯಾರೋ ಪ್ರಸಿದ್ಧರು
Placeholder Image cap
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಾಂಕ ಕ್ರಮಾಂಕ.

ಮೂಲ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಯಾರೋ ಪ್ರಸಿದ್ಧರು
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

ಈ ಕಾರ್ಡ್ ಸಾಮಾನ್ಯ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಅದರ ಕೆಳಗೆ ಪಠ್ಯದ ಚಿಕ್ಕ ಪ್ಯಾರಾಗ್ರಾಫಿಯನ್ನು ಹೊಂದಿದೆ.

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

Placeholder Card image

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಸಂಖ್ಯೆಯು ಹಿಂದಿನದು.

ಮೂಲ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಯಾರೋ ಪ್ರಸಿದ್ಧರು
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ

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

3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 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 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 text-white">
        <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 a regular title and short paragraphy of text below it.</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>
  <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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</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;
  }
}