Bootstrap4 でformが幅いっぱいに広がらない

Laravel Bladeで Bootstrap4使いレイアウトしています｡

@extends('layouts.app')

@section('content')
@include('layouts.header')


<div class="c-main_bg_img container-fluid">
  <div class="container p-wrapper-l">
    <form action="">
      <div class="row justify-content-between">
        <div class="col-lg-4 col-12 mb-5">
          <div class="c-post-pic">
            <div class="c-user-img">
              <label for="">
                <img src="../img/sample42.jpeg" alt="サンプル" class="card-img-top">
              </label>
            </div>
          </div>
        </div>  
        <div class="col-lg-4 col-12 mb-5">
          <div class="c-post-pic">
            <div class="c-user-img">
              <label for="">
                <img src="../img/sample42.jpeg" alt="サンプル" class="card-img-top">
              </label>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-12 mb-5">
          <div class="c-post-pic">
            <div class="c-user-img">
              <label for="">
                <img src="../img/sample42.jpeg" alt="サンプル" class="card-img-top">
              </label>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="c-input-area-new_post">
            <div class="c-input-titleForm">
              <label for="">
                <input type="text" placeholder="タイトル" class="c-input-title">
              </label>
            </div>
          </div>         
        </div>
      </div> 
    </form>
  </div>
</div>  
@include('layouts.footer')
@endsection

inputのareaが幅いっぱいに広がらないです｡いろいろと試して見ましたがアドバイスをいただけると嬉しいです｡

該当箇所が下記になります

 <div class="col-12">
  <div class="c-input-area-new_post">
   <div class="c-input-titleForm">
    <label for="">
     <input type="text" placeholder="タイトル" class="c-input-title">
    </label>
   </div>
  </div>         
 </div>

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

回答1件

ベストアンサー

labelの中にinputを内包してしまっているのが原因だと思われます。
あと、inputにform-controlクラスを付与しないとスタイリングされません。

html
1 <div class="col-12">
2  <div class="c-input-area-new_post">
3   <div class="c-input-titleForm">
4    <label for="">
5    </label>
6    <input type="text" placeholder="タイトル" class="c-input-title form-control">
7   </div>
8  </div>         
9 </div>