Το σύστημα πλέγματος του Bootstrap είναι κατασκευασμένο με flexbox και επιτρέπει έως και 12 στήλες σε όλη τη σελίδα.
Εάν δεν θέλετε να χρησιμοποιήσετε και τις 12 στήλες μεμονωμένα, μπορείτε να ομαδοποιήσετε τις στήλες μαζί για να δημιουργήσετε ευρύτερες στήλες:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Το σύστημα πλέγματος αποκρίνεται και οι στήλες θα αναδιατάσσονται αυτόματα ανάλογα με το μέγεθος της οθόνης.
Βεβαιωθείτε ότι το άθροισμα είναι 12 ή λιγότερες (δεν απαιτείται να χρησιμοποιήσετε και τις 12 διαθέσιμες στήλες).
Το σύστημα πλέγματος Bootstrap 5 έχει έξι κατηγορίες:
.col- (εξαιρετικά μικρές συσκευές - πλάτος οθόνης μικρότερο από 576 εικονοστοιχεία)
.col-sm- (μικρές συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 576 εικονοστοιχεία)
.col-md- (μεσαίες συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 768 pixel)
.col-lg- (μεγάλες συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 992 pixel)
.col-xl- (xlarge συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 1200 px)
.col-xxl- (xxlarge συσκευές - πλάτος οθόνης ίσο ή μεγαλύτερο από 1400 px)
Οι παραπάνω κλάσεις μπορούν να συνδυαστούν για να δημιουργήσουν πιο δυναμικές και ευέλικτες διατάξεις.
Συμβουλή: Κάθε τάξη κλιμακώνεται, οπότε αν θέλετε να ορίσετε τα ίδια πλάτη για sm και md, χρειάζεται μόνο να καθορίσετε sm.
Ακολουθεί μια βασική δομή ενός πλέγματος Bootstrap 5:
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Basic Grid Structure</h1>
<p>Resize the browser window to see the effect.</p>
<p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6 bg-primary text-white">50%</div>
<div class="col-sm-6 bg-dark text-white">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 bg-primary text-white">33.33%</div>
<div class="col-sm-4 bg-dark text-white">33.33%</div>
<div class="col-sm-4 bg-primary text-white">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
</div>
<br>
<div class="row">
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
</div>
</div>
</body>
</html>
Πρώτο παράδειγμα: δημιουργήστε μια σειρά (<div class="row">). Στη συνέχεια, προσθέστε τον επιθυμητό αριθμό στηλών (ετικέτες με κατάλληλες κλάσεις .col-*-*). Το πρώτο αστέρι (*) αντιπροσωπεύει την ανταπόκριση: sm, md, lg, xl ή xxl, ενώ το δεύτερο αστέρι αντιπροσωπεύει έναν αριθμό, ο οποίος θα πρέπει να αθροίζεται σε 12 για κάθε σειρά.
Δεύτερο παράδειγμα: αντί να προσθέτετε έναν αριθμό σε κάθε col, αφήστε το bootstrap να χειριστεί τη διάταξη, για να δημιουργήσει στήλες ίσου πλάτους: δύο " col" στοιχεία=50% πλάτος σε κάθε στήλη, ενώ τρεις στήλες=33,33% πλάτος σε κάθε στήλη. Τέσσερα cols=25% πλάτος κ.λπ. Μπορείτε επίσης να χρησιμοποιήσετε το .col-sm|md|lg|xl|xxl για να κάνετε τις στήλες να αποκρίνονται.
Ο παρακάτω πίνακας συνοψίζει πώς λειτουργεί το σύστημα πλέγματος Bootstrap 5 σε διαφορετικά μεγέθη οθόνης:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | XXL (>=1400px) | |
|---|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes | Yes |