Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 5 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 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-09T20:27:19.000Z (over 4 years ago)
- Last Synced: 2024-06-12T10:12:35.433Z (12 days ago)
- Homepage: https://codepen.io/tonystar/pen/LRdpYZ
- Size: 120 KB
- Stars: 118
- Watchers: 6
- Forks: 40
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-bootstrap - Bootstrap Float Label - Pure CSS implementation of Float Label pattern for Bootstrap 4. (Generic plugins and extensions)
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
```
**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.