Bootstrap v5.0 右揃えができない

前提・実現したいこと

Bootstrap v5.0でclass="text-right"を適用させ、右揃えにしたいです。

発生している問題・エラーメッセージ

ドットインストールのBootstrapの動画に沿って、Bootstrap v5.0のStarter 
templateをSublime textにコピペし、text-center, right, leftがそれぞれ反映されるか確かめたところ、
left, centerはきちんとそれぞれ左、中央揃えになりますが、
class="text-right"のみ、なぜか左揃えになってしまいます。

該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <!-- Bootstrap CSS -->
9    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
10
11    <title>Hello, world!</title>
12  </head>
13  <body>
14    <h2 class="font-weight-normal">Hello Bootstrap</h2>
15    <div class="text-center bg-primary">Box</div>
16    <div class="text-right bg-success text-warning">Box</div>
17    <div class="text-center bg-info fw-bold">Box</div>
18    <div class="text-center bg-dark text-light">Box</div>
19
20    <!-- Optional JavaScript; choose one of the two! -->
21
22    <!-- Option 1: Bootstrap Bundle with Popper -->
23    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
24
25    <!-- Option 2: Separate Popper and Bootstrap JS -->
26    <!--
27    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
28    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
29    -->
30  </body>
31</html>

試したこと

VS Codeでも試してみましたが、結果は同じでした。

補足情報（FW/ツールのバージョンなど）

Sublime text ver.3.2.2
VS Code Version: 1.53.2

行動規範の内容に同意します

回答2件

ベストアンサー

Text · Bootstrap v5.0

text-end
ってクラスで右寄せしているように見えますが？

投稿2021/02/20 08:36

退会済みユーザー

総合スコア0

Tatsuno

2021/02/20 09:11

回答ありがとうございます。text-endというclassはコード上ないかと思いますが、もう少し詳細頂けますと嬉しいです。

退会済みユーザー

2021/02/20 13:24

回答に示したリンク先は読んでいただけましたか？よくわからない教材よりも、公式ドキュメントの内容を信じたらいいと思います。

m.ts10806

2021/02/21 00:13

URLとコード引用したかったので回答として投稿しましたが、あくまでこの回答の補足です。

Tatsuno

2021/02/21 08:51

お二方、詳細にご回答いただき、ありがとうございました。text-endで無事に右揃えできました。また、左揃えは、text-startということも確認しました。

m.ts10806

2021/02/21 08:55

そもそもドットインストールの講座調べた感じBootstrap5はないですよ。 https://dotinstall.com/search?q=Bootstrap 5.0.0-beta2というURLから分かるようにベータ版ですし、書籍もほぼなし。いずれにしても4であっても講座受講であってもバージョンにあわせてドキュメントは確認すべきです。

行動規範の内容に同意します

5.0に[text-right]というクラスはありません。
Bootstrap内のソースを検索してみてください。

Bootstrap4には確かにありました。
Bootstrap5ではクラス名が変わっており、ドキュメントのコードもちょっと変わってます（文章は同じ）

html
1<p class="text-start">Start aligned text on all viewport sizes.</p>
2<p class="text-center">Center aligned text on all viewport sizes.</p>
3<p class="text-end">End aligned text on all viewport sizes.</p>
4
5<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
6<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
7<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
8<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>