MCQs Of Class 5 - Buttons and Alerts

 

MCQs Of Class 5 - Buttons and Alerts

1.   Which class is used to create a primary button in Bootstrap?
a) btn-danger
b) btn-primary
c) btn-warning
d) btn-light
Explanation: The correct class is btn-primary, used to style a primary button.

2.   What class will you use to create a small button in Bootstrap?
a) btn-sm
b) btn-lg
c) btn-mini
d) btn-small
Explanation: The btn-sm class is used to create a small button in Bootstrap.

3.   Which button class is used for a danger button in Bootstrap?
a) btn-warning
b) btn-danger
c) btn-dark
d) btn-info
Explanation: The btn-danger class is used to create a danger button (usually red).

4.   How can you create a button that is not clickable in Bootstrap?
a) disabled
b) btn-disabled
c) btn-inactive
d) no-click
Explanation: The disabled attribute is used to make a button non-clickable.

5.   What class is used to create an alert for success messages?
a) alert-warning
b) alert-info
c) alert-success
d) alert-danger
Explanation: The alert-success class is used for success messages.

6.   Which class is used to make an alert dismissible in Bootstrap?
a) alert-hide
b) alert-dismissible
c) alert-dismiss
d) alert-close
Explanation: The alert-dismissible class allows the alert to be dismissed.

7.   What is the default color of an alert with the class alert-info?
a) Green
b) Blue
c) Red
d) Yellow
Explanation: alert-info produces a blue-colored alert.

8.   Which class is used to display an error alert in Bootstrap?
a) alert-danger
b) alert-warning
c) alert-info
d) alert-success
Explanation: The alert-danger class is used to display error alerts (usually red).

9.   What class should you use to create a large button in Bootstrap?
a) btn-lg
b) btn-xl
c) btn-large
d) btn-big
Explanation: The class btn-lg is used to create large buttons.

10.                     Which Bootstrap class is used for a warning alert?
a) alert-warning
b) alert-danger
c) alert-success
d) alert-info
Explanation: The alert-warning class is used for warning alerts.

11.                     Which button class would you use for a button that alerts success messages?
a) btn-success
b) btn-info
c) btn-warning
d) btn-danger
Explanation: The btn-success class is used to create a button that indicates success.

12.                     How do you add a close button to a dismissible alert?
a) Add <button class="btn-close"> inside the alert.
b) Use the data-dismiss attribute.
c) Use the close-btn class.
d) Use alert-close class.
Explanation: You use <button class="btn-close"> to close an alert.

13.                     What happens when you add the btn-lg class to a button?
a) It makes the button small.
b) It makes the button large.
c) It makes the button disabled.
d) It adds a hover effect to the button.
Explanation: The btn-lg class makes the button large.

14.                     Which Bootstrap class is used to display an informational alert?
a) alert-info
b) alert-success
c) alert-warning
d) alert-danger
Explanation: The alert-info class is used to display informational alerts.

15.                     Which class would you use to create a link styled as a button?
a) btn-link
b) btn-primary
c) link-button
d) btn-info
Explanation: The btn-link class is used to create a link styled as a button.

16.                     What does the btn-close class do in Bootstrap?
a) It adds a button to close the webpage.
b) It adds a close icon to a button.
c) It creates a button to close alerts.
d) It disables the button.
Explanation: The btn-close class adds a close icon to dismiss alerts.

17.                     How can you trigger an alert using a button click in Bootstrap?
a) Use JavaScript's alert() function.
b) Add a data-toggle="alert" attribute to the button.
c) Use a button with btn-alert class.
d) Use onclick="showAlert()" in a button.
Explanation: You can trigger an alert using JavaScript's alert() function in the button's onclick attribute.

18.                     What class is used for a default button size in Bootstrap?
a) btn-default
b) btn-normal
c) btn
d) btn-primary
Explanation: The default button size in Bootstrap is just btn, without any size class.

19.                     Which class will make an alert's background yellow in Bootstrap?
a) alert-info
b) alert-warning
c) alert-danger
d) alert-light
Explanation: The alert-warning class will make an alert's background yellow.

20.                     How can you make a button round in Bootstrap?
a) Add the rounded class.
b) Add the btn-circle class.
c) Use border-radius CSS.
d) Add the btn-rounded class.
Explanation: The rounded class can be added to a button to make it round.

21.                     Which class will you use to create a button with a green background in Bootstrap?
a) btn-danger
b) btn-success
c) btn-warning
d) btn-primary
Explanation: The btn-success class is used to create a button with a green background.

22.                     Which class will you apply to add a button group?
a) btn-group
b) btn-group-horizontal
c) group-buttons
d) button-group
Explanation: The btn-group class is used to group buttons together.

23.                     What does the fade show class do in a dismissible alert?
a) It hides the alert after it fades out.
b) It adds a fading effect to the alert.
c) It shows the alert immediately.
d) It adds a glowing effect to the alert.
Explanation: The fade show classes add a fading effect and make the alert visible.

24.                     Which class will you use to create a button with a blue background in Bootstrap?
a) btn-primary
b) btn-dark
c) btn-secondary
d) btn-info
Explanation: The btn-primary class creates a button with a blue background.

25.                     What is the role of the aria-label="Close" attribute in a dismissible alert?
a) It adds a close button to the alert.
b) It ensures accessibility for screen readers.
c) It disables the close button.
d) It adds the text "Close" to the button.
Explanation: The aria-label="Close" attribute ensures accessibility by providing an accessible label for screen readers.

26.                     Which alert class will you use for a light-themed alert in Bootstrap?
a) alert-light
b) alert-dark
c) alert-info
d) alert-success
Explanation: The alert-light class is used to create a light-themed alert.

27.                     How do you change the text color of a button in Bootstrap?
a) Use text-color class.
b) Use custom CSS to change the color.
c) Use btn-text class.
d) Buttons do not allow text color changes in Bootstrap.
Explanation: You can change the text color of a button using custom CSS or predefined color classes in Bootstrap.

28.                     What Bootstrap class can be used to display an alert with a dark background?
a) alert-dark
b) alert-primary
c) alert-info
d) alert-light
Explanation: The alert-dark class is used for dark-themed alerts.

29.                     Which class will add a spinner inside the button to show loading in Bootstrap?
a) btn-spinner
b) btn-loading
c) spinner-border
d) btn-loading-spinner
Explanation: The spinner-border class is used to add a loading spinner inside the button.

30.                     How can you add padding to an alert in Bootstrap?
a) Use the alert-padding class.
b) Use the p-3 utility class for padding.
c) Use custom padding in CSS.
d) Alerts have fixed padding that cannot be changed.
Explanation: The p-3 class can be used to add padding inside the alert.

31.                     Which button class will you use to create a button that is outlined (bordered but transparent)?
a) btn-outline
b) btn-outlined
c) btn-outline-primary
d) btn-border
Explanation: The btn-outline-primary class creates a button with a bordered and transparent style.

32.                     Which alert class provides the red color for alerts?
a) alert-danger
b) alert-warning
c) alert-primary
d) alert-success
Explanation: The alert-danger class provides a red color for alerts.

33.                     What class is used to create a dismissible button in Bootstrap?
a) btn-dismissable
b) alert-dismissible
c) btn-closeable
d) btn-danger
Explanation: The alert-dismissible class is used to make alerts dismissible.

34.                     Which class can be used to set the background color of an alert to green?
a) alert-success
b) alert-info
c) alert-warning
d) alert-danger
Explanation: The alert-success class sets the background color of the alert to green.

35.                     Which Bootstrap class can be used for a button that is grouped with other buttons?
a) btn-group
b) btn-link
c) btn-inline
d) btn-combined
Explanation: The btn-group class groups buttons together into a single block.

36.                     Which class is used to display an alert with a yellow background in Bootstrap?
a) alert-warning
b) alert-danger
c) alert-success
d) alert-info
Explanation: The alert-warning class gives a yellow background to the alert.

37.                     What class is used to create a blue-themed button in Bootstrap?
a) btn-primary
b) btn-info
c) btn-dark
d) btn-light
Explanation: The btn-primary class creates a blue-themed button in Bootstrap.

38.                     Which button class should you use to indicate a neutral button (without any special color)?
a) btn-primary
b) btn-default
c) btn-secondary
d) btn-success
Explanation: The btn-secondary class is typically used for neutral or secondary buttons.

39.                     Which class should you use to display a dark-colored button in Bootstrap?
a) btn-dark
b) btn-secondary
c) btn-info
d) btn-light
Explanation: The btn-dark class is used for dark-colored buttons.

40.                     How can you make a button larger in Bootstrap?
a) Use btn-large class.
b) Use btn-xl class.
c) Use btn-lg class.
d) Use btn-big class.
Explanation: The btn-lg class makes the button larger.

41.                     Which class can be used to add a border to the alert in Bootstrap?
a) alert-border
b) alert-bordered
c) alert-outline
d) alert-outline-primary
Explanation: The alert-outline class can be used to add a border to the alert.

42.                     Which class will you apply to remove the padding from an alert in Bootstrap?
a) alert-no-padding
b) alert-no-space
c) p-0
d) alert-padding-none
Explanation: The class p-0 is used to remove padding from elements, including alerts.

43.                     Which alert class is used for neutral information in Bootstrap?
a) alert-info
b) alert-success
c) alert-warning
d) alert-danger
Explanation: The alert-info class is used to show neutral information alerts.

44.                     Which button size class makes a button extra large in Bootstrap?
a) btn-sm
b) btn-lg
c) btn-xl
d) btn-extra-large
Explanation: The btn-lg class makes the button larger, but there's no direct btn-xl for extra large.

45.                     Which class is used to remove a button's background color?
a) btn-transparent
b) btn-outline
c) btn-clear
d) btn-none
Explanation: The btn-outline class is used to remove a button's background color and add borders.

46.                     What is the function of the alert-dismissible class in Bootstrap?
a) It makes the alert draggable.
b) It allows the alert to be closed by clicking a button.
c) It hides the alert immediately.
d) It makes the alert appear at the top of the page.
Explanation: The alert-dismissible class makes the alert closeable with a close button.

47.                     Which class will you use to make a button bordered but without a background color?
a) btn-link
b) btn-outline-primary
c) btn-bordered
d) btn-transparent
Explanation: The btn-outline-primary class creates a button bordered with no background color.

48.                     Which class should be used to style a button in a darker tone in Bootstrap?
a) btn-dark
b) btn-primary
c) btn-info
d) btn-secondary
Explanation: The btn-dark class is used to style a button in a darker tone.

49.                     What is the role of the btn-danger class in Bootstrap?
a) To create a button that indicates success.
b) To create a button that indicates a neutral action.
c) To create a button that indicates a danger or error action.
d) To create a large button.
Explanation: The btn-danger class is used for a button that indicates danger or error.

50.                     What class is used to give an alert a green background color in Bootstrap?
a) alert-success
b) alert-info
c) alert-warning
d) alert-danger
Explanation: The alert-success class gives an alert a green background color.