Bootstrap 4 Tutorial

BS4 Quiz

Last modified on: October 26, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">Here's a Bootstrap 4 quiz to test your knowledge of its components, layout system, and utilities. Each question has multiple choices, and the correct answer is provided after each question so you can check your understanding.</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="eab3a839-607a-4e28-acca-a8eb1a7f25b8" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light"><hr />
<h3>Bootstrap 4 Quiz</h3>
<h4>Question 1: What is Bootstrap 4 primarily used for?</h4>
<ul>
<li>A) Server-side scripting</li>
<li>B) Creating responsive front-end designs</li>
<li>C) Database management</li>
<li>D) Data analysis</li>
</ul>
<p><strong>Answer:</strong> B) Creating responsive front-end designs</p>
<hr />
<h4>Question 2: Which class is used to make an element span the entire width of a Bootstrap grid?</h4>
<ul>
<li>A) <code>.container</code></li>
<li>B) <code>.row</code></li>
<li>C) <code>.col</code></li>
<li>D) <code>.container-fluid</code></li>
</ul>
<p><strong>Answer:</strong> D) <code>.container-fluid</code></p>
<hr />
<h4>Question 3: What is the purpose of the <code>col-md-6</code> class in Bootstrap 4?</h4>
<ul>
<li>A) It makes an element span 6 columns on medium and larger screens.</li>
<li>B) It applies a 6-pixel margin on medium screens.</li>
<li>C) It centers the content on medium screens.</li>
<li>D) It applies a background color on medium screens.</li>
</ul>
<p><strong>Answer:</strong> A) It makes an element span 6 columns on medium and larger screens.</p>
<hr />
<h4>Question 4: Which Bootstrap class is used to create a fixed navigation bar at the top of the page?</h4>
<ul>
<li>A) <code>navbar-static-top</code></li>
<li>B) <code>navbar-fixed-top</code></li>
<li>C) <code>navbar-sticky</code></li>
<li>D) <code>navbar-fixed</code></li>
</ul>
<p><strong>Answer:</strong> B) <code>navbar-fixed-top</code></p>
<hr />
<h4>Question 5: Which class would you use to add rounded corners to a Bootstrap 4 button?</h4>
<ul>
<li>A) <code>.btn-rounded</code></li>
<li>B) <code>.btn-circle</code></li>
<li>C) <code>.rounded</code></li>
<li>D) <code>.btn-outline</code></li>
</ul>
<p><strong>Answer:</strong> C) <code>.rounded</code></p>
<hr />
<h4>Question 6: Which of these is NOT a standard color class in Bootstrap 4?</h4>
<ul>
<li>A) <code>.text-success</code></li>
<li>B) <code>.text-primary</code></li>
<li>C) <code>.text-warning</code></li>
<li>D) <code>.text-purple</code></li>
</ul>
<p><strong>Answer:</strong> D) <code>.text-purple</code></p>
<hr />
<h4>Question 7: What is the default grid system in Bootstrap 4 based on?</h4>
<ul>
<li>A) Tables</li>
<li>B) Flexbox</li>
<li>C) Float elements</li>
<li>D) Grid layout</li>
</ul>
<p><strong>Answer:</strong> B) Flexbox</p>
<hr />
<h4>Question 8: How do you add a dismissible alert in Bootstrap 4?</h4>
<ul>
<li>A) Add <code>.alert-dismissible</code> class and a close button</li>
<li>B) Add <code>.alert-closeable</code> class only</li>
<li>C) Add <code>.alert-dismissed</code> class only</li>
<li>D) Use <code>.alert-hideable</code></li>
</ul>
<p><strong>Answer:</strong> A) Add <code>.alert-dismissible</code> class and a close button</p>
<hr />
<h4>Question 9: Which class would you use to make an image responsive in Bootstrap 4?</h4>
<ul>
<li>A) <code>.responsive-img</code></li>
<li>B) <code>.img-responsive</code></li>
<li>C) <code>.img-fluid</code></li>
<li>D) <code>.img-resize</code></li>
</ul>
<p><strong>Answer:</strong> C) <code>.img-fluid</code></p>
<hr />
<h4>Question 10: How do you align text to the center of an element in Bootstrap 4?</h4>
<ul>
<li>A) <code>.align-center</code></li>
<li>B) <code>.text-align-center</code></li>
<li>C) <code>.centered</code></li>
<li>D) <code>.text-center</code></li>
</ul>
<p><strong>Answer:</strong> D) <code>.text-center</code></p>
<hr />
<h4>Question 11: What class is used to create a badge in Bootstrap 4?</h4>
<ul>
<li>A) <code>.badge</code></li>
<li>B) <code>.label</code></li>
<li>C) <code>.tag</code></li>
<li>D) <code>.highlight</code></li>
</ul>
<p><strong>Answer:</strong> A) <code>.badge</code></p>
<hr />
<h4>Question 12: In Bootstrap 4, which component is used to create a scrollable list of items?</h4>
<ul>
<li>A) <code>carousel</code></li>
<li>B) <code>list-group</code></li>
<li>C) <code>media</code></li>
<li>D) <code>grid</code></li>
</ul>
<p><strong>Answer:</strong> B) <code>list-group</code></p>
<hr />
<h4>Question 13: Which of these classes can be used to add spacing (margin or padding) in Bootstrap 4?</h4>
<ul>
<li>A) <code>.spacing</code></li>
<li>B) <code>.m-2</code> or <code>.p-2</code></li>
<li>C) <code>.gap-2</code></li>
<li>D) <code>.spacer-2</code></li>
</ul>
<p><strong>Answer:</strong> B) <code>.m-2</code> or <code>.p-2</code></p>
<hr />
<h4>Question 14: How do you make a modal appear in Bootstrap 4?</h4>
<ul>
<li>A) Use the <code>show</code> class</li>
<li>B) Use the <code>modal-open</code> class</li>
<li>C) Initialize it with JavaScript or use a data attribute like <code>data-toggle="modal"</code></li>
<li>D) Add <code>.modal-display</code></li>
</ul>
<p><strong>Answer:</strong> C) Initialize it with JavaScript or use a data attribute like <code>data-toggle="modal"</code></p>
<hr />
<h4>Question 15: How do you make an element align items at the center with Flexbox in Bootstrap 4?</h4>
<ul>
<li>A) <code>.flex-align-center</code></li>
<li>B) <code>.justify-content-center</code></li>
<li>C) <code>.align-items-middle</code></li>
<li>D) <code>.center-flex</code></li>
</ul>
<p><strong>Answer:</strong> B) <code>.justify-content-center</code></p>
<hr /><hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More