Bootstrap Tables and Carousel

Bootstrap Table

• The .table-sm class reduces the table's size by cutting cell padding in half.
• The .table-responsive class adds a scrollbar to the table when it exceeds the screen width.
• You can customize the table's responsiveness by setting the screen width threshold.

Bootstrap Carousel

• The Bootstrap Carousel is a slideshow for cycling through elements.
• You can add captions to slides by placing elements inside the .carousel-caption class.
• Captions can be customized with styles and positioning.

Bootstrap Modal

• The Modal component is a dialog box/popup window that displays on top of the current page.
• The .modal class creates the modal container.
• The .modal-dialog class defines the size and position of the modal.
• The .modal-content class contains the actual content of the modal.
• The modal header includes a title and a close button.
• The modal body contains the main content.
• The modal footer typically includes action buttons.

Bootstrap Images

• Three main classes for Bootstrap images: .rounded, .rounded-circle, and .img-thumbnail.
• .rounded adds rounded corners to an image.
• .rounded-circle shapes the image to a circle.
• .img-thumbnail shapes the image to a thumbnail (bordered).
• Align images using .float-start (left) or .float-end (right).

Bootstrap Cards

• A card in Bootstrap is a bordered box with padding around its content.
• Cards include options for headers, footers, content, colors, etc.
• The .card class creates a basic card.
• The .card-body class contains the card's content.
• The .card-header class adds a heading to the card.
• The .card-footer class adds a footer to the card.
• Use .card-title to add card titles to any heading element.
• Use .card-text to remove bottom margins for a <p> element.
• Use .card-link to add a blue color to any link, and a hover effect.
• Add .card-img-top or .card-img-bottom to an `` to place the image at the top or bottom inside the card.

Bootstrap Pagination

• Basic pagination is created with the .pagination class.
• Add .page-item to each element and .page-link class to each link inside.
• The .active class is used to "highlight" the current page.
• The .disabled class is used for un-clickable links.
• Pagination blocks can be sized to a larger or smaller size using .pagination-lg and .pagination-sm classes.
• Use utility classes to change the alignment of the pagination.</p>