Οδηγός Bootstrap
Ένας οδηγός αναφοράς Bootstrap 5.3 με δυνατότητα αναζήτησης και εκτύπωσης — πλέγμα, αποστάσεις, τυπογραφία, χρώματα, βοηθήματα flex, κουμπιά, φόρμες και στοιχεία. Δωρεάν.
Grid & διάταξη
12<div class="container">
Responsive container σταθερού πλάτους
<div class="container-fluid">
Container πλήρους πλάτους σε κάθε breakpoint
<div class="container-md">
100% πλάτος μέχρι το md breakpoint
<div class="row">
Grid row, περιέχει columns
<div class="col">
Auto column ίσου πλάτους
<div class="col-6">
Καλύπτει 6 από 12 columns
<div class="col-md-4">
4 columns από το md breakpoint και πάνω
<div class="col-auto">
Column με μέγεθος του περιεχομένου του
<div class="offset-md-2">
Push column κατά 2 columns δεξιά
<div class="row g-3">
Gutter απόσταση μεταξύ columns
<div class="row row-cols-3">
Επιβολή 3 ίσων columns ανά row
<div class="order-2">
Αναδιάταξη flex/grid column
Βοηθητικά spacing
12m-3
Margin σε όλες τις πλευρές (κλίμακα 0-5)
mt-2
Margin top
mx-auto
Auto οριζόντια margins για κεντράρισμα
p-4
Padding σε όλες τις πλευρές
py-2
Κατακόρυφο padding (πάνω και κάτω)
ms-3
Margin start (αριστερά σε LTR, RTL-aware)
me-3
Margin end (δεξιά σε LTR, RTL-aware)
ps-2
Padding start, RTL-aware
pe-2
Padding end, RTL-aware
gap-3
Gap μεταξύ flex/grid στοιχείων
m-n1
Αρνητικό margin
p-md-5
Responsive padding από md και πάνω
Τυπογραφία
14<h1>..<h6>
Επίπεδα heading με προεπιλεγμένο styling
<p class="display-1">
Μεγάλο display heading (display-1..6)
<p class="lead">
Ξεχωριστή lead παράγραφος
fw-bold
Bold βάρος γραμματοσειράς
fw-semibold
Semibold βάρος γραμματοσειράς
fst-italic
Italic στυλ γραμματοσειράς
text-center
Κεντράρισμα κειμένου
text-start
Στοίχιση κειμένου start, RTL-aware
text-end
Στοίχιση κειμένου end, RTL-aware
text-truncate
Περικοπή overflow με αποσιωπητικά
text-uppercase
Μετατροπή κειμένου σε κεφαλαία
fs-1
Responsive μέγεθος γραμματοσειράς (fs-1..6)
lh-base
Base line height (lh-1, lh-sm, lh-lg)
font-monospace
Monospace οικογένεια γραμματοσειράς
Χρώματα & φόντο
10text-primary
Χρώμα primary κειμένου
bg-primary
Χρώμα primary φόντου
bg-primary-subtle
Διακριτική primary απόχρωση φόντου
text-primary-emphasis
Έμφαση primary κειμένου, theme-aware
text-bg-primary
Primary φόντο με auto-contrast κείμενο
link-primary
Βοηθός χρωματιστού link
bg-opacity-50
Εφαρμογή 50% διαφάνειας φόντου
text-body-secondary
Muted secondary κείμενο σώματος
text-body-emphasis
Κείμενο σώματος υψηλής έμφασης
border-primary-subtle
Διακριτικό primary χρώμα border
Βοηθητικά flex
10d-flex
Δημιουργία flex container
flex-row
Διάταξη στοιχείων σε row
flex-column
Διάταξη στοιχείων σε column
justify-content-between
Κατανομή στοιχείων κατά τον main axis
align-items-center
Κεντράρισμα στοιχείων στον cross axis
flex-wrap
Άδεια αναδίπλωσης στοιχείων
flex-grow-1
Επιτρέπει σε στοιχείο να μεγαλώσει για να γεμίσει χώρο
flex-fill
Επιβολή ίσων flexible πλατών
align-self-end
Στοίχιση ενός στοιχείου στο end
flex-md-row
Responsive flex direction από md
Display & position
12d-none
Απόκρυψη στοιχείου
d-md-block
Εμφάνιση ως block από το md breakpoint
position-relative
Relative positioning
position-absolute
Absolute positioning
position-fixed
Fixed positioning
position-sticky
Sticky positioning
top-0 start-0
Καρφίτσωμα top-left, RTL-aware
translate-middle
Κεντράρισμα μέσω transform translate
fixed-top
Σταθεροποίηση στοιχείου στο πάνω μέρος του viewport
sticky-top
Κόλλημα στο πάνω μέρος κατά το scroll
z-3
Ορισμός z-index (z-0..3)
invisible
Απόκρυψη με διατήρηση χώρου διάταξης
Sizing & borders
12w-100
Πλάτος 100% του γονέα
w-50
Πλάτος 50% του γονέα
h-100
Ύψος 100% του γονέα
mw-100
Max-width 100%
vh-100
Ύψος 100% του viewport
border
Προσθήκη προεπιλεγμένου border σε όλες τις πλευρές
border-0
Αφαίρεση όλων των borders
border-primary
Χρωματισμός του border
rounded
Προεπιλεγμένο border-radius
rounded-pill
Πλήρως στρογγυλεμένο σχήμα pill
rounded-circle
Κυκλικό border-radius
shadow-sm
Μικρό box shadow (shadow, shadow-lg)
Buttons
9<button class="btn btn-primary">
Solid primary button
<button class="btn btn-outline-primary">
Outline παραλλαγή button
<button class="btn btn-lg">
Μεγάλο button (επίσης btn-sm)
<button class="btn btn-link">
Button με στυλ link
<button class="btn-close">
Γενικό button κλεισίματος (×)
<button class="btn disabled">
Κατάσταση disabled button
<button class="btn active">
Κατάσταση active button
<div class="d-grid"><button class="btn">
Block button πλήρους πλάτους μέσω d-grid
<div class="btn-group">
Ομαδοποίηση buttons μαζί
Φόρμες
11<input class="form-control">
Styled text input
<label class="form-label">
Label πεδίου φόρμας
<select class="form-select">
Styled select dropdown
<div class="form-check">
Wrapper checkbox/radio
<input class="form-check-input">
Styled checkbox ή radio input
<div class="form-check form-switch">
Component toggle switch
<input class="form-control-lg">
Μεγάλο input (επίσης form-control-sm)
<div class="input-group">
Ομαδοποίηση inputs με add-ons
is-invalid
Κατάσταση invalid validation (is-valid)
<div class="form-floating">
Input με floating label
col-form-label
Label ευθυγραμμισμένο για οριζόντιες φόρμες
Components
14<div class="card">
Ευέλικτη content card
<nav class="navbar navbar-expand-lg">
Responsive navigation bar
data-bs-toggle="modal" data-bs-target="#m"
Ενεργοποίηση modal dialog
data-bs-toggle="dropdown"
Εναλλαγή dropdown menu
data-bs-toggle="collapse"
Εναλλαγή collapsible στοιχείου
<div class="accordion">
Στοιβαγμένα collapsible panels
<div class="alert alert-dismissible">
Απορρίψιμο alert μήνυμα
<span class="badge text-bg-primary">
Μικρό badge μέτρησης ή ετικέτας
<ul class="list-group">
Styled λίστα στοιχείων
<ul class="nav nav-tabs">
Tabbed navigation
<div class="toast">
Ελαφριά ειδοποίηση toast
<div class="offcanvas">
Off-canvas sidebar panel
<div class="spinner-border">
Δείκτης loading spinner
<nav><ul class="pagination">
Σελιδοποιημένα navigation links
Βοηθοί & διάφορα
11data-bs-theme="dark"
Ενεργοποίηση dark color mode σε ένα scope
<div class="ratio ratio-16x9">
Responsive box με aspect-ratio
visually-hidden
Οπτική απόκρυψη, διατήρηση για screen readers
visually-hidden-focusable
Κρυφό μέχρι το focus (skip links)
stretched-link
Πλήρως clickable γονέας
clearfix
Clear floated children
<div class="vstack gap-2">
Κατακόρυφη στοίβα στοιχείων
<div class="hstack gap-2">
Οριζόντια στοίβα στοιχείων
<a class="icon-link">
Link ευθυγραμμισμένο με inline εικονίδιο
<div class="progress">
Container progress bar
<nav class="breadcrumb">
Breadcrumb navigation trail
Καμία καταχώριση δεν ταιριάζει με «:q».
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.