This is a short list of the most used Bootstrap 5.3 classes and attributes. The links go to the full chapters.
Layout
Class Meaning .container, .container-fluid, .container-mdContainers (details ) .row, .col, .col-md-6, .row-cols-3Grid (details ) .g-3, .gx-4, .offset-md-2, .order-1Gutter, offset and order (details ) .d-flex, .justify-content-between, .align-items-center, .flex-columnFlexbox (details )
Breakpoints
Prefix From (none) 0 sm576px md768px lg992px xl1200px xxl1400px
Content
Class Meaning .display-1 to .display-6, .lead, .h1 to .h6, .fs-1, .fw-boldTypography (details ) .text-primary, .bg-success, .text-bg-danger, .bg-primary-subtleColors (details ) .img-fluid, .rounded, .rounded-circle, .img-thumbnailImages (details ) .table, .table-striped, .table-hover, .table-responsiveTables (details )
Components
Class Meaning .btn, .btn-primary, .btn-outline-secondary, .btn-lgButtons (details ) .alert, .alert-danger, .alert-dismissibleAlerts (details ) .badge, .text-bg-infoBadges (details ) .card, .card-body, .card-titleCards (details ) .list-group, .nav, .nav-tabs, .navbarLists and menus (list group , navs , navbar ) .dropdown, .breadcrumb, .paginationDropdown, breadcrumb, pagination (dropdowns , more ) .form-control, .form-select, .form-check, .input-group, .form-floatingForms (forms , input group , validation ) .progress, .spinner-border, .toastFeedback (progress , toasts )
JavaScript data attributes
Attribute Use data-bs-toggle="modal" + data-bs-target="#id"Open a modal (details ) data-bs-toggle="collapse"Collapse and accordion (details ) data-bs-toggle="dropdown", "tab", "offcanvas"Dropdown, tabs, offcanvas data-bs-toggle="tooltip", "popover"Tooltip and popover, need JavaScript to start (details ) data-bs-dismiss="alert", "modal", "toast"Close a component data-bs-slide="next", data-bs-slide-to="1"Carousel controls (details ) data-bs-theme="dark"Dark mode (details )
Spacing and utilities
Class Meaning .m-3, .mt-2, .mx-auto, .p-4, .px-md-5, .gap-3Margin, padding and gap (details ) .d-none, .d-md-block, .w-50, .border, .shadow, .position-relativeDisplay, size, border, shadow, position (details )
Note:
Learned it all? Check the Bootstrap interview questions and the exercises on this website to practice. Also read Bootstrap JavaScript for the API.
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.
