Podcast
Questions and Answers
What does the class .active do?
What does the class .active do?
Which of the following are contextual classes available for alerts? (Select all that apply)
Which of the following are contextual classes available for alerts? (Select all that apply)
What does the class .bg-danger signify?
What does the class .bg-danger signify?
It sets the background of an element to a dangerous color.
What is the purpose of the .bg-faded class?
What is the purpose of the .bg-faded class?
Signup and view all the answers
What class is used to create a block of buttons aligned vertically?
What class is used to create a block of buttons aligned vertically?
Signup and view all the answers
What is the default background color of the .btn-danger class?
What is the default background color of the .btn-danger class?
Signup and view all the answers
What does the .btn-link class do?
What does the .btn-link class do?
Signup and view all the answers
The .breadcrumb class indicates the current page's location within a navigational hierarchy.
The .breadcrumb class indicates the current page's location within a navigational hierarchy.
Signup and view all the answers
What is the purpose of the .card class?
What is the purpose of the .card class?
Signup and view all the answers
The class .btn-success defaults to a ______ background button.
The class .btn-success defaults to a ______ background button.
Signup and view all the answers
Study Notes
Bootstrap CSS Classes Overview
- .active: Contextual class used to change the background color of table rows.
Alerts
-
.alert: Designed for alerts with eight contextual classes:
- .alert-success
- .alert-danger
- .alert-dismissible
- .alert-heading
- .alert-info
- .alert-link
- .alert-warning
Background Color Classes
- .bg-danger: Changes the background color to the danger context, with a hover effect for link components.
- .bg-faded: Applies a light gray background, commonly seen on navigation bars.
- .bg-info: Similar to .bg-danger, this class sets the background color for info context items with hover effects.
- .bg-inverse: Used with .navbar-dark for dark backgrounds and light text.
- .bg-primary: Sets the background to primary context, also features hover effects.
- .bg-success: Changes background to success context, maintaining hover effects.
- .bg-warning: Similar to other background classes but for warning context.
Blockquote Classes
- .blockquote: Adds proper spacing and a left gray border to block quotes.
- .blockquote-footer: A wrapping class for citation text under a blockquote, lightening the text color.
- .blockquote-reverse: Aligns blockquote text to the right.
Breadcrumbs and Buttons
- .breadcrumb: Indicates the current page's position within a navigational hierarchy.
- .btn: Sets spacing and size for buttons.
- .btn-block: Makes buttons span the full width of their parent container.
Button Variants
- .btn-danger: Creates a button with a default red background.
- .btn-group: Groups multiple buttons together in a pill shape, separated by vertical lines.
- .btn-group-lg: Enlarges the default button group size.
- .btn-group-sm: Reduces the default button group size.
- .btn-group-vertical: Stacks buttons vertically instead of horizontally.
- .btn-info: Light blue information button.
- .btn-lg: Specifies larger button sizes.
- .btn-link: Button that removes the outer border but keeps spacing.
- .btn-outline-*: Transparent background with colored text and border for various contexts.
- .btn-primary: Used for the primary action within a set of buttons.
- .btn-sm: For smaller button sizes.
- .btn-success: Green background button with a dark border.
- .btn-toolbar: Creates a row of buttons for pagination-like display.
Card Components
- .card: Class introduced to wrap individual card elements.
- .card-*:: Prefix for contextual background colors in cards (e.g., .card-danger).
- .card-block: Applied to the first child within a .card for consistent styling.
- .card-blockquote: Removes margin from blockquote within a card for consistent spacing.
- .card-columns: Applied to create a responsive grid-like layout for cards, maintaining equal height.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Description
Test your knowledge of Bootstrap CSS classes with these flashcards. Each card provides a specific class and its definition, helping you understand how to effectively style your web elements. Perfect for beginners and web developers alike!
