web/bootstrap-html
1
0
Fork 0
Code Issues Activity

Merging upstream version 5.3.5+dfsg.

Browse source 
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
Daniel Baumann 2025-04-06 09:55:26 +02:00
parent 8838637a85
commit 449962af96
Signed by: daniel
GPG key ID: FBB4F0E80A80222F
233 changed files with 6665 additions and 12847 deletions
Download patch file Download diff file Expand all files Collapse all files

13
site/content/docs/5.3/getting-started/vite.md
View file

@ -5,14 +5,21 @@ description: The official guide for how to include and bundle Bootstrap's CSS an
group: getting-started
toc: true
thumbnail: guides/bootstrap-vite@2x.png
added:
show_badge: false
version: "5.2"
---
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="800" height="400" alt="">
{{< callout >}}
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/vite). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/vite?file=index.html) for live editing.
{{< /callout >}}
## What is Vite?
[Vite](https://vite.dev/) is a modern frontend build tool designed for speed and simplicity. It provides an efficient and streamlined development experience, especially for modern JavaScript frameworks.
## Setup
We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
@ -132,7 +139,7 @@ With dependencies installed and our project folder ready for us to start coding,
npm start
```
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server.png" alt="Vite dev server running">
![Vite dev server running](/assets/img/guides/vite-dev-server.png)
In the next and final section to this guide, we’ll import all of Bootstrap’s CSS and JavaScript.
@ -172,7 +179,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">
![Vite dev server running with Bootstrap](/assets/img/guides/vite-dev-server-bootstrap.png)
Now you can start adding any Bootstrap 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 Bootstrap's CSS and JS that you need.