Fundamentals of Front End Development MCQs with Answers
Practice important Fundamentals of Front End Development MCQs with answers and explanations.
Chapter: 176
Q1961:
Fill in the blank: To show the progress of a task as a percentage, you can use the style attribute with _____.
A. width
B. height
C. color
D. border
Correct Answer:
A
Chapter: 176
Q1962:
How can you create a stacked progress bar in Bootstrap?
A. By using multiple .progress classes
B. By stacking multiple .progress-bar elements inside a single .progress
C. By adding the .progress-bar-striped class
D. By using the .progress-stack class
Correct Answer:
B
Chapter: 176
Q1963:
What class makes the progress bar look animated?
A. .progress-bar-active
B. .progress-bar-striped
C. .progress-bar-info
D. .progress-bar-success
Correct Answer:
B
Chapter: 176
Q1964:
Fill in the blank: The class ____ is used to provide contextual colors to progress bars.
A. .progress-bar-success
B. .progress-bar-striped
C. .progress-bar-active
D. .progress-bar-info
Correct Answer:
A
Chapter: 176
Q1965:
What is the correct syntax to create a progress bar with 50% completion?
A. <div class="progress"><div class="progress-bar" role="progressbar" style="width:50%"></div></div>
B. <div class="progress"><div class="progress-bar progress-bar-info" style="width:50%">50%</div></div>
C. <div class="progress-bar" style="width:50%"></div>
D. <div class="progress-bar progress-bar-success" style="width:50%"></div>
Correct Answer:
B
Chapter: 176
Q1966:
Fill in the blank: A stacked progress bar is created by placing multiple ____ inside a single .progress element.
A. .progress
B. .progress-bars
C. .progress-bar
D. .progress-items
Correct Answer:
C
Chapter: 176
Q1967:
What attribute is used to specify the current progress value in a progress bar?
A. aria-valuemin
B. aria-valuemax
C. aria-valuenow
D. aria-value
Correct Answer:
C
Chapter: 177
Q1968:
Which class is used to create basic pagination in Bootstrap?
A. .pagination-basic
B. .pagination-default
C. .pagination
D. .pagination-standard
Correct Answer:
C
Chapter: 177
Q1969:
Fill in the blank: To create larger pagination blocks, use the class _____.
A. .pagination-lg
B. .pagination-xl
C. .pagination-large
D. .pagination-big
Correct Answer:
A
Chapter: 177
Q1970:
How do you indicate a disabled pagination link?
A. Add the class .inactive
B. Add the class .disabled
C. Use the .disabled attribute
D. Add the class .disabled-link
Correct Answer:
B
Chapter: 177
Q1971:
What class is used to create smaller pagination blocks?
A. .pagination-small
B. .pagination-sm
C. .pagination-mini
D. .pagination-reduced
Correct Answer:
B
Chapter: 177
Q1972:
Fill in the blank: To align the previous and next buttons to the sides of the page, use the class ____.
A. .align-buttons
B. .pager-align
C. .previous and .next
D. .pager-align-buttons
Correct Answer:
C
Chapter: 177
Q1973:
How do you create pagination with only previous and next buttons in Bootstrap?
A. Add the .pager class to a <div>
B. Add the .pager class to a <ul>
C. Add the .pagination class to a <div>
D. Add the .pagination class to a <ul>
Correct Answer:
B
Chapter: 177
Q1974:
Fill in the blank: In the pagination example, the class ____ is used to show the current page.
A. .active
B. .current
C. .selected
D. .current-page
Correct Answer:
A
Chapter: 177
Q1975:
Which class should be added to a pagination element for a basic pagination style?
A. .pagination
B. .pagination-basic
C. .pagination-default
D. .pagination-style
Correct Answer:
A
Chapter: 177
Q1976:
Fill in the blank: To indicate the next page in a pager, use the class ____.
A. .next
B. .forward
C. .following
D. .next-page
Correct Answer:
A
Chapter: 177
Q1977:
What is the syntax to create a basic pagination block with pages 1 to 5?
A. <ul class="pagination"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul>
B. <ul class="pagination"><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul>
C. <ul class="pagination"><li><a href="#">1</a></li><li class="active"><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul>
D. <ul class="pagination"><li><a href="#">1</a></li><li class="disabled"><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul>
Correct Answer:
A
Chapter: 178
Q1978:
What class is used to create a basic list group in Bootstrap?
A. .list-group-basic
B. .list-group-item
C. .list-group
D. .list-group-element
Correct Answer:
C
Chapter: 178
Q1979:
Fill in the blank: To disable a list group item, use the class ____.
A. .inactive
B. .disabled
C. .not-clickable
D. .no-access
Correct Answer:
B
Chapter: 178
Q1980:
How do you add a badge to a list group item?
A. Use the class .badge in a <div>
B. Add a <span> element with class .badge
C. Apply .badge class to <a> tag
D. Use .badge class in <ul> tag
Correct Answer:
B