{{ $entry.category }}
-{{ $entry.description }}
- {{ if eq $entry.category "RTL" -}} -- RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest? -
- -
- To get working Boosted examples based on the Bootstrap ones, you need to replace all bootstrap occurrences with boosted in some files.
-
- You may need to tweak a bit Sass files and add a src/fonts directory to import font family properly in your project.
- "Import Boosted" sections in our Parcel, Vite or Webpack guides could help you.
-
- - {{ $example.name }} - -
-{{ $example.description }}
-- {{- $indexPath := "index.html" -}} - {{- if $example.indexPath -}} - {{- $indexPath = $example.indexPath -}} - {{- end }} - - - Edit in StackBlitz - -
-
+ 
In the next and final section to this guide, we'll import all of Boosted's CSS and JavaScript.
@@ -169,7 +169,7 @@ Importing Boosted into Parcel requires three imports, two into our `styles.scss`
4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this:
- 
+ 
Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need.
diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md
index d35dc5d911..214f505359 100644
--- a/site/content/docs/5.3/getting-started/vite.md
+++ b/site/content/docs/5.3/getting-started/vite.md
@@ -142,7 +142,7 @@ With dependencies installed and our project folder ready for us to start coding,
npm start
```
- 
+ 
In the next and final section to this guide, we’ll import all of Boosted’s CSS and JavaScript.
@@ -191,7 +191,7 @@ In the next and final section to this guide, we’ll import all of Boosted’s C
4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this:
- 
+ 
Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need.
diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md
index 7fbf12da12..a4191b7ab7 100644
--- a/site/content/docs/5.3/getting-started/webpack.md
+++ b/site/content/docs/5.3/getting-started/webpack.md
@@ -152,7 +152,7 @@ With dependencies installed and our project folder ready for us to start coding,
npm start
```
- 
+ 
In the next and final section to this guide, we'll set up the Webpack loaders and import all of Boosted's CSS and JavaScript.
@@ -265,7 +265,7 @@ Importing Boosted into Webpack requires the loaders we installed in the first se
4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this:
- 
+ 
Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need.
diff --git a/site/layouts/_default/_markup/render-image.html b/site/layouts/_default/_markup/render-image.html
new file mode 100644
index 0000000000..fd089f7be1
--- /dev/null
+++ b/site/layouts/_default/_markup/render-image.html
@@ -0,0 +1,8 @@
+{{- $originalSrc := .Destination | safeURL -}}
+{{- $localImgPath := path.Join "/site/static/docs" site.Params.docs_version $originalSrc -}}
+{{- /* This shouldn't be needed but we have a weird folder structure with version included... */ -}}
+{{- $src := urls.JoinPath "/docs" site.Params.docs_version $originalSrc -}}
+{{- $config := imageConfig $localImgPath -}}
+{{- $classes := "d-block img-fluid" -}}
+
+
+ {{ partial "responsive-img" (dict "context" .
+ "imgPath" "/assets/img/boosted-guidelines.png"
+ "alt" "Boosted design guidelines"
+ "classes" "d-block mt-3") }}