Bootstrap Quiz

What is the default number of columns in Bootstrap's grid system?

• 10

• 12

• 16

• 24

Tags

DOK Level 1: Recall

Which Bootstrap class is used to create a responsive navigation bar?

• .navbar-responsive

• .navbar-default

• .navbar

• .navbar-responsive-collapse

Tags

DOK Level 1: Recall

In Bootstrap, which class would you use to make a button look like a primary action button?

• .btn-default

• .btn-primary

• .btn-secondary

• .btn-action

Tags

DOK Level 1: Recall

Which Bootstrap class is used to create a carousel component?

• .carousel

• .slider

• .slideshow

• .carousel-slider

Tags

DOK Level 1: Recall

Explain how the Bootstrap grid system works to create responsive layouts.

• It uses a series of containers, rows, and columns to layout and align content.

• It uses a single container to align all content.

• It uses a series of rows and columns without containers.

• It uses only columns to align content.

Tags

DOK Level 2: Skill/Concept

Describe the purpose of the .form-control class in Bootstrap forms.

• It is used to style buttons.

• It is used to style form inputs, textareas, and selects.

• It is used to style navigation bars.

• It is used to style modal windows.

Tags

DOK Level 2: Skill/Concept

How would you make a navigation bar collapse into a hamburger menu on smaller screens using Bootstrap?

• By using the .navbar-collapse class and the .navbar-toggle button.

• By using the .navbar-responsive class.

• By using the .navbar-hamburger class.

• By using the .navbar-small class.

Tags

DOK Level 2: Skill/Concept

Given a scenario where you need to create a multi-item carousel with indicators and controls, outline the steps and classes you would use in Bootstrap.

• Use the .carousel class for the container, .carousel-inner for the items, .carousel-item for each item, .carousel-indicators for the indicators, and .carousel-control-prev and .carousel-control-next for the controls.

• Use the .slider class for the container, .slider-inner for the items, .slider-item for each item, .slider-indicators for the indicators, and .slider-control-prev and .slider-control-next for the controls.

• Use the .slideshow class for the container, .slideshow-inner for the items, .slideshow-item for each item, .slideshow-indicators for the indicators, and .slideshow-control-prev and .slideshow-control-next for the controls.

• Use the .carousel-slider class for the container, .carousel-slider-inner for the items, .carousel-slider-item for each item, .carousel-slider-indicators for the indicators, and .carousel-slider-control-prev and .carousel-slider-control-next for the controls.

Tags

DOK Level 3: Strategic Thinking

Analyze the impact of using the .container-fluid class instead of the .container class in a Bootstrap layout.

• The .container-fluid class creates a full-width container that spans the entire width of the viewport, while the .container class creates a fixed-width container that is responsive to different screen sizes.

• The .container-fluid class creates a fixed-width container, while the .container class creates a full-width container.

• The .container-fluid class creates a container with a fixed height, while the .container class creates a container with a variable height.

• The .container-fluid class creates a container with padding, while the .container class creates a container without padding.

Tags

DOK Level 3: Strategic Thinking