Bootstrap - Pricing Demo

Ethan D. - June 1, 2024

Designing the pricing section

To create an attractive and well-structured pricing section using Bootstrap, start by creating a container to hold the pricing elements. Use Bootstrap's container class to create a responsive container that centers the content on the page.

Use Bootstrap's grid system to create columns for displaying the pricing plans side by side. Bootstrap's grid system is based on a 12-column layout, allowing you to divide the row into equal or varying column widths.

Example

<div class="row">
  <div class="col-md-4">
    <!-- Pricing plan 1 -->
  </div>
  <div class="col-md-4">
    <!-- Pricing plan 2 -->
  </div>
  <div class="col-md-4">
    <!-- Pricing plan 3 -->
  </div>
</div>

Inside each column, add a pricing plan card to present the details of each plan. Bootstrap's card component is a flexible and extensible content container that can be customized to fit your design needs.

Creating pricing plan cards

To create pricing plan cards, use Bootstrap's card component. Start by creating a <div> element with the card class. Inside the card, add a <div> with the card-body class to hold the card's content.

Within the card-body, add a heading element (<h3> or <h4>) with the card-title class to display the plan name. Below the title, include a <p> element with the card-text class to provide a brief description of the plan.

To display the pricing information, create a <div> element with the price class and style it using custom CSS. Inside this <div>, add a <span> element to display the price value and another <span> element to show the pricing duration (e.g., per month or per year).

Example

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Basic Plan</h4>
    <p class="card-text">Suitable for small businesses and startups.</p>
    <div class="price">
      <span>$9.99</span>
      <span>per month</span>
    </div>
  </div>
</div>

To make the pricing cards more visually appealing, apply custom CSS styles. Use CSS to set background colors, border styles, padding, and margin for the cards. You can also style the typography, such as font sizes, font weights, and colors, to create a cohesive and professional look.

Tip

Use consistent styling across all pricing cards to maintain a unified and professional appearance.

Implementing responsive design

Bootstrap makes it easy to create responsive designs that adapt to different screen sizes. By using Bootstrap's responsive classes, you can adjust the layout of your pricing section to look great on devices ranging from mobile phones to large desktop screens.

To make your pricing cards responsive, use Bootstrap's grid system classes.

Example

<div class="row">
  <div class="col-md-4 col-sm-6 col-12">
    <!-- Pricing plan 1 -->
  </div>
  <div class="col-md-4 col-sm-6 col-12">
    <!-- Pricing plan 2 -->
  </div>
  <div class="col-md-4 col-sm-6 col-12">
    <!-- Pricing plan 3 -->
  </div>
</div>

In addition to adjusting the column widths, you can use Bootstrap's responsive utility classes to hide or display elements based on the screen size. For instance, you might want to hide certain features or descriptions on smaller screens to keep the pricing cards compact and easy to read.

Example

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Basic Plan</h4>
    <p class="card-text d-none d-md-block">Suitable for small businesses and startups.</p>
    <div class="price">
      <span>$9.99</span>
      <span class="d-none d-sm-inline">per month</span>
    </div>
  </div>
</div>

To test the responsiveness of your pricing section, use your browser's developer tools to simulate different screen sizes. Adjust the layout and styling as needed to create an optimal viewing experience across all devices. Make sure that the pricing cards are easily readable, well-spaced, and visually appealing on each screen size.

Tip

Test your pricing section on actual devices, in addition to using browser developer tools, to get a better sense of how it looks and feels on different screens.

Adding Interactive Elements

To make your pricing page more engaging and user-friendly, add interactive elements such as a toggle switch for monthly and yearly pricing. This lets users compare prices and select their preferred billing cycle.

Create a toggle switch using Bootstrap's custom forms.

Example: Toggle Switch

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="pricingSwitch">
  <label class="form-check-label" for="pricingSwitch">Monthly/Yearly Pricing</label>
</div>

To implement the toggle functionality, use JavaScript.

Example: Toggle Functionality

const pricingSwitch = document.getElementById('pricingSwitch');
const monthlyPrices = [...document.querySelectorAll('.price-monthly')];
const yearlyPrices = [...document.querySelectorAll('.price-yearly')];

pricingSwitch.addEventListener('change', function() {
  if (this.checked) {
    monthlyPrices.forEach(price => price.style.display = 'none');
    yearlyPrices.forEach(price => price.style.display = 'block');
  } else {
    monthlyPrices.forEach(price => price.style.display = 'block');
    yearlyPrices.forEach(price => price.style.display = 'none');
  }
});

In the HTML code for your pricing cards, add separate <span> elements for the monthly and yearly prices. Give them unique classes (e.g., price-monthly and price-yearly) to easily select and update them with JavaScript.

Example: Pricing Cards

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Basic Plan</h4>
    <p class="card-text">Suitable for small businesses and startups.</p>
    <div class="price">
      <span class="price-monthly">$9.99 per month</span>
      <span class="price-yearly" style="display: none;">$99.99 per year</span>
    </div>
  </div>
</div>

By default, display the monthly prices and hide the yearly prices using the style attribute. When the toggle switch is checked, hide the monthly prices and show the yearly prices. This creates a smooth and intuitive user experience, allowing users to quickly see the pricing options for their chosen billing cycle.

Test the toggle functionality to make sure the prices update correctly and the user experience is smooth.

Improving the Design with Custom Styles

Bootstrap provides a foundation for creating responsive and appealing designs, but you can improve your pricing section by applying custom styles. By changing Bootstrap's default styles and adding your own CSS, you can create a unique pricing section that matches your brand and design preferences.

First, create a separate CSS file or use the <style> tag in your HTML document to write your custom styles. Change Bootstrap's default styles by targeting specific classes or elements and applying your styles.

Example: Custom Card Styles

.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.card-text {
  font-size: 16px;
  color: #666;
}

.price {
  font-size: 36px;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 20px;
}

Tip: Color Scheme

Use a color scheme that complements your brand and creates a cohesive look throughout your pricing section and website.

To further improve the visual appeal of your pricing section, adjust the spacing between elements using CSS margin and padding properties. Proper spacing helps create a clean and organized layout that is easy to read and navigate.

Example: Adjusting Spacing

.card-body {
  padding: 30px;
}

.card-title {
  margin-bottom: 15px;
}

.card-text {
  margin-bottom: 30px;
}

Try different styles, colors, and spacing until you achieve an appealing design that communicates your pricing plans and encourages users to make a purchase.

Tip: Seek Inspiration

Look for inspiration from other well-designed pricing pages and adapt their styles to fit your own unique design vision.

By combining Bootstrap's responsive layout with your own custom styles, you can create a pricing section that is both visually stunning and user-friendly, setting your product or service apart from the competition.

Integrating a Call-to-Action Button

To encourage users to take action and sign up for a pricing plan, add a call-to-action (CTA) button to each pricing card. The CTA button should be visually appealing and clearly communicate the desired action, such as "Sign Up" or "Get Started."

To add a CTA button to each pricing plan, use Bootstrap's button classes. Bootstrap provides pre-styled button classes that you can use to create attractive and consistent buttons in your pricing section.

Example: Adding a CTA button

<div class="card">
  <div class="card-body">
    <!-- Pricing plan details -->
    <a href="#" class="btn btn-primary btn-block">Sign Up</a>
  </div>
</div>

The btn class applies the basic button styles
The btn-primary class adds the primary color scheme to the button
The btn-block class makes the button fill the width of its parent container, which is the pricing card

To make the CTA button stand out and grab the user's attention, consider using a contrasting color or a gradient background. You can achieve this by applying custom CSS styles to the button.

Example: Custom button styles

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

These custom styles:

Change the button's background color and border color
Set the font weight to bold
Transform the text to uppercase
Create a smooth hover effect when the user moves the cursor over the button using the transition property

Link the CTA button to a registration or sign-up page where users can complete the process of subscribing to the selected pricing plan. Set the href attribute of the button's <a> element to the URL of your registration page.

Example: Linking the CTA button

<a href="/register" class="btn btn-primary btn-block">Sign Up</a>

Replace "/register" with the actual URL of your registration page.

Testing and optimizing the pricing demo

To make sure your pricing demo works well and looks great for all users, test it across different browsers and devices. Check for cross-browser compatibility. Open your pricing page in popular browsers such as Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. Look for layout inconsistencies, styling issues, or functionality problems. Test the interactive elements, such as the toggle switch and CTA buttons, to make sure they work as expected in each browser.

Optimize the page load speed. A fast-loading pricing page can improve user experience and increase conversions. Use tools like Google PageSpeed Insights or GTmetrix to analyze your page's performance and get suggestions for improvement.

Optimization	Description
Minify HTML, CSS, and JavaScript files	Reduce file sizes by removing unnecessary characters and whitespace
Compress images and use appropriate file formats	Use JPEG for photographs and PNG for graphics with transparency
Enable browser caching	Allow browsers to store static files locally for faster loading on subsequent visits
Reduce HTTP requests	Combine files or use a content delivery network (CDN) to minimize the number of requests made to the server

Implement the suggested optimizations and re-test your page to see the improvement in load times.

Validate your HTML and CSS code to catch errors or potential issues. Use the W3C Markup Validation Service to check your HTML code for syntax errors, missing tags, or other issues. Fix any reported problems to ensure your code follows web standards and is compatible with different browsers.

For your CSS code, use the W3C CSS Validation Service to identify syntax errors, invalid properties, or other issues. Correct any reported problems to make sure your CSS is clean and consistent.

Example: HTML code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Pricing section code -->
  <script src="script.js"></script>
</body>
</html>

HTML Validation Tips

Include the <!DOCTYPE html> declaration at the beginning of your HTML file
Add the lang attribute to the <html> tag to specify the language of your content
Include the <meta charset="UTF-8"> tag to set the character encoding
Add the <meta name="viewport"> tag to make your page responsive on different devices
Link your CSS file using the <link> tag with the correct href attribute
Place your JavaScript file just before the closing </body> tag for better performance

By testing your pricing demo across browsers, optimizing its performance, and validating your code, you can create a polished and professional pricing section that works well for all users and helps drive conversions for your product or service