English

Bootstrap Tutorial

Bootstrap Layouts

Bootstrap Content

Bootstrap Components

Bootstrap Forms

Bootstrap Helpers

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Checkout Demo

Overview

Hello, future web developers! Today, we're going to embark on an exciting journey to create a checkout page using Bootstrap. As your friendly neighborhood computer teacher, I'm thrilled to guide you through this process. Don't worry if you're new to coding - we'll take it step by step, and by the end, you'll have a professional-looking checkout form that you can be proud of!

Bootstrap-Checkout Demo

What is Bootstrap?

Before we dive in, let's talk about Bootstrap. Imagine you're building a house. Instead of creating every brick from scratch, wouldn't it be great if you had pre-made walls and roofs? That's what Bootstrap is for web development - a collection of pre-built components and styles that make creating beautiful websites much easier and faster.

Setting Up Our Project

Step 1: Include Bootstrap

First, we need to include Bootstrap in our project. It's like packing our toolbox before starting work. Add these lines to the <head> of your HTML file:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

These lines fetch Bootstrap's styles and scripts from the internet, so we don't have to download anything.

Step 2: Basic HTML Structure

Now, let's set up our basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkout Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Checkout Form</h1>
        <!-- Our form will go here -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

This creates a basic webpage with a title and a container for our form. The container class is a Bootstrap class that centers our content and gives it some nice padding.

Building the Checkout Form

Step 3: Creating the Form

Now, let's add our form inside the container:

<form>
    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="firstName" class="form-label">First name</label>
            <input type="text" class="form-control" id="firstName" required>
        </div>
        <div class="col-md-6 mb-3">
            <label for="lastName" class="form-label">Last name</label>
            <input type="text" class="form-control" id="lastName" required>
        </div>
    </div>

    <div class="mb-3">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email" placeholder="[email protected]" required>
    </div>

    <div class="mb-3">
        <label for="address" class="form-label">Address</label>
        <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
    </div>

    <button class="btn btn-primary btn-lg" type="submit">Place Order</button>
</form>

Let's break this down:

  1. We use Bootstrap's grid system with row and col-md-6 to create two columns for first and last name.
  2. The mb-3 class adds margin to the bottom of each form group.
  3. form-label and form-control are Bootstrap classes that style our labels and inputs.
  4. The btn classes style our submit button.

Step 4: Adding Payment Information

Let's add a section for payment information:

<h4 class="mb-3">Payment</h4>
<div class="my-3">
    <div class="form-check">
        <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
        <label class="form-check-label" for="credit">Credit card</label>
    </div>
    <div class="form-check">
        <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
        <label class="form-check-label" for="debit">Debit card</label>
    </div>
</div>
<div class="row gy-3">
    <div class="col-md-6">
        <label for="cc-name" class="form-label">Name on card</label>
        <input type="text" class="form-control" id="cc-name" required>
    </div>
    <div class="col-md-6">
        <label for="cc-number" class="form-label">Credit card number</label>
        <input type="text" class="form-control" id="cc-number" required>
    </div>
    <div class="col-md-3">
        <label for="cc-expiration" class="form-label">Expiration</label>
        <input type="text" class="form-control" id="cc-expiration" required>
    </div>
    <div class="col-md-3">
        <label for="cc-cvv" class="form-label">CVV</label>
        <input type="text" class="form-control" id="cc-cvv" required>
    </div>
</div>

Here, we've added radio buttons for payment method selection and fields for card details. The gy-3 class adds vertical gutters between rows.

Enhancing User Experience

Step 5: Adding Validation Feedback

Bootstrap provides classes for form validation feedback. Let's add some to our first name input:

<div class="col-md-6 mb-3">
    <label for="firstName" class="form-label">First name</label>
    <input type="text" class="form-control" id="firstName" required>
    <div class="valid-feedback">
        Looks good!
    </div>
    <div class="invalid-feedback">
        Please enter your first name.
    </div>
</div>

To make this work, we need to add some JavaScript:

<script>
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
    })()
</script>

This script adds the was-validated class to the form on submission, which triggers the display of validation feedback.

Conclusion

Congratulations! You've just created a professional-looking checkout form using Bootstrap. Let's recap what we've learned:

  1. How to include Bootstrap in our project
  2. Using Bootstrap's grid system for layout
  3. Styling form elements with Bootstrap classes
  4. Adding validation feedback

Remember, practice makes perfect. Try modifying this form, add new fields, or change the styling. The more you experiment, the better you'll become!

Here's a table of the main Bootstrap classes we used:

Class Purpose
container Centers content and adds padding
row Creates a horizontal group of columns
col-md-6 Creates a column that's 50% wide on medium screens and up
form-label Styles form labels
form-control Styles form inputs
btn Basic button style
btn-primary Gives the button a blue color
btn-lg Makes the button larger
form-check Styles checkboxes and radio buttons
valid-feedback Shows feedback for valid input
invalid-feedback Shows feedback for invalid input

Happy coding, and remember - every expert was once a beginner. Keep practicing, and you'll be amazed at what you can create!

Credits: Image by storyset

Previous Tutorial:
Bootstrap-Pricing Demo
Next Tutorial:
Bootstrap-Product Demo