Bootstrap 4 Quick Start: Quiz

Reviewed by Editorial Team
The ProProfs editorial team is comprised of experienced subject matter experts. They've collectively created over 10,000 quizzes and lessons, serving over 100 million users. Our team includes in-house content moderators and subject matter experts, as well as a global network of rigorously trained contributors. All adhere to our comprehensive editorial guidelines, ensuring the delivery of high-quality content.
Learn about Our Editorial Process
| By Jacob Lett
J
Jacob Lett
Community Contributor
Quizzes Created: 2 | Total Attempts: 11,957
| Attempts: 8,835
SettingsSettings
Please wait...
  • 1/21 Questions

    Thank you for taking this quiz. You can learn more here https://bootstrapcreative.com/shop/bootstrap-quick-start/

Please wait...
About This 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 See moreapplies 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

Bootstrap 4 Quick Start: Quiz - Quiz

Quiz Preview

  • 2. 

    What are the main differences between ID and Class

    • Classes are for use with spans and ID's are for use with DIVs

    • 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

    • Classes should be used only once per page, but ID's can be used as many times as you like on one page

    • ID's are better than Classes

    Correct Answer
    A. 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
    Explanation
    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?

    • 6

    • 12

    • 9

    • 14

    Correct Answer
    A. 12
    Explanation
    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...

    • Rows

    • Containers

    • Columns

    Correct Answer
    A. Columns
    Explanation
    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?

    • .container-full

    • .container-fluid

    • .container-width

    • .container-fw

    Correct Answer
    A. .container-fluid
    Explanation
    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?

    • .col-md-3

    • .col-md-4

    • .col-md-7

    • .col-md-12

    Correct Answer
    A. .col-md-4
    Explanation
    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">

    • Tells the browser to look for media queries in the CSS file

    • Automatically makes a website responsive

    • Prevents browsers from scaling desktop websites on mobile

    Correct Answer
    A. Prevents browsers from scaling desktop websites on mobile
    Explanation
    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.

    • True

    • False

    Correct Answer
    A. True
    Explanation
    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.

    • True

    • False

    Correct Answer
    A. True
    Explanation
    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

    • Linking to the CSS/JS files on GitHub

    • Linking to a customized build using the Sass source files

    • Adding the CSS styles in a style tag in the head of the document

    • Linking to a precompiled CSS/JS versions via CDN or locally

    Correct Answer(s)
    A. Linking to a customized build using the Sass source files
    A. Linking to a precompiled CSS/JS versions via CDN or locally
    Explanation
    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?

    • Widgets

    • Styles

    • Components

    • Rulesets

    Correct Answer
    A. Components
    Explanation
    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?

    • Bootstrap 2

    • Bootstrap 3

    • Bootstrap 4

    Correct Answer
    A. Bootstrap 3
    Explanation
    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.

    • True

    • False

    Correct Answer
    A. False
    Explanation
    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.

    • CRC = .col > .row > .container

    • GRC = .grid > .row > .col

    • CRC = .container > .row > .col

    • RC = .row > .col

    Correct Answer
    A. CRC = .container > .row > .col
    Explanation
    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 ___________

    • Make this div 6 columns wide on the sm breakpoint and everything ABOVE

    • Make this div 6 columns wide on the sm breakpoint and everything BELOW

    • 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 ABOVE
    Explanation
    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.

    • True

    • False

    Correct Answer
    A. True
    Explanation
    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="" />

    • .img-responsive

    • .img-fluid

    • .responsive

    • .fluid

    Correct Answer
    A. .img-fluid
    Explanation
    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> 

    • These classes will cancel each other out

    • Since p-0 is first it will override all of the other classes. So the heading will have 0 padding on all breakpoints.

    • 0 padding on all breakpoints, 4 padding value on md breakpoint, then stop the padding from flowing to lg and xl

    Correct Answer
    A. 0 padding on all breakpoints, 4 padding value on md breakpoint, then stop the padding from flowing to lg and xl
    Explanation
    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 = _____ ?

    • 14px

    • 15px

    • 16px

    • 20px

    Correct Answer
    A. 16px
    Explanation
    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> - ProProfs

    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
    card
    Explanation
    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 (Updated): Mar 22, 2023 +

Our quizzes are rigorously reviewed, monitored and continuously updated by our expert board to maintain accuracy, relevance, and timeliness.

  • Current Version
  • Mar 22, 2023
    Quiz Edited by
    ProProfs Editorial Team
  • Apr 12, 2018
    Quiz Created by
    Jacob Lett

Related Topics

Featured Quizzes

Best Friend Quiz: Are You Really Best Friends? Best Friend Quiz: Are You Really Best Friends?
What Is My Ethnicity? Let's Take Ethnicity Quiz What Is My Ethnicity? Let's Take Ethnicity Quiz
What Ethnicity Do I Look Like? What Ethnicity Do I Look Like?
Do I Have a Crush on Him? Quiz Do I Have a Crush on Him? Quiz
Basketball Quiz Questions And Answers Basketball Quiz Questions And Answers
Which Sonic Character Are You? Which Sonic Character Are You?
Back to Top Back to top
Advertisement
×

Wait!
Here's an interesting quiz for you.

We have other quizzes matching your interest.