17 Questions
What is the purpose of the .table-responsive class?
To add a scrollbar to the table when needed
What is the main purpose of the Carousel component?
To create a slideshow
What does the .modal-content class contain?
The actual content of the modal
What is the purpose of the .table-sm class?
To make the table smaller by cutting cell padding in half
What is typically included in the modal footer?
Action buttons such as 'Save changes' and 'Close'
What is the purpose of adding elements inside within each?
To create a caption for each slide
What is the purpose of the .img-thumbnail class in Bootstrap?
Shapes the image to a thumbnail with a border
Which Bootstrap class adds a heading to a card?
.card-header
What is the purpose of the .float-start class in Bootstrap?
Floats an image to the left
What does the .card-link class do in Bootstrap?
Adds a blue color to any link
What is the purpose of the .card-text class in Bootstrap?
Removes bottom margins for a paragraph
Which Bootstrap class is used to create a basic card?
.card
Where should you add an image to span the entire width in Bootstrap cards?
Outside the .card-body
What is the purpose of the .active class in Bootstrap pagination?
To highlight the current page
How can you change the alignment of the pagination in Bootstrap?
By using utility classes
What is the purpose of the .disabled class in Bootstrap pagination?
To make a link unclickable
What is a characteristic of a basic Bootstrap table?
It has a light padding and horizontal dividers
Study Notes
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.
Explore Bootstrap's table and carousel features, including responsive tables and customizable scrollbars.
Make Your Own Quizzes and Flashcards
Convert your notes into interactive study material.
Get started for free