Nostalgic Perogi Monogramming
    Wondering what’s next for npm?Check out our public roadmap! »

    @tkrotoff/bootstrap-floating-label

    0.11.2 • Public • Published

    @tkrotoff/bootstrap-floating-label

    npm version Build status Prettier Airbnb Code Style

    Floating label for Bootstrap 5

    demo

    Example: https://codesandbox.io/s/github/tkrotoff/bootstrap-floating-label/tree/codesandbox.io

    • Small: less than 200 lines of SCSS
    • Works with Chrome/Chromium, Firefox, Safari and IE
    • Works with any font family and size
    • Uses Bootstrap variables

    ⚠️ Latest implementation for Bootstrap 4 is @tkrotoff/bootstrap-floating-label v0.8

    The Nielsen Norman Group talks about "Placeholders and Floating Labels disadvantages"

    Usage

    npm install @tkrotoff/bootstrap-floating-label

    Import bootstrap-floating-label.scss after bootstrap.scss:

    @import '~bootstrap/scss/bootstrap';
    
    @import '~@tkrotoff/bootstrap-floating-label/src/bootstrap-floating-label';

    Place <label> under <input> inside your Bootstrap code:

    <div class="floating-label">
      <input type="email" id="email" class="form-control" placeholder="name@example.com">
      <label for="email">Email</label>
    </div>

    Limitations

    There is no good way to detect if the user entered text inside an input using CSS.

    Thus a placeholder is required <input placeholder=" "> otherwise the label will be above the input instead of inside (see https://codepen.io/tkrotoff/pen/KjgyZj).

    Install

    npm i @tkrotoff/bootstrap-floating-label

    DownloadsWeekly Downloads

    335

    Version

    0.11.2

    License

    MIT

    Unpacked Size

    18.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar