Bootstrap 4 Quick Start: Quiz
(115).jpg "Bootstrap 4 Quick Start: Quiz - Quiz")
Want to test your knowledge of Bootstrap 4 and responsive design basics?
In this 20 question exam, you will be tested on the features of Bootstrap 4. It covers the grid, flexbox, and how to setup a basic layout using components.
In addition, you will be tested on responsive web design basics to make sure you understand how Bootstrap 4 applies these fundamentals.
How well do you know Bootstrap 4? Are you up for the challenge?
Want to learn more? Get my Bootstrap 4 Quick Start Book
- 1.
Thank you for taking this quiz. You can learn more here https://bootstrapcreative.com/shop/bootstrap-quick-start/
- 2.
What are the main differences between ID and Class
- A.
Classes are for use with spans and ID's are for use with DIVs
- B.
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
- C.
Classes should be used only once per page, but ID's can be used as many times as you like on one page
- D.
ID's are better than Classes
Correct Answer
B. 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 IDExplanation
IDs and classes are both used in HTML and CSS to select and style elements, but they have some key differences. IDs are unique and should only be used once per page, while classes can be used multiple times. Additionally, an element can have multiple classes, but it should only have one ID. This allows for more specific targeting and styling with IDs, while classes are more flexible and can be used for multiple elements. Therefore, the correct answer is that IDs should be used only once per page, while classes can be used multiple times.Rate this question:
-
- 3.
The Bootstrap grid system is based on how many columns?
- A.
6
- B.
12
- C.
9
- D.
14
Correct Answer
B. 12Explanation
The Bootstrap grid system is based on 12 columns. This means that the layout of a webpage can be divided into 12 equal-width columns, allowing for flexible and responsive designs. By using a combination of these columns, developers can create a grid layout that adjusts to different screen sizes and devices. The 12-column grid system is a key feature of Bootstrap and helps in creating visually appealing and functional websites.Rate this question:
-
- 4.
In Bootstrap, content must be placed within...
- A.
Rows
- B.
Containers
- C.
Columns
Correct Answer
C. ColumnsExplanation
In Bootstrap, content must be placed within columns. Columns are used to create a grid system that allows for responsive layouts. By placing content within columns, it can be easily organized and adjusted to fit different screen sizes. This helps to ensure that the content is displayed properly and optimally on various devices.Rate this question:
-
- 5.
What class name would you make a full width container in Bootstrap?
- A.
.container-full
- B.
.container-fluid
- C.
.container-width
- D.
.container-fw
Correct Answer
B. .container-fluidExplanation
The correct class name to make a full width container in Bootstrap is ".container-fluid". This class is specifically designed to create a container that spans the full width of the viewport, allowing the content to expand and fill the entire width of the screen. The other options provided, such as ".container-full", ".container-width", and ".container-fw", are not valid class names in Bootstrap and would not achieve the desired full width effect.Rate this question:
-
- 6.
If you want to have 3 equal columns in Bootstrap, which class would you use?
- A.
.col-md-3
- B.
.col-md-4
- C.
.col-md-7
- D.
.col-md-12
Correct Answer
B. .col-md-4Explanation
To have 3 equal columns in Bootstrap, the class that should be used is ".col-md-4". This class will divide the available space into 12 equal parts and allocate 4 parts to each column, ensuring that all three columns have equal width and are displayed side by side.Rate this question:
-
- 7.
What does this meta tag do?<meta name="viewport" content="width=device-width, initial-scale=1">
- A.
Tells the browser to look for media queries in the CSS file
- B.
Automatically makes a website responsive
- C.
Prevents browsers from scaling desktop websites on mobile
Correct Answer
C. Prevents browsers from scaling desktop websites on mobileExplanation
The meta tag with the "viewport" attribute and its content "width=device-width, initial-scale=1" prevents browsers from scaling desktop websites on mobile. This means that the website will be displayed at the same size on mobile devices as it would be on a desktop, without any automatic scaling or zooming applied by the browser.Rate this question:
-
- 8.
A big challenge with responsive design is finding a balance between the content needs for both mobile and desktop. A desktop site has a lot of visual real estate that is often filled with carousels, videos, large parallax background images, and large blocks of text.
- A.
True
- B.
False
Correct Answer
A. TrueExplanation
Responsive design is indeed a big challenge because it requires finding a balance between the content needs for both mobile and desktop. Desktop sites typically have more space to accommodate elements like carousels, videos, parallax background images, and text blocks. Therefore, the statement "True" is correct.Rate this question:
-
- 9.
A mobile first approach considers the goals of a mobile user and presents the content to help them achieve those goals. It removes all of the fluff and filler content and presents a concise collection of content that loads fast and is easy to use.
- A.
True
- B.
False
Correct Answer
A. TrueExplanation
A mobile first approach prioritizes the needs and objectives of mobile users by delivering content that is specifically designed to help them accomplish their goals. This approach eliminates unnecessary and irrelevant content, ensuring that the information presented is concise and relevant. Additionally, a mobile first approach focuses on optimizing the loading speed and usability of the content, providing a seamless and efficient user experience. Therefore, the statement "True" accurately reflects the concept of a mobile first approach.Rate this question:
-
- 10.
What are the two main ways you can add Bootstrap to your website? Only select two options
- A.
Linking to the CSS/JS files on GitHub
- B.
Linking to a customized build using the Sass source files
- C.
Adding the CSS styles in a style tag in the head of the document
- D.
Linking to a precompiled CSS/JS versions via CDN or locally
Correct Answer(s)
B. Linking to a customized build using the Sass source files
D. Linking to a precompiled CSS/JS versions via CDN or locallyExplanation
You can add Bootstrap to your website by either linking to a precompiled CSS/JS version via CDN or locally, or by linking to a customized build using the Sass source files. These are the two main ways to incorporate Bootstrap into your website.Rate this question:
-
- 11.
Each class name begins with a prefix. Class name prefixing makes Bootstrap code more durable and easier to maintain, but it also better enables us to scope styles to only the relevant elements. What is another name for these elements or group of elements?
- A.
Widgets
- B.
Styles
- C.
Components
- D.
Rulesets
Correct Answer
C. ComponentsExplanation
Class name prefixing in Bootstrap helps to scope styles to only the relevant elements, making the code more durable and easier to maintain. These elements or group of elements are commonly referred to as "components".Rate this question:
-
- 12.
What Bootstrap version should you use if you need to support IE9?
- A.
Bootstrap 2
- B.
Bootstrap 3
- C.
Bootstrap 4
Correct Answer
B. Bootstrap 3Explanation
Bootstrap 3 should be used if you need to support IE9. This version of Bootstrap is compatible with IE9 and provides the necessary CSS and JavaScript components to ensure proper functionality in this browser. Bootstrap 2 may also work, but Bootstrap 3 is specifically recommended for IE9 support. Bootstrap 4, on the other hand, dropped support for IE9, so it should not be used if compatibility with IE9 is required.Rate this question:
-
- 13.
Flexbox is NOT a core CSS technology but a custom named component created by Bootstrap.
- A.
True
- B.
False
Correct Answer
B. FalseExplanation
Flexbox is actually a core CSS technology and not just a custom named component created by Bootstrap. Flexbox is a layout model in CSS that allows for the creation of flexible and responsive layouts. It is supported by all major browsers and is widely used in modern web development.Rate this question:
-
- 14.
What are the three main elements of the Bootstrap grid listed in the proper order.
- A.
CRC = .col > .row > .container
- B.
GRC = .grid > .row > .col
- C.
CRC = .container > .row > .col
- D.
RC = .row > .col
Correct Answer
C. CRC = .container > .row > .colExplanation
The correct answer is CRC = .container > .row > .col. In the Bootstrap grid system, the container class is used to contain the entire grid layout. Inside the container, rows are created using the row class. And within each row, columns are defined using the col class. So, the proper order of elements in the Bootstrap grid is container > row > col.Rate this question:
-
- 15.
Fill in the blank: Setting a grid tier of .col-sm-6 says ___________
- A.
Make this div 6 columns wide on the sm breakpoint and everything ABOVE
- B.
Make this div 6 columns wide on the sm breakpoint and everything BELOW
- C.
Make this div 6 columns wide on JUST the sm breakpoint
Correct Answer
A. Make this div 6 columns wide on the sm breakpoint and everything ABOVEExplanation
Setting a grid tier of .col-sm-6 means that the div will be 6 columns wide on the sm breakpoint and everything above it. This means that on the sm breakpoint and any larger breakpoints, the div will take up 6 columns of the grid system.Rate this question:
-
- 16.
Cards replace panels, thumbnails, and wells used in Bootstrap 3 and are essentially a contained group of content with a border and inner padding.
- A.
True
- B.
False
Correct Answer
A. TrueExplanation
Cards in Bootstrap 3 are used to replace panels, thumbnails, and wells. They are essentially a contained group of content with a border and inner padding. This statement is true as it accurately describes the purpose and functionality of cards in Bootstrap 3.Rate this question:
-
- 17.
What class name would I add to this image tag in order to make it responsive?<img src="image.png" alt="image" class="" />
- A.
.img-responsive
- B.
.img-fluid
- C.
.responsive
- D.
.fluid
Correct Answer
B. .img-fluidExplanation
The correct class name to add to the image tag in order to make it responsive is ".img-fluid". This class is commonly used in Bootstrap framework to make images scale properly and maintain their aspect ratio as the screen size changes.Rate this question:
-
- 18.
What do these spacing utility classes do to this headline?<h1 class="p-0 p-md-4 p-lg-0">Headline</h1>
- A.
These classes will cancel each other out
- B.
Since p-0 is first it will override all of the other classes. So the heading will have 0 padding on all breakpoints.
- C.
0 padding on all breakpoints, 4 padding value on md breakpoint, then stop the padding from flowing to lg and xl
Correct Answer
C. 0 padding on all breakpoints, 4 padding value on md breakpoint, then stop the padding from flowing to lg and xlExplanation
The spacing utility classes in the given code will result in 0 padding on all breakpoints. However, the class "p-md-4" will add a padding value of 4 on the md breakpoint. The class "p-lg-0" will then override the padding value on the lg and xl breakpoints, effectively stopping the padding from being applied on those breakpoints.Rate this question:
-
- 19.
In Bootstrap 4, 1rem = _____ ?
- A.
14px
- B.
15px
- C.
16px
- D.
20px
Correct Answer
C. 16pxExplanation
In Bootstrap 4, 1rem is equal to 16px. The "rem" unit in CSS stands for "root em" and it is based on the font-size of the root element of the document, usually the element. By default, the font-size of the root element is set to 16px in Bootstrap 4, so 1rem is equivalent to 16px.Rate this question:
-
- 20.
What class name would replace the asterisks in the code block below?<div class="*"> <img class="*-img-top" src="" alt="image"> <div class="*-block"> <h4 class="*-title">Card title</h4> <p class="*-text">Copy</p> <a href="#" class="btn btn-primary">Link</a> </div> </div>
Correct Answer
cardExplanation
The class name that would replace the asterisks in the code block is "card". This is because all the class names in the code block have a common pattern where they start with the word "card" followed by a specific description (e.g., "card-img-top", "card-block", "card-title", "card-text"). Therefore, it can be inferred that the missing class name should also follow this pattern.Rate this question:
Quiz Review Timeline +
Our quizzes are rigorously reviewed, monitored and continuously updated by our expert board to maintain accuracy, relevance, and timeliness.
-
Current Version
-
Mar 22, 2023Quiz Edited by
ProProfs Editorial Team -
Apr 12, 2018Quiz Created by
Jacob Lett
Back to top