https://github.com/tonycorporated/bootstrap-float-label

Pure CSS implementation of Float Label pattern for Bootstrap v3 and v4.
https://github.com/tonycorporated/bootstrap-float-label

Last synced: 9 days ago
JSON representation

Pure CSS implementation of Float Label pattern for Bootstrap v3 and v4.

• Host: GitHub
• URL: https://github.com/tonycorporated/bootstrap-float-label
• Owner: tonycorporated
• License: mit
• Created: 2016-10-11T13:19:58.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-01-09T20:27:19.000Z (about 5 years ago)
• Last Synced: 2025-01-31T22:51:16.616Z (20 days ago)
• Homepage: https://codepen.io/tonystar/pen/LRdpYZ
• Size: 120 KB
• Stars: 117
• Watchers: 6
• Forks: 39
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Bootstrap Float Label

=====================

[![npm version](https://img.shields.io/npm/v/bootstrap-float-label.svg)](https://www.npmjs.com/package/bootstrap-float-label)

[![codepen](https://img.shields.io/badge/code-pen-d3d3d3.svg)](https://codepen.io/tonystar/pen/LRdpYZ)

> Now part of [Bootstrap Kit](https://bootstrap-kit.com/)!

Pure CSS implementation of Float Label pattern for **Bootstrap 4** powered by [Pure-CSS Float Label](https://github.com/tonystar/float-label-css).

[Switch to Bootstrap 3](https://github.com/tonystar/bootstrap-float-label/tree/v3-dev)



## Note!

As of v4.0.2 files from `dist` folder are moved to project root! Be careful and update your paths!

## Demo

https://codepen.io/tonystar/pen/LRdpYZ

## Usage

Include `bootstrap-float-label.min.css`:

```html

```

Then just add `.has-float-label` class to `.form-group` **v4.0.1+**:

```html

  

  Email

```

**NOTE:** `` should be inside `` and `` should go after ``. [Why?](https://github.com/tonystar/float-label-css#usage)

Using inside `.input-group` is also supported:

```html



  

    

    First

  

  

    

    Last

  



```


## Browser support

ANY browser. See [Pure-CSS Float Label docs](https://github.com/tonystar/float-label-css#browser-support) for more details.