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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

受付中

bootstrap formを中央揃えする方法が知りたい

samidare_chan
samidare_chan

総合スコア278

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0回答

-4評価

0クリップ

279閲覧

投稿2022/03/15 09:26

編集2022/03/16 15:10

提示コードですがbootstrapライブラリを使ってformを使ってログインフォームを作ってるんですが画面中央揃えにする方法がわかりません。center-blockをdivタグで囲いましたが変化がありません。このような場合はどこにcenter-blockを記述するのでしょうか?

参考サイト:https://getbootstrap.jp/docs/5.0/forms/layout/

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <title> ログイン</title> </head> <body> <div class="container"> <header> <h1 class="text-center">ログイン</h1> </header> </div> <hr> <hr> <div class="container"> <form action="login.php" method="post"> <div class="mb-3 mx-auto"> <label for="exampleInputEmail1" class="form-label text">Email address</label> <input type="email" class="form-control mailInput" name="mail"> </div> <div class="mb-3"> <label class="form-label text">Password</label> <input type="password" class="form-control text passwordInput" name="password"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div class="container"> <footter> <p>フッダー</p> </footter> </div> </body> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2022/03/15 09:30

4.2.1を採用しているにも関わらず5のドキュメントを参照している時点で何も読んでいないのがよく分かります。 4.2.1のドキュメントを確認したところで基礎がないので理解できないでしょうけど
Lhankor_Mhy

2022/03/16 01:09

ご提示のコードを試してみましたが、中央揃えになっていました。 おそらく、ご提示の部分には原因はなさそうに思います。 ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。 問題再現の手順をもう少し詳しく書いていただけますか?
Lhankor_Mhy

2022/03/16 06:10

もしかして、垂直中央でしょうか?

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。