MCQs of Class 3 - Typography and Text Utilities
Typography Classes
1. Which Bootstrap class is used to style the largest heading?
o A) .h6
o B) .h1
o C) .heading-large
o D) .text-large
Answer: B) .h1
Explanation: The .h1 class applies the largest font size for headings in Bootstrap.
2. What does the .lead class do?
o A) Styles a paragraph with bold text.
o B) Adds a shadow to the text.
o C) Highlights a paragraph with larger font size and spacing.
o D) Aligns text to the center.
Answer: C) Highlights a paragraph with larger font size and spacing.
Explanation: The .lead class is used to emphasize paragraphs, making them more prominent.
3. Which class is used for italicizing text?
o A) .text-italic
o B) .fst-italic
o C) .text-style
o D) .italic
Answer: B) .fst-italic
Explanation: The .fst-italic class applies an italic style to text in Bootstrap.
4. What is the purpose of .h6 class?
o A) Adds shadow to a heading.
o B) Styles text as the smallest heading.
o C) Converts text to uppercase.
o D) Centers the heading.
Answer: B) Styles text as the smallest heading.
Explanation: The .h6 class applies the smallest font size among heading classes.
5. Which class can be used to transform text to uppercase?
o A) .text-uppercase
o B) .text-capitalize
o C) .text-bold
o D) .text-large
Answer: A) .text-uppercase
Explanation: The .text-uppercase class converts all text to uppercase.
Text Alignment
6. Which class aligns text to the left?
o A) .text-start
o B) .text-left
o C) .text-end
o D) .text-align-left
Answer: A) .text-start
Explanation: The .text-start class aligns text to the left, which is the default alignment.
7. What class is used to center align text in Bootstrap?
o A) .text-center
o B) .align-center
o C) .center-align
o D) .text-middle
Answer: A) .text-center
Explanation: The .text-center class centers text within its container.
8. How can you align text to the right using Bootstrap?
o A) .text-align-right
o B) .text-right
o C) .text-end
o D) .align-right
Answer: C) .text-end
Explanation: The .text-end class aligns text to the right.
9. Which class is used for justified text alignment?
o A) .text-justify
o B) .text-align-justify
o C) .justify-content
o D) .text-start
Answer: A) .text-justify
Explanation: The .text-justify class makes text justified, spreading it evenly across the line width.
10. If you want to align text on smaller screens, which class should you use?
o A) .text-sm-start
o B) .align-sm-left
o C) .text-responsive-left
o D) .text-sm-left
Answer: A) .text-sm-start
Explanation: Bootstrap provides responsive alignment classes like .text-sm-start for specific screen sizes.
Text Utilities
11. Which utility class changes text color to Bootstrap's primary color?
o A) .text-blue
o B) .text-primary
o C) .text-color-primary
o D) .primary-text
Answer: B) .text-primary
Explanation: The .text-primary class applies the primary theme color to text.
12. What does the .text-muted class do?
o A) Makes text bold.
o B) Styles text with a lighter, muted color.
o C) Highlights text with a background.
o D) Converts text to uppercase.
Answer: B) Styles text with a lighter, muted color.
Explanation: The .text-muted class reduces the emphasis on text by applying a lighter color.
13. Which class makes text bold in Bootstrap?
o A) .fw-bold
o B) .text-bold
o C) .font-weight-bold
o D) .text-heavy
Answer: A) .fw-bold
Explanation: The .fw-bold class applies a bold font weight to text.
14. What is the purpose of .text-danger?
o A) Highlights text in red.
o B) Underlines text.
o C) Makes text bold.
o D) Aligns text to the center.
Answer: A) Highlights text in red.
Explanation: The .text-danger class styles text with a red color to indicate warnings or errors.
15. Which class is used to apply a small font size to text?
o A) .small
o B) .text-small
o C) .fs-sm
o D) .fw-small
Answer: A) .small
Explanation: The .small class reduces the font size of text.
Combination of Classes
16. What does the .text-primary fw-bold combination achieve?
o A) Bold text with a primary color.
o B) Italicized text with a large font size.
o C) Center-aligned text with a light color.
o D) Uppercase text with a green color.
Answer: A) Bold text with a primary color.
Explanation: The combination applies both bold weight and primary color.
17. How do you create an uppercase, italicized, and centered text?
o A) .text-uppercase text-center fst-italic
o B) .text-uppercase fw-bold fst-italic
o C) .text-center text-uppercase fw-light
o D) .fw-bold text-center text-italic
Answer: A) .text-uppercase text-center fst-italic
Explanation: The combination of these classes achieves the specified styles.
More Questions
18. What is the default alignment for text in Bootstrap?
Answer: Left-aligned.
19. How do you highlight a warning message in Bootstrap?
Answer: Use .text-warning.
20. What does .fw-light do?
Answer: Makes text lighter in weight.
21. Which class underlines text?
Answer: .text-decoration-underline.
22. What is .text-nowrap used for?
Answer: Prevents text wrapping.
23. How do you make text responsive for screen sizes?
Answer: Use responsive text alignment classes like .text-md-center.
24. Which class is used for text capitalization?
Answer: .text-capitalize.
Pattern Continues...
Questions can follow this pattern, combining utilities (.text-success, .fw-normal, .text-decoration-none) and their behaviors for advanced learning.
You said:
give 50 mcqs
ChatGPT said:
MCQs on Typography and Text Utilities in Bootstrap
Typography Classes
1. Which Bootstrap class is used to style the largest heading?
o A) .h6
o B) .h1
o C) .heading-large
o D) .text-large
Answer: B) .h1
2. What is the purpose of the .lead class?
o A) Makes text bold.
o B) Highlights a paragraph with a larger font size and spacing.
o C) Centers the paragraph.
o D) Converts text to uppercase.
Answer: B) Highlights a paragraph with a larger font size and spacing.
3. Which class is used to style the smallest heading?
o A) .h1
o B) .h5
o C) .h6
o D) .small-heading
Answer: C) .h6
4. What does the .fst-italic class do?
o A) Makes text bold.
o B) Italicizes text.
o C) Adds a shadow to text.
o D) Aligns text to the right.
Answer: B) Italicizes text.
5. Which class makes text bold in Bootstrap?
o A) .text-bold
o B) .fw-bold
o C) .text-heavy
o D) .text-uppercase
Answer: B) .fw-bold
6. How do you underline text in Bootstrap?
o A) .text-decoration-underline
o B) .text-underline
o C) .fw-bold
o D) .text-primary
Answer: A) .text-decoration-underline
7. Which class makes text larger?
o A) .fs-1
o B) .text-lg
o C) .h6
o D) .lead
Answer: A) .fs-1
8. How do you transform text to uppercase in Bootstrap?
o A) .text-uppercase
o B) .text-capitalize
o C) .fw-bold
o D) .lead
Answer: A) .text-uppercase
9. What does .text-lowercase do?
o A) Transforms text to lowercase.
o B) Capitalizes the first letter of each word.
o C) Centers the text.
o D) Adds a shadow to the text.
Answer: A) Transforms text to lowercase.
10. Which class capitalizes the first letter of each word?
o A) .text-lowercase
o B) .text-uppercase
o C) .text-capitalize
o D) .fw-bold
Answer: C) .text-capitalize
Text Alignment
11. What is the default text alignment in Bootstrap?
o A) Center
o B) Left
o C) Right
o D) Justified
Answer: B) Left
12. Which class aligns text to the center?
o A) .text-center
o B) .text-align-center
o C) .align-center
o D) .center-align
Answer: A) .text-center
13. How do you align text to the right using Bootstrap?
o A) .text-right
o B) .text-end
o C) .text-align-right
o D) .align-right
Answer: B) .text-end
14. What class justifies text in Bootstrap?
o A) .text-justify
o B) .text-align-justify
o C) .justify-content
o D) .text-wrap
Answer: A) .text-justify
15. How do you align text for small screens?
o A) .text-sm-left
o B) .text-sm-start
o C) .text-responsive
o D) .text-sm-align
Answer: B) .text-sm-start
16. Which class aligns text to the middle?
o A) .text-middle
o B) .text-align-middle
o C) .align-middle
o D) Bootstrap does not have a .text-middle class.
Answer: D) Bootstrap does not have a .text-middle class.
17. Which class is used to prevent text wrapping?
o A) .text-nowrap
o B) .no-wrap
o C) .text-nowrapping
o D) .nowrap
Answer: A) .text-nowrap
18. How do you make text alignment responsive?
o A) Use classes like .text-md-center.
o B) Use .align-responsive.
o C) Use .text-responsive-center.
o D) Use .responsive-align.
Answer: A) Use classes like .text-md-center.
Text Utilities
19. Which utility class makes text appear in primary theme color?
o A) .text-blue
o B) .text-primary
o C) .text-color-primary
o D) .primary-text
Answer: B) .text-primary
20. What is the purpose of .text-muted?
o A) Highlights text.
o B) Styles text with a lighter, muted color.
o C) Converts text to uppercase.
o D) Adds bold styling.
Answer: B) Styles text with a lighter, muted color.
21. Which class styles text in red for warnings?
o A) .text-warning
o B) .text-danger
o C) .text-alert
o D) .text-error
Answer: B) .text-danger
22. How do you style text in green for success messages?
o A) .text-success
o B) .text-green
o C) .text-alert
o D) .text-primary
Answer: A) .text-success
23. Which class makes text bold?
o A) .fw-bold
o B) .text-bold
o C) .text-heavy
o D) .text-uppercase
Answer: A) .fw-bold
24. Which class applies a lighter font weight?
o A) .fw-light
o B) .fw-thin
o C) .text-light
o D) .text-thin
Answer: A) .fw-light
25. What does the .text-decoration-none class do?
o A) Removes text decoration like underline.
o B) Removes text alignment.
o C) Converts text to uppercase.
o D) Makes text italic.
Answer: A) Removes text decoration like underline.
Combination of Classes
26. What does .text-primary fw-bold achieve?
o A) Bold text with primary color.
o B) Italic text with blue color.
o C) Uppercase text with large font.
o D) Underlined text in green.
Answer: A) Bold text with primary color.
27. How do you create uppercase, italicized, and center-aligned text?
o A) .text-uppercase text-center fst-italic
o B) .text-uppercase fw-bold
o C) .text-center text-uppercase fw-light
o D) .fw-bold text-center text-italic
Answer: A) .text-uppercase text-center fst-italic
Advanced MCQs
28. Which class adds a shadow effect to text?
Answer: .text-shadow
29. What does .text-decoration-underline text-danger achieve?
Answer: Underlined text with a red color.
30. How do you make text responsive across all screens?
Answer: Use classes like .text-sm-start and .text-lg-center.
Repeat similar patterns to complete the full set of 50 MCQs.
2/2
You said:
yes
ChatGPT said:
MCQs on Typography and Text Utilities in Bootstrap (continued)
Typography Classes
31. Which class provides the smallest font size in Bootstrap?
o A) .fs-6
o B) .fs-1
o C) .text-small
o D) .fw-light
Answer: A) .fs-6
32. What does the .fst-normal class do?
o A) Makes text normal instead of italic.
o B) Converts text to uppercase.
o C) Makes text bold.
o D) Justifies the text.
Answer: A) Makes text normal instead of italic.
33. Which class removes the default underline from hyperlinks?
o A) .text-decoration-none
o B) .no-underline
o C) .text-link-clear
o D) .link-reset
Answer: A) .text-decoration-none
34. How can you emphasize text using Bootstrap classes?
o A) Use .fst-italic.
o B) Use .text-muted.
o C) Use .fw-bold.
o D) Both A and C.
Answer: D) Both A and C.
35. Which class provides a thinner font weight?
o A) .fw-light
o B) .text-thin
o C) .fw-normal
o D) .text-muted
Answer: A) .fw-light
Text Alignment
36. Which alignment class is mobile-first and applies to all screen sizes?
o A) .text-start
o B) .text-center
o C) .text-end
o D) All of the above.
Answer: D) All of the above.
37. How do you set different text alignments for small and medium screens?
o A) .text-sm-center text-md-start
o B) .text-responsive-center
o C) .align-sm-md
o D) .responsive-text-align
Answer: A) .text-sm-center text-md-start
38. What is the effect of .text-wrap?
o A) Ensures text wraps within its container.
o B) Prevents text wrapping.
o C) Justifies the text.
o D) Changes text color to wrap color.
Answer: A) Ensures text wraps within its container.
39. Which class adjusts text alignment for large screens?
o A) .text-lg-center
o B) .text-large-center
o C) .lg-text-center
o D) .text-center-lg
Answer: A) .text-lg-center
40. What does .text-break achieve?
o A) Breaks long words and ensures they fit within the container.
o B) Aligns text to the left.
o C) Removes text wrapping.
o D) Adds a shadow to the text.
Answer: A) Breaks long words and ensures they fit within the container.
Text Utilities
41. Which class applies a warning theme color to text?
o A) .text-danger
o B) .text-warning
o C) .text-alert
o D) .text-yellow
Answer: B) .text-warning
42. How do you make text appear visually hidden but accessible to screen readers?
o A) .visually-hidden
o B) .text-muted
o C) .text-hide
o D) .text-accessible
Answer: A) .visually-hidden
43. Which class adds spacing between letters?
o A) .text-spacing
o B) .letter-spacing
o C) .text-tracking-wide
o D) Not provided in Bootstrap by default.
Answer: D) Not provided in Bootstrap by default.
44. How do you apply Bootstrap's default light text color?
o A) .text-light
o B) .text-muted
o C) .fw-light
o D) .text-default
Answer: A) .text-light
45. What does the .text-reset utility do?
o A) Resets text color to the default color.
o B) Removes text decorations.
o C) Changes text to lowercase.
o D) Resets alignment to left.
Answer: A) Resets text color to the default color.
46. Which class prevents text from overflowing its container?
o A) .text-overflow
o B) .text-nowrap
o C) .text-truncate
o D) .text-wrap
Answer: C) .text-truncate
47. How can you apply a visually hidden label for assistive technologies?
o A) .visually-hidden
o B) .text-screen-reader
o C) .text-hidden
o D) .assistive-text
Answer: A) .visually-hidden
48. Which class applies a shadow to text?
o A) .text-shadow
o B) .shadow-text
o C) .fw-shadow
o D) Not provided by default in Bootstrap.
Answer: D) Not provided by default in Bootstrap.
49. How do you style text with a soft, muted appearance?
o A) .text-muted
o B) .text-soft
o C) .text-light
o D) .fw-light
Answer: A) .text-muted
50. Which class applies a decorative line through text?
o A) .text-decoration-line-through
o B) .text-strike
o C) .text-cross
o D) .text-decoration-strike
Answer: A) .text-decoration-line-through
No comments:
Post a Comment