diff --git a/README.md b/README.md index 4821c170eece..bdbbee0bb7c0 100644 --- a/README.md +++ b/README.md @@ -48,8 +48,8 @@ Several quick start options are available: - [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.2.0-beta1.zip) - Clone the repo: `git clone https://github.com/twbs/bootstrap.git` -- Install with [npm](https://www.npmjs.com/): `npm install bootstrap` -- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap` +- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.2.0-beta1` +- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.2.0-beta1` - Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.2.0-beta1` - Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass` diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 4bb356e1033c..76d003c95e9a 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -26,13 +26,22 @@ } .highlight { - padding: .5rem 4rem .5rem 1rem; - line-height: 1.25; + width: 100%; + padding: .5rem 1rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; background-color: rgba(var(--bs-body-color-rgb), .075); @include border-radius(.5rem); + + @include media-breakpoint-up(lg) { + padding-right: 4rem; + } } .btn-clipboard { - margin-top: .4rem; + position: absolute; + top: -.125rem; + right: 0; background-color: transparent; } diff --git a/site/content/docs/5.2/getting-started/download.md b/site/content/docs/5.2/getting-started/download.md index 8a4c8f215dc5..eeffdc83e5c7 100644 --- a/site/content/docs/5.2/getting-started/download.md +++ b/site/content/docs/5.2/getting-started/download.md @@ -59,7 +59,7 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo Install Bootstrap in your Node.js powered apps with [the npm package](https://www.npmjs.com/package/bootstrap): ```sh -npm install bootstrap +npm install bootstrap@{{< param "current_version" >}} ``` `const bootstrap = require('bootstrap')` or `import bootstrap from 'bootstrap'` will load all of Bootstrap's plugins onto a `bootstrap` object. @@ -79,7 +79,7 @@ Bootstrap's `package.json` contains some additional metadata under the following Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap): ```sh -yarn add bootstrap +yarn add bootstrap@{{< param "current_version" >}} ``` ### RubyGems diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html index a57e0f7330b4..8d4e9796f01e 100644 --- a/site/layouts/partials/home/masthead-followup.html +++ b/site/layouts/partials/home/masthead-followup.html @@ -22,7 +22,7 @@

Install via package manager

Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also use our npm template repo to quickly generate a Bootstrap project via npm.

- {{ highlight "npm install bootstrap" "sh" "" }} + {{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }} {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}

Read our installation docs for more info and additional package managers. diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html index 9e578a301173..ac35d43a3dfc 100644 --- a/site/layouts/partials/home/masthead.html +++ b/site/layouts/partials/home/masthead.html @@ -10,9 +10,9 @@

Build fast, responsive sites with Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

-
-
- {{ highlight "npm i bootstrap" "sh" "" }} +
+
+ {{ highlight (printf ("npm i bootstrap@%s") .Site.Params.current_version) "sh" "" }}