Component-based framework philosophy in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main benefit of using components in Bootstrap?

Bootstrap uses components like buttons, cards, and navbars. What is the main benefit of using these components in your web page?

A They force you to write all CSS from scratch.

B They let you reuse code easily and keep your page organized.

C They make your page load slower because of extra code.

D They only work on mobile devices, not desktop.

💡 Hint

Think about how components help when building many parts of a page.

Components in Bootstrap are reusable pieces of code. They help keep your page organized and save time by not rewriting the same styles or HTML repeatedly.

📝 Syntax

intermediate

Which Bootstrap class creates a responsive navigation bar?

You want to add a navigation bar that adjusts to screen size. Which class should you add to the

element?

A navbar-expand-lg

B container-fluid

C text-center

D btn-primary

💡 Hint

Look for the class that controls navbar expansion on large screens.

The navbar-expand-lg class makes the navbar expand on large screens and collapse on smaller ones, making it responsive.

❓ layout

advanced

How does Bootstrap's grid system help with component layout?

Bootstrap uses a grid system with rows and columns. How does this system help when placing components on a page?

A It forces all components to be the same size regardless of content.

B It disables responsiveness and fixes component positions.

C It divides the page into flexible columns so components align nicely on all screen sizes.

D It only works with images, not other components.

💡 Hint

Think about how columns adjust on phones vs desktops.

The grid system divides the page into 12 columns that resize based on screen size. This helps components line up neatly and stay responsive.

❓ accessibility

advanced

Which attribute improves accessibility for Bootstrap modals?

Bootstrap modals should be accessible to all users. Which attribute helps screen readers identify the modal dialog?

A tabindex="-1"

B data-toggle

C class="modal-content"

D aria-labelledby

💡 Hint

Look for an attribute that links the modal to its title for screen readers.

The aria-labelledby attribute points to the modal's title element, helping screen readers announce the dialog properly.

❓ rendering

expert

What will be the visual result of this Bootstrap button code?

Consider this HTML code:

<button type="button" class="btn btn-danger btn-lg">Delete</button>

What will the button look like when rendered in a browser?

A A large red button with white text labeled 'Delete'.

B A small blue button with black text labeled 'Delete'.

C A large green button with white text labeled 'Delete'.

D A plain button with default browser style labeled 'Delete'.

💡 Hint

Check the meaning of the classes btn-danger and btn-lg.

The class btn-danger makes the button red, and btn-lg makes it large. The text color is white by default on danger buttons.