Bootstrap Online Test Questions Part 4

19. .img-circle class makes the entire image round by adding border-radius:_________.

a. 50%
b. 45%
c. 100%
d. None of the above

Answer: a. 50%

Explanation: In Bootstrap, the .img-circle class shapes an image to a circle.


20. Use a <div> element with the _________ class to create a container for media objects.

a. .media
b. .media-left
c. .media-right
d. None of the above

Answer: a. .media

Explanation: Bootstrap provides an easy way to align media objects (like images or videos) to the left or to the right of some content. The .media class allows to float media object to the left or right of a content block.


21. The contextual classes that are used to create colored progress bar:

a. .progress-bar-success
b. .progress-bar-info
c. .progress-bar-warning
d. .progress-bar-danger
e. All of the above

Answer: e. All of the above

Explanation: A progress bars can be used for showing the progress of a task or action to the users.
The contextual classes that can be used with progress bars are:

  • progress-bar-success
  • progress-bar-info
  • progress-bar-warning
  • progress-bar-danger


22. The class ".list-group" within the <ul> element and the class ".list-group-item" within the <li> element are used to create a basic list group.

a. True
b. False

Answer: a. True

Explanation: In Bootstraps, to create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item.
Example:
<ul class="list-group">
   <li class="list-group-item">First </li>
   <li class="list-group-item">Second </li>
</ul>


23.  Which of the following bootstrap classes are used to create a vertical pills navigation?

a. .nav, .nav-tabs
b. .nav, .nav-pills, .nav-stacked
c. .nav, .nav-pills, .nav-justified
d. .nav, .nav-tabs, .nav-justified

Answer: b. .nav, .nav-pills, .nav-stacked

Explanation: Pills are created with <ul class="nav nav-pills">. Also mark the current page with <li class="active">. It can also be displayed vertically after adding the .nav-stacked class.


24. The Bootstrap Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.

a. True
b. False

Answer: a. True

Explanation: Bootstrap provides the Scrollspy plugin that is used to automatically update links in a navigation list based on scroll position.


25. Which of the following contextual classes are used to color the panels?

a. .panel-primary
b. .panel-success
c. .panel-info
d. .panel-warning
e. All of the above

Answer: e. All of the above

Explanation: In Bootstrap, a panel provides the bordered box with some padding around its content. To color the panel, use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger).

▲