Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/react-labels

Responsive React Labels built with Bootstrap 5. Badge Labels are for counters, categories & tags. Floating labels refer to forms, and slider labels to the range.
https://github.com/mdbootstrap/react-labels

bootstrap bootstrap-template bootstrap-theme bootstrap5 css html jsx react-badges react-bootstrap react-input react-range reactjs

Last synced: about 1 month ago
JSON representation

Responsive React Labels built with Bootstrap 5. Badge Labels are for counters, categories & tags. Floating labels refer to forms, and slider labels to the range.

Awesome Lists containing this project

README 

        

Responsive React Labels built with Bootstrap 5. Badge Labels are for counters, categories & tags. Floating labels refer to forms, and slider labels to the range.



Check out [React Bootstrap Labels Documentation](https://mdbootstrap.com/docs/react/extended/labels/) for detailed instructions & even more examples.



> :warning: **Important**: The term "Bootstrap Label" is currently very ambiguous. Many different elements are colloquially referred to as "Labels" by some developers. We created this page to help you find the proper component that you are looking for. You will find more examples of each one in the main documentation pages that are linked below.



## Badge Labels



The valid term for Labels in React Bootstrap 5 is now [React Badges](https://mdbootstrap.com/docs/react/components/badges/). Make sure to jump straight to the Badges documentation if you are looking for more examples & customization options for the component from the example below.



```jsx

import React from 'react';

import { MDBBadge } from 'mdb-react-ui-kit';



export default function App() {

  return (

    


      


        Example heading

        NEW

      


    


  );

}

```



## Floating Labels for Inputs



The term Label is now mainly used for the `label` element describing the input fields in form. Make sure to jump straight to the [React Input fields](https://mdbootstrap.com/docs/react/forms/input-fields/) documentation if you are looking for more examples & customization options for the component from the example below.



```jsx

import React from 'react';

import { MDBInput } from 'mdb-react-ui-kit';



export default function Input() {

  return (

    

  );

}

```



## How to use?



1. Download MDB React - free UI KIT



2. Choose your favourite customized component and click on the image



3. Copy & paste the code into your MDB project



[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



___



## More extended Bootstrap documentation