Currently Available: Need a skilled Software Developer for your next project?
Hire Me Today
Categories
Bootstrap

Bootstrap 5 for Beginners: First Project

February 6, 2025 by Vincent Schmalbach

In this guide, you'll learn how to create a professional landing page from scratch using Bootstrap's most important features. We'll cover everything from basic setup to creating responsive navigation, eye-catching hero sections, feature cards, and contact forms. By the end, you'll have both a working landing page and a solid foundation in Bootstrap 5's core concepts.

Contents hide
Setting Up Bootstrap
Understanding the Grid System
Typography and Utilities
Navigation Bar
Hero Section
Features Section
Contact Form
Footer
Adding Interactivity with jQuery (Optional)
Finalizing and Deployment
Delegate tasks. Get software.
Subscribe to my newsletter

Setting Up Bootstrap

Before writing any HTML, set up your project structure. Create a project folder and inside it, an index.html file (this will be your landing page). You can also create a CSS file (e.g., styles.css) for custom styling, but we will rely mostly on Bootstrap’s built-in styles.

Including Bootstrap 5: There are two common ways to include Bootstrap in your project: via a CDN or by local installation

  • Via CDN (Content Delivery Network): This is the easiest method. You simply link to Bootstrap’s hosted CSS and JS files. No downloads required – just an internet connection. In your HTML’s <head>, add a <link> to the Bootstrap 5 CSS, and just before the closing </body> tag, add a <script> for Bootstrap’s JS bundle. The bundle includes Popper (needed for tooltips, popovers, and the responsive navbar toggling) so you don’t have to include Popper separately Below is a basic HTML template with Bootstrap included via CDN:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap Landing Page</title>
    <!-- Bootstrap 5 CSS (CDN) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <!-- Page content will go here -->

    <!-- Bootstrap 5 JS Bundle with Popper (CDN) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

    In the code above, the meta viewport tag ensures proper responsive behavior on mobile devices. We include Bootstrap’s CSS in the head, and the JS bundle at the end of body (so the HTML content loads before the JS). You can copy these CDN links from Bootstrap’s documentation or use the ones above (which use the latest 5.x version)

  • Local Installation: If you prefer to have Bootstrap files locally (or need to work offline), you can download Bootstrap from the official website or install it via a package manager. You would then link the CSS and JS files in your project directory instead of the CDN URLs For example, after downloading, your project might have a css/bootstrap.min.css and js/bootstrap.bundle.min.js file — include those with <link rel="stylesheet" href="css/bootstrap.min.css"> and <script src="js/bootstrap.bundle.min.js"></script> respectively. The usage in your HTML remains the same; only the file paths differ.

Project Structure: Alongside Bootstrap, ensure your project has a logical structure. You might organize sections of your landing page using comments or separate partial files if the project grows. For this simple project, everything can be in index.html (plus maybe a custom CSS file). We will proceed assuming the single HTML file setup.

With Bootstrap properly linked, you’re ready to start building the page. Next, we’ll go over Bootstrap’s grid system, which is fundamental for laying out a responsive page.

Understanding the Grid System

One of Bootstrap’s core features is its grid system. The grid system allows you to create responsive layouts through a series of containers, rows, and columns It is a 12-column system built with flexbox, which means content can flexibly rearrange and scale across device sizes.

Containers: A Bootstrap container is a wrapper for your content. You can use a fixed-width container (<div class="container">) which adjusts its max-width at different breakpoints, or a fluid container (<div class="container-fluid">) which is full width across all screens. Typically, your page sections will be inside a container to ensure proper padding and centering of content

Rows and Columns: Inside a container, you define a <div class="row"> to create a horizontal group of columns. Then, inside the row, you add column elements using <div class="col-..."> classes. Bootstrap’s grid has 12 columns by default, so your column classes should add up to 12 (or less) within each row for a perfect fit. For example, a single <div class="col-12"> spans the full width, while two <div class="col-6"> elements side by side each take up half width (6 out of 12 columns each). You can also use responsive column classes like col-sm-6 which means “span 6 columns (half the width) on small devices and up” The -sm-, -md-, -lg-, -xl-, -xxl- in class names indicate the breakpoints (small, medium, large, etc.). These breakpoints are mobile-first, meaning a class like .col-md-6 will apply on medium screens (≥768px) and larger, and automatically stack (take full width) on smaller screens

Breakpoints Reference: In Bootstrap 5, the default breakpoints are:

  • xs (extra small, under 576px) – no explicit class needed, this is the default.
  • sm (small, ≥576px)
  • md (medium, ≥768px)
  • lg (large, ≥992px)
  • xl (extra large, ≥1200px)
  • xxl (extra extra large, ≥1400px)

Using these, you can control how many columns an element spans at each viewport size. For example, <div class="col-12 col-md-6 col-xl-4"> would be full width on mobile, half width on tablets, and one-third width on desktops and above.

Example Layout using Grid: Here’s a quick example of using the grid system to create a responsive two-column layout:

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <!-- Content for the first half -->
      <p>This column takes half the width on small screens and larger.</p>
    </div>
    <div class="col-sm-6">
      <!-- Content for the second half -->
      <p>This column also takes half the width on small screens and larger.</p>
    </div>
  </div>
</div>

In the above snippet, we used col-sm-6 for both columns. Since Bootstrap’s grid is 12 columns, col-sm-6 occupies 6 out of 12 columns – i.e., 50% width – on small devices and up. On extra-small devices (xs), the columns will stack vertically by default (because col-sm-6 doesn’t apply under 576px, so each div becomes full width). If we wanted them side by side even on extra-small, we could use col-6 instead.

Key Points & Tips:

  • Always wrap .col-* elements inside a .row, and .row inside a .container (or .container-fluid). This ensures proper alignment and padding (rows have negative margins that counteract the container’s padding)
  • If your columns don’t sum up to 12, Bootstrap will distribute the remaining space as empty columns. It’s fine if they don’t exactly total 12 – for instance, three .col-4 will total 12, but if you used three .col-3, that’s 9, and Bootstrap will still layout three equal 25% width columns (actually it treats .col-3 as exactly 3/12 each). You can also just use .col (without number) to automatically size columns equally.
  • Nesting: You can nest rows inside columns if needed for complex layouts. Just remember to again use a row inside the column for nested columns.
  • Breakpoints allow you to customize the layout for different screen sizes. Plan your design mobile-first (small screens) and then add larger screen arrangements as needed.

With the grid system in mind, you can divide your landing page into responsive sections. Next, we’ll explore how to style text and utilize Bootstrap’s utility classes for spacing and more.

Typography and Utilities

Bootstrap 5 comes with default typography styles and utility classes that make it easy to style text and adjust spacing without writing custom CSS. This helps maintain consistent design throughout your page.

Base Typography: Right out of the box, Bootstrap sets a nice base font size (usually 1rem, which is typically 16px) and line-height (1.5) for readable text All normal <p> paragraphs have a bottom margin by default to space them out (about 1rem) Headings <h1> through <h6> are styled with descending sizes and boldness. For example, <h1> is largest and bold, while <h6> is small. You can use heading tags normally, or apply heading styles to other elements using utility classes .h1 through .h6 (for instance, <p class="h3"> will look like an <h3>).

Display Headings: If you need even larger headings (perhaps for a hero section title), Bootstrap provides display heading classes. These are .display-1 through .display-6, which are larger and lighter than normal headings For example, <h1 class="display-3">Welcome!</h1>.

Paragraphs and Emphasis: To make a paragraph stand out, wrap it in a <p class="lead">. This will style the text slightly larger and lighter, ideal for a lead or introduction paragraph Other useful inline elements:

  • <small> or the class .small can be used for secondary text (smaller font size) useful for captions or fine print.
  • <mark> or .mark highlights text with a yellow background (like a marker)
  • <strong> or adding the class .fw-bold will bold text; <em> or .fst-italic will italicize.
  • Bootstrap 5 also has classes for text transform: .text-uppercase (makes text all uppercase), .text-lowercase, .text-capitalize

Text Alignment & Color: To quickly align text, use .text-start, .text-center, or .text-end for left, center, right alignment respectively For text color, Bootstrap includes utility classes like .text-primary, .text-secondary, .text-success, etc., corresponding to the theme colors, as well as .text-light, .text-dark, .text-muted for grays. For example, <span class="text-danger">Error</span> would produce red text (danger is typically red).

Spacing Utilities: One of the most used set of utilities in Bootstrap is for spacing (margin and padding). Bootstrap provides a wide range of shorthand classes to add margins or padding in increments. These classes start with m (margin) or p (padding), then a side (t for top, b for bottom, s for left/start, e for right/end, x for left & right, y for top & bottom, or nothing for all sides), and then a size (0 to 5, where 0 is 0 and 5 is a large amount, also auto for auto margin). For example, mt-4 adds a top margin, px-3 adds horizontal padding, mb-0 removes bottom margin, etc. Bootstrap includes a scale of spacing values and these utilities are responsive — you can append a breakpoint like mt-md-3 to apply margin-top only on md and up. In short, you can adjust an element’s spacing without writing CSS For instance:

  • class="mb-5" on a heading adds a large bottom margin to space it from content below.
  • class="py-5 px-3" on a section adds generous vertical padding and some horizontal padding.
  • class="mx-auto" on a block element centers it horizontally (by setting its left and right margins to auto).

Utility Classes in Action: We will be using many of these utilities in our project. For example, we might add text-center to center content in the hero, my-3 or py-4 to add spacing around sections, and text-white to make text white on a dark background. These classes let us fine-tune the design quickly.

Tip: It’s often better to use Bootstrap’s utility classes for simple style tweaks rather than writing new CSS rules. This keeps your HTML and design consistent and leverages Bootstrap’s responsive design. However, for more complex custom styles (like a specific background image or custom component look), you can still write CSS or use a separate stylesheet.

Now that we have an idea of typography and spacing, let’s start building the actual components of our landing page, beginning with the navigation bar.

Navigation Bar

A navigation bar (navbar) is the top menu that usually contains your brand name/logo and links to different sections of the page or site. Bootstrap’s navbar component makes it easy to create a responsive nav that collapses on mobile devices (into a “hamburger” menu).

We’ll create a responsive navbar with a brand on the left and menu links on the right. On small screens, the links will collapse into a toggleable menu.

Navbar HTML Structure: Place the following code near the top of your <body> (so it appears at the top of the page):

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <div class="container">
    <!-- Brand -->
    <a class="navbar-brand" href="#">MyLanding</a>
    <!-- Toggler/collapsing button -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Navbar links -->
    <div class="collapse navbar-collapse justify-content-end" id="main-nav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Let’s break down what’s happening here:

  • The <nav> has classes navbar and navbar-expand-md. The navbar class defines it as a Bootstrap navbar, and navbar-expand-md means the navbar will be collapsed (hidden) on screens smaller than "md" (768px) and will expand (show the menu links) on md and larger screens. You could use navbar-expand-lg for a navbar that collapses on tablets as well, but here we choose md so that on most tablets and up, the full menu is shown.
  • We also gave the nav navbar-light bg-light classes, which apply a light background and dark text. This makes the navbar light gray/white. If you wanted a dark navbar, you could use navbar-dark bg-dark to invert the colors.
  • Inside, we have a container to align content nicely. The brand name is an <a> with class navbar-brand. You can put text or an image (logo) here. We just used "MyLanding" as placeholder text.
  • The button with navbar-toggler is the hamburger icon for mobile. The data-bs-toggle="collapse" and data-bs-target="#main-nav" attributes tie this button to the <div id="main-nav"> below, which is the collapsible menu. This is how Bootstrap knows which menu to show/hide when the button is clicked. The <span class="navbar-toggler-icon"> inside will automatically display a hamburger icon (three lines) thanks to Bootstrap’s default styling.
  • The menu links are wrapped in <div class="collapse navbar-collapse ...">. This div has the id main-nav (referenced by the button). It also uses collapse and navbar-collapse classes for the collapse behavior. We added justify-content-end which is a flex utility to push the menu items to the right end keeping the brand on the left.
  • Inside the collapse div is an unordered list with class navbar-nav – this signifies the container for nav items. Each <li class="nav-item"> contains an <a class="nav-link">. We marked the "Home" link with active class as the current page (this highlights it). You can add more links or dropdowns as needed; Bootstrap provides styles for nested dropdown menus too, but we keep it simple here.

Making the Navbar Work: Just writing the HTML isn’t enough – the toggle button will not function (the menu won’t collapse/expand) unless Bootstrap’s JavaScript is included. We already included bootstrap.bundle.min.js at the end of the body in the setup, which covers this. If your navbar toggler isn’t responding, double-check that the Bootstrap JS (and its Popper dependency) is properly loaded Also, ensure the data-bs-target of the button matches the id of the collapse div exactly.

Customization: You can customize the navbar by:

  • Changing navbar-light bg-light to navbar-dark bg-dark for a dark mode nav (with white text).
  • Using different breakpoints for navbar-expand-* depending on when you want the mobile menu to appear.
  • Adding a CSS class sticky-top to <nav> if you want the navbar to stay fixed at the top of the page when scrolling.
  • Including additional elements like a search bar, a button, or dropdown menus as needed (Bootstrap has ready classes for those – e.g., .form-inline for inline forms in nav, dropdowns for menus).

Our navbar as written will be responsive: on small screens, users see the brand and a hamburger menu which they can tap to reveal the links; on larger screens, the links are displayed horizontally on the right side. With the navigation in place, let’s create an eye-catching hero section.

Hero Section

The hero section is a prominent section at the top of your landing page that should grab the user’s attention. It often includes a big, engaging background (image or color/gradient), a bold headline, some supporting text, and a call-to-action button. The goal is to quickly communicate your product or service’s value and direct the user towards an action (like sign up or learn more).

For our simple project, we’ll create a hero section with a background image, a headline, a subheading, and a call-to-action button. We’ll use a combination of Bootstrap classes and a bit of custom CSS for the background image.

HTML Structure for Hero:

<header class="py-5 text-center text-white" style="background: url('hero.jpg') no-repeat center center; background-size: cover;">
  <div class="container">
    <h1 class="display-4">Welcome to MyLanding</h1>
    <p class="lead">We help you achieve your goals with our awesome product.</p>
    <a href="#contact" class="btn btn-primary btn-lg">Get Started</a>
  </div>
</header>

Explanation:

  • We used a <header> element (semantically appropriate for a hero banner, but a <div> would work too). We gave it classes py-5 (adds vertical padding) and text-center (center-aligns the content) and text-white (makes all text inside white).
  • The style attribute sets a background image (hero.jpg in this example – you would replace this with the path to your image) and uses CSS to no-repeat it, center it, and cover the area. This makes for a full-bleed background image.
  • Inside, we have a container to keep our content nicely aligned and padded on the sides.
  • The <h1> uses class display-4 for a large font size. This is our main headline.
  • The <p> uses class lead to stand out as a lead paragraph, giving a short description or tagline.
  • The call-to-action is a large button: <a class="btn btn-primary btn-lg">. We use an anchor <a> so that it can link to somewhere (in this case, it links to the contact section of the page via the href="#contact" anchor). btn and btn-primary make it a styled button with Bootstrap's primary color, and btn-lg makes it a larger, prominent button.

This hero section will be full width because the <header> has a background style that spans the full viewport width (we didn’t confine it with a container; the container is only for the inner text to align nicely). The text is centered and padded so it doesn’t hug the edges. On small screens, everything will stack and still look good (Bootstrap’s text classes and spacing ensure it’s responsive).

Using a Gradient (Optional): If you prefer a simple colored background or a gradient instead of an image, you can do that too. For example, to apply a blue background you could replace the style with class="bg-primary" on the header (and maybe add bg-gradient to give it a slight gradient effect) That would look like: <header class="py-5 text-center text-white bg-primary bg-gradient">. The .bg-gradient class in Bootstrap adds a subtle white-to-transparent gradient on top of the color giving a nice visual effect. Feel free to experiment with colors or images. Just ensure text remains readable (if your image has varying contrast, you might overlay a semi-transparent dark layer or use text-shadow; those are more advanced techniques).

Mobile Considerations: Our hero text is centered and fairly large, which should be readable on mobile. The button is also large and touch-friendly. The background image with background-size: cover will automatically scale and crop to fill the header area on different screen sizes. You might want to test how your chosen image looks on mobile (sometimes critical parts of the image may get cut off due to the aspect ratio).

Now that the top of our page is impressive and inviting, we can move on to the features section to highlight what’s great about our product or service.

Features Section

The features (or benefits) section is where you showcase key points about your product or service. Typically, you might display a few feature blocks with an icon or image, a title, and a brief description. Bootstrap’s grid and cards make it easy to create a neat, responsive feature section. We’ll use a row of cards for this purpose.

HTML Structure for Features:

<section id="features" class="py-5">
  <div class="container">
    <h2 class="text-center mb-5">Features</h2>
    <div class="row">
      <div class="col-md-6 col-lg-3 mb-4">
        <div class="card h-100 text-center">
          <!-- You can put an icon or image at top inside card here (optional) -->
          <div class="card-body">
            <h5 class="card-title">Feature One</h5>
            <p class="card-text">Brief description of the first feature and how it helps users.</p>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3 mb-4">
        <div class="card h-100 text-center">
          <div class="card-body">
            <h5 class="card-title">Feature Two</h5>
            <p class="card-text">Brief description of the second amazing feature of the product.</p>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3 mb-4">
        <div class="card h-100 text-center">
          <div class="card-body">
            <h5 class="card-title">Feature Three</h5>
            <p class="card-text">Brief description of the third feature showcasing more benefits.</p>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3 mb-4">
        <div class="card h-100 text-center">
          <div class="card-body">
            <h5 class="card-title">Feature Four</h5>
            <p class="card-text">Brief description of the fourth feature, last but not least!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Explanation:

  • We wrap this section in a <section id="features"> and gave it py-5 for vertical padding. The id="features" allows the navbar link to scroll to this section.
  • Inside a standard container, we put a section title <h2> with text-center and mb-5 (margin-bottom) to center it and space it from the cards.
  • Then we have a <div class="row"> containing four columns (<div class="col-md-6 col-lg-3">). Each column is set to be half width on medium screens (so two per row on tablets) and one-quarter width on large screens (four per row on desktop). On small/mobile, each will automatically be full width (since we didn’t specify col-sm, the default is col-12 full width for xs).
  • We added mb-4 to each column to give a bit of bottom margin in case they stack or wrap to a new line (so there's space between cards vertically on smaller screens).
  • Each column contains a Bootstrap .card. We gave each card h-100 (full height) to make them all equal height in a row, and text-center to center the text inside (this is optional; you could left-align text if you prefer).
  • Inside the .card, we use a .card-body div which is a standard part of card structure. Within that, we have a .card-title (<h5> here) and .card-text (a <p>). This gives us a uniform style: card titles are slightly larger and bolder, and card-text is normal.
  • We didn't include images or icons in this example, but you absolutely can. For instance, you could insert an <img src="icon1.png" class="card-img-top" alt="..."> at the top of the card, or use an icon library (like Font Awesome or Bootstrap Icons) by placing an <i class="..."> element before the title. Since Bootstrap 5 doesn’t include iconography by default, you’d have to include Bootstrap Icons or another icon set separately.

This features section will automatically adjust responsively:

  • On large screens, four cards sit in one row.
  • On medium screens (like small laptops or big tablets), two cards per row (because each is col-md-6, so two columns of 6).
  • On small screens, one card per row (columns stack).

We leveraged the grid’s responsive column classes to achieve this without extra code. We simply duplicated the column markup for each feature (adjusting content)

Feel free to add or remove feature blocks as needed (if you had only three features, you could make each col-md-4 on medium, for example, or leave one empty). The structure remains the same.

Flex Utilities (Optional): We already used some flex utilities implicitly (the grid’s row uses flex under the hood). If you wanted to fine-tune alignment, you could use classes like align-items-center on the row to vertically center all cards (though in equal height cards it doesn’t matter much) or use the utility classes to adjust spacing between cards (gx-3 class on row to control gutter width, etc.). For our purposes, default spacing is fine.

We now have a features section that highlights key points. Next, let’s build a contact form so interested visitors can reach out or sign up.

Contact Form

Including a contact form in your landing page is a great way to capture leads or feedback. Bootstrap’s form components provide a consistent, responsive look and feel for form controls (inputs, textarea, buttons, etc.), along with some built-in validation styles.

We’ll create a simple contact form with three fields: name, email, and message. We’ll also demonstrate basic validation using HTML5 attributes and discuss how Bootstrap can enhance validation.

HTML Structure for Contact Form:

<section id="contact" class="py-5 bg-light">
  <div class="container">
    <h2 class="mb-4">Contact Us</h2>
    <form novalidate>
      <div class="row mb-3">
        <div class="col-md-6">
          <label for="name" class="form-label">Name</label>
          <input type="text" id="name" class="form-control" required>
        </div>
        <div class="col-md-6">
          <label for="email" class="form-label">Email</label>
          <input type="email" id="email" class="form-control" required>
        </div>
      </div>
      <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <textarea id="message" class="form-control" rows="4" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Send Message</button>
    </form>
  </div>
</section>

Explanation:

  • We wrap the form in a <section id="contact" class="py-5 bg-light">. This gives the section some padding and a light background (to distinguish it from previous sections).
  • Inside the container, a section title <h2> and then the <form>. We included novalidate on the form just to prevent the browser’s default validation tooltips (so we can show Bootstrap styles, or you can remove novalidate to use browser defaults).
  • We used a two-column row for the first two fields (Name and Email) so that on medium screens and up, they sit side by side. Each has class col-md-6, meaning they each take half width on >= md, and full width on smaller. We added mb-3 to the row for spacing below it.
  • Each form field has a <label> with class form-label (Bootstrap adds appropriate styling to labels), and an input/textarea with class form-control. The form-control class is essential – it makes the inputs full-width (100%) and styled with Bootstrap’s default form styles (border, padding, focus outline, etc.). In Bootstrap 5, almost all form controls are display:block and width:100% by default so they stack and fill the column width.
  • We set type="email" for the email field and type="text" for name. Using the proper input types helps with mobile keyboards and built-in validation (for example, type=email will show a “please include an @” message if not filled as an email) We also added required to each field to make them mandatory.
  • The message field is a <textarea> with 4 rows height.
  • After the fields, we have a submit button with btn btn-primary classes to style it.

This form is fully responsive: on mobile, the two columns will stack (each full width under the other), while on desktop they sit in one row. The form controls themselves are full width of their column, making for a clean layout.

Validation and Feedback: We used the required attribute for basic HTML5 required-field validation. If the user tries to submit without filling these, the browser will block submission and can show a default tooltip. Bootstrap 5 provides styles for validation states (by using classes like .is-invalid on input and adding a .invalid-feedback text), but implementing that requires custom script to add those classes on submit. For simplicity, we rely on the browser’s native checks. If you want to enhance, you can write a bit of JavaScript to add Bootstrap’s validation classes after checking fields. (That is beyond this beginner guide, but Bootstrap’s docs have a section on form validation with examples.)

One quick improvement you can do without custom JS: add pattern attributes or use more specific input types (e.g., type="tel" for phone) to get additional built-in checks. For example, we already set type=email which will lightly validate format You could add minlength attributes or pattern regex for more control.

Also, consider adding aria-describedby and help text for accessibility if needed, for example a small hint below a field using <div class="form-text">...</div>.

Spacing and Alignment: We used mb-3 on groups to space fields. Bootstrap’s form grid classes took care of alignment. If you wanted labels and inputs in one line (horizontal form) you’d use a different approach (like .row with .col-form-label on label and an input col). For a landing page contact form, vertical stacked labels as shown are usually fine.

At this point, our landing page has a contact form. The last major block to add is a footer.

Footer

The footer appears at the bottom of the page and typically contains copyright info, links, or contact details. We’ll make a simple footer that complements our page design.

We’ll use a dark background for contrast (commonly footers are dark if the body is light, or vice versa). Our footer will have two columns on larger screens: one for a short "About" text, and one for some contact info or links, and then a bottom row for copyright text centered.

HTML Structure for Footer:

<footer class="bg-dark text-white pt-4">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h5>About MyLanding</h5>
        <p>MyLanding is a fictitious product that helps you achieve XYZ. We are dedicated to ... (short about blurb).</p>
      </div>
      <div class="col-md-6 text-md-end">
        <h5>Contact</h5>
        <p>Email: <a href="mailto:info@mylanding.com" class="text-white text-decoration-none">info@mylanding.com</a></p>
        <p>Phone: <a href="tel:+1234567890" class="text-white text-decoration-none">+1 234 567 890</a></p>
      </div>
    </div>
    <hr class="mt-3 mb-2 opacity-50" />
    <p class="text-center mb-0">© 2025 MyLanding. All rights reserved.</p>
  </div>
</footer>

Explanation:

  • The <footer> has bg-dark text-white for a dark background and white text. We also gave it pt-4 (padding-top) to space the content from the top; bottom padding comes from the content inside (or we could add pb-4 similarly).
  • Inside a container, we created a row with two columns (each col-md-6). On small screens, these will stack vertically (each full width), on md and up they sit side by side.
  • The first column has an About section with a heading and a paragraph. The second column has a Contact section. We added text-md-end to the second column so that on larger screens, its content (the contact info) is right-aligned (this can make it visually separated from the about text). On mobile, that class doesn’t apply, so it will be left-aligned like everything else.
  • We included some example contact info: an email and phone. We wrapped the actual email address in a mailto link, and phone in a tel link, making them clickable. We used text-decoration-none on those links to remove the underline (since we want a clean look in the footer, and they are clearly labeled as links by being under Contact).
  • After the row, we inserted a horizontal line <hr> to separate the main footer content from the bottom copyright. We gave it mt-3 mb-2 for spacing and opacity-50 to make it semi-transparent (lighter).
  • Finally, a paragraph centered with the copyright notice. We used mb-0 to remove default margin-bottom on that paragraph.

This footer provides a template you can modify. You might add social media icons/links (could use Font Awesome icons in <a> tags), additional links (privacy policy, etc.), or other info as needed. The structure (row with columns) helps organize it.

Since we marked up the sections from top (navbar, hero) to bottom (footer), our landing page structure is complete. At this stage, it’s good to review and test everything. Before wrapping up, let's consider adding a little extra interactivity and then discuss how to finalize and deploy the project.

Adding Interactivity with jQuery (Optional)

Bootstrap 5 dropped jQuery as a dependency, meaning you don’t need jQuery for Bootstrap’s own components to work. However, you can still include jQuery in your project to add custom interactive behavior If you’re comfortable with some basic jQuery or JavaScript, you can enhance your landing page with effects like smooth scrolling, form handling, or animations.

For example, one common enhancement is to implement smooth scrolling for in-page links. In our navbar, the "Features" and "Contact" links are anchor links (e.g., href="#contact"). By default, clicking them will jump abruptly to the section. With a bit of jQuery, we can animate that scroll for a nicer user experience.

Including jQuery: First, include the jQuery library before your custom script. You can add this via CDN just above the Bootstrap bundle script. For instance, in the HTML template:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>

This loads jQuery (make sure to use a version compatible with Bootstrap 5, 3.6.0+ is fine) then Bootstrap’s JS. Bootstrap will detect jQuery if present and use it internally for its components (optional) but it doesn’t require it.

Smooth Scrolling Example: Add a <script> tag (either in a separate JS file or within a <script>...</script> block) to implement the scroll behavior. For example:

<script>
  // Smooth scrolling for anchor links
  $(document).ready(function(){
    $("a.nav-link[href^='#']").on('click', function(event) {
      const target = $(this.getAttribute('href'));
      if (target.length) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top - 70
        }, 500);
      }
    });
  });
</script>

What this does: when any .nav-link that begins with # is clicked, it finds the target element and animates the page scroll to its position (target.offset().top). We subtract 70 pixels in this example (- 70) to account for the fixed navbar height, so the section isn’t hidden under the navbar after scroll. The scrolling takes 500ms. This gives a smooth transition effect when navigating within the page.

Other interactive ideas:

  • You could show a alert or modal when the form is submitted (to simulate a success message). For example, intercept form submit and show a Bootstrap modal dialog or a Bootstrap alert message (using Bootstrap’s JS or simply toggling a hidden div).
  • Add a back-to-top button that appears when scrolling down, using a little jQuery to toggle its visibility.
  • Use jQuery to add/remove classes on scroll for a sticky header shrink effect (changing navbar style on scroll).

These are beyond the basics, but they illustrate that after setting up the structure with Bootstrap, you have the freedom to use JavaScript (with or without jQuery) to enhance the user experience. Just remember: since Bootstrap 5’s own components don’t require jQuery, adding jQuery is purely optional for your own scripting needs.

Now, with our landing page fully built and optionally enhanced, the final step is testing and deploying it.

Finalizing and Deployment

Before you consider your project complete, it’s important to test it thoroughly and make some optimizations. Here’s a checklist and some tips:

  • Test Responsiveness: Open your page in a browser and resize the window or use device emulator tools (like Chrome DevTools’ mobile view) to see how it looks on various screen sizes. Check that the grid is working (columns stacking where they should), the navbar toggles on mobile, images or backgrounds resize correctly, etc. Ensure that no content is overflowing off the side (if you see a horizontal scrollbar, some element might be too wide for the viewport).
  • Cross-Browser Check: Test in modern browsers (Chrome, Firefox, Safari, Edge). Bootstrap itself is quite cross-browser, but if you added custom CSS or flex utilities, ensure they behave similarly.
  • Optimize Assets: Large images can slow down your page. If you used an image for the hero, compress it to a reasonable size. There are free online compressors or tools like ImageOptim. Aim for a balance of quality and file size. Also, since we’re using CDN for Bootstrap, that’s already optimized (minified). If you wrote custom CSS, consider minifying it for production.
  • Performance Consideration: Using the CDN for Bootstrap is beneficial because users might already have those files cached from visiting other sites that use the same CDN. This can improve load times. If you included jQuery, also prefer the CDN version for the same reason. Ensure you’re using the minified versions for faster load.
  • SEO & Meta: Add relevant <meta> tags (like description, keywords) and appropriate titles to your HTML head for better SEO and sharing. Also check that your headings (H1, H2, etc.) are used semantically (we did in this guide, e.g., one H1 on the page for the main title in hero, then H2 for section titles).
  • Accessibility: Ensure images have alt attributes, links have discernible text, and the color contrast (especially in the hero text over image) is sufficient. Bootstrap’s default styles are generally accessible, but custom background images or colors need manual checking.
  • Deployment: Once everything looks good, you can deploy your landing page. Since it’s a static page (HTML/CSS/JS), you have many options:
    • GitHub Pages: If you have a GitHub account, you can create a repository for your project and enable GitHub Pages in the repository settings to publish the site for free. Just push your index.html, styles.css (if any), and image assets. GitHub Pages will host it at https://yourusername.github.io/repo-name/.
    • Netlify or Vercel: These services allow you to drag-and-drop a folder or connect a Git repository and will automatically deploy the site. They also offer free plans for basic use and provide a nice URL (which you can customize).
    • Traditional Hosting: You can upload the files to any web hosting provider’s server (or your own server if you have one). Since there’s no server-side code, no special setup is needed beyond placing the files in the web root.
    • CodePen/JSFiddle/etc.: In a pinch, you can even host small demos on code sandbox sites, but for a real project, stick to the above.
  • Custom Domain: If this is a serious project, you might want your own domain (e.g., mylanding.com). Services like GitHub Pages, Netlify, etc., allow you to point custom domains to your pages.

Finally, do a run-through as if you are a user: navigate through the page, fill the form (though without a back-end it won’t actually send anywhere, but you can at least see the validation), click the nav links to ensure they scroll, etc. This user perspective helps catch any last-minute issues.

What I'm building

Delegate tasks. Get software.

Give Vroni a GitHub issue, bug report, spec, or rough idea. It reads the repo, plans the change, writes code, runs checks, and works toward a review-ready pull request.

Take a look at vroni.com

Subscribe to my newsletter

Get new posts when I publish them.

I respect your privacy. Unsubscribe at any time.

More writing around this topic.

One thought on “Bootstrap 5 for Beginners: First Project”

Leave a Reply

Your email address will not be published. Required fields are marked *