[解決済み】Bootstrapを使用したフォームのマークエラーについて

質問

GWTに頼らずに素敵なページデザインを実現するためにBootstrapを使い始めました（バックエンドはjavaで作られています）

ログイン画面は、これをコピーしました。 例 . 今、私は、例えば、ユーザー名が空白のままであったというエラーをマークしたいのです。そこで、Bootstrapフレームワークでこのための手順は何なのかと思っていました。あるいは、エラー付きのフォームを表示する例があれば教えてください。

エラーメッセージをinput要素の中に赤い色で表示するのか、input要素の下に表示するのか、あるいはポップアップで表示するのか、よくわからないのですが。

どのように解決するのですか？

(Bootstrap v4、v3、v3用のサンプルでUPDATED)

Bootstrapの過去数回のメジャーバージョンに対応したバリデーションクラス付きフォームの例です。

ブートストラップv4

をご覧ください。 ライブバージョン codepenに掲載

<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
      <div class="col-sm-7">
        <input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
      </div>
    </div>

    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
      <div class="col-sm-7">
        <input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
      </div>
      <div class="col-sm-3">
        <small id="passwordHelp" class="text-danger">
          Must be 8-20 characters long.
        </small>      
      </div>
    </div>
  </form>
</div>

Bootstrap v3

をご覧ください。 ライブバージョン codepenに掲載

<form role="form">
  <div class="form-group has-warning">
    <label class="control-label" for="inputWarning">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning">
    <span class="help-block">Something may have gone wrong</span>
  </div>
  <div class="form-group has-error">
    <label class="control-label" for="inputError">Input with error</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Please correct the error</span>
  </div>
  <div class="form-group has-info">
    <label class="control-label" for="inputError">Input with info</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Username is taken</span>
  </div>
  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess" />
    <span class="help-block">Woohoo!</span>
  </div>
</form>

Bootstrap v2

をご覧ください。 ライブバージョン jsfiddleにて

は .error , .success , .warning と .info クラスが追加されます。 .control-group . これは、Bootstrap v2 の標準的なマークアップとスタイリングです。これに従えば、問題ありません。もちろん、独自のスタイルでポップアップやインラインフラッシュを追加することもできますが、Bootstrapの慣例に従って、検証クラスを .control-group を使えば、一貫性が保たれ、管理しやすくなります（少なくとも、Bootstrapのドキュメントやサンプルを利用し続けることができますから）。

  <form class="form-horizontal">
    <div class="control-group warning">
      <label class="control-label" for="inputWarning">Input with warning</label>
      <div class="controls">
        <input type="text" id="inputWarning">
        <span class="help-inline">Something may have gone wrong</span>
      </div>
    </div>
    <div class="control-group error">
      <label class="control-label" for="inputError">Input with error</label>
      <div class="controls">
        <input type="text" id="inputError">
        <span class="help-inline">Please correct the error</span>
      </div>
    </div>
    <div class="control-group info">
      <label class="control-label" for="inputInfo">Input with info</label>
      <div class="controls">
        <input type="text" id="inputInfo">
        <span class="help-inline">Username is taken</span>
      </div>
    </div>
    <div class="control-group success">
      <label class="control-label" for="inputSuccess">Input with success</label>
      <div class="controls">
        <input type="text" id="inputSuccess">
        <span class="help-inline">Woohoo!</span>
      </div>
    </div>
  </form>