summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.3/getting-started
diff options
context:
space:
mode:
Diffstat (limited to 'site/content/docs/5.3/getting-started')
-rw-r--r--site/content/docs/5.3/getting-started/download.md18
-rw-r--r--site/content/docs/5.3/getting-started/introduction.md13
-rw-r--r--site/content/docs/5.3/getting-started/javascript.md3
-rw-r--r--site/content/docs/5.3/getting-started/parcel.md6
-rw-r--r--site/content/docs/5.3/getting-started/vite.md12
-rw-r--r--site/content/docs/5.3/getting-started/webpack.md6
6 files changed, 35 insertions, 23 deletions
diff --git a/site/content/docs/5.3/getting-started/download.md b/site/content/docs/5.3/getting-started/download.md
index a1b8bfd..f813e48 100644
--- a/site/content/docs/5.3/getting-started/download.md
+++ b/site/content/docs/5.3/getting-started/download.md
@@ -50,6 +50,24 @@ If you're using our compiled JavaScript and prefer to include Popper separately,
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
```
+### Alternative CDNs
+
+We recommend [jsDelivr](https://www.jsdelivr.com/) and use it ourselves in our documentation. However, in some cases—like in some specific countries or environments—you may need to use other CDN providers like [cdnjs](https://cdnjs.com/) or [unpkg](https://unpkg.com/).
+
+You'll find the same files on these CDN providers, albeit with different URLs. With cdnjs, you can [use this direct Bootstrap package link](https://cdnjs.com/libraries/bootstrap) to copy and paste ready-to-use HTML snippets for each dist file from any version of Bootstrap.
+
+{{< callout warning>}}
+**If the SRI hashes differ for a given file, you shouldn't use the files from that CDN, because it means that the file was modified by someone else.**
+{{< /callout >}}
+
+Note that you should compare same length hashes, e.g. `sha384` with `sha384`, otherwise it's expected for them to be different.
+As such, you can use an online tool like [SRI Hash Generator](https://www.srihash.org/) to make sure that the hashes are the same for a given file.
+Alternatively, assuming you have OpenSSL installed, you can achieve the same from the CLI, for example:
+
+```sh
+openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A
+```
+
## Package managers
Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/contribute#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
diff --git a/site/content/docs/5.3/getting-started/introduction.md b/site/content/docs/5.3/getting-started/introduction.md
index d296d18..538d319 100644
--- a/site/content/docs/5.3/getting-started/introduction.md
+++ b/site/content/docs/5.3/getting-started/introduction.md
@@ -75,20 +75,14 @@ You can also use the CDN to fetch any of our [additional builds listed in the Co
## Next steps
- Read a bit more about some [important global environment settings](#important-globals) that Bootstrap utilizes.
-
- Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents/" >}}) and the list of [components that require JavaScript](#js-components) below.
-
- Need a little more power? Consider building with Bootstrap by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}).
-
- Looking to use Bootstrap as a module with `<script type="module">`? Please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section.
## JS components
-Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
+Curious which components explicitly require our JavaScript and Popper? If you're at all unsure about the general page structure, keep reading for an example page template.
-<details>
-<summary class="bd-summary-link mb-3">Show components requiring JavaScript</summary>
-{{< markdown >}}
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
@@ -101,8 +95,6 @@ Curious which components explicitly require our JavaScript and Popper? Click the
- Scrollspy for scroll behavior and navigation updates
- Toasts for displaying and dismissing
- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/))
-{{< /markdown >}}
-</details>
## Important globals
@@ -154,7 +146,8 @@ For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/rebo
Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.
- Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
-- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
+- Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
+- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap).
- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
- Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.
diff --git a/site/content/docs/5.3/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md
index 80c222f..afa4ccd 100644
--- a/site/content/docs/5.3/getting-started/javascript.md
+++ b/site/content/docs/5.3/getting-started/javascript.md
@@ -22,7 +22,8 @@ A better alternative for those using this type of frameworks is to use a framewo
{{< callout >}}
**Try it yourself!** Download the source code and working demo for using Bootstrap with React, Next.js, and React Bootstrap from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/react-nextjs). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx).
{{< /callout >}}
-- Vue: [BootstrapVue](https://bootstrap-vue.org/) (currently only supports Vue 2 and Bootstrap 4)
+- Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4)
+- Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha)
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/)
## Using Bootstrap as a module
diff --git a/site/content/docs/5.3/getting-started/parcel.md b/site/content/docs/5.3/getting-started/parcel.md
index 36619e7..a987b45 100644
--- a/site/content/docs/5.3/getting-started/parcel.md
+++ b/site/content/docs/5.3/getting-started/parcel.md
@@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-parcel@2x.png
## Setup
-We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
+We're building a Parcel 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.
-1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
```sh
mkdir my-project && cd my-project
@@ -148,7 +148,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
*[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
-3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
+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/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md
index 9c2be9f..33b76d3 100644
--- a/site/content/docs/5.3/getting-started/vite.md
+++ b/site/content/docs/5.3/getting-started/vite.md
@@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-vite@2x.png
## Setup
-We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
+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.
-1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
```sh
mkdir my-project && cd my-project
@@ -42,7 +42,7 @@ We're building a Vite project with Bootstrap from scratch, so there are some pre
npm i --save-dev sass
```
-Now that we have all the necessary dependencies installed and setup, we can get to work creating the project files and importing Bootstrap.
+Now that we have all the necessary dependencies installed and set up, we can get to work creating the project files and importing Bootstrap.
## Project structure
@@ -78,10 +78,10 @@ With dependencies installed and our project folder ready for us to start coding,
<!-- eslint-skip -->
```js
- const path = require('path')
+ import { resolve } from 'path'
export default {
- root: path.resolve(__dirname, 'src'),
+ root: resolve(__dirname, 'src'),
build: {
outDir: '../dist'
},
@@ -170,7 +170,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
*[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
-3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
+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">
diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md
index 0709b7a..39adaf6 100644
--- a/site/content/docs/5.3/getting-started/webpack.md
+++ b/site/content/docs/5.3/getting-started/webpack.md
@@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-webpack@2x.png
## Setup
-We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
+We're building a Webpack 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.
-1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
```sh
mkdir my-project && cd my-project
@@ -242,7 +242,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
*[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
-4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
+4. **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/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">