Web Development Lecture 4: Bootstrap Buttons

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

How can you create a block level button that spans the entire width of the parent element?

Use the .active class on the button element.

Use the .btn-lg class on the button element.

Use the .btn-sm class on the parent element.

Use the .d-grid class on the parent element. (correct)

What is the purpose of the .gap-* class in Bootstrap?

To control the space between block-level buttons. (correct)

To make a button appear pressed.

To make a button unclickable.

To create a block level button.

What is the effect of adding the .active class to a button?

The button appears pressed. (correct)

The button becomes unclickable.

The button becomes smaller.

The button appears larger.

What is the purpose of the .btn-lg class in Bootstrap?

To create a large button. Signup and view all the answers

How can you make a button unclickable in Bootstrap?

Use the .disabled class. Signup and view all the answers

How many outline/bordered buttons are provided by Bootstrap?

Eight. Signup and view all the answers

What is the purpose of the btn-group-lg class in Bootstrap?

To create a large button group Signup and view all the answers

What is the purpose of the data-bs-toggle attribute in Bootstrap?

To open the dropdown menu Signup and view all the answers

What is the purpose of the dropdown-divider class in Bootstrap?

To separate links inside the dropdown menu with a thin horizontal border Signup and view all the answers

How do you create a vertical button group in Bootstrap?

Use the class btn-group-vertical Signup and view all the answers

What is the purpose of the active class in Bootstrap?

To highlight a specific dropdown item with a blue background color Signup and view all the answers

What is the purpose of the dropdown-header class in Bootstrap?

To add headers inside the dropdown menu Signup and view all the answers

What class is used to create a disabled item in a dropdown menu?

.disabled Signup and view all the answers

What class is used to create a dropdown menu that expands upwards?

.dropup Signup and view all the answers

What is the default height of a progress bar?

1rem Signup and view all the answers

How do you change the height of a progress bar?

Using the CSS height property Signup and view all the answers

What is the default color of a progress bar?

Blue Signup and view all the answers

How do you add a label to a progress bar to show the visible percentage?

Add text inside the progress bar Signup and view all the answers

Study Notes

Bootstrap Buttons

Bootstrap provides different styles of buttons that can be used on <a>, , or elements.
Button sizes can be controlled using .btn-lg for large buttons and .btn-sm for small buttons.
Bootstrap also provides eight outline/bordered buttons that have a hover effect.
Block-level buttons can be created using the .d-grid class on the parent element, and the space between them can be controlled using the .gap-* class.
A button can be set to an active (appear pressed) or a disabled (unclickable) state using the .active class and the disabled attribute respectively.

Bootstrap Button Groups

A button group can be created by wrapping buttons in a container with the .btn-group class.
Instead of applying button sizes to every button in a group, the .btn-group-lg and .btn-group-sm classes can be used for large and small button groups respectively.
Vertical button groups can be created using the .btn-group-vertical class.

Bootstrap Dropdowns

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.
The .dropdown class indicates a dropdown menu.
The .dropdown-menu class is used to build the dropdown menu, and the .dropdown-item class is used for each item inside the menu.
The .dropdown-divider class can be used to separate links inside the dropdown menu with a thin horizontal border.
The .dropdown-header class is used to add headers inside the dropdown menu.
An item in the dropdown menu can be highlighted with the .active class, and disabled with the .disabled class.
The dropdown menu can be positioned as "dropend" or "dropstart" by adding the .dropend or .dropstart class to the dropdown element.

Bootstrap Progress Bars

A progress bar can be used to show how far a user is in a process.
A default progress bar can be created by adding the .progress class to a container element and the .progress-bar class to its child element.
The width of the progress bar can be set using the CSS width property.
The height of the progress bar is 1rem (usually 16px) by default, and can be changed using the CSS height property.
Labels can be added inside the progress bar to show the visible percentage.
Progress bars can be customized with different colors.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

This quiz covers the basics of Bootstrap buttons, including button styles, sizes, and outline/bordered buttons. It is based on Lecture 4 by Miss. Dina Y. Mikhail for ISED Second stage.