Bootstrap Practice Test — Questions and Answers

Question 1: Content must be contained within the Bootstrap

Columns (Correct answer)
Rows
Containers

Correct answer: Columns

In Bootstrap's grid system, content is primarily placed within columns. Columns are direct children of rows, and they define the horizontal division of the layout. This structure ensures that content is properly aligned, spaced, and responsive across different screen sizes within the grid.

Question 2: Bootstrap is built around reusable ___________ that include basic, sub, and design variant styles.

Code snippets
Classes
Components (Correct answer)
Widgets

Correct answer: Components

Bootstrap is a front-end framework that provides a collection of pre-designed, reusable UI elements and interactive features. These 'components' include things like navigation bars, carousels, forms, buttons, and cards, which developers can easily integrate into their web projects. They come with basic, sub, and design variant styles for consistent and responsive interfaces.

Question 3: How many columns are there in the Bootstrap grid system?

12 (Correct answer)
6
3
15

Correct answer: 12

The Bootstrap grid system is based on a 12-column layout. This design allows for flexible and responsive page structures, as developers can combine different numbers of columns (e.g., `col-md-4` for three equal columns) to create various layouts that adapt well to different screen sizes and devices.

Question 4: In Bootstrap, what class name would you give a full-width container?

.container-width
.container-full
.container-fw
.container-fluid (Correct answer)

Correct answer: .container-fluid

The `.container-fluid` class in Bootstrap creates a full-width container that spans the entire width of the viewport. Unlike the standard `.container` class, which provides a fixed-width responsive container with padding, `.container-fluid` ensures that the content always takes up 100% of the available horizontal space, adapting dynamically to the browser window.

Question 5: What differentiates the.container-fluid class from the.container class?

The .container-fluid class clears all floats and starts a new row
The .container-fluid class removes all horizontal padding so it touches the left and right edge of the browser window
The .container-fluid class makes the container expand the full width of the browser (Correct answer)

Correct answer: The .container-fluid class makes the container expand the full width of the browser

The `.container-fluid` class in Bootstrap creates a container that always spans 100% of the viewport width, adapting dynamically to the browser window size. In contrast, the `.container` class provides a responsive, fixed-width container that has a maximum width at different breakpoints, creating a centered layout with padding on the sides.

Question 6: What was the original name of Bootstrap?

Twitter Bootstrap
Blueprint Bootstrap Twitter
Twitter Blueprint (Correct answer)
Bootstrap Blueprint

Correct answer: Twitter Blueprint

Bootstrap was originally developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. It was initially named 'Twitter Blueprint' before being open-sourced and subsequently renamed Bootstrap, becoming one of the most popular front-end frameworks.

Question 7: Which class is used to make a big box that attracts extra attention?

.bigbox
.jumbotron (Correct answer)
.container

Correct answer: .jumbotron

The `.jumbotron` class in Bootstrap is specifically used to create a large, padded box that highlights content and draws extra attention. It typically features a larger font size for headings and can be effectively used for hero sections or to display key messages prominently on a webpage.

Question 8: To make a badge, what class is used?

.badge (Correct answer)
.label
.tag
.flag

Correct answer: .badge

In Bootstrap, the `.badge` class is used to create small, numerical indicators or labels, often seen next to navigation links or buttons. They are typically employed to display counts, such as the number of unread messages, notifications, or items in a shopping cart, providing quick visual feedback.

Question 9: Who developed the Bootstrap?

Mark Otto & Jacob Thornton (Correct answer)
Jacob Otto & Eric Suzanne
Mark Otto & Anna Otto
Jacob Thornton & Anna Otto

Correct answer: Mark Otto & Jacob Thornton

Bootstrap was created by Mark Otto and Jacob Thornton while they were working as developers at Twitter. Their goal was to develop a framework that would standardize and streamline front-end development for internal tools, leading to its eventual open-sourcing and widespread adoption.

Question 10: To make a basic pagination, which class is used?

.navigation
.pages
.pagination (Correct answer)
.page

Correct answer: .pagination

The `.pagination` class in Bootstrap is used to create a series of linked page numbers for navigating through content, such as search results or articles. It provides a structured and styled way to implement pagination controls, allowing users to easily move between different pages of content.

Question 11: A panel's heading is added by which class?

.panel-heading (Correct answer)
.panel-footer
.panel-head
.panel-header

Correct answer: .panel-heading

In older versions of Bootstrap (like Bootstrap 3), the `.panel-heading` class was specifically used to style the header section of a panel component. This class provided distinct styling for the top part of a panel, visually separating it from the panel's body and footer. (Note: Panels have largely been replaced by Cards in Bootstrap 4+).

Question 12: CSS stands for

Creative Style Sheets
Control Style Sheets
Computer Style Sheets
Cascading Style Sheets (Correct answer)

Correct answer: Cascading Style Sheets

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML or XML. The term 'Cascading' refers to the hierarchical way styles are applied, allowing for a clear separation of content from its visual design.

Question 13: To make a basic list group, which class is used?

.group-list
.list-group (Correct answer)
.grouped-list

Correct answer: .list-group

In Bootstrap, the `.list-group` class is the foundational component used to create a basic list group. This class styles an unordered list (`<ul>`) to appear as a series of connected items. Individual items within this group are then styled using the `.list-group-item` class.

Question 14: What are the most significant difference between ID and Class?

ID's are supposed to be only used once per page but Classes can be used multiple times per page, and one element can have more than one Class but should have only one ID (Correct answer)
Classes are for use with spans and ID's are for use with DIVs
ID's are better than Classes
Classes should be used only once per page, but ID's can be used as many times as you like on one page

Correct answer: ID's are supposed to be only used once per page but Classes can be used multiple times per page, and one element can have more than one Class but should have only one ID

The most significant difference is that an ID is meant to uniquely identify a single element on a page, meaning it should only be used once. In contrast, a Class can be applied to multiple elements across a page, and a single element can also have several classes. This distinction allows for specific targeting with IDs and reusable styling with classes.

Question 15: A modal window is created using which plugin?

Window
Popup
Modal (Correct answer)
Dialog Box

Correct answer: Modal

A modal window in Bootstrap is created using the Modal plugin. This plugin provides a flexible and responsive dialog box functionality that pops up over the current page content. It is commonly used for alerts, confirmations, or displaying additional information without navigating away from the main page.

Question 16: In Bootstrap, what layout is used to provide 100 percent width?

Fluid layout (Correct answer)
Fixed layout
Both A and B
None of the above

Correct answer: Fluid layout

In Bootstrap, the Fluid layout is used to provide 100 percent width. This is achieved by applying the `.container-fluid` class to an element. Unlike the fixed-width `.container`, the fluid container ensures that its content spans the entire width of the viewport, adapting responsively to different screen sizes.

Question 17: To make a tooltip, which plugin is used?

Dialog Box
Tooltip (Correct answer)
Popup
Modal

Correct answer: Tooltip

To make a tooltip in Bootstrap, the Tooltip plugin is used. This plugin provides small, interactive pop-up boxes that appear when a user hovers over or focuses on an element. Tooltips are excellent for offering brief, contextual information without cluttering the main interface.

Question 18: To cycle through elements, such as a slideshow, which plugin is used?

Scrollspy
Slideshow
Carousel (Correct answer)
Orbit

Correct answer: Carousel

The Carousel plugin in Bootstrap is specifically designed to cycle through elements, such as images or text, to create a slideshow. It provides functionality for navigation controls, indicators, and automatic cycling. This makes it ideal for showcasing multiple pieces of content in an engaging and space-efficient manner.

Question 19: Which of the following statements concerning the popover Plugin's data-trigger Data attribute is correct?

Defines how the popover is triggered (Correct answer)
Sets the default title value if the title attribute isn't present
Delays showing and hiding the popover in ms
Defines default content value if data-content attribute isn't present

Correct answer: Defines how the popover is triggered

The `data-trigger` attribute for Bootstrap's Popover plugin defines how the popover is activated. It specifies the event, such as 'click', 'hover', or 'focus', that will cause the popover to appear. This attribute gives developers control over the user interaction required to display the popover content.

Question 20: Which of the following statements about Bootstrap cross-browser compatibility is correct?

Normalize.css is a modern, HTML5-ready alternative to CSS resets
Normalize.css is a CSS file that provides cross-browser compatibility in the default styling of HTML elements
Bootstrap use Normalize to establish cross browser compatibility
All of the above (Correct answer)

Correct answer: All of the above

All the statements are correct regarding Bootstrap's cross-browser compatibility. Bootstrap uses Normalize.css, which is a modern alternative to CSS resets, to establish a consistent baseline for HTML elements across different browsers. This ensures that Bootstrap components look and behave predictably, regardless of the user's browser.

Question 21: Which of the following bootstrap image styles adds border-radius:500px to make the full picture round?

img-circle (Correct answer)
img-thumbnail
img-rounded
None of the above

Correct answer: img-circle

In Bootstrap, the `.img-circle` class is used to make an image appear fully round. It achieves this by applying a `border-radius` of 50% (or a large pixel value like 500px) to the image. This class is commonly used for styling profile pictures or avatars to give them a circular shape.

Question 22: What are the two primary methods for incorporating Bootstrap into your website? Select two option

Adding the CSS styles in a style tag in the head of the document
Linking to the CSS/JS files on GitHub
Linking to a precompiled CSS/JS versions via CDN or locally (Correct answer)
Linking to a customized build using the Sass source files (Correct answer)

Correct answer: Linking to a precompiled CSS/JS versions via CDN or locally

The two primary methods for incorporating Bootstrap are linking to precompiled CSS/JS versions via a CDN or locally, which is the quickest way to get started. Alternatively, for more customization, developers can link to a customized build created using the Sass source files. This allows for modifying variables and including only necessary components.

Question 23: True/False: Flexbox is a custom named component built by Bootstrap, not a basic CSS feature.

A) False (Correct answer)
B) True

Correct answer: A) False

This statement is false. Flexbox (Flexible Box Layout module) is a native CSS3 layout module, not a custom component built by Bootstrap. Bootstrap extensively utilizes Flexbox for its responsive grid system and component alignment, but Flexbox itself is a fundamental feature of CSS, available for use in any web project.

Question 24: Which class indicates the presence of a dropdown menu?

select
dropdown (Correct answer)
dropdown-list
None

Correct answer: dropdown

The `.dropdown` class in Bootstrap indicates the presence of a dropdown menu. It is applied to the parent container (e.g., a `<div>` or `<li>`) that encapsulates both the dropdown toggle button and the dropdown menu itself. This class provides the necessary styling and JavaScript functionality for the dropdown to operate correctly.

Question 25: The global default line-height in Bootstrap

1.428 (Correct answer)
1.8
1.128
1.228

Correct answer: 1.428

The global default line-height in Bootstrap is 1.428. This value is applied to the `<body>` element and inherited by most text elements throughout the framework. This specific line-height is chosen to ensure optimal readability and consistent vertical spacing across all Bootstrap's typographic components.

Bootstrap Practice Test

Content must be contained within the Bootstrap