How to Integrate Algolia Search in Your Bootstrap 5 Project

Learn how to integrate Algolia Search into your Bootstrap 5 project for a fast and user-friendly search experience.

How to Integrate Algolia Search into Your Bootstrap Project

Algolia provides a powerful and fast search experience for your website or application. This tutorial will guide you through the steps to integrate Algolia Search into a Bootstrap 5 project.

Prerequisites

  • Basic knowledge of HTML and JavaScript
  • Familiarity with Bootstrap 5
  • An Algolia account with access to your Application ID, Search-Only API Key, and Index Name

1. Set Up the HTML Structure

Create a new HTML file and add the basic structure:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Algolia Search Integration with Bootstrap 5</title>
   <!-- Include Bootstrap CSS -->
   <!-- Include Algolia CSS -->
 </head>
 <body>
   <!-- Search Input Field -->
   <!-- Include Algolia JS -->
   <!-- Initialize Algolia DocSearch -->
 </body>
</html>

2. Include Bootstrap CSS

Add the Bootstrap 5 CSS CDN link within the <head> section:

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

3. Include Algolia CSS

Include the Algolia DocSearch CSS for styling:

<!-- Algolia DocSearch CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

4. Add the Search Input Field

Within the <body>, add a container for the search input field:

<div class="container mt-5">
  <div class="position-relative mb-3 docsearch">
    <input type="search" class="form-control" placeholder="Search" aria-label="Search" id="docsearch-input">
    <div id="docsearch" class="position-absolute w-100 h-100 opacity-0"></div>
  </div>
</div>

5. Include Algolia JavaScript Library

Add the Algolia DocSearch JavaScript library before the closing </body> tag:

<!-- Algolia DocSearch JS -->
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

6. Initialize Algolia DocSearch

Initialize the DocSearch by replacing YOUR_APP_ID, YOUR_API_KEY, and YOUR_INDEX_NAME with your Algolia credentials:

<script>
  docsearch({
    container: '.docsearch',
    appId: 'YOUR_APP_ID',
    apiKey: 'YOUR_API_KEY',
    indexName: 'YOUR_INDEX_NAME',
  });
</script>

Complete Code Example

Putting it all together, your HTML file should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Algolia Search Integration with Bootstrap 5</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Algolia DocSearch CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
</head>
<body>
  
  <div class="container mt-5">
    <div class="position-relative mb-3 docsearch">
      <input type="search" class="form-control" placeholder="Search" aria-label="Search" id="docsearch-input">
      <div id="docsearch" class="position-absolute w-100 h-100 opacity-0"></div>
    </div>
  </div>
  
  <!-- Algolia DocSearch JS -->
  <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
  <script>
    docsearch({
      container: '.docsearch',
      appId: 'YOUR_APP_ID',
      apiKey: 'YOUR_API_KEY',
      indexName: 'YOUR_INDEX_NAME',
    });
  </script>

</body>
</html>

Notes

  • Application ID: Found in your Algolia dashboard under API Keys.
  • API Key: Use the Search-Only API Key for security.
  • Index Name: The name of the index you have set up in Algolia.

Conclusion

You have successfully integrated Algolia Search into your Bootstrap 5 project. Users can now enjoy a fast and intuitive search experience on your website.

For more customization options, refer to the Algolia DocSearch documentation.