Bootstrap 4 Tutorial

BS4 Get Started

Last modified on: October 25, 2024

<h1>Getting Started with Bootstrap 4</h1>
<p>Bootstrap 4 is a popular front-end framework that makes it easy to develop responsive and mobile-first websites. This guide will help you quickly set up Bootstrap 4 and create your first web page.</p>
<h2>1. Introduction to Bootstrap 4</h2>
<p>Bootstrap 4 is a CSS framework designed to help developers create responsive web applications efficiently. It comes with a variety of pre-designed components, a responsive grid system, and utility classes that simplify web design.</p>
<h2>2. Setting Up Bootstrap 4</h2>
<h3>Using a CDN</h3>
<p>The quickest way to get started with Bootstrap 4 is by using a Content Delivery Network (CDN). This allows you to link to Bootstrap's CSS and JavaScript files directly from your HTML document.</p>
<p>Here&rsquo;s a simple HTML template to get you started:</p>
<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;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Your Bootstrap 4 Project&lt;/title&gt;
    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
    &lt;style&gt;
        body {
            padding-top: 56px; /* For fixed navbar spacing */
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- Your content will go here --&gt;

&lt;!-- Bootstrap JS and dependencies --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>3. Creating a Navigation Bar</h2>
<p>A navigation bar is a key component of any web application. Here's how to create a responsive navbar:</p>
<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 fixed-top"&gt;
    &lt;a class="navbar-brand" href="#"&gt;My Website&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&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 active"&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"&gt;
                &lt;a class="nav-link" href="#"&gt;Services&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>4. Building the Main Content Area</h2>
<p>Bootstrap's grid system allows you to create flexible and responsive layouts. Here&rsquo;s a simple example with a two-column layout:</p>
<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-5"&gt;
    &lt;h1&gt;Welcome to My Bootstrap 4 Site&lt;/h1&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
            &lt;h2&gt;About Us&lt;/h2&gt;
            &lt;p&gt;Learn about our mission and values.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-md-6"&gt;
            &lt;h2&gt;Our Services&lt;/h2&gt;
            &lt;p&gt;Discover the services we offer to our clients.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>5. Using Bootstrap Components</h2>
<p>Bootstrap 4 comes with a wide variety of pre-styled components that you can easily integrate into your project. Here are a few examples:</p>
<h3>Buttons</h3>
<p>Create stylish buttons with various styles:</p>
<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;a href="#" class="btn btn-primary"&gt;Learn More&lt;/a&gt;
&lt;a href="#" class="btn btn-secondary"&gt;Contact Us&lt;/a&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Cards</h3>
<p>Cards are flexible content containers that can include images, text, and links:</p>
<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="card" style="width: 18rem;"&gt;
    &lt;img src="https://via.placeholder.com/150" class="card-img-top" alt="Image description"&gt;
    &lt;div class="card-body"&gt;
        &lt;h5 class="card-title"&gt;Card Title&lt;/h5&gt;
        &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
        &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Modals</h3>
<p>Modals are great for displaying information in a dialog window:</p>
<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;!-- Button trigger modal --&gt;
&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"&gt;
    Launch demo modal
&lt;/button&gt;

&lt;!-- Modal --&gt;
&lt;div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
        &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
                &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal title&lt;/h5&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                    &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
                Modal body content goes here.
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
                &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>6. Making Your Design Responsive</h2>
<p>Bootstrap 4's grid system is designed to be responsive. Use classes like <code>.col-</code>, <code>.col-sm-</code>, <code>.col-md-</code>, and <code>.col-lg-</code> to define how many columns a section should take up on various screen sizes.</p>
<h2>Conclusion</h2>
<p>Getting started with Bootstrap 4 is straightforward, and the framework's comprehensive features make it an excellent choice for building responsive web applications. As you explore Bootstrap further, you'll discover many additional components and utilities that can help you create visually appealing and functional web pages.</p>

Web Technology View More