質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Sublime Text

SublimeTextとは、オーストラリアのSublime HQ Pty Ltdが提供しているテキストエディターのことです。Mac/Windows/Linuxでの利用が可能で、柔軟にカスタマイズできたり、多くの言語に対応していくこともあり、海外や日本国内でも人気のあるエディターです。

Q&A

解決済

2回答

19753閲覧

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

Tatsuno

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Sublime Text

SublimeTextとは、オーストラリアのSublime HQ Pty Ltdが提供しているテキストエディターのことです。Mac/Windows/Linuxでの利用が可能で、柔軟にカスタマイズできたり、多くの言語に対応していくこともあり、海外や日本国内でも人気のあるエディターです。

1グッド

1クリップ

投稿2021/02/20 08:28

前提・実現したいこと

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

BlueMoon👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

1

ベストアンサー

Text · Bootstrap v5.0

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

投稿2021/02/20 08:36

退会済みユーザー

退会済みユーザー

総合スコア0

m.ts10806👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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であっても講座受講であってもバージョンにあわせてドキュメントは確認すべきです。
guest

0

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>

既に指摘がある通り、ドキュメントを確認しましょう。

投稿2021/02/21 00:00

編集2021/02/21 00:12
m.ts10806

総合スコア80705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/21 00:19 編集

回答を大幅改修。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Sublime Text

SublimeTextとは、オーストラリアのSublime HQ Pty Ltdが提供しているテキストエディターのことです。Mac/Windows/Linuxでの利用が可能で、柔軟にカスタマイズできたり、多くの言語に対応していくこともあり、海外や日本国内でも人気のあるエディターです。