Bootstrap Tables and Carousel

SupplePalladium avatar
SupplePalladium
·
·
Download

Start Quiz

Study Flashcards

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

More Quizzes Like This

Bootstrap and CSS Quiz
9 questions

Bootstrap and CSS Quiz

BeautifulChrysoprase avatar
BeautifulChrysoprase
Bootstrap 5 Tutorial and Examples
7 questions
Web Development Lecture 4: Bootstrap Buttons
18 questions
Bootstrap Lecture 5
18 questions

Bootstrap Lecture 5

ImprovingDoppelganger avatar
ImprovingDoppelganger
Use Quizgecko on...
Browser
Browser