Bootstrap 4 Tutorial

BS4 Exercises

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 are some exercises to practice key Bootstrap 4 components and layout techniques. These exercises are designed to help you strengthen your understanding of Bootstrap's grid system, components, utilities, and responsive design features.</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="445ac2c3-290c-4f8c-a95d-f4c922901951" 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>Exercise 1: Responsive Grid Layout</h3>
<ol>
<li><strong>Objective</strong>: Create a responsive grid layout with 3 columns that adjust to different screen sizes.</li>
<li><strong>Instructions</strong>:
<ul>
<li>On large screens, display three equal columns.</li>
<li>On medium screens, display two columns.</li>
<li>On small screens, display one column.</li>
</ul>
</li>
<li><strong>Hint</strong>: Use Bootstrap's grid classes (<code>col-lg-4</code>, <code>col-md-6</code>, and <code>col-12</code>).</li>
</ol>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="container mt-4"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-lg-4 col-md-6 col-12 bg-primary text-white p-3"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-lg-4 col-md-6 col-12 bg-secondary text-white p-3"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-lg-4 col-md-6 col-12 bg-success text-white p-3"&gt;Column 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Exercise 2: Navbar with Dropdown</h3>
<ol>
<li><strong>Objective</strong>: Create a responsive navbar with a dropdown menu.</li>
<li><strong>Instructions</strong>:
<ul>
<li>Create a dark navbar with links for "Home," "About," and a dropdown for "Services."</li>
<li>The "Services" dropdown should contain "Web Design," "SEO," and "Consulting."</li>
</ul>
</li>
<li><strong>Hint</strong>: Use Bootstrap&rsquo;s <code>navbar</code>, <code>navbar-dark</code>, and <code>dropdown</code> classes.</li>
</ol>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
    &lt;a class="navbar-brand" href="#"&gt;My Site&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
        &lt;ul class="navbar-nav"&gt;
            &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li class="nav-item dropdown"&gt;
                &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"&gt;Services&lt;/a&gt;
                &lt;div class="dropdown-menu"&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Web Design&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;SEO&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Consulting&lt;/a&gt;
                &lt;/div&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Exercise 3: Jumbotron with Button</h3>
<ol>
<li><strong>Objective</strong>: Create a jumbotron with a heading, subheading, and button.</li>
<li><strong>Instructions</strong>:
<ul>
<li>Add a heading ("Welcome to My Site") and a subheading ("Discover amazing content").</li>
<li>Add a button labeled "Learn More" that links to another page.</li>
</ul>
</li>
<li><strong>Hint</strong>: Use the <code>jumbotron</code> and <code>btn</code> classes.</li>
</ol>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="jumbotron text-center"&gt;
    &lt;h1 class="display-4"&gt;Welcome to My Site&lt;/h1&gt;
    &lt;p class="lead"&gt;Discover amazing content&lt;/p&gt;
    &lt;a href="#" class="btn btn-primary btn-lg"&gt;Learn More&lt;/a&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Exercise 4: Cards with Images and Content</h3>
<ol>
<li><strong>Objective</strong>: Create a card layout with images and text content.</li>
<li><strong>Instructions</strong>:
<ul>
<li>Add three cards side-by-side on large screens and stacked on smaller screens.</li>
<li>Each card should have an image, a title, and a short description.</li>
</ul>
</li>
<li><strong>Hint</strong>: Use Bootstrap&rsquo;s card and grid classes (<code>card</code>, <code>card-body</code>, <code>row</code>, and responsive <code>col</code> classes).</li>
</ol>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="container mt-4"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-lg-4 col-md-6 col-12"&gt;
            &lt;div class="card"&gt;
                &lt;img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image"&gt;
                &lt;div class="card-body"&gt;
                    &lt;h5 class="card-title"&gt;Card 1&lt;/h5&gt;
                    &lt;p class="card-text"&gt;This is a short description.&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Repeat similar structure for the next two cards --&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Exercise 5: Alerts with Dismiss Option</h3>
<ol>
<li><strong>Objective</strong>: Display multiple alert messages with a close (dismiss) button.</li>
<li><strong>Instructions</strong>:
<ul>
<li>Create three alert messages: success, danger, and info.</li>
<li>Add a dismiss button for each alert.</li>
</ul>
</li>
<li><strong>Hint</strong>: Use Bootstrap&rsquo;s <code>alert</code>, <code>alert-dismissible</code>, and <code>close</code> classes.</li>
</ol>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="container mt-4"&gt;
    &lt;div class="alert alert-success alert-dismissible fade show" role="alert"&gt;
        Success! Your action was successful.
        &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="alert alert-danger alert-dismissible fade show" role="alert"&gt;
        Danger! Something went wrong.
        &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="alert alert-info alert-dismissible fade show" role="alert"&gt;
        Info! Here's some information for you.
        &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Exercise 6: Pagination</h3>
<ol>
<li><strong>Objective</strong>: Create a pagination control with Bootstrap.</li>
<li><strong>Instructions</strong>:
<ul>
<li>Include "Previous," "1," "2," "3," and "Next" links.</li>
<li>Highlight the second page as active.</li>
</ul>
</li>
<li><strong>Hint</strong>: Use the <code>pagination</code>, <code>page-item</code>, and <code>page-link</code> classes.</li>
</ol>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;nav&gt;
    &lt;ul class="pagination"&gt;
        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page-item active"&gt;&lt;a class="page-link" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More