In today’s global world, a website that only speaks one language? Nahh. We’re not living in 1998. Whether you’re building a startup site, a product launch page, or a personal portfolio, adding multi-language support is like giving your site a passport—it lets you connect with users from all over the globe.
In this practical guide, we’ll build a Multi-Language Landing Page using Bootstrap 5 and JavaScript, with real-world examples and zero confusion. Ready? Let’s get started!
What You’ll Learn
- Setting up a landing page with Bootstrap
- Adding language selector with flags or dropdown
- Storing multiple translations
- Switching content dynamically using JavaScript
- Keeping the code organized and scalable
Tools You’ll Need
- VS Code (or any code editor you like)
- Bootstrap 5 (via CDN)
- Basic knowledge of HTML, CSS, JS
- Optional: Google Fonts for extra styling flair
Step 1: Project Structure
Here’s how we’ll organize our files:
multi-lang-landing/
│
├── index.html
├── style.css
├── lang/
│ ├── en.json
│ ├── es.json
│ └── fr.json
└── script.js
Each .json file will store translations for English, Spanish, and French.
Step 2: HTML Skeleton with Bootstrap
Let’s build the base UI.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title data-translate="title">My Landing Page</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Language Selector -->
<div class="text-end p-3">
<select id="languageSwitcher" class="form-select w-auto d-inline">
<option value="en">🇺🇸 English</option>
<option value="es">🇪🇸 Español</option>
<option value="fr">🇫🇷 Français</option>
</select>
</div>
<!-- Hero Section -->
<section class="text-center p-5">
<h1 data-translate="heading">Welcome to Our Website!</h1>
<p data-translate="subheading">We are glad you're here.</p>
<a href="#contact" class="btn btn-primary" data-translate="cta"
>Contact Us</a
>
</section>
<!-- Contact Section -->
<section id="contact" class="p-5 bg-light text-center">
<h2 data-translate="contact_title">Get in Touch</h2>
<p data-translate="contact_text">We’d love to hear from you!</p>
</section>
<script src="script.js"></script>
</body>
</html>
Code language: HTML, XML (xml)Step 3: Create Translation Files
Let’s store our strings in JSON files (inside a lang/ folder):
en.json
{
"title": "My Landing Page",
"heading": "Welcome to Our Website!",
"subheading": "We are glad you're here.",
"cta": "Contact Us",
"contact_title": "Get in Touch",
"contact_text": "We’d love to hear from you!"
}
Code language: JSON / JSON with Comments (json)es.json
{
"title": "Mi Página de Inicio",
"heading": "¡Bienvenido a nuestro sitio web!",
"subheading": "Nos alegra que estés aquí.",
"cta": "Contáctanos",
"contact_title": "Ponte en contacto",
"contact_text": "¡Nos encantaría saber de ti!"
}
Code language: JSON / JSON with Comments (json)fr.json
{
"title": "Ma Page d'Accueil",
"heading": "Bienvenue sur notre site Web !",
"subheading": "Nous sommes ravis de vous voir ici.",
"cta": "Contactez-nous",
"contact_title": "Entrer en contact",
"contact_text": "Nous aimerions avoir de vos nouvelles !"
}
Code language: JSON / JSON with Comments (json)Step 4: JavaScript to Switch Languages
Here’s the JavaScript logic to load language JSON and update the page dynamically:
// script.js
const switcher = document.getElementById("languageSwitcher");
switcher.addEventListener("change", async (e) => {
const lang = e.target.value;
const response = await fetch(`lang/${lang}.json`);
const translations = await response.json();
document.querySelectorAll("[data-translate]").forEach((element) => {
const key = element.getAttribute("data-translate");
if (translations[key]) {
element.textContent = translations[key];
}
});
});
Code language: JavaScript (javascript)Simple, clean, and super scalable. You can add as many translations as you like—just keep the keys consistent.
Step 5: Add Some Styling (Optional)
Want it a bit fancy? Let’s sprinkle some custom CSS.
/* style.css */
body {
font-family: "Segoe UI", sans-serif;
}
section {
transition: all 0.3s ease;
}
select {
border-radius: 0.5rem;
}
Code language: CSS (css)
Bonus: You can even use Google Fonts for localization-friendly fonts (like Noto Sans).
Step 6: Make It Shine
Here are a few extras to level up your multilingual landing page:
- Persist language: Store the selected language in
localStorageso it sticks on reload. - Auto-detect: Use
navigator.languageto detect browser language on first visit. - RTL Support: Add support for RTL (Right-to-left) languages like Arabic and Hebrew.
- SEO: Use
<html lang="...">dynamically with JavaScript if needed.
Final Thoughts
And voilà! You’ve just built a multi-language landing page using Bootstrap and plain JavaScript. It’s simple, clean, and easy to scale.
Supporting multiple languages is a small effort with a massive reward—it shows you care about your global audience. So don’t wait till “someday”, add language support today!
Over to You!
Did you find this helpful? Which languages would you support first on your site? Share your thoughts in the comments below—or just say hi in your language.
Master the Art of Web Design & Development — From Scratch to Pro
Learn HTML5, CSS3, JavaScript, Bootstrap, and responsive design techniques in one beginner-friendly, project-based course.
Discover more from Prime Inspire
Subscribe to get the latest posts sent to your email.
