<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
- <h1 class="font-weight-light">Album example</h1>
+ <h1 class="fw-light">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
- <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
+ <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
</div>
</div>
<h1>Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
- <a href="#" class="btn btn-lg btn-secondary font-weight-bold border-white bg-white">Learn more</a>
+ <a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
</p>
</main>
---
<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
- <p class="h5 my-0 mr-md-auto font-weight-normal">Company name</p>
+ <p class="h5 my-0 mr-md-auto fw-normal">Company name</p>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<div class="col">
<div class="card mb-4 shadow-sm">
<div class="card-header">
- <h4 class="my-0 font-weight-normal">Free</h4>
+ <h4 class="my-0 fw-normal">Free</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
<div class="col">
<div class="card mb-4 shadow-sm">
<div class="card-header">
- <h4 class="my-0 font-weight-normal">Pro</h4>
+ <h4 class="my-0 fw-normal">Pro</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
<div class="col">
<div class="card mb-4 shadow-sm">
<div class="card-header">
- <h4 class="my-0 font-weight-normal">Enterprise</h4>
+ <h4 class="my-0 fw-normal">Enterprise</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
<main>
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
<div class="col-md-5 p-lg-5 mx-auto my-5">
- <h1 class="display-4 font-weight-normal">Punny headline</h1>
- <p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
+ <h1 class="display-4 fw-normal">Punny headline</h1>
+ <p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
<a class="btn btn-outline-secondary" href="#">Coming soon</a>
</div>
<div class="product-device shadow-sm d-none d-md-block"></div>
<main class="form-signin">
<form>
<img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
- <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+ <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<label for="inputEmail" class="visually-hidden">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="visually-hidden">Password</label>
<tbody>
<tr>
<th scope="row">
- <div><code class="font-weight-normal text-nowrap">bootstrap.css</code></div>
- <div><code class="font-weight-normal text-nowrap">bootstrap.min.css</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap.css</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap.min.css</code></div>
</th>
<td>Included</td>
<td>Included</td>
</tr>
<tr>
<th scope="row">
- <div><code class="font-weight-normal text-nowrap">bootstrap-grid.css</code></div>
- <div><code class="font-weight-normal text-nowrap">bootstrap-grid.min.css</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap-grid.css</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap-grid.min.css</code></div>
</th>
<td><a class="link-secondary" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td>
<td class="text-muted">—</td>
</tr>
<tr>
<th scope="row">
- <div><code class="font-weight-normal text-nowrap">bootstrap-utilities.css</code></div>
- <div><code class="font-weight-normal text-nowrap">bootstrap-utilities.min.css</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap-utilities.css</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap-utilities.min.css</code></div>
</th>
<td class="text-muted">—</td>
<td class="text-muted">—</td>
</tr>
<tr>
<th scope="row">
- <div><code class="font-weight-normal text-nowrap">bootstrap-reboot.css</code></div>
- <div><code class="font-weight-normal text-nowrap">bootstrap-reboot.min.css</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap-reboot.css</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap-reboot.min.css</code></div>
</th>
<td class="text-muted">—</td>
<td><a class="link-secondary" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
<tbody>
<tr>
<th scope="row">
- <div><code class="font-weight-normal text-nowrap">bootstrap.bundle.js</code></div>
- <div><code class="font-weight-normal text-nowrap">bootstrap.bundle.min.js</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap.bundle.js</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap.bundle.min.js</code></div>
</th>
<td>Included</td>
</tr>
<tr>
<th scope="row">
- <div><code class="font-weight-normal text-nowrap">bootstrap.js</code></div>
- <div><code class="font-weight-normal text-nowrap">bootstrap.min.js</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap.js</code></div>
+ <div><code class="fw-normal text-nowrap">bootstrap.min.js</code></div>
</th>
<td class="text-muted">—</td>
</tr>
<td class="border-dark"></td>
<th scope="col">
Extra small<br>
- <span class="font-weight-normal"><576px</span>
+ <span class="fw-normal"><576px</span>
</th>
<th scope="col">
Small<br>
- <span class="font-weight-normal">≥576px</span>
+ <span class="fw-normal">≥576px</span>
</th>
<th scope="col">
Medium<br>
- <span class="font-weight-normal">≥768px</span>
+ <span class="fw-normal">≥768px</span>
</th>
<th scope="col">
Large<br>
- <span class="font-weight-normal">≥992px</span>
+ <span class="fw-normal">≥992px</span>
</th>
<th scope="col">
X-Large<br>
- <span class="font-weight-normal">≥1200px</span>
+ <span class="fw-normal">≥1200px</span>
</th>
<th scope="col">
XX-Large<br>
- <span class="font-weight-normal">≥1400px</span>
+ <span class="fw-normal">≥1400px</span>
</th>
</tr>
</thead>
<tbody>
<tr>
- <th scope="row" class="font-weight-normal"><code>.container</code></th>
+ <th scope="row" class="fw-normal"><code>.container</code></th>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
<td>1320px</td>
</tr>
<tr>
- <th scope="row" class="font-weight-normal"><code>.container-sm</code></th>
+ <th scope="row" class="fw-normal"><code>.container-sm</code></th>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
<td>1320px</td>
</tr>
<tr>
- <th scope="row" class="font-weight-normal"><code>.container-md</code></th>
+ <th scope="row" class="fw-normal"><code>.container-md</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>720px</td>
<td>1320px</td>
</tr>
<tr>
- <th scope="row" class="font-weight-normal"><code>.container-lg</code></th>
+ <th scope="row" class="fw-normal"><code>.container-lg</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>1320px</td>
</tr>
<tr>
- <th scope="row" class="font-weight-normal"><code>.container-xl</code></th>
+ <th scope="row" class="fw-normal"><code>.container-xl</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>1320px</td>
</tr>
<tr>
- <th scope="row" class="font-weight-normal"><code>.container-xxl</code></th>
+ <th scope="row" class="fw-normal"><code>.container-xxl</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>1320px</td>
</tr>
<tr>
- <th scope="row" class="font-weight-normal"><code>.container-fluid</code></th>
+ <th scope="row" class="fw-normal"><code>.container-fluid</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<th scope="col"></th>
<th scope="col">
xs<br>
- <span class="font-weight-normal"><576px</span>
+ <span class="fw-normal"><576px</span>
</th>
<th scope="col">
sm<br>
- <span class="font-weight-normal">≥576px</span>
+ <span class="fw-normal">≥576px</span>
</th>
<th scope="col">
md<br>
- <span class="font-weight-normal">≥768px</span>
+ <span class="fw-normal">≥768px</span>
</th>
<th scope="col">
lg<br>
- <span class="font-weight-normal">≥992px</span>
+ <span class="fw-normal">≥992px</span>
</th>
<th scope="col">
xl<br>
- <span class="font-weight-normal">≥1200px</span>
+ <span class="fw-normal">≥1200px</span>
</th>
<th scope="col">
xxl<br>
- <span class="font-weight-normal">≥1400px</span>
+ <span class="fw-normal">≥1400px</span>
</th>
</tr>
</thead>
<tbody>
<tr>
- <th class="text-nowrap" scope="row">Container <code class="font-weight-normal">max-width</code></th>
+ <th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th>
<td>None (auto)</td>
<td>540px</td>
<td>720px</td>
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
</div>
- <h2 class="display-6 font-weight-normal">Go further with Bootstrap Themes</h2>
+ <h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
<p class="col-md-10 col-lg-8 mx-auto lead">
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
</p>
{{- if $group.pages }}
<div class="collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
- <ul class="list-unstyled font-weight-normal pb-1 small">
+ <ul class="list-unstyled fw-normal pb-1 small">
{{- range $doc := $group.pages -}}
{{- $doc_slug := $doc.title | urlize -}}
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-success">
{{ partial "icons/code.svg" (dict "width" "32" "height" "32") }}
</div>
- <h2 class="display-5 font-weight-normal">Installation</h2>
- <p class="lead font-weight-normal">
+ <h2 class="display-5 fw-normal">Installation</h2>
+ <p class="lead fw-normal">
Install Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor.
</p>
<p>Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.</p>
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-primary">
{{ partial "icons/cloud-fill.svg" (dict "width" "32" "height" "32") }}
</div>
- <h2 class="display-5 font-weight-normal">jsDelivr</h2>
- <p class="lead font-weight-normal">
+ <h2 class="display-5 fw-normal">jsDelivr</h2>
+ <p class="lead fw-normal">
When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/">jsDelivr</a>.
</p>
<p>
<div class="masthead-followup-icon d-inline-block mb-2 text-white bd-bg-purple-bright">
{{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
</div>
- <h2 class="display-5 font-weight-normal">Bootstrap Icons</h2>
- <p class="lead font-weight-normal">
+ <h2 class="display-5 fw-normal">Bootstrap Icons</h2>
+ <p class="lead fw-normal">
For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation.
</p>
<p>
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
</div>
- <h2 class="display-5 font-weight-normal">Official Themes</h2>
- <p class="lead font-weight-normal">
+ <h2 class="display-5 fw-normal">Official Themes</h2>
+ <p class="lead fw-normal">
Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>.
</p>
<p>