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.

Some developers and teams find that code written in Bootstrap is easier to maintain than regular CSS, so they prefer Bootstrap to vanilla CSS.

But if everyone used Bootstrap with its default styles, then every site would look the same – and quickly, the internet would become pretty bland. Fortunately, Bootstrap is also highly customizable.

How to Customize Bootstrap

If you're a beginner, you can customize Bootstrap with a custom CSS stylesheet. CSS specificity is important here. You write custom CSS, with the same or higher specificity, and link to it in the head section of your index.html after the line which links to the original Bootstrap CSS.

<!-- index.html -->
<head>

    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!-- custom CSS should come after Bootstrap CSS -->
    <link rel="stylesheet" href="./custom.css"

</head>

For small tweaks this is OK. But for larger projects, this can be time-consuming and there may be a lot of redundant style declarations. So there has to be another, cleaner, way.

How to Use Sass with Bootstrap

The solution is to use Sass – a CSS preprocessor. Sass is compiled down to CSS before it's used on web pages.

Until Bootstrap version 3.x, you had a choice between CSS preprocessors: Less or Sass. But since version 4, Bootstrap uses only Sass. The source code for the Bootstrap 4 and 5 frameworks is written entirely in Sass, which is a testimony to how mature Sass has become.

You may have heard the tagline, "Sass is CSS with superpowers". If you want to learn Sass, the official website is an excellent resource. You can also refer to other tutorials on freeCodeCamp, like this one on how to use Sass with CSS, or this video course on how to use Sass with Bootstrap 5.

Sass comes with two syntaxes. The older one uses indentation and the newer SCSS syntax (SCSS for Sassy CSS) uses CSS-like curly braces.

SCSS is a superset of CSS. So CSS code saved with a .scss extension (or SCSS interspersed with CSS) is also valid Sass code.

In this tutorial, we are going to use the SCSS version. Whatever the style is, indented Sass or CSS-like SCSS, the Sass compiler will transpile it to vanilla CSS to be used on the browser.

What we are going to do in this tutorial

1. We will change the primary and secondary theme colors Bootstrap ships with.

2. We will also change the default media breakpoints Bootstrap uses.

Once we can do these, it will become easy to do other customizations.

The Prerequisites

1. Node.js with npm or yarn

2. A code editor, preferably VS Code.

3. A basic understanding of Sass

Download Bootstrap from the official website: https://getbootstrap.com

Since we have Node.js installed, I'm going to use the npm version.

npm i bootstrap

We also need to install the Sass compiler. We can get the official dart-sass version from their website. Whether you're on Windows, Mac, or Linux you just need to download the dart-sass package, unzip it, and add it to the path (environment variables).

There is a npm sass package. Also, there is a Live Sass Compiler VS Code extension with over 2 million installs. Feel free to use whatever Sass compiler you're comfortable with.

Here, we are going to use the npm package: sass.

After downloading Bootstrap, and the Sass compiler, in the node-modules directory, there is a folder named bootstrap.

There are also three folders inside it: dist, js, and scss.

All the compiled CSS is in dist, the Bootstrap JavaScript code in js, and all the Sass files are in the scss folder.

How to change the primary and secondary theme colors

For customization, our idea is to override the .scss files and recompile them.

The official Bootstrap documentation advises against changing the core bootstrap files whenever possible. So we are going to create a custom.scss stylesheet.

And we are going to import all of Bootstrap in the custom.scss file.

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

Variables are suffixed with a !default (a Sass flag) in Bootstrap. The !default flag tells the compiler to set the value only if the value is not defined.

So, we set the variables before the @import directive so that, later, the compiler sets our value instead of the default ones.

//custom.scss

$primary: teal;
$secondary: green;

@import "../node_modules/bootstrap/scss/bootstrap";

We also need an HTML file to preview the results.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome! Customize Bootstrap with Sass</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
</head>
<body>
 <div class="container" >
 <div class="row">
    <nav class="navbar navbar-expand-lg navbar-light bg-primary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Customize Bootstrap</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 me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
              </li>
            </ul>
            <form class="d-flex">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
<div class="container">
<div class="row">

  <div class="col-xl pt-3">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, laborum hic, quia maiores animi nobis eligendi est eos saepe architecto reiciendis! Aliquam inventore distinctio reprehenderit corporis amet assumenda officiis dolorem, animi delectus sunt dolor commodi. Adipisci nam nemo labore eligendi quas, rem ipsum iusto eveniet itaque vero necessitatibus! Quas, cupiditate tempora unde nam exercitationem libero aut labore deserunt nesciunt voluptate dignissimos quis porro reprehenderit maiores excepturi, esse, nisi dolores sit tenetur voluptatum corrupti alias provident pariatur? Quam illo unde autem, fugit numquam dolores, odio sed rem saepe exercitationem fuga, nisi soluta sunt officiis! Similique, vero repudiandae quae dignissimos fuga natus!
    </div>

  <div class="col-xl pt-3 ">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam, aliquid, cumque nisi tenetur similique labore repudiandae voluptas qui hic blanditiis beatae sapiente autem dolore! Quam, cupiditate nostrum laboriosam blanditiis vel ratione, repellat, incidunt modi tempore soluta ab nesciunt? Ab similique illum suscipit exercitationem et, aut quisquam neque atque recusandae rem delectus facilis. Magnam rerum fugit minus explicabo vel! Hic quibusdam laudantium dolorum, pariatur ipsam veritatis voluptate animi, nesciunt dolorem autem dicta. Debitis quae nam dicta autem ipsum mollitia! Ipsum ipsa, molestias fugiat officiis aut illum ullam architecto maxime labore vitae. Ipsum quos neque rerum, esse iste quo explicabo eos ipsa?
    </div>

</div>
</div>

<div class="mt-5 pt-5 mb-5 text-center">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-link">Link</button>
</div>

 </div>

 </div>

</body>
</html>

We have not compiled Sass yet. To see the default styles, run Live Server.

If Live Server is not installed, you can download the free extension from the VS Code extensions marketplace.

This is what we see:

It is time to compile our custom Sass file.

Compilation syntax is simple: Specify the source and destination folders separated with a colon.

I have my custom.scss file in a folder called custom_scss.

sass custom_scss/custom.scss:assets/css/custom_bootstrap.css

After recompiling, we have the customized bootstrap in the assets/css/custom_bootstrap.css file.

Instead of the default bootstrap file, we are going to use this customized bootstrap stylesheet.

<!-- index.html -->
<head>

<link rel="stylesheet" href="./assets/css/custom_bootstrap.css"> `

</head>

Then run the Live Server again.

We get the webpage customized with our new styles.

How to change the grid breakpoints

We'll now customize the media breakpoints. Alongside, we have to redefine container-max-widths also.

The easiest way is to simply override the variables:

$primary: teal;
$secondary:green;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px,
  xxl: 1600px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px,
  xxl: 1520px
);

@import '../node_modules/bootstrap/scss/bootstrap'

Since this would violate DRY principles (Don't Repeat Yourself), using the map-merge() function is a better option.

We have to import functions first in the custom.scss file to make map.merge() available.

We have to import variables also because $grid-breakpoints (to be used inside the function) is defined there.

//custom.scss

$primary: teal;
$secondary: green;

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';

This is the code:

//custom.scss

$primary: teal;
$secondary: green;

//We have to import the functions first to use map.merge()

@import '../node_modules/bootstrap/scss/functions';

// We have to import the variables beforehand to 
//use the variable $grid-breakpoints.
// Otherwise, compiler will show error - '$grid-breakpoints 
//undefined.'

@import '../node_modules/bootstrap/scss/variables';

$new-breakpoints: (
    xl: 1280px,
    xxl:1600px
);

$grid-breakpoints: map-merge($grid-breakpoints, $new-breakpoints);

$new-container-max-widths: (
  xl: 1220px,
  xxl:1520px
);

$container-max-widths: map-merge($container-max-widths, $new-container-max-widths);

@import "../node_modules/bootstrap/scss/bootstrap";

We compile again and use the newest file in place of the older one.

<link rel="stylesheet" href="./assets/css/custom_bootstrap.css">

This is the final result:

It is not just theme colors and media breakpoints. Borders, spacing, box-shadow, fonts, icons...you can customize anything.

I have put up all the above code in this GitHub repo.

For exploring further, the official Bootstrap documentation is an excellent resource in this regard.

Conclusion

In this tutorial, I've shown you how we can use Sass to customize Bootstrap.

Even if we are in a project that uses React with Bootstrap, the idea is the same. Create a custom .scss file, make customizations, import bootstrap, recompile, and then link to the customized file in place of the original bootstrap file.

Happy Learning!

In this article, we'll build a web application using the latest version of Angular. Then we'll add the Bootstrap CSS framework which provides rich and responsive interface components.

Let's get started.

Prerequisites

Before you start, you need to install and configure the tools below to create the Angular application.

• Git: Git is a distributed version control system and we'll use it to sync the repository.
• Node.js and npm: Node.js is a JavaScript code runtime software based on Google's V8 engine. npm is a package manager for Node.js (Node Package Manager). We'll use these tools to build and run the Angular application and install the libraries.
• Angular CLI: Angular CLI is a command line utility tool for Angular and we'll use it to create the base structure of the Angular application.
• An IDE (like Visual Studio Code or WebStorm): an Integrated Development Environment is a tool with a graphical interface that helps you develop applications. We'll use one to develop our Angular application.

How to Create the Angular application

Angular is a development platform for building web, mobile, and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 13 and Google is the main maintainer of the project.

Bootstrap is an open source CSS framework that has many components for building responsive web interfaces.

Let's create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.

ng new angular-bootstrap
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-bootstrap/README.md (1062 bytes)
CREATE angular-bootstrap/.editorconfig (274 bytes)
CREATE angular-bootstrap/.gitignore (604 bytes)
CREATE angular-bootstrap/angular.json (3273 bytes)
CREATE angular-bootstrap/package.json (1079 bytes)
CREATE angular-bootstrap/tsconfig.json (783 bytes)
CREATE angular-bootstrap/.browserslistrc (703 bytes)
CREATE angular-bootstrap/karma.conf.js (1434 bytes)
CREATE angular-bootstrap/tsconfig.app.json (287 bytes)
CREATE angular-bootstrap/tsconfig.spec.json (333 bytes)
CREATE angular-bootstrap/src/favicon.ico (948 bytes)
CREATE angular-bootstrap/src/index.html (302 bytes)
CREATE angular-bootstrap/src/main.ts (372 bytes)
CREATE angular-bootstrap/src/polyfills.ts (2820 bytes)
CREATE angular-bootstrap/src/styles.scss (80 bytes)
CREATE angular-bootstrap/src/test.ts (743 bytes)
CREATE angular-bootstrap/src/assets/.gitkeep (0 bytes)
CREATE angular-bootstrap/src/environments/environment.prod.ts (51 bytes)
CREATE angular-bootstrap/src/environments/environment.ts (658 bytes)
CREATE angular-bootstrap/src/app/app-routing.module.ts (245 bytes)
CREATE angular-bootstrap/src/app/app.module.ts (393 bytes)
CREATE angular-bootstrap/src/app/app.component.scss (0 bytes)
CREATE angular-bootstrap/src/app/app.component.html (23809 bytes)
CREATE angular-bootstrap/src/app/app.component.spec.ts (1090 bytes)
CREATE angular-bootstrap/src/app/app.component.ts (222 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

Now we need to install the bootstrap and bootstrap-icons libraries that contain the files with Bootstrap's styles and JavaScript code like this:

npm install bootstrap bootstrap-icons

After install, we will configure the bootstrap and bootstrap-icons libraries. Change the angular.json file and add the bootstrap.scss, bootstrap-icons.css and bootstrap.bundle.min.js files as below:

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Now we will install the @ng-bootstrap/ng-bootstrap library which contains native Angular support:

npm install @ng-bootstrap/ng-bootstrap@next

After install, we will import the NgbModule module. Change the app.module.ts file and add the lines as below:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

imports: [
  BrowserModule,
  NgbModule,
  AppRoutingModule,
],

Now we will remove the contents of the AppComponent class from the src/app/app.component.ts file. Import the NgbModal service and create the open method to open a modal as below.

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor(private modalService: NgbModal) {
  }

  public open(modal: any): void {
    this.modalService.open(modal);
  }

}

Next we will remove the contents of the src/app/app.component.html file. Add some components in the HTML to view and test the components as below.

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <h1>Angular Bootstrap</h1>
    </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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<div class="container-fluid py-3">
  <div class="row my-3">
    <div class="col">
      <label for="exampleFormControlInput1" class="form-label">Email address</label>
      <input type="email" class="form-control form-control-sm" id="exampleFormControlInput1" placeholder="name@example.com">
    </div>
  </div>
  <div class="row my-3">
    <div class="col">
      <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
      <textarea class="form-control form-control-sm" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
  </div>
  <div class="row my-3">
    <div class="col">
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
      </div>
    </div>
  </div>
  <div class="row my-3">
    <div class="col">
      <button class="btn btn-sm btn-outline-primary" (click)="open(demoModal)">Launch demo modal</button>
    </div>
  </div>
</div>

<ng-template #demoModal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="dateOfBirth">Date of birth</label>
        <div class="input-group">
          <input id="dateOfBirth" name="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" ngbDatepicker #dp="ngbDatepicker">
          <button type="button" class="btn btn-outline-secondary bi bi-calendar" (click)="dp.toggle()"></button>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

Finally, we will run the application with the command below:

npm start

> angular-bootstrap@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   3.38 MB
styles.css          | styles        | 255.86 kB
polyfills.js        | polyfills     | 128.56 kB
scripts.js          | scripts       |  76.94 kB
main.js             | main          |  22.81 kB
runtime.js          | runtime       |   6.59 kB

                    | Initial Total |   3.86 MB

Build at: 2021-06-27T21:28:22.756Z - Hash: 122b9fa4d57b962e7bcc - Time: 21933ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

Ready! We will access the URL at http://localhost:4200/ and check if the application is working. You can see the application working on GitHub Pages and Stackblitz.

The application repository is available at https://github.com/rodrigokamada/angular-bootstrap.

Conclusion

Let's summarize what we covered in this article:

• We created an Angular application.
• We added some Bootstrap CSS framework components.

You can use this article to create rich and responsive applications that provide a better user experience and greater usability.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in Portuguese.

To stay updated whenever I post new articles, follow me on Twitter.

We just published a 3-hour course on the freeCodeCamp.org YouTube channel that will teach you how to use Bootstrap 5.

Dawid Adach developed this course. Dawid has been working with Bootstrap for years and helped create one of the most popular Bootstrap libraries called Material Design for Bootstrap.

Here are all the sections covered in this course:

• What is Bootstrap?
• Why use Bootstrap?
• Download compiled CSS and JS
• Install via CDN
• NPM installation
• Grid System
• Components
• Buttons
• Cards
• Typography
• Responsive images
• Utilities
• Tables
• Alerts
• Navs & Navbars
• Icons
• Forms
• Other components
• Creating a project using Bootstrap 5

Watch the full course below or on the freeCodeCamp.org YouTube channel (3-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 ❤️

But what if you start adding your own CSS rules to the mix, but they don't seem to have any affect on the layout? Is it Bootstrap overwriting your styles? Or something else?

For example, say you want to increase the height of a row, and also resize and image.

Here is your HTML:

<div class="container">
  <div id="divheight">
    <div class="row bg-info text-white">
      <div class="col-sm-2 align-middle">
        <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png" </img>
      </div>
      <div class="col-sm-3 align-middle">
        <label>freecodecamp</label>
      </div>
      <div class="col-sm-7 align-middle">
        <label>Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron</label>
      </div>
    </div>
  </div>
</div>

And CSS:

#divheight {
  heights: 120px;
}

img {
  width: 50px;
  height: 50px;
}

The problem is that, for some reason, the height of the row is 50px like the image, not 120px:

Solution

There are a couple of reasons this is happening. First, did you notice the typo above?

Fix that and your CSS will look like this:

#divheight {
  height: 120px;
}

img {
  width: 50px;
  height: 50px;
}

But your row still isn't 120px. If you inspect #divheight, you'll see that it's just under 120px:

Instead of targeting #divheight, go down to the next div element and target the class row:

.row {
  height: 120px;
}

img {
  width: 50px;
  height: 50px;
}

Then the row will be 120px like you expect: