In this article, you’ll learn how to effortlessly create a modern and responsive landing page using Context7 MCP and Bootstrap 5 by simply providing prompts - no expert coding required!

Landing pages are the cornerstone of online success. They directly influence conversion rates and play a crucial role in lead generation. But creating an effective landing page that looks great across all devices can be a daunting task. That’s where AI-powered tools can help, making it easier than ever to build a landing page that’s both visually appealing and responsive.

Table of Content

• Prerequisites

• Leveraging AI for Bootstrap 5 Landing Page Code Generation

• What is Bootstrap?

• What is MCP?

• Basic Use Case of Context7 in MCP for Bootstrap

• How to Use Context7 MCP for Optimal Results with Bootstrap 5

• Step-by-Step Build: AI-Powered Landing Page with Bootstrap 5 and Context7 MCP

• How to Set Up Context7 MCP in VS Code

• Instructions for Content Generation and Confirmation Process

• Methods for Building a Landing Page with AI

• Conclusion

Prerequisites

Before diving into the tutorial, make sure you have the following:

• Basic understanding of HTML, CSS, and JavaScript.

• Bootstrap 5: Familiarity with this front-end framework is essential.

• VS Code: A modern code editor like Visual Studio Code.

• Node.js: Installed to run server-side operations.

• Context7 MCP: A basic understanding of this AI-driven tool for managing design systems.

Leveraging AI for Bootstrap 5 Landing Page Code Generation

Building a landing page traditionally requires crafting HTML and CSS from scratch, which can be labor-intensive and prone to inconsistencies. That’s where AI can be helpful.

Tools like Context7 MCP & VS Code complement this workflow by accelerating the process: with a simple prompt such as “feature card with icon and button,” it produces ready-to-use code snippets that integrate seamlessly with Bootstrap 5’s grid system and styling principles.

This allows developers to iterate quickly, refine their designs, and allocate more effort toward unique content and user-centric refinements.

Benefits of Using AI for Bootstrap Code Generation:

1. Speed: Generate responsive, well-structured code in seconds.

2. Efficiency: Automates boilerplate code, letting developers focus on higher-level tasks.

3. Consistency: Ensures all generated components align with Bootstrap’s standards.

4. Customization: Provides flexibility to tailor components to your needs.

5. Improved and Up-to-Date AI-Generated Code: The AI follows structured guidelines, ensuring the generated code is current and accurate.

How AI Revolutionizes Bootstrap Development

AI-driven tools like Context7 MCP are not just for developers, they make web development accessible to everyone, even those without coding expertise.

Small business owners, digital creators, and freelancers can now create professional-grade landing pages with just a few prompts, allowing them to bring their visions to life without a steep learning curve.

What is Bootstrap?

Bootstrap 5 is a powerful, open-source front-end framework that helps developers build responsive websites quickly. It provides a comprehensive set of components, a flexible grid system, and utility classes, making it easy to design modern, mobile-first websites with minimal effort.

Bootstrap is widely used for developing responsive, mobile-first websites. It offers a collection of reusable tools and components, such as navigation bars, forms, buttons, and more, which can be easily customized to meet specific project requirements.

Why Choose Bootstrap 5 for Landing Pages?

Bootstrap 5’s mobile-first approach, combined with its responsive grid system, makes it the go-to choice for building landing pages that perform seamlessly across all screen sizes.

The grid system, based on flexbox, enables designers to create fluid layouts that adapt to the user's viewport, ensuring that landing pages look polished on any device. With numerous utility classes for spacing, typography, and colors, developers can style pages quickly, reducing the need for custom CSS.

Additionally, Bootstrap 5 introduces modern CSS variables, enabling developers to easily adjust themes and style elements dynamically, perfect for projects that require quick visual updates.

Key Bootstrap 5 Benefits for Landing Pages:

• Mobile-First Design: Built to prioritize mobile responsiveness, ensuring seamless performance across all devices, from phones to desktops.

• Extensive Component Library: A rich set of reusable, customizable components, such as buttons, alerts, forms, navigation bars, and more. This streamlines development and reduces the need for custom code.

• Responsive Grid System: The flexbox-based grid ensures that layouts are flexible, adaptive, and easy to modify for various screen sizes.

• Utility Classes: Bootstrap 5 includes a comprehensive set of utility classes for handling spacing, alignment, typography, and visibility, speeding up the styling process.

• Live Documentation & Community Support: Bootstrap 5 offers detailed and interactive documentation, backed by a large, active community for support and resources.

What is MCP?

MCP stands for Model Context Protocol. It is an open and standardized protocol designed to facilitate the interaction between large language models (LLMs) and external applications, data sources, and tools.

MCP enables seamless integration and contextualization, providing a uniform way for AI models to receive and understand context from various sources.

MCP works similarly to a universal connector, much like how USB-C serves as a common interface for connecting various devices.

Just as USB-C simplifies connectivity across devices, MCP streamlines the integration of LLMs with different data sources and services, ensuring smooth communication and enhancing the overall functionality of AI models.

MCP empowers developers and organizations to build intelligent agents and complex workflows by offering the following:

• Pre-built Integrations: A growing list of integrations that enable your LLM to plug into popular data sources, tools, and services without the need for custom development.

• Custom Integration Framework: A standardized way to create custom connections between LLMs and external services, ensuring flexibility and scalability across different use cases.

• Open Protocol: MCP is open-source, meaning anyone can implement and utilize it, promoting wider adoption and community-driven growth.

• Context Portability: MCP allows the transfer of context between various applications, making it easy to switch between services while maintaining the same level of contextual awareness across systems.

By using MCP, you can build powerful AI-driven applications, automate complex workflows, and create more context-aware models that can interact seamlessly with the world around them.

Basic Use Case of Context7 in MCP for Bootstrap

When working with Bootstrap, one of the biggest challenges developers face is ensuring their code stays up-to-date with the latest version of the framework.

Bootstrap, like many modern front-end frameworks, undergoes frequent updates, and without access to version-specific documentation, LLMs (Large Language Models) may generate outdated or incorrect code, especially when dealing with new components or utility classes introduced in recent versions.

This can lead to frustrating issues, such as hallucinated code or incorrect implementation of new Bootstrap features. Manual efforts to update documentation or reference various sources are often time-consuming and inefficient, with the added challenge of keeping track of specific version differences across the framework’s evolution.

The Solution: Context7 for Bootstrap

Clean, version-specific Bootstrap documentation for accurate, up-to-date code generation.

Context7 eliminates these issues by providing real-time, version-specific documentation directly to your AI tools, ensuring they always have the most accurate and relevant Bootstrap code. With Context7, you can be confident that the AI-generated code is fully aligned with the current version of Bootstrap, streamlining the development process and ensuring upto the mark implementation of the framework.

Key Features of Context7 for Bootstrap:

• Version-Specific Bootstrap Documentation: Always up-to-date with the latest Bootstrap version, ensuring accurate integration of new classes, components, and utilities.

• Real, Working Bootstrap Code: Extracts working examples directly from official Bootstrap documentation, saving you time and effort.

• Concise and Relevant Information: Filters out unnecessary details and ensures you receive only the most useful snippets for your project.

• Free for Personal Use: Access the powerful Context7 tool without any cost for personal development and experimentation.

• MCP Integration: Seamlessly integrates with Model Context Protocol (MCP) to provide context-aware AI interactions, making it easier for developers to work with Bootstrap in real-time.

How to Use Context7 MCP for Optimal Results with Bootstrap 5

When building responsive and modern landing pages, developers often face limitations with tools like Lovable and Bolt. These platforms typically provide pre-built templates, but they can restrict customization and integration, especially when working with powerful front-end frameworks like Bootstrap 5.

Unlike traditional solutions, Context7 MCP integrates with the most current official Bootstrap 5 documentation, providing real-time access to the latest framework updates, components, and best practices.

This feature is essential, as it ensures that the generated code adheres to Bootstrap 5’s latest standards, offering a far more flexible and accurate approach than static templates or LLM-based solutions, which might not reflect the most recent changes in Bootstrap 5.

With Context7 MCP, you gain:

• Flexibility: Effortlessly generate custom Bootstrap 5 components tailored to your specific needs, such as navigation bars, buttons, or modals.

• Seamless Bootstrap 5 Integration: Fully integrate with Bootstrap 5’s responsive grid system and design conventions, ensuring your landing pages are both functional and adaptive to different screen sizes.

• Consistency: Maintain design consistency across your project without compromising on customization, leveraging the latest components and utilities directly from Bootstrap 5.

• Up-to-Date Components: Always have access to the latest Bootstrap 5 features and updates from MCP, ensuring that your landing pages are current with the latest changes in the framework.

How Context7 MCP Enhances Productivity

By incorporating Context7 MCP into your development workflow, you streamline the process of building responsive landing pages and web applications.

Context7 MCP ensures that all your components align with latest Bootstrap 5 standards, making it easier to maintain consistency throughout your project.

This allows you to quickly adapt to the latest Bootstrap 5 updates, leveraging its latest features without the risk of introducing errors or inconsistencies.

Step-by-Step Build: AI-Powered Landing Page with Bootstrap 5 and Context7 MCP

In this guide, we will walk through building an engaging AI-powered landing page using Context7 MCP and Bootstrap 5. We will cover everything from setting up the project environment to generating responsive Bootstrap components and integrating AI-powered elements to enhance user experience.

Set Up the Project Environment

Before we dive into creating the landing page, we’ll start by setting up the project structure and ensuring that we have Bootstrap 5 integrated. Additionally, we will leverage Context7 MCP to automate the generation of responsive components and layouts for the landing page.

1. Set up the project folder:

mkdir my-landing-page
cd my-landing-page

Create the index.html file for the landing page layout:

touch index.html

Initialize the project with npm:

npm init -y

This will create a package.json file for the project.

2. Add Bootstrap 5 to the project:

You can include Bootstrap 5 in two ways: by downloading the compiled CSS and JS files or by using a CDN. For simplicity, we’ll use the CDN links.

In the <head> section of your index.html, add:

<link href="<https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css>" rel="stylesheet">

At the end of the <body> section, add:

<script src="<https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js>"></script>

This ensures that Bootstrap 5 is integrated into the project for layout and component styling.

3. Basic Structure of the Landing Page:

Start by setting up the basic layout in your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <!-- Bootstrap 5 CDN -->
    <link href="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css>" rel="stylesheet">
</head>
<body>
    <!-- Landing Page Content -->

    <script src="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js>"></script>
</body>
</html>

This simple structure sets the stage for a responsive design. Feel free to modify the content as per your requirements.

How to Set Up Context7 MCP in VS Code

Integrating Context7 MCP into your project is an essential step to streamline your development process, allowing seamless interaction with large language models (LLMs) and ensuring the generation of accurate, context-driven code. Below is a step-by-step guide on how to set up Context7 MCP in VS Code.

1. One-Click Setup (Optional)

For a quick and easy installation, you can use the one-click setup to install Context7 MCP in VS Code. Simply click the link below to initiate the installation:

Install Context7 MCP in VS Code

This will automatically install Context7 MCP for you within VS Code, enabling it for use in your development environment.

2. Add MCP Configuration to VS Code

Once Context7 MCP is installed, you’ll need to configure it within VS Code. This step ensures that VS Code communicates with the MCP server to fetch context-driven documentation and code examples.

To add the configuration, follow these steps:

1. Open the settings.json file in VS Code by navigating to File > Preferences > Settings and clicking the {} Open Settings (JSON) icon.

2. Add the following MCP configuration to the settings file:

"mcp": {
  "servers": {
    "context7": {
      "type": "http",
      "url": "<https://mcp.context7.com/mcp>",
      "headers": {
        "CONTEXT7_API_KEY": "YOUR_API_KEY"
      }
    }
  }
}

Replace "YOUR_API_KEY" with your actual API key from Context7. This key will authenticate your request and allow access to MCP services.

3. Local Server Setup

If you prefer running Context7 MCP locally rather than using the hosted version, you can set up a local server. This is especially useful for working in isolated environments or without an internet connection.

To configure Context7 MCP to run locally:

1. Open your settings.json file in VS Code.

2. Add the following configuration:

"mcp": {
  "servers": {
    "context7": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp", "--api-key", "YOUR_API_KEY"]
    }
  }
}

This setup runs Context7 MCP locally by invoking the npx command with the necessary arguments, including your API key.

4. Installing Context7 in Other Editors

If you wish to set up Context7 MCP in other code editors, you can follow detailed installation guidelines available in the Context7 Installation Documentation. This resource provides step-by-step instructions for configuring MCP in various environments, ensuring compatibility with your preferred editor.

Instructions for Content Generation and Confirmation Process

To begin generating content with Context7 MCP, you first need to confirm whether you'd like to proceed with the provided context. If you're using the context I've shared, simply click 'Continue' to confirm your choice.

A second confirmation will ensure that you want to generate content based on the prompt provided. Once you click 'Continue', the system will refer to the appropriate context (for example, Bootstrap documentation) and initiate the content generation process.

Note: When writing a prompt and intending to use Context7, make sure to include using context7 at the beginning of the prompt. This explicitly directs the AI to generate content based on Model Context Protocol (MCP) and relevant context sources like Bootstrap 5 documentation.

How to Automate the Inclusion of Context7 Instructions

If you'd like to avoid manually including the using context7 instruction in every prompt, you can automate the process by setting default instructions in your project’s configuration files. To do this, add the following instructions to your .github/copilot-instructions.md file in the root directory of your project:

always use context7 with bootstrap

Methods for Building a Landing Page with AI

1. Building a Complete Landing Page with a Single Prompt

An effective landing page is not just about design, it must provide a seamless, user-friendly experience that immediately captures attention and guides visitors through the content.

By leveraging the flexibility of Bootstrap 5 and the power of the Context7 MCP framework, you can generate a complete, fully responsive landing page that performs well across all devices, both mobile and desktop.

Using a single prompt, you can quickly create a comprehensive layout with all essential sections, streamlining the process while maintaining visual appeal and functional design.

Important Note: When generating a complete landing page layout, results may vary depending on different environments or agents. While creating a full-page design using a single prompt can yield some results, the precision and consistency may not be as high compared to generating individual sections. For more consistent and accurate results, consider using advanced models like Claude Sonnet 4 to ensure better output quality.

Creating a Responsive AI Tool Landing Page

Here’s a template for building a responsive and dynamic landing page layout using Bootstrap 5, ensuring that all key sections are optimized for both mobile and desktop views:

Generate a responsive AI tool landing page layout with Bootstrap 5 featuring the following sections:
- Navigation Bar: Links to other sections of the page.
- Hero Section: A heading, subheading, and a compelling call-to-action button.
- About Section: Introduces the company or product.
- Features Section: Highlights key features and benefits.
- How It Works Section: Explains the process or flow.
- Pricing Section: Showcases pricing plans or offers.
- FAQ Section: Answers common questions and concerns.
- Contact Section: Provides contact details or an inquiry form.
- Footer Section: Includes copyright and additional links.

This structure ensures a logical flow, starting with an engaging Hero Section, followed by deeper insights into the product (Features, How It Works), and finishing with clear calls to action (Pricing, FAQ, and Contact).

Code Example

You can access all the code for this landing page by cloning or downloading the repository:

Repository Link

For the complete code, including the full layout template, visit the full-prompt-landing-page.html file in the repository directly:

Full Code File

2. Creating a Section-by-Section Landing Page

Building a landing page section by section allows you to focus on each component individually, ensuring precise control over design and functionality.

By structuring your page into distinct sections (such as the hero, features, pricing, and so on), you can tailor the content and style of each part, ensuring that it aligns with your branding and conversion goals.

This method provides greater flexibility and customization, especially when using AI-powered tools like Context7 MCP, as it allows you to generate each section according to specific requirements and design preferences.

Create a Header and Hero Section with AI Prompt

The Header and Hero Section are essential for setting the tone of your landing page. The hero section grabs visitors' attention immediately and introduces them to the key value proposition of your AI tool. The header ensures smooth navigation across the page.

Prompt Example:

"Design a full-width hero section with a striking background image or color that highlights the AI tool. Include a compelling tagline that clearly communicates the main benefit of the tool, along with a call-to-action (CTA) button prompting users to 'Get Started' or 'Learn More.' Additionally, create a clean, responsive header section with a navigation bar containing links to: Home, About, Features, Pricing, FAQ, and Contact."

AI Output:

Customizing the Style:

To further customize the style, you can adjust the background, font, and button classes either through the prompt or by manually editing the class names in the generated code. With MCP, you can also tweak colors and typography to better align with your brand's design guidelines.

Create an Engaging About Section with AI Prompt

The About section serves as an introduction to your AI tool, explaining its purpose, key features, and how it benefits users. It should establish trust and clearly communicate what makes your tool unique.

Prompt Example:

"Design an 'About' section with a brief overview of the AI tool. Include a short paragraph explaining the tool’s core features, its purpose, and how it stands out from competitors. Add an image or icon to visually complement the text."

AI Output:

Customizing the Style:

You can adjust the background, typography, and button classes to fit your brand's aesthetic. Modify the content to better highlight the unique selling points of your AI tool, ensuring that it resonates with your target audience.

Showcase Key Features with AI Prompt

The Features section is essential for highlighting the core benefits and capabilities of your AI tool. It helps users understand exactly what the tool offers and how it can improve their workflow or solve their problems.

Prompt Example:

"Design a Features section that lists the key features of the AI tool in a visually engaging manner. Include icons or images to represent each feature and provide short, clear descriptions of how each feature benefits the user. Ensure the section is easy to scan and encourages users to explore more."

AI Output:

Customizing the Style:

You can easily adjust the icons, typography, and layout using the prompt or by editing the class names in the generated markup. Consider using your brand’s icons or color palette to make the section more visually aligned with your brand identity. You can also tweak the descriptions to focus on the features most important to your target audience.

Present Pricing Plans with AI Prompt

The Pricing section is crucial for converting visitors into customers. It should clearly display the available pricing options, highlighting the value of each plan and encouraging users to take action. This section should be simple, yet persuasive, and easy to understand.

Prompt Example:

"Design a Pricing section that clearly presents different pricing tiers. Include the plan names, prices, key features, and a clear call-to-action (CTA) button for each plan. Use a comparison table or card layout to make it easy for users to compare options and make an informed decision."

AI Output:

Customizing the Style:

To tailor the Pricing section to your brand, you can adjust the colors, fonts, and card styles. You can customize the pricing plans to fit your offering, modify the CTA buttons to highlight specific actions (for example, “Start Free Trial” or “Learn More”), and adjust the layout for different screen sizes.

Create an Informative FAQ Section with AI Prompt

The FAQ section is key to addressing common questions and concerns from potential users, helping them make informed decisions. It should be organized, easy to scan, and provide clear, concise answers. This section can also reduce customer support inquiries by offering quick solutions.

Prompt Example:

"Design a FAQ section that addresses common questions about the AI tool. Use an accordion or collapsible design for better readability, and ensure the answers are concise and informative. Include a clear, inviting heading for the section and format the questions in a way that’s easy to scan."

AI Output:

Customizing the Style:

You can personalize the FAQ section by adjusting the accordion style, colors, and fonts to match your brand’s theme. You can also modify the questions and answers based on the most common inquiries from your users. For a more dynamic effect, consider adding icons or images next to the questions.

Create an Engaging Contact Section with AI Prompt

The Contact section is essential for encouraging visitors to reach out for more information, support, or inquiries. It should be clear, easy to use, and include all necessary contact details, as well as a form for quick communication.

Prompt Example:

"Design a Contact section that includes a contact form with fields for name, email, subject, and message. Ensure the form is simple, easy to fill out, and includes a submit button. Also, provide clear contact details, such as a phone number, email address, and physical location (if applicable)."

AI Output:

Customizing the Style:

To align the Contact section with your brand’s design, you can modify the colors, fonts, and form styles. Adjust the form fields, buttons, and layout to match the look and feel of your website.

Additionally, you can add custom map integration or contact methods (like social media handles) to further enhance accessibility.

Create a Comprehensive Footer Section with AI Prompt

The Footer section is often the last thing users see on a page, so it’s essential to include important links, contact details, and legal information. A well-designed footer can help improve site navigation and encourage further engagement with your content.

Prompt Example:

"Design a Footer section that includes key navigation links, such as Privacy Policy, Terms of Service, and social media icons (for example, Facebook, Twitter, LinkedIn). Include your company’s contact details (email, phone) and a copyright notice. The footer should be responsive and neatly organized."

AI Output:

Customizing the Style:

To match your brand’s aesthetics, you can adjust the Footer section’s background color, typography, and icon styles. You can also add additional links like your blog, careers page, or a newsletter signup form. Ensure the footer is responsive by checking it on different screen sizes, making adjustments to spacing or layout as needed.

Conclusion

In this tutorial, we’ve demonstrated how to create a modern, responsive landing page using Bootstrap 5 and integrate Context7 MCP. We also explored different methods for building the landing page, either using a single comprehensive prompt or constructing it section by section.

While a single comprehensive prompt can generate a landing page quickly, building it section by section typically yields better results. This approach allows for greater customization, finer control over each element, and ensures that every section aligns with your overall design vision.

By leveraging Bootstrap 5’s robust grid system and Context7’s AI-driven component generation, you can easily create landing pages that are not only visually appealing but also responsive and functional across all devices. This combination of tools makes the process faster, more efficient, and scalable.

You can also consider using a ready made bootstrap template which comes with pre designed landing pages.

With this setup, you can expect:

Rather than requiring developers to manually write repetitive code for common components, such as navigation bars, feature cards, or grids, VS Code and Context7 automates this process, allowing you to focus on higher-level design decisions.

It also ensures that the generated code is fully responsive and in alignment with latest Bootstrap 5’s framework, providing seamless integration with Bootstrap’s utilities like spacing, alignment, and visibility.

I hope you find this article helpful and worth reading. I have prepared this article with help of Smit Bhalodiya, a Front End developer with 5+ years of experience in the field.

In this article, you will find a brief introduction to responsive web development and Bootstrap 5. You will also learn why you should learn them if your goal is to be a front-end web developer.

Then, you will find a 5-hour Bootstrap 5 course on the freeCodeCamp Spanish YouTube channel. In this course, you can learn the fundamentals in Spanish and build your portfolio website step by step using Bootstrap components, icons, and grid.

If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.

💡 Tip: to take the course, you should have previous knowledge of HTML and CSS. If you need to review these topics, I invite you to take our full courses on the Spanish YouTube channel.

Let's begin! ✨

🔹 What is Bootstrap?

Let's start with an introduction to Bootstrap. The official Bootstrap documentation defines it as a:

Powerful, extensible, and feature-packed frontend toolkit.

Bootstrap 5 - Official Website

Let's see the main keywords of this definition more closely:

• Bootstrap is powerful because it has many features, including pre-defined CSS classes that you can apply to your HTML elements to assign style instantly. With Bootstrap, you can also use powerful JavaScript plugins to create elements like carousels, modals, tooltips, and more.
• Bootstrap is extensible because you can extend or customize the pre-defined CSS classes that come with Bootstrap to fit your needs. If you ever need to change a color, you can do so with custom CSS selectors, ids, and classes. You can also customize the JavaScript code that powers certain Bootstrap components.
• Bootstrap is used for front-end web development because this area of web development focuses on designing and developing the user interface, the part of the website that users see and interact with directly.

💡 Tip: basically, Bootstrap gives you all the tools you need to develop responsive websites with pre-defined components, icons, and styles.

Examples of Bootstrap Components (source)

🔶 Importance of Creating a Developer Portfolio

Developing your portfolio website is very important to showcase your knowledge, skills, and the projects you have worked on during your learning journey.

Think about it...

What is the best way to prove your knowledge and skills?

The answer is: creating real-world projects.

That is exactly what employers are looking for – developers who can learn new technologies and apply them to new scenarios.

Creating a project is a great way to show that you have the right skills and the motivation to work as a web developer.

Great. Now you know why it is important to create your developer portfolio, so let's see the portfolio website that you will create. 🔅

🔸 Course Project

This is the main structure of the portfolio website project that we will build during the course:

Hero Section and About Me Section

This section will have a navigation bar and a profile image. The navigation bar will be responsive. A burger icon will be displayed in small devices (instead of the navbar) and the text will be hidden automatically.

Experience section

This section will include three different areas of knowledge and badges to highlight specific skills. This section will be responsive and it will have a hover effect to add interactivity.

Projects section

This section will include links to the GitHub repositories and to the live versions of the projects. We will create this section with the Bootstrap grid, so it will be fully responsive and you will learn to work with grid breakpoints.

Articles Section

A list of articles or blog posts. These will be Bootstrap cards and list groups. Each article will be represented by a link that will be opened on a new tab.

Testimonials Section

A clients testimonials carousel. This will be a Bootstrap carousel component with three testimonials and controllers to move to the previous or next item in the carousel.

Contact Me Section and Footer

This section will have links to social media profiles and it will show the copyright of the website. The social media links will be customized Bootstrap icons.

Behind the Scenes

We will work with:

• The Bootstrap grid to adapt the website to devices of different sizes.
• Bootstrap components, including buttons, carousel, responsive navigation bar, responsive images, cards, list groups, and more.
• Bootstrap icons to add links to social media profiles (Twitter, GitHub, LinkedIn, and Instagram).
• Semantic HTML tags such as <header>, <section>, and <footer>.
• Media queries to adapt the HTML elements to devices of different sizes and orientations.
• CSS selectors
• Google Fonts
• More!

You will practice many different skills by building this project and when you complete it, you will have a fully responsive professional portfolio to showcase your skills.

Sounds awesome, right?

💡 Tip: after creating the basic structure of the website, you can customize it with your unique profile image, skills, and projects.

🔹 Development Tools

We will work with multiple tools that developers use in their everyday work.

Visual Studio Code

A powerful and popular code editor created by Microsoft. You can download and install it for free from its official website.

Visual Studio Code - Official Website

Live Server Extension for Visual Studio Code

A very helpful extension that will help us to improve our productivity by refreshing the browser when we change our HTML or CSS files.

Live Server - Documentation in the Extensions Marketplace

Chrome Developer Tools

A set of developer tools that come built-in with the Google Chrome browser. They are super helpful to test the responsiveness of the website, to select elements in the HTML structure, and to preview changes in the HTML and CSS files.

Chrome Developer Tools - freeCodeCamp

💡 Tip: we will download and install all the necessary tools during the course and you will learn how to work with them step by step.

🔸 Course on YouTube

Awesome. Now you know more about Bootstrap 5, about the importance of creating a professional portfolio. You also saw what you will learn during the course.

If you are ready, we invite you to start taking the course on the freeCodeCamp Español YouTube channel:

💻 In this link, you can access the live project (in Spanish) and practice how to use Chrome Developer Tools.

✍️ Course created by Estefania Cassingena Navone (Twitter: @EstefaniaCassN, YouTube: Coding with Estefania).

I really hope you like the course and find it helpful to create your developer portfolio.

You are also welcome to continue learning with our Spanish courses:

If you are a web developer or a web designer, it is essential for you to have a portfolio website. It lets you provide information about yourself and showcase your best work with your relevant skills and experience.

In this blog post, I will discuss some of the benefits of creating a portfolio website. Then I'll show you how to create a beautiful responsive portfolio website for yourself using HTML, CSS, JavaScript and Bootstrap version 5.

Here's an interactive scrim about how to create a portfolio website using HTML, CSS, JS, and Bootstrap 5:

Table Of Contents

• Benefits of having a portfolio website
• What is Bootstrap?
• Folder Structure
• How to Add a Navigation Menu to Your Portfolio
• How to Add a Hero Header to the Portfolio
• How to Make the About Section
• How to Make the Services Section
• How to Add Dark Background Color to Navbar on Page Scroll
• How to Build the Portfolio Section
• How to Build the Contact Section
• How to Build the Footer Section
• Adding Final Touches
• Conclusion

Benefits of having a Portfolio Website

Having a portfolio website has several benefits, including:

• it provides a platform to showcase your relevant skills and experience
• it shows your personality
• it lets hiring managers find you instead of you reaching out to them
• you are easily searchable on search engines like Google

What is Bootstrap?

Bootstrap is a popular front-end CSS framework which is used to develop responsive and mobile friendly websites. The latest release of Bootstrap is version 5. You can find the official documentation of Bootstrap 5 here.

Folder Structure

We will now start working on creating the portfolio website.

First, let's create the folder structure. You can get the project starter files on GitHub. Also, you can visit here to see the live demo of this project.

Project Folder Structure

The folder structure consists of index.html, style.css, and script.js files and an images folder. We'll write all CSS in the style.css file and the JavaScript in the script.js file .

In the index.html file, you can see the HTML boilerplate code with the Bootstrap CDN, font awesome kit, and a link to the external style sheet and JavaScript.

Here, the script.js file is loaded after loading all the HTML code.

How to Add a Navigation Menu to Your Portfolio

Now, let's work on adding a navigation menu in our project. It will help visitors find the relevant info they're looking for.

We will use Bootstrap's fixed-top class in nav element to keep the navbar at the top of the page. The navbar also has a navbar-brand class where we keep the name of the person as a brand.

<nav class="navbar navbar-expand-lg fixed-top navbarScroll">
        <div class="container">
            <a class="navbar-brand" href="#">Brad</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#portfolio">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>

            </div>
        </div>
    </nav>

The navbar has the following features:

• It has six links: home, about, services, portfolio, contact, and footer
• It has a transparent background. We will add a dark background on page scrolling later.
• It toggles on smaller devices

You can find more details regarding Bootstrap 5 navbar features here.

However, the navbar has a problem while scrolling. It's fully transparent throughout the page which causes readability issues. We will fix this issue after we complete the Services section to make you understand the issue properly.

How to Add a Hero Header to the Portfolio

Now, we will be adding a hero image with some text in the center. A hero image is a web design term which refers to a high quality full width image that displays the company or individual's main goals, a representative image, photo, or other eye-catching elements. It helps attract users to your site.

 <!-- main banner -->
    <section class="bgimage" id="home">
        <div class="container-fluid">
            <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text">
                <h2 class="hero_title">Hi, it's me Brad</h2>
                <p class="hero_desc">I am a professional freelancer in New York City</p>
            </div>
            </div>
        </div>
    </section>

Also, let's add the CSS for the above code in the style.css file:

/* hero background image */
.bgimage {
    height:100vh;
    background: url('images/heroImage.jpeg');
    background-size:cover;
    position:relative;
}
/* text css above hero image*/
.hero_title {
    font-size: 4.5rem;
}
.hero_desc {
    font-size: 2rem;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

Here we can see that the section has an id named bgimage which is responsible for displaying the background hero image with full width. It also displays some text in the center above the background image with the help of the above CSS.

This is how the site looks so far with the navbar and the hero section:

Hero Image with Navbar

How to Make the About Section

The About page contains important information about you and your background. Visitors to your portfolio site can get to know you through the information you provide in this page.

We will be adding an image to the left side of the row, and on the right side we will add our quick introduction in this section. Let's demonstrate it using the code below:

<!-- about section-->
    <section id="about">
        <div class="container mt-4 pt-4">
            <h1 class="text-center">About Me</h1>
            <div class="row mt-4">
                <div class="col-lg-4">
                    <img src="images/about.jpeg" class= "imageAboutPage" alt="">
                </div>

                <div class="col-lg-8">
                    <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged

                    </p>
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <ul>
                                <li>Name: David Parker</li>
                                <li>Age: 28</li>
                                <li>Occupation: Web Developer</li>

                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul>
                                <li>Name: David Parker</li>
                                <li>Age: 28</li>
                                <li>Occupation: Web Developer</li>

                            </ul>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                        </p>
                    </div>
                </div>
            </div>
    </section>

Let's add some CSS for the left side image:

/* about section image css */
.imageAboutPage {
    width: 100%;
}

This will create an about section. You can modify the content based on your use cases. We have added classes named mt-4 and pt-4 with container class which will set the margin top and padding top to 1.5 rem.

The row has two columns. One has the col-lg-4 class for displaying the image which will occupy the left column with a 4-part grid for large screens.

The next column is assigned a class of col-lg-8 which will occupy the right column with an 8-part grid for larger screens. For medium and small screens they will overlap with each other which we can see in the below GIF file:

About Section

How to Make the Services Section

This section helps convert website visitors into potential clients. This is where you explain what specific services you offer, and where you niche down your offered services.

Let's add the code for this section and describe it below:

<!-- services section-->
    <section id="services">
        <div class="container">
            <h1 class="text-center">Services</h1>
            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class="fas servicesIcon fa-clock"></i>
                            <h4 class="card-title mt-3">Website Development</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>
                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-layer-group'></i>
                            <h4 class="card-title mt-3">Website Design</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='far servicesIcon fa-check-circle'></i>
                            <h4 class="card-title mt-3">Website Deployment</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>
            </div>

            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-search'></i>
                            <h4 class="card-title mt-3">SEO</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-shield-alt'></i>
                            <h4 class="card-title mt-3">DevOps</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-wrench'></i>
                            <h4 class="card-title mt-3">QA</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </section>

Since this website is targeted towards web developers and designers, I've included some of the services which a web developer or designer might offer.

We have used bootstrap cards to display services. Our services section has 2 rows and 3 columns each. For large screens with a width greater than or equal to 992px, three cards are displayed in a row. For screens less than 992px wide, only a single card is displayed in a row.

You can find more about bootstrap breakpoints here.

Also, there are fonts added in each card to make them look better.

Without CSS, the services section would look like this :

So, let's add some CSS to increase the font icon font size and card height and add some extra color when a user hovers over a card.

/* services section css */
.servicesText.card {
    height: 280px;
    cursor: pointer;
  }
.servicesIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
}
.card-title {
    text-align: center;
}
.card:hover .servicesIcon {
    color: #008000;
}
.servicesText:hover {
    border: 1px solid #008000;
}

This is how our services section looks now:

Services

How to Add Dark Background Color to Navbar on Page Scroll

If you look into the above gif properly you will see that the navbar is transparent throughout the page which causes readability issues. So let's work on fixing this issue.

We will write some JavaScript and CSS in order to resolve this problem. We will add a navbarDark class in order to show a dark background color for the navbar on page scroll.

For that we need to go to the script.js file and add the following code:

// add class navbarDark on navbar scroll
const header = document.querySelector('.navbar');

window.onscroll = function() {
    var top = window.scrollY;
    if(top >=100) {
        header.classList.add('navbarDark');
    }
    else {
        header.classList.remove('navbarDark');
    }
}

Now, let's break down the above code:

• The header holds the value of the nav element since the querySelector method returns the first element that matches the CSS selector (which is .navbar in this case).
• window.onscroll fires up when the scroll event happens.
• window.scrollY returns the number of pixels that the document is scrolled vertically and its value is assigned to a variable named top.
• If the value of top is greater than or equal to 100, it adds a class of navbarDark to the header.

Let's quickly add CSS for the navbarDark class. For that, go to your style.css file and add the following code:

/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
    background-color: black;
}

This is how the navbar will look now:

Dark background color on Navbar on page scroll

How to Build the Portfolio Section

This section includes your best work. People can see what you are capable of doing, and showcasing strong past work will definitely attract more potential clients or recruiters. So only add your best work in this section.

We will use Bootstrap cards to display the portfolio projects. There will be 2 rows and each row will have 3 columns of cards.

This will be the code for portfolio section:

<!-- portfolio section-->
    <section id="portfolio">
        <div class="container mt-3">
            <h1 class="text-center">Portfolio</h1>
            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card">
                        <img class="card-img-top" src="images/portfolioImage1.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">YouTube Clone</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Quiz App</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage3.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Product Landing Page</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Messaging Service</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage1.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Twitter Clone</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Blog App</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>

Each card has an image, title, description, and link to the projects. Three cards are displayed in a row for large screens which have breakpoints of ≥ 992px wide, but for screens < 992px wide only a single card is displayed in a row.

The GIF below shows how the portfolio section looks now:

Portfolio

How to Build the Contact Section

You should include your contact information in this section so that visitors can contact you if they want to hire you.

Our contact section will include 2 columns in a single row: Google maps for location and a contact form.

In order to embed the Google map, you need to follow these steps:

• go to https://www.embed-map.com
• enter your location
• click on the Generate HTML Code button which will provide your Google Map HTML Code

Our code will look like this with the contact form included:

<!-- contact section-->
    <section id="contact">
        <div class="container mt-3 contactContent">
            <h1 class="text-center">Contact Me</h1>

            <div class="row mt-4">
                <div class="col-lg-6">
                    <!-- to edit google map goto https://www.embed-map.com type your location, generate html code and copy the html  -->
                    <div style="max-width:100%;overflow:hidden;color:red;width:500px;height:500px;">
                        <div id="embedmap-canvas" style="height:100%; width:100%;max-width:100%;">
                            <iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=new+york&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8">
                            </iframe>
                        </div>
                        <a class="googlemaps-html" href="https://www.embed-map.com" id="get-data-forembedmap">https://www.embed-map.com</a>
                        <style>#embedmap-canvas img{max-width:none!important;background:none!important;font-size: inherit;font-weight:inherit;}
                        </style>
                    </div>
                </div>

                <div class="col-lg-6">
                    <!-- form fields -->
                    <form>
                        <input type="text" class="form-control form-control-lg" placeholder="Name">
                        <input type="email" class="form-control mt-3" placeholder="Email">
                        <input type="text" class="form-control mt-3" placeholder="Subject">
                        <div class="mb-3 mt-3">
                            <textarea class="form-control" rows="5" id="comment" name="text" placeholder="Project Details"></textarea>
                        </div>
                    </form>
                    <button type="button" class="btn btn-success mt-3">Contact Me</button>

                </div>

            </div>
        </div>
    </section>

The first column will display the Google map and the next one will display the contact form.

The form has four different form fields: name, email, subject and project details. The form doesn't submit the request itself. You will need to connect it with any back-end language. Or, you can simply use Netlify Form or Formspree form for this.

This is how the contact section will appear:

Contact Section

How to Build the Footer Section

Now we have come to the last section of this post, which is the footer section. We have already added a link to the font awesome CDN in the index.html file.

In the Footer, we will add links to our social media through font awesome icons.

 <!-- footer section-->
    <footer id="footer">
        <div class="container-fluid">
            <!-- social media icons -->
            <div class="social-icons mt-4">
                <a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
                <a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
                <a href="https://www.twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a>
                <a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin"></i></a>
                <a href="https://www.twitch.tv/" target="_blank"><i class="fab fa-twitch"></i></a>
            </div>
        </div>
    </footer>

Without the CSS, our footer will look like this:

footer without styling

So let's add some styling to the footer with this code:

/* social media icons styling */
.social-icons {
    font-size: 36px;
    cursor: pointer;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-twitch:hover {
    color: #008000;
}
.fab {
    color: #000000;
}
/* footer styling */
#footer {
    background-color: #808080;
    text-align: center;
}

The icons are now displayed in the center with a hover effect which we can see in the below GIF file.

Footer

Final Touches

In order to add some spacing between all the sections, let's add some more styling:

/* spacing on all sections */
#about, #services, #portfolio, #contact {
    margin-top: 4rem;
    padding-top: 4rem;
}
#contact {
    padding-bottom: 4rem;
}

Now we're done making our complete portfolio website.

You can find the full source code of this project here.

Conclusion

This is how you can create a complete responsive portfolio website using HTML, CSS, JavaScript, and Bootstrap 5 .

In this blog post we saw some of the benefits of creating a portfolio website for web developers and designers. We divided the whole website into different sections and discussed each one individually as we built it.

You can customize this website based on your own use cases.

I hope you found this post useful.

Happy Coding!

You can find me on Twitter for daily content regarding Web development.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you about Bootstrap 5 and Sass by building a portfolio website.

Patrick Muriungi developed this course. He is an experienced developer and teacher.

Here are the different parts to this course:

• Part 1: Intro to Website Project
• Part 2: SASS Setup and Customizing Bootstrap
• Part 3: File structure
• Part 4: The Navbar Section
• Part 5: The Intro Section
• Part 6: The Companies Section
• Part 7: The Services Section
• Part 8: Testimonials Section
• Part 9: The FAQ Section
• Part 10: The Portfolio Section
• Part 11: Getting Started Section
• Part 12: The Footer Section

Here's what the portfolio website you'll= build will look like:

Watch the full course below or on the freeCodeCamp.org YouTube channel (5-hour watch).

Bootstrap 5 is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.

In case you didn't know, Bootstrap 5 alpha has been officially launched. It has removed jQuery as a dependency, has dropped support for Internet Explorer 9 and 10, and brings some awesome updates for the Sass files, markup, and a new Utility API.

This tutorial will show you how to start using VanillaJS instead of jQuery when building websites using the newest version of Bootstrap 5.

Getting started

You will need to include Bootstrap 5 in your project. There are several ways to do this, but to keep it simple we will include the framework via CDN.

First of all, let's create a blank index.html page inside a project folder:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Vanilla JS tutorial by Themesberg</title>
</head>
<body>

</body>
</html>

Include the bootstrap.min.css stylesheet before the end of your <head> tag:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

Afterwards include the Popper.js library and the main Bootstrap JavaScript file before the end of your <body> tag:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Curious what the integrity and crossorigin attributes mean? Here's the explanation:

Integrity attribute: allows the browser to check the file source to ensure that the code is never loaded if the source has been manipulated.

Crossorigin attribute: is present when a request is loaded using 'CORS' which is now a requirement of SRI checking when not loaded from the 'same-origin'.

Great! Now we have successfully included the newest version of Bootstrap in our project. One of the obvious differences is that we no longer had to require jQuery as a dependency, saving about 82.54 KB in bandwidth if in a minified state.

Switching from jQuery to Vanilla JS

Before we get started with this section, you should know that using Bootstrap 5 with jQuery is still possible according to the official documentation.

We recommend using Vanilla JavaScript if the only reason you've been using jQuery was for the query selector, because you can do the same thing with the document.querySelector('#element') as if it was $('#element').

The first step is to create a JavaScript file and include it before the end of the body tag but after the other two includes:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<script src="js/app.js"></script>

So when do you need to actually use Javascript with Bootstrap 5? There are certain components in the framework that work only if they are initialized via Javascript, such as tooltips, popovers and toasts.

Furthermore, with components such as modals, dropdowns, and carousels you may want to be able to programmatically change them based on a user action or application logic.

Initializing tooltips via Vanilla JavaScript

We all love tooltips, but they don't work unless they are initialized via JavaScript. Let's first start by creating a tooltip element inside our index.html file:

<button id="tooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    Tooltip on top
</button>

Hovering over the button will not show the tooltip, because by default it is an opt-in feature of Bootstrap and it needs to be initialized manually using JavaScript. If you want to do it with jQuery, here's how it would look:

$('#tooltip').tooltip();

Using Vanilla JS you would need to use the following code to enable the tooltip:

var tooltipElement = document.getElementById('tooltip');
var tooltip = new bootstrap.Tooltip(tooltipElement);

What the code above does it that it selects the element with the unique id of "tooltip" and then creates a Bootstrap tooltip object. You can then use that to manipulate the state of the tooltip, such as showing or hiding the tooltip programmatically.

Here's an example on how you could show/hide it via methods:

var showTooltip = true;
if (showTooltip) {
    tooltip.show();
} else {
    tooltip.hide();
}

If you would like to enable all of the tooltips you could also use the following code:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
});

What happens here is that we select all of the elements that have the data-toggle="tooltip" attribute and value and initialize a tooltip object for each one. It also saves them to a tooltipList variable.

Toggle the visibility of your elements using the Collapse JavaScript methods

The collapse feature on Bootstrap is another very handy way to show and hide elements via data attributes or JavaScript.

Here's an example of how we can show or hide a card when a certain button is being clicked. Let's first create the HTML markup:

<button id="toggleCardButton" type="button" class="btn btn-primary mb-2">Toggle Card</button>
    <div id="card" class="card collapse show" style="width: 18rem;">
        <img src="https://dev-to-uploads.s3.amazonaws.com/i/rphqzfoh2cbz3zj8m8t1.png" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Freecodecamp.org</h5>
            <p class="card-text">Awesome resource to learn programming from.</p>
            <a href="#" class="btn btn-primary">Learn coding for free</a>
        </div>
    </div>

So we created a button with the id toggleCardButton and a card with the id card. Let's start by selecting the two elements:

var toggleButton = document.getElementById('toggleCardButton');
var card = document.getElementById('card');

Then we need to create a collapsable object using the newly selected card element:

var collapsableCard = new bootstrap.Collapse(card, {toggle: false});

What the toggle:false flag does is that it keeps the element visible after creating the object. If not present, it would hide the card by default.

Now we need to add an event listener for the button for the click action:

toggleButton.addEventListener('click', function () {
    // do something when the button is being clicked
});

And lastly we need to toggle the card using the collapsable object that we initialized like this:

toggleButton.addEventListener('click', function () {
    collapsableCard.toggle();
});

That's it! Now the card will be shown/hidden whenever the button is clicked. Of course all of this could've been done using the data attributes feature from Bootstrap, but you may want to toggle certain elements based on an API call or a logic in your application.

Conclusion

If you have followed along this tutorial you should now be able to use the most popular CSS framework without the need of requiring jQuery in your project. This lets you save up to 85 KB of data and makes your website faster! Congratulations ?

If you appreciate this tutorial and like using Bootstrap as a CSS framework for your projects, I invite you to check out some of the free and premium Bootstrap themes, templates, and UI Kits that we build at Themesberg ❤️