in English

Καρτέλλες

Οι κάρτες του Bootstrap παρέχουν ένα ευέλικτο και επεκτάσιμο κοντέινερ περιεχομένου με πολλές παραλλαγές και επιλογές.

Σχετικά με

Η κάρτα είναι ένα ευέλικτο και επεκτάσιμο κοντέινερ περιεχομένου. Περιλαμβάνει επιλογές για κεφαλίδες και υποσέλιδα, μεγάλη ποικιλία περιεχομένου, χρώματα φόντου με βάση τα συμφραζόμενα και ισχυρές επιλογές εμφάνισης. Εάν είστε εξοικειωμένοι με το Bootstrap 3, οι κάρτες αντικαθιστούν τα παλιά μας πάνελ, πηγάδια και μικρογραφίες. Παρόμοια λειτουργικότητα με αυτά τα στοιχεία είναι διαθέσιμη ως κατηγορίες τροποποιητών για κάρτες.

Παράδειγμα

Οι κάρτες κατασκευάζονται με όσο το δυνατόν λιγότερη σήμανση και στυλ, αλλά εξακολουθούν να καταφέρνουν να προσφέρουν έναν τόνο ελέγχου και προσαρμογής. Χτισμένα με flexbox, προσφέρουν εύκολη ευθυγράμμιση και αναμειγνύονται καλά με άλλα εξαρτήματα Bootstrap. Δεν έχουν marginαπό προεπιλογή, επομένως χρησιμοποιήστε βοηθητικά προγράμματα Spacing όπως απαιτείται.

Παρακάτω είναι ένα παράδειγμα βασικής κάρτας με μικτό περιεχόμενο και σταθερό πλάτος. Οι κάρτες δεν έχουν σταθερό πλάτος για να ξεκινήσουν, επομένως θα γεμίσουν φυσικά όλο το πλάτος του γονικού τους στοιχείου. Αυτό προσαρμόζεται εύκολα με τις διάφορες επιλογές μεγεθών που διαθέτουμε .

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>ετικέτα.

Οι υπότιτλοι χρησιμοποιούνται με την προσθήκη ενός .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>

Λίστα ομάδων

Δημιουργήστε λίστες περιεχομένου σε μια κάρτα με μια ομάδα flush list.

  • Ενα αντικείμενο
  • Ένα δεύτερο στοιχείο
  • Ένα τρίτο στοιχείο
<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>

Ο νεροχύτης της κουζίνας

Ανακατέψτε και αντιστοιχίστε πολλούς τύπους περιεχομένου για να δημιουργήσετε την κάρτα που χρειάζεστε ή πετάξτε τα πάντα εκεί. Παρακάτω εμφανίζονται στυλ εικόνων, μπλοκ, στυλ κειμένου και μια ομάδα λίστας—όλα τυλιγμένα σε μια κάρτα σταθερού πλάτους.

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

Προσθέστε μια προαιρετική κεφαλίδα ή/και υποσέλιδο σε μια κάρτα.

Προτεινόμενα
Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου
<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>
Παραθέτω, αναφορά

Ένα πολύ γνωστό απόσπασμα, που περιέχεται σε ένα στοιχείο blockquote.

Κάποιος διάσημος στον τίτλο πηγής
<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>
Προτεινόμενα
Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου
<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, κλάσεις πλέγματος, μίξεις πλέγματος Sass ή βοηθητικά προγράμματα.

Χρήση σήμανσης πλέγματος

Χρησιμοποιώντας το πλέγμα, τυλίξτε τις κάρτες σε στήλες και σειρές όπως απαιτείται.

Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου
Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου
<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>

Προσθέστε κάποια πλοήγηση στην κεφαλίδα (ή μπλοκ) μιας κάρτας με τα στοιχεία πλοήγησης του Bootstrap .

Ειδική μεταχείριση τίτλου

Με υποστηρικτικό κείμενο παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Πάω κάπου
<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">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">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-bottom" 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>
Σημειώστε ότι το περιεχόμενο δεν πρέπει να είναι μεγαλύτερο από το ύψος της εικόνας. Εάν το περιεχόμενο είναι μεγαλύτερο από την εικόνα, το περιεχόμενο θα εμφανίζεται έξω από την εικόνα.

Οριζόντιος

Χρησιμοποιώντας έναν συνδυασμό κλάσεων πλέγματος και χρησιμότητας, οι κάρτες μπορούν να γίνουν οριζόντιες με τρόπο φιλικό προς τα κινητά και απόκριση. Στο παρακάτω παράδειγμα, αφαιρούμε τις υδρορροές πλέγματος με .no-guttersκαι χρησιμοποιούμε .col-md-*κλάσεις για να κάνουμε την κάρτα οριζόντια στο mdσημείο διακοπής. Μπορεί να χρειαστούν περαιτέρω προσαρμογές ανάλογα με το περιεχόμενο της κάρτας σας.

Placeholder Image
Τίτλος κάρτας

Αυτή είναι μια ευρύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτό το περιεχόμενο είναι λίγο μεγαλύτερο.

Τελευταία ενημέρωση πριν από 3 λεπτά

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." 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>

Στυλ καρτών

Οι κάρτες περιλαμβάνουν διάφορες επιλογές για την προσαρμογή του φόντου, των περιγραμμάτων και του χρώματός τους.

Φόντο και χρώμα

Χρησιμοποιήστε βοηθητικά προγράμματα κειμένου και φόντου για να αλλάξετε την εμφάνιση μιας κάρτας.

Επί κεφαλής
Κύριος τίτλος κάρτας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Δευτερεύων τίτλος κάρτας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος κάρτας επιτυχίας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος κάρτας κινδύνου

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος προειδοποιητικής κάρτας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος κάρτας πληροφοριών

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος κάρτας Light

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος σκοτεινής κάρτας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

<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ή ένα υποσύνολο των περιεχομένων της κάρτας όπως φαίνεται παρακάτω.

Επί κεφαλής
Κύριος τίτλος κάρτας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Δευτερεύων τίτλος κάρτας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος κάρτας επιτυχίας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος κάρτας κινδύνου

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος προειδοποιητικής κάρτας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος κάρτας πληροφοριών

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος κάρτας Light

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

Επί κεφαλής
Τίτλος σκοτεινής κάρτας

Κάποιο σύντομο παράδειγμα κειμένου που θα βασίζεται στον τίτλο της κάρτας και θα αποτελεί το μεγαλύτερο μέρος του περιεχομένου της κάρτας.

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

Διάταξη κάρτας

Εκτός από το στυλ του περιεχομένου μέσα στις κάρτες, το Bootstrap περιλαμβάνει μερικές επιλογές για την τοποθέτηση σειρών καρτών. Προς το παρόν, αυτές οι επιλογές διάταξης δεν αποκρίνονται ακόμη .

Ομάδες καρτών

Χρησιμοποιήστε ομάδες καρτών για να αποδώσετε τις κάρτες ως ένα ενιαίο, προσαρτημένο στοιχείο με στήλες ίσου πλάτους και ύψους. Οι ομάδες καρτών ξεκινούν στοιβαγμένες και τις χρησιμοποιούν display: flex;για να συνδεθούν με ομοιόμορφες διαστάσεις ξεκινώντας από το smσημείο διακοπής.

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>

Κάρτες πλέγματος

Χρησιμοποιήστε το σύστημα πλέγματος Bootstrap και τις .row-colsκλάσεις του για να ελέγξετε πόσες στήλες πλέγματος (τυλιγμένες γύρω από τις κάρτες σας) θα εμφανίσετε ανά σειρά. Για παράδειγμα, ορίστε .row-cols-1τα φύλλα σε μια στήλη και .row-cols-md-2χωρίστε τέσσερα φύλλα σε ίσο πλάτος σε πολλές σειρές, από το μεσαίο σημείο διακοπής προς τα πάνω.

Placeholder Image cap
Τίτλος κάρτας

Αυτή είναι μια μεγαλύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτό το περιεχόμενο είναι λίγο μεγαλύτερο.

Placeholder Image cap
Τίτλος κάρτας

Αυτή είναι μια μεγαλύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτό το περιεχόμενο είναι λίγο μεγαλύτερο.

Placeholder Image cap
Τίτλος κάρτας

Αυτή είναι μια μεγαλύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Placeholder Image cap
Τίτλος κάρτας

Αυτή είναι μια μεγαλύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτό το περιεχόμενο είναι λίγο μεγαλύτερο.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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
Τίτλος κάρτας

Αυτή είναι μια μεγαλύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτό το περιεχόμενο είναι λίγο μεγαλύτερο.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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%στο Sass.

Placeholder Image cap
Τίτλος κάρτας

Αυτή είναι μια μεγαλύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτό το περιεχόμενο είναι λίγο μεγαλύτερο.

Placeholder Image cap
Τίτλος κάρτας

Αυτή είναι μια σύντομη κάρτα.

Placeholder Image cap
Τίτλος κάρτας

Αυτή είναι μια μεγαλύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Placeholder Image cap
Τίτλος κάρτας

Αυτή είναι μια μεγαλύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτό το περιεχόμενο είναι λίγο μεγαλύτερο.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Στήλες καρτών

Οι κάρτες μπορούν να οργανωθούν σε στήλες που μοιάζουν με τοιχοποιία.card-columns με μόνο CSS, τυλίγοντάς τις σε . Οι κάρτες είναι κατασκευασμένες με columnιδιότητες CSS αντί για flexbox για ευκολότερη ευθυγράμμιση. Οι κάρτες ταξινομούνται από πάνω προς τα κάτω και από αριστερά προς τα δεξιά.

Ψηλά το κεφάλι! Τα χιλιόμετρα με τις στήλες καρτών μπορεί να διαφέρουν. Για να αποτρέψουμε το σπάσιμο των φύλλων μεταξύ των στηλών, πρέπει να τις ορίσουμε σε display: inline-blockότι column-break-inside: avoidδεν είναι ακόμα αλεξίσφαιρη λύση.

Placeholder Image cap
Τίτλος κάρτας που αναδιπλώνεται σε νέα γραμμή

Αυτή είναι μια μεγαλύτερη κάρτα με κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο. Αυτό το περιεχόμενο είναι λίγο μεγαλύτερο.

Ένα πολύ γνωστό απόσπασμα, που περιέχεται σε ένα στοιχείο blockquote.

Κάποιος διάσημος στον τίτλο πηγής
Placeholder Image cap
Τίτλος κάρτας

Αυτή η κάρτα έχει κείμενο υποστήριξης παρακάτω ως φυσικό οδηγό σε πρόσθετο περιεχόμενο.

Τελευταία ενημέρωση πριν από 3 λεπτά

Ένα πολύ γνωστό απόσπασμα, που περιέχεται σε ένα στοιχείο blockquote.

Κάποιος διάσημος στον τίτλο πηγής
Τίτλος κάρτας

Αυτή η κάρτα έχει έναν κανονικό τίτλο και μια σύντομη παράγραφο κειμένου κάτω από αυτήν.

Τελευταία ενημέρωση πριν από 3 λεπτά

Placeholder Card image

Ένα πολύ γνωστό απόσπασμα, που περιέχεται σε ένα στοιχείο blockquote.

Κάποιος διάσημος στον τίτλο πηγής
Τίτλος κάρτας

Αυτή είναι μια άλλη κάρτα με τίτλο και υποστηρικτικό κείμενο παρακάτω. Αυτή η κάρτα έχει κάποιο πρόσθετο περιεχόμενο για να την κάνει ελαφρώς ψηλότερη συνολικά.

Τελευταία ενημέρωση πριν από 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>A well-known quote, contained in a blockquote element.</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>A well-known quote, contained in a blockquote element.</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" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</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;
  }
}