form-groupの中央揃えができない

前提・実現したいこと

簡単なお問い合わせフォームを作成中です。
ラベルのタイトルとテキストエリアの中央揃えができず困っています

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

スクショがエラー箇所になります。

タイトルとtextareaを中央にしたいが反映されず。

該当のソースコード


<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">


    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    @yield('content')
</body>
</html>

index.blade.php
@extends('layouts.app')
 
@section('content')
{{--  入力に問題が無かったら次のコントローラーに送る際のルーティングを設定  --}}
<form method="POST" action="{{ route('contact.confirm') }}">
{{--  入力するフォームにはcrsf対策をする。無ければ419というエラーが出る  --}}
  @csrf
  
  <div class="container ">
    <div class="row no-gutters">
      <div class="card mt-5 mx-auto  col-md-7 col-md-offset-5">
        <div class="h2 card-header text-center">
          <section>お問い合わせフォーム</section>
        </div>
      </div>
    </div>

    <div class="form-group justify-content-center">
      <label class="col-sm-3 control-label">タイトル</label>
        <div class="col-sm-6">
        <input type="text" class="form-control" name="title" value="{{ old('title') }}">
            @if ($errors->has('title')) //hasは入力値の存在チェック
            <p class="error-message">{{ $errors->first('title') }}</p> //firstはクエリビルダーのことで無ければ空白というエラーを出す
        @endif
        </div>
    </div>

  </div>


</form>
@endsection

試したこと

form-groupにjustify-content-centerを設定すると
https://teratail.com/questions/140725
に書いていますが反映されず。他にも方法はあるのでしょうか?

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

bootstrap 4

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

回答2件

justify-contentを適用するにはdisplay:flexも必要です

投稿2021/02/17 11:20

yuki84web

総合スコア1857

ベストアンサー

（完成イメージがよくわからなかったのですが・・・）

「お問い合わせフォーム」のCardに位置を合わせるということなら、こういうことでしょうか？

html
1    <div class="row no-gutters">
2        <div class="my-3 mx-auto col-md-7">
3            <label for="inputTitle">タイトル</label>
4            <input
5                id="inputTitle"
6                class="form-control"
7                name="title"
8                type="text"
9                value="{{ old('title') }}"
10            >
11            ...
12        </div>
13    </div>