Bootstrap 4 Quick Start: Certification Exam
Want to test your knowledge of Bootstrap 4 and responsive design basics?
In this 50 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?
Learn more about Bootstrap: https://bootstrapcreative. Com/shop/bootstrap-quick-start/
- 1.
One last question, what did you think of this exam? Is there anything you would change or improve? Learn more: https://bootstrapcreative.com/shop/bootstrap-quick-start/
- 2.
What does CSS stand for?
- A.
Computer Style Sheets
- B.
Cascading Style Sheets
- C.
Creative Style Sheets
- D.
Control Style Sheets
Correct Answer
B. Cascading Style SheetsExplanation
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in HTML. It is responsible for the visual appearance of web pages, including layout, colors, fonts, and other design elements. CSS allows web designers to separate the structure and content of a webpage from its presentation, making it easier to maintain and update the design across multiple pages.Rate this question:
-
- 3.
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
The main difference between ID and Class is that IDs are meant to be used only once per page, while classes can be used multiple times. Additionally, an element can have more than one class, but it should have only one ID. This is because IDs are used to uniquely identify an element, while classes are used to group multiple elements together. Therefore, the statement that IDs are supposed to be used only once per page and classes can be used multiple times per page, and an element can have more than one class but should have only one ID, accurately describes the main differences between ID and Class.Rate this question:
-
- 4.
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 easy and flexible positioning of elements. By using the grid system, developers can create responsive designs that automatically adjust to different screen sizes and devices. The 12-column grid system is a widely used standard in web development and provides a solid foundation for building responsive and visually appealing websites.Rate this question:
-
- 5.
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 in Bootstrap, allowing for the organization and layout of content on a webpage. By placing content within columns, it becomes easier to create responsive designs that adapt to different screen sizes and devices. Rows and containers are also important components in Bootstrap, but the content itself should be placed within columns to ensure proper alignment and structure.Rate this question:
-
- 6.
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, adapting to different screen sizes and resolutions. Using this class ensures that the container will always fill the entire width of the screen, providing a responsive layout.Rate this question:
-
- 7.
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
The correct answer is .col-md-4. This class is used in Bootstrap to create a column that spans 4 grid columns out of a total of 12 grid columns in a medium-sized screen. By using this class, you can divide the screen into 3 equal columns, as each column will take up 4 grid columns.Rate this question:
-
- 8.
What was Bootstrap originally named?
- A.
Twitter Blueprint
- B.
Bootstrap Blueprint
- C.
Twitter Bootstrap
- D.
Blueprint Bootstrap Twitter
Correct Answer
A. Twitter BlueprintExplanation
Bootstrap was originally named "Twitter Blueprint". This is because Bootstrap was developed by a team of Twitter employees and was initially used internally at Twitter. The name "Twitter Blueprint" reflects its origins within the Twitter organization.Rate this question:
-
- 9.
Who created Bootstrap?
- A.
Jacob Otto & Eric Suzanne
- B.
Jacob Thornton & Anna Otto
- C.
Mark Otto & Jacob Thornton
- D.
Mark Otto & Anna Otto
Correct Answer
C. Mark Otto & Jacob ThorntonExplanation
Mark Otto and Jacob Thornton created Bootstrap.Rate this question:
-
- 10.
Bootstrap is a back-end web framework
- A.
True
- B.
False
Correct Answer
B. FalseExplanation
Bootstrap is not a back-end web framework but a front-end framework. It is used for designing and developing responsive and mobile-first websites. It provides a collection of CSS and JavaScript components that can be easily implemented in web pages to create a visually appealing and user-friendly interface.Rate this question:
-
- 11.
What are the three main parts of a CSS ruleset?
- A.
Selector {value: property}
- B.
Selector {property: value}
- C.
Selector {value: value}
- D.
Property {property: property}
Correct Answer
B. Selector {property: value}Explanation
The correct answer is "selector {property: value}". In a CSS ruleset, the selector specifies which HTML elements the rule applies to, while the property defines the specific CSS property being modified, and the value is the new value assigned to that property.Rate this question:
-
- 12.
Which of the following constraints do web designers and developers have to work with in responsive design?
- A.
Smaller screens
- B.
Increased pixel densities with retina displays
- C.
Ability to switch between portrait and landscape orientation
- D.
Multi-touch gestures
- E.
Slower data connections
- F.
Distracted user attention (one eyeball and one thumb)
- G.
All of the above
Correct Answer
G. All of the aboveExplanation
Web designers and developers have to work with various constraints in responsive design. These include smaller screens, increased pixel densities with retina displays, the ability to switch between portrait and landscape orientation, multi-touch gestures, slower data connections, and distracted user attention. All of these factors need to be taken into consideration when designing and developing websites to ensure that they are responsive and provide a good user experience across different devices and scenarios.Rate this question:
-
- 13.
In Adaptive Design, you build multiple versions of a website and use server side detection to then present custom code for that device or viewport size. Often having another domain just for your mobile experience like, m.domain.com
- A.
True
- B.
False
Correct Answer
A. TrueExplanation
In Adaptive Design, multiple versions of a website are created and custom code is presented based on the device or viewport size using server side detection. This approach often involves having a separate domain, such as m.domain.com, specifically for the mobile experience. Therefore, the statement "True" is correct.Rate this question:
-
- 14.
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 given meta tag, , prevents browsers from scaling desktop websites on mobile devices. By specifying the "width=device-width" property, it ensures that the website is displayed at the device's actual width, rather than being scaled down to fit the screen. This is important for maintaining the proper layout and design of the website on mobile devices. Additionally, the "initial-scale=1" property sets the initial zoom level to 100%, further preventing any scaling of the website.Rate this question:
-
- 15.
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 aims to provide an optimal viewing experience across different devices and screen sizes. One of the challenges in achieving this is 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 large blocks of text. Therefore, the statement that a big challenge with responsive design is finding a balance between the content needs for both mobile and desktop is true.Rate this question:
-
- 16.
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 focuses on prioritizing the needs and objectives of mobile users. It eliminates unnecessary content and presents a streamlined collection of information that is optimized for fast loading and user-friendly navigation. This approach recognizes the importance of mobile devices in today's digital landscape and ensures that the mobile user experience is seamless and efficient.Rate this question:
-
- 17.
The initial intent of Bootstrap was to be a living style guide documentation for a team of Twitter developers to code in the same way following a set of pre-defined rules and components.
- A.
True
- B.
False
Correct Answer
A. TrueExplanation
Bootstrap was indeed initially created as a living style guide documentation for a team of Twitter developers. The purpose was to ensure consistency in coding by following a set of predefined rules and components. This allowed the developers to work together more efficiently and maintain a cohesive design language throughout their projects.Rate this question:
-
- 18.
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
The two main ways to add Bootstrap to a website are by linking to a precompiled CSS/JS version via CDN or locally and by linking to a customized build using the Sass source files. The first option allows you to easily include Bootstrap by referencing the CSS and JS files hosted on a content delivery network or by downloading and hosting them locally. The second option gives you more control over the customization of Bootstrap by using the Sass source files and creating a customized build specific to your website's needs.Rate this question:
-
- 19.
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 is used to scope styles to only the relevant elements. These relevant elements are commonly referred to as "components". By prefixing class names, it becomes easier to maintain and modify the styles for these specific components without affecting other elements on the page.Rate this question:
-
- 20.
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 features and functionality for building responsive websites. It includes CSS and JavaScript components that ensure proper rendering and functionality in IE9, making it the appropriate choice for supporting this browser version.Rate this question:
-
- 21.
Which grid layout below is using Bootstrap 4 with flexbox?
- A.
![Bootstrap 4 Quick Start: Certification Exam - Quiz]()
- B.
![Bootstrap 4 Quick Start: Certification Exam - Quiz]()
Correct Answer
A.Explanation
The correct answer is "Container > Row > Col". This layout structure is commonly used in Bootstrap 4 with flexbox. The "Container" class sets the maximum width of the layout and centers it on the page. The "Row" class is used to create horizontal rows within the container. The "Col" class is used to create columns within the rows, allowing for flexible and responsive layouts. The combination of these classes and the use of flexbox makes this grid layout the correct answer.Rate this question:
-
- 22.
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 a core CSS technology that is used for creating flexible and responsive layouts. It is not a custom named component created by Bootstrap. Flexbox provides a set of CSS properties and values that allow developers to easily control the alignment, direction, and ordering of elements within a container. It is widely supported by modern browsers and is commonly used in web development to create dynamic and adaptive designs. Therefore, the statement that Flexbox is a custom named component created by Bootstrap is false.Rate this question:
-
- 23.
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 Bootstrap grid system, the container is used to contain and center the content. The row is used to create horizontal groups of columns. And the col is used to define the columns within a row. The proper order of these elements is container, row, and then col.Rate this question:
-
- 24.
How is the .container-fluid class different from the .container class?
- A.
The .container-fluid class makes the container expand the full width of the browser
- B.
The .container-fluid class clears all floats and starts a new row
- C.
The .container-fluid class removes all horizontal padding so it touches the left and right edge of the browser window
Correct Answer
A. The .container-fluid class makes the container expand the full width of the browserExplanation
The .container-fluid class is different from the .container class because it allows the container to expand the full width of the browser. This means that the container will stretch to fill the entire width of the browser window, without any horizontal padding. This is in contrast to the .container class, which has a fixed width and adds horizontal padding to the container.Rate this question:
-
- 25.
For each Bootstrap 4 grid row, the number of columns has to equal ________
Correct Answer
12Explanation
For each Bootstrap 4 grid row, the number of columns has to equal 12. This means that the grid system in Bootstrap 4 is divided into 12 equal columns, and when creating a row, the total number of columns within that row should be 12. This allows for flexible and responsive layouts, as the columns can be easily adjusted and rearranged based on different screen sizes and devices.Rate this question:
- 26.
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 says 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:
-
- 27.
Fill in the blank with the correct .class name: Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with ________ class on the .row
Correct Answer
.no-guttersExplanation
The correct .class name to remove the margin from rows and padding from columns is .no-gutters. This class can be applied to the .row element in order to eliminate the gutters between individual columns and create a more compact layout.Rate this question:
- 28.
What happens if your grid columns use just the .col class?<div class="container"> <div class="row"> <div class="col"> Column </div> <div class="col"> Column </div> </div> </div>
- A.
Each column will be full width and expand 100% horizontally.
- B.
Each column will wrap the content but be auto width
- C.
Grid columns without a set breakpoint width will automatically layout with equal widths. So in this example, 50%/50%
- D.
Since the Bootstrap 4 grid uses floats, each column will float left
Correct Answer
C. Grid columns without a set breakpoint width will automatically layout with equal widths. So in this example, 50%/50%Explanation
The grid columns in this example will automatically layout with equal widths because they are using the ".col" class without any specified breakpoint width. This means that each column will take up 50% of the container's width, resulting in a 50%/50% layout.Rate this question:
-
- 29.
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 serve as a replacement for panels, thumbnails, and wells. They are designed to contain a group of content within a border and inner padding. This means that cards provide a structured and visually appealing way to display content on a webpage. Therefore, the statement that cards replace panels, thumbnails, and wells used in Bootstrap 3 is true.Rate this question:
-
- 30.
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 class name ".img-fluid" would be added to the image tag in order to make it responsive.Rate this question:
-
- 31.
Bootstrap is based on reusable ___________ which have base styles, sub item styles, and design variation styles.
- A.
Classes
- B.
Components
- C.
Widgets
- D.
Code snippets
Correct Answer
B. ComponentsExplanation
Bootstrap is a framework that provides a collection of pre-designed and pre-built components. These components are reusable and can be easily integrated into web applications. They include base styles, sub item styles, and design variation styles, making it easier for developers to create consistent and visually appealing user interfaces. Therefore, the correct answer is components.Rate this question:
-
- 32.
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, except for the md breakpoint where it will have a padding value of 4. The p-0 class will override all other classes and set the padding to 0 on all breakpoints. However, the p-md-4 class will then add a padding value of 4 specifically for the md breakpoint. The p-lg-0 class will stop the padding from flowing to the lg and xl breakpoints, effectively canceling out any padding on those breakpoints.Rate this question:
-
- 33.
What are the two javascript library dependencies Bootstrap 4 needs to work?
- A.
Jquery-3.1.1.js and affix.js
- B.
Just jquery-3.1.1.js
- C.
Jquery-3.1.1.js and tether.js
- D.
Jquery-1.1.1.js and tether.js
Correct Answer
C. Jquery-3.1.1.js and tether.jsExplanation
Bootstrap 4 requires two javascript library dependencies to work, namely jquery-3.1.1.js and tether.js. These libraries provide additional functionalities and support for Bootstrap components and features.Rate this question:
-
- 34.
What would this class do?<p class="h1">Heading</p>
- A.
Makes the paragraph the same STYLE as a h1 element
- B.
Does nothing because this class is not part of Bootstrap
- C.
Makes the paragraph the same FONT SIZE as a h1 element
Correct Answer
C. Makes the paragrapH the same FONT SIZE as a h1 elementExplanation
This class would make the paragraph the same font size as a h1 element.Rate this question:
-
- 35.
![What class would make this column centered?<div class="container">
<div class="row">
<div class="col-md-6 [class]">
Centered column
</div>
</div>
</div> - ProProfs](data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= "What class would make this column centered?<div class=\"container\">
<div class=\"row\">
<div class=\"col-md-6 [class]\">
Centered column
</div>
</div>
</div>")
What class would make this column centered?<div class="container"> <div class="row"> <div class="col-md-6 [class]"> Centered column </div> </div> </div>
- A.
.center
- B.
.center-block
- C.
.mx-auto
- D.
.justify-content-center
Correct Answer
C. .mx-autoExplanation
The class ".mx-auto" would make this column centered. This class is used in Bootstrap to horizontally center a block-level element within its parent container. It sets the left and right margins of the element to "auto", causing it to be centered. In this case, applying the ".mx-auto" class to the column would center it within the parent container.Rate this question:
-
- 36.
In Bootstrap 4, 1rem = _____ ?
- A.
14px
- B.
15px
- C.
16px
- D.
20px
Correct Answer
C. 16pxExplanation
In Bootstrap 4, 1rem is equal to 16px. This means that if we set the font-size of an element to 1rem, it will be displayed with a font size of 16 pixels. Rem stands for "root em" and is a unit of measurement that is relative to the font-size of the root element (usually the element). Therefore, 1rem will always be equal to the font-size defined for the root element, which is typically set to 16px in Bootstrap 4.Rate this question:
-
- 37.
What is missing from this navbar code in order for it to work? <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary"> <!-- toggle button --> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <!-- Brand --> <a class="navbar-brand" href="#">Brand</a> <!-- Navigation links --> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#page-1">Page Link</a></li> <li class="nav-item"><a class="nav-link" href="#page-2">Page Link</a></li> </ul> </div> </nav>
- A.
The .navbar-collapse div is missing data attributes to specify what needs to be toggled: data-toggle="collapse" data-target="#navbarNav"
- B.
The nav element is missing data attributes to specify what needs to be toggled: data-toggle="collapse" data-target="#navbarNav"
- C.
The navbar toggler is missing data attributes to specify what needs to be toggled: data-toggle="collapse" data-target="#navbarNav"
- D.
Everything is as it should be
Correct Answer
C. The navbar toggler is missing data attributes to specify what needs to be toggled: data-toggle="collapse" data-target="#navbarNav"Explanation
The navbar toggler is missing data attributes to specify what needs to be toggled: data-toggle="collapse" data-target="#navbarNav". These attributes are necessary for the toggler button to work properly and toggle the collapse of the navigation links. Without these attributes, the toggler button will not have any effect on the navbar.Rate this question:
-
- 38.
What does the .navbar-toggleable-* class do?
- A.
This class does not exist
- B.
It sets the breakpoint the toggle button will HIDE on the navbar
- C.
It sets the breakpoint the toggle button will SHOW on the navbar
Correct Answer
C. It sets the breakpoint the toggle button will SHOW on the navbarExplanation
The .navbar-toggleable-* class sets the breakpoint at which the toggle button will show on the navbar. This means that when the screen size reaches the specified breakpoint, the toggle button will be visible on the navbar, allowing users to toggle the navigation menu.Rate this question:
-
- 39.
The data attribute data-ride="carousel" , is used to mark a carousel as animating starting at page load.
- A.
True
- B.
False
Correct Answer
A. TrueExplanation
The data attribute "data-ride" is used to mark a carousel as animating starting at page load. This means that when the page loads, the carousel will automatically start animating without any user interaction.Rate this question:
-
- 40.
The .form-group class is the easiest way to add some structure to forms. Its only purpose is to provide margin-bottom around a label and form control pairing.
- A.
True
- B.
False
Correct Answer
A. TrueExplanation
The .form-group class is used to add structure to forms by providing margin-bottom around a label and form control pairing. It helps in visually organizing and separating form elements, making them easier to read and understand. This class is specifically designed for this purpose and does not have any other functionality. Therefore, the statement "The .form-group class is the easiest way to add some structure to forms. Its only purpose is to provide margin-bottom around a label and form control pairing." is true.Rate this question:
-
- 41.
What is this called?
- A.
Nav button
- B.
A select menu
- C.
A dropdown
Correct Answer
C. A dropdownExplanation
This is called a dropdown because it is a type of user interface element that allows users to select one option from a list of choices that are hidden until the user clicks or hovers over the dropdown.Rate this question:
-
- 42.
What classes are needed to create this?
- A.
Class="alert alert-success"
- B.
Class="alert alert-warning"
- C.
Class="alert alert-info"
- D.
Class="alert alert-danger"
Correct Answer
C. Class="alert alert-info"Explanation
The correct answer is class="alert alert-info". This class is needed to create a specific type of alert message with an information or informational content. The "alert" class is used to create an alert box, and the "alert-info" class is specifically used to style the alert box with a blue color to indicate an informational message.Rate this question:
-
- 43.
What is this component called and what class does it use?<div class="[class]" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div>
- A.
Button Group = .btn-grp
- B.
Button Group = .btn-group
- C.
Button Row = .btn-row
- D.
Button Bar = .btn-bar
Correct Answer
B. Button Group = .btn-groupExplanation
This component is called a "Button Group" and it uses the class ".btn-group".Rate this question:
-
- 44.
The global font size was changed from 14px to 20px.
- A.
True
- B.
False
Correct Answer
B. FalseExplanation
*##*Correct. It was changed to 16px*##*Rate this question:
-
- 45.
Since the Glyphicons have been removed from Bootstrap 4. What icon libraries would make suitable alternatives?
- A.
Font Awesome
- B.
Octicons
- C.
Upstream version of Glyphicons
- D.
All of the above
Correct Answer
D. All of the aboveExplanation
The correct answer is "All of the above". This means that all three icon libraries mentioned - Font Awesome, Octicons, and the upstream version of Glyphicons - would make suitable alternatives to the removed Glyphicons in Bootstrap 4. These libraries provide a wide range of icons that can be easily integrated into web projects.Rate this question:
-
- 46.
What is wrong with the classes used in this button code?<a href="#" class="btn btn-default btn-xs" role="button" aria-pressed="true">Action Link</a>
- A.
.btn-default class was renamed to .btn-secondary in version 4
- B.
.btn-xs class has been removed in version 4 and you can use .btn-sm instead
- C.
The .btn class should be .button
- D.
The first two are correct
Correct Answer
D. The first two are correctExplanation
The first two options are correct. In version 4, the class ".btn-default" was renamed to ".btn-secondary". Additionally, the class ".btn-xs" has been removed in version 4, and it is recommended to use ".btn-sm" instead. These changes reflect updates and improvements in the button styling and sizing in the newer version. The last option, stating that the ".btn" class should be ".button", is incorrect as there is no mention of such a change.Rate this question:
-
- 47.
I would like to have an inline list but the code below is not working. What required class is missing on the list items?<ul class="list-inline"> <li class="">Lorem ipsum</li> <li class="">Phasellus iaculis</li> <li class="">Nulla volutpat</li> </ul>
- A.
.list-item
- B.
.li
- C.
.list-inline-item
- D.
You actually don't need a class on the list items for it to work
Correct Answer
C. .list-inline-itemExplanation
The correct answer is ".list-inline-item". To create an inline list, the list items should have the class "list-inline-item". This class is missing in the given code, which is why the inline list is not working.Rate this question:
-
- 48.
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 "card" would replace the asterisks in the code block.Rate this question:
- 49.
The code block below floats a div on the sm breakpoint and up. How would I rewrite the class if I only wanted it to float on xs? <div class="float-sm-left">Float left on viewports sized SM (small) or wider</div>
- A.
There is not class combination that will work so I would need to write a custom class to get this to work.
- B.
.float-left
- C.
.float-xs-left
Correct Answer
A. There is not class combination that will work so I would need to write a custom class to get this to work. -
.jpg)
![What class would make this column centered?<div class="container">
<div class="row">
<div class="col-md-6 [class]">
Centered column
</div>
</div>
</div> - ProProfs](/api/ckeditor_images/Screen Shot 2017-07-25 at 4_46_03 AM.png "What class would make this column centered?<div class=\"container\">
<div class=\"row\">
<div class=\"col-md-6 [class]\">
Centered column
</div>
</div>
</div>")
![What is this component called and what class does it use?<div class="[class]" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div> - ProProfs](/api/ckeditor_images/Screen Shot 2017-07-25 at 5_48_40 AM.png "What is this component called and what class does it use?<div class=\"[class]\" role=\"group\" aria-label=\"Basic example\">
<button type=\"button\" class=\"btn btn-secondary\">Left</button>
<button type=\"button\" class=\"btn btn-secondary\">Middle</button>
<button type=\"button\" class=\"btn btn-secondary\">Right</button>
</div>")
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 -
Jul 19, 2017Quiz Created by
Jacob Lett
Back to top