Add support for RTL styles by conditionally loading Bootstrap RTL CSS

[MrHinsh]

This pull request updates the base HTML layout to support right-to-left (RTL) languages by conditionally loading the appropriate Bootstrap CSS file based on the site's language direction.

Internationalization improvements:

• module/layouts/baseof.html: Adds logic to load bootstrap.rtl.min.css for RTL languages and bootstrap.min.css for left-to-right (LTR) languages, improving support for multilingual sites.

Summary by CodeRabbit

• New Features
  • Enhanced localisation support: The application now automatically selects the appropriate Bootstrap stylesheet based on the site's language direction, ensuring optimal display and formatting for right-to-left languages.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Conditional Bootstrap CSS loading added to the base template layout. If the site language direction is RTL, the RTL Bootstrap stylesheet loads; otherwise the standard Bootstrap CSS loads. Remaining head content unchanged.

Changes

Cohort / File(s)	Summary
Template Conditional Logic module/layouts/baseof.html	Added conditional Bootstrap CSS loading based on site.Language.LanguageDirection. Loads RTL variant for RTL languages, standard variant otherwise. Four lines added.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

---

✨ A sensible touch—RTL support woven in,
Bootstrap shifts direction, no fuss, no din.
Four lines of pragmatism, clean and straight,
Language flows both ways; localization is great. 🌍

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and accurately describes the main change: conditionally loading Bootstrap RTL CSS based on language direction.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch add-RTL-support-in-Boostrap

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

Updates the base Hugo layout to improve RTL language support by conditionally loading Bootstrap’s RTL stylesheet when the current language direction is right-to-left.

Changes:

• Conditionally load bootstrap.rtl.min.css when .Site.Language.LanguageDirection is rtl
• Retain the existing bootstrap.min.css load for LTR languages

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The Bootstrap CDN URL/version is now duplicated across the RTL and LTR branches, which increases the chance of future version drift (e.g., updating one link but not the other). Consider extracting the version/base URL into a template variable (and selecting only the RTL vs LTR filename/hash conditionally) so Bootstrap updates remain single-source.

Suggested change

	{{- if eq (.Site.Language.LanguageDirection | default "ltr") "rtl" }}
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous" />
	{{- else }}
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous" />
	{{- end }}
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
	{{- $bootstrapVersion := "5.3.6" -}}
	{{- $bootstrapBase := printf "https://cdn.jsdelivr.net/npm/bootstrap@%s/dist" $bootstrapVersion -}}
	{{- if eq (.Site.Language.LanguageDirection | default "ltr") "rtl" }}
	<link href="{{ $bootstrapBase }}/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous" />
	{{- else }}
	<link href="{{ $bootstrapBase }}/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous" />
	{{- end }}
	<script src="{{ $bootstrapBase }}/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@module/layouts/baseof.html`:
- Around line 106-110: The SRI hashes on the two Bootstrap <link> tags inside
the conditional block (the if eq (.Site.Language.LanguageDirection | default
"ltr") "rtl" ... else ... end) are not verified; recalculate the SHA384 values
for both bootstrap.min.css and bootstrap.rtl.min.css (e.g., via curl | openssl
dgst -sha384 -binary | openssl base64 -A), and replace the current integrity
attribute values on the corresponding <link> elements with the computed hashes,
then confirm the CDN links load correctly in a browser.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

echo "=== Checking Bootstrap 5.3.6 CDN availability ==="

# Check standard CSS
echo "Standard CSS response:"
curl -sI "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" | grep "^HTTP"

# Check RTL CSS
echo "RTL CSS response:"
curl -sI "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.rtl.min.css" | grep "^HTTP"

# Check JS bundle
echo "JS Bundle response:"
curl -sI "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" | grep "^HTTP"

echo ""
echo "=== Calculating actual SRI hashes ==="

echo "Standard CSS actual hash:"
curl -s "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" 2>/dev/null | openssl dgst -sha384 -binary | openssl base64 -A

echo ""
echo "Expected standard CSS hash: 4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT"

echo ""
echo "RTL CSS actual hash:"
curl -s "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.rtl.min.css" 2>/dev/null | openssl dgst -sha384 -binary | openssl base64 -A

echo ""
echo "Expected RTL CSS hash: dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb"

Repository: nkdAgility/HugoGuides

Length of output: 151

---

🌐 Web query:

Bootstrap 5.3.6 CDN SRI hash sha384 integrity

💡 Result:

I can't find an official published sha384 integrity string for Bootstrap 5.3.6. Use one of these options:

1. Compute the SRI yourself from the CDN file (recommended)

• Fetch the file and run (example for CSS):
  • curl -sL https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css -o bootstrap.min.css
  • openssl dgst -sha384 -binary bootstrap.min.css | openssl base64 -A
• Then place into your tag as: integrity="sha384-<BASE64_RESULT>" crossorigin="anonymous"

2. Confirm official SRI from Bootstrap docs or the CDN before use (recommended to avoid mismatch). See Bootstrap CDN guidance and jsDelivr package listing. [1][2]

Sources:
[1] Bootstrap — Get started / CDN guidance. (getbootstrap.com)
[2] jsDelivr listing for bootstrap versions (includes 5.3.6). (cdn.jsdelivr.net)

If you want, I can fetch the file and compute the exact sha384 for you now.

Citations:

• 1: https://getbootstrap.com/docs/5.3/getting-started/download/?utm_source=openai
• 2: https://cdn.jsdelivr.net/npm/bootstrap/dist/css/?utm_source=openai

---

🌐 Web query:

Bootstrap 5.3.6 release jsdelivr official

💡 Result:

Yes — Bootstrap v5.3.6 was released on May 5, 2025, and is available via the official jsDelivr CDN.

• Release announcement: Bootstrap blog (May 5, 2025). [1]
• jsDelivr hosts the bootstrap package and lists v5.3.6. [2]

Example jsDelivr URLs (replace with other versions as needed):

• CSS: https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css [2]
• JS: https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js [2]

Sources:
[1] Bootstrap blog — “Bootstrap 5.3.6” (May 5, 2025).
[2] jsDelivr / npm bootstrap package listing.

---

Recalculate and verify the SRI hashes before merging — they cannot be confirmed against official sources and will break the site if incorrect.

Bootstrap 5.3.6 exists on jsDelivr (released 5 May 2025), so the version is sound. The conditional logic is clean and consistent with line 2. However, the provided SHA384 integrity hashes have no official published reference. If these don't match the actual files on the CDN, the browser will reject the resources and the site will fail to load the stylesheets.

Recalculate the hashes yourself:

curl -sL https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css | openssl dgst -sha384 -binary | openssl base64 -A
curl -sL https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.rtl.min.css | openssl dgst -sha384 -binary | openssl base64 -A

Update the integrity attributes with the actual computed hashes, then verify the links work in a browser before this lands.

🤖 Prompt for AI Agents

In `@module/layouts/baseof.html` around lines 106 - 110, The SRI hashes on the two
Bootstrap <link> tags inside the conditional block (the if eq
(.Site.Language.LanguageDirection | default "ltr") "rtl" ... else ... end) are
not verified; recalculate the SHA384 values for both bootstrap.min.css and
bootstrap.rtl.min.css (e.g., via curl | openssl dgst -sha384 -binary | openssl
base64 -A), and replace the current integrity attribute values on the
corresponding <link> elements with the computed hashes, then confirm the CDN
links load correctly in a browser.