Legacy Alerts

These are examples of alerts (error messages) that are currently implemented on YourAvon.com. They will eventually be replaced by these alert styles.

Inline level

Messages are placed inside the .form-group div, after the <input>

<div class="form-group">
  <input>
  <div class="text-danger small">Error message that a user needs to read.</div>
</div>
Error message that a user needs to read.
When message can span multiple inline inputs
A long message allowed to span multiple inputs.
When message must stay within individual input columns
A long message NOT allowed to span multiple inputs, so it must wrap.
Or, message must be short.
When message can span multiple input columns

Messages are placed outside the .form-group <div>s, after the .row

First long message allowed to span multiple inputs.
Second long message allowed to span multiple inputs.