Fundamentals of Front End Development MCQs with Answers
Practice important Fundamentals of Front End Development MCQs with answers and explanations.
Chapter: 172
Q1921:
What class makes an image scale nicely to the parent element and applies max-width: 100%;?
A. .img-thumbnail
B. .img-circle
C. .img-rounded
D. .img-responsive
Correct Answer:
D
Chapter: 172
Q1922:
Fill in the blank: The class ____ will shape an image to a thumbnail.
A. .img-circle
B. .img-rounded
C. .img-responsive
D. .img-thumbnail
Correct Answer:
D
Chapter: 172
Q1923:
What class should be added to an <iframe> to ensure it scales properly in Bootstrap?
A. .embed-responsive-item
B. .img-responsive
C. .img-thumbnail
D. .img-circle
Correct Answer:
A
Chapter: 172
Q1924:
Fill in the blank: To create a 16:9 aspect ratio for an embedded video, use the class _____.
A. .embed-responsive-4by3
B. .embed-responsive-16by9
C. .img-responsive
D. .embed-thumbnail
Correct Answer:
B
Chapter: 172
Q1925:
What does the .img-responsive class apply to an image?
A. max-width: 100%; and height: auto;
B. width: 100%; and height: auto;
C. border-radius: 50%;
D. border: 1px solid #000;
Correct Answer:
A
Chapter: 172
Q1926:
Fill in the blank: The class used for responsive embeds with a 4:3 aspect ratio is _____.
A. .embed-responsive-4by3
B. .embed-responsive-16by9
C. .img-rounded
D. .img-responsive
Correct Answer:
A
Chapter: 172
Q1927:
What does the .embed-responsive-16by9 class do?
A. Creates a 4:3 aspect ratio for embedded content
B. Defines a 16:9 aspect ratio for embedded content
C. Makes images responsive
D. Adds rounded corners to an image
Correct Answer:
B
Chapter: 172
Q1928:
Fill in the blank: To add rounded corners to an image in Bootstrap, you use the class _____.
A. .img-rounded
B. .img-responsive
C. .img-circle
D. .img-thumbnail
Correct Answer:
A
Chapter: 172
Q1929:
What aspect ratio is set by the class .embed-responsive-4by3?
A. 0.67291666666667
B. 0.16875
C. 0.042361111111111
D. 0.084027777777778
Correct Answer:
B
Chapter: 173
Q1930:
What class is used to create a Jumbotron in Bootstrap?
A. .jumbotron
B. .page-header
C. .container
D. .alert
Correct Answer:
A
Chapter: 173
Q1931:
Fill in the blank: To make a Jumbotron extend to the screen edges, place it _____.
A. inside a .container
B. outside a .container
C. within a .row
D. inside a .col-md
Correct Answer:
B
Chapter: 173
Q1932:
What is the purpose of the .page-header class in Bootstrap?
A. Creates a large box with rounded corners
B. Adds a horizontal line under the heading
C. Creates a responsive container
D. Styles the text in a heading
Correct Answer:
B
Chapter: 173
Q1933:
Fill in the blank: To create a Jumbotron that does not extend to the edges of the screen, place it inside a _____.
A. .container
B. .jumbotron
C. .page-header
D. .row
Correct Answer:
A
Chapter: 173
Q1934:
What HTML element is used to create a Jumbotron?
A. <section>
B. <article>
C. <div>
D. <header>
Correct Answer:
C
Chapter: 173
Q1935:
Fill in the blank: The .jumbotron class makes the background color of the box _____.
A. grey
B. blue
C. green
D. red
Correct Answer:
A
Chapter: 173
Q1936:
What will happen if you place a Jumbotron outside of a .container?
A. It will have a grey background
B. It will extend to the edges of the screen
C. It will have rounded corners
D. It will be centered on the page
Correct Answer:
B
Chapter: 173
Q1937:
Fill in the blank: To add a horizontal line below a heading, use the class _____.
A. .jumbotron
B. .page-header
C. .container
D. .alert
Correct Answer:
B
Chapter: 173
Q1938:
What is the default background color of a Jumbotron in Bootstrap?
A. Red
B. Grey
C. Blue
D. Green
Correct Answer:
B
Chapter: 173
Q1939:
Fill in the blank: The .page-header class adds extra space around the _____.
A. heading
B. paragraph
C. button
D. image
Correct Answer:
A
Chapter: 174
Q1940:
What class is used to create a primary button in Bootstrap?
A. .btn-success
B. .btn-info
C. .btn-primary
D. .btn-danger
Correct Answer:
C