<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class=""> <div class="label"> <label for="username-65098">Username or E-mail <span class="um-req" title="Required">*</span> </label> </div> <div class="input"> <input autocomplete="off" class="um-form-field um-error " type="text" name="username-65098" id="username-65098" value="huongnhdh@gmail.com" placeholder="" data-validate="unique_username_or_email" data-key="username"> </div> <div class="field-error"> <span class="um-field-arrow"> <i class="um-faicon-caret-up"></i> </span> Sorry, we can't find an account with that email address </div> </div> </div> </div>

:root { --main-error-color: #C74A4A; } .field-error { margin: 12px 0 0; border-radius: 3px; color: #fff; background: var(--main-error-color); position: relative; font-size: 14px; line-height: 20px!important; padding: 12px; } .field-error:before { top: -17px; left: 10px; position: absolute; z-index: 900; color: var(--main-error-color); font-size: 28px; line-height: 1em!important; content: "\f0d8"; font-family: FontAwesome!important; }