Bootstrap Quiz
Bootstrap is a popular CSS framework for building responsive layouts quickly. Questions focus on the grid system, breakpoints, utility classes, components such as navbars and cards, and how to customise them.
What this quiz covers
- Grid system and breakpoints
- Utility classes
- Navbars, cards and modals
- Responsive design basics
Study tip: Resize your browser window while testing a Bootstrap page to see how each breakpoint changes the layout.
Questions, answers and explanations
1. What is Bootstrap?
- A JavaScript library
- A CSS framework
- A database
- A programming language
Answer: A CSS framework
Bootstrap is a popular front-end CSS framework used to build responsive websites.
2. Who developed Bootstrap?
- Microsoft
Answer: Twitter
Bootstrap was originally developed by Mark Otto and Jacob Thornton at Twitter.
3. Which class creates a responsive fixed-width container?
- .container
- .wrapper
- .box
- .grid
Answer: .container
The .container class provides a responsive fixed-width layout.
4. Which class creates a full-width container?
- .container-fluid
- .container
- .fluid
- .row
Answer: .container-fluid
The .container-fluid class always takes 100% of the viewport width.
5. Bootstrap uses how many columns in its grid system?
- 10
- 12
- 16
- 24
Answer: 12
Bootstrap's grid system is based on 12 columns.
6. Which class is used to create a row in Bootstrap?
- .grid
- .row
- .column
- .container
Answer: .row
The .row class is used to group columns together.
7. Which class creates a primary button?
- .btn-primary
- .button-primary
- .primary-btn
- .btn-blue
Answer: .btn-primary
Bootstrap provides the .btn-primary class for primary buttons.
8. Which class makes an image responsive?
- .img-fluid
- .responsive-img
- .img-responsive
- .fluid-image
Answer: .img-fluid
The .img-fluid class makes images scale with the parent container.
9. Which Bootstrap class centers text?
- .text-center
- .center
- .align-center
- .text-middle
Answer: .text-center
The .text-center utility class centers text horizontally.
10. Which Bootstrap component is used for site navigation?
- Navbar
- Card
- Modal
- Carousel
Answer: Navbar
The Navbar component is used to create responsive navigation bars.
11. Which class adds rounded corners to an element?
- .rounded
- .border-round
- .radius
- .curve
Answer: .rounded
The .rounded class adds rounded corners to Bootstrap elements.
12. Which class creates a danger (red) button?
- .btn-danger
- .btn-red
- .danger-btn
- .btn-error
Answer: .btn-danger
The .btn-danger class creates a red button for dangerous actions.
13. Which Bootstrap component is used to display dismissible messages?
- Alert
- Badge
- Card
- Toast
Answer: Alert
Bootstrap Alerts display important messages and can be dismissible.
14. Which component is used to create image sliders?
- Carousel
- Slider
- Gallery
- Scroll
Answer: Carousel
Bootstrap Carousel is used to create responsive image sliders.
15. Which Bootstrap class is used to hide an element?
- .d-none
- .hidden
- .display-none
- .invisible
Answer: .d-none
The .d-none utility completely hides an element.
16. Which class adds margin on all sides?
- .m-3
- .p-3
- .margin
- .space
Answer: .m-3
The m-* utility classes add margin to elements.
17. Which class adds padding on all sides?
- .p-3
- .m-3
- .padding
- .space
Answer: .p-3
The p-* utility classes add padding to elements.
18. Which Bootstrap component is commonly used to display content inside a box with a shadow?
- Card
- Modal
- Navbar
- Tooltip
Answer: Card
Cards are flexible content containers with multiple layout options.
19. Which Bootstrap class changes text color to white?
- .text-white
- .white-text
- .color-white
- .font-white
Answer: .text-white
The .text-white utility changes the text color to white.
20. Which Bootstrap class makes an element's width 100%?
- w-100
- width-full
- .full-width
- .w-full
Answer: w-100
The w-100 utility class sets an element's width to 100%.