Morioh
Login
Archie Mistry

Archie Mistry

4 years ago

Top React Bootstrap Component Examples

1.React Bootstrap Range Slider

A range slider component for React Bootstrap (Bootstrap 4) that extends the native HTML input (type=range) element.

React Bootstrap Range Slider

View on GitHub

2. React Bootstrap Timezone Picker

Time zone picker for react-bootstrap - DEMO

React Bootstrap Timezone Picker

View on GitHub

3. Bs Custom File Input

A little plugin which makes Bootstrap 4 custom file input dynamic with no dependencies.

You can use it on React and Angular too because this plugin is written with the most used JavaScript framework: VanillaJS.

Bs Custom File Input

Demo

Features:

  • Works with Bootstrap 4
  • Works without dependencies and jQuery
  • Display file name
  • Display file names for multiple input
  • Reset your custom file input to its initial state
  • Handle form reset
  • Allow custom selectors for input, and form
  • Allow to drag and drop files
  • Allow you to change the default display with a child in the label element
  • Built in UMD to be used everywhere
  • Small, only 2kb and less if you gzip it

View on GitHub

4. Bootstrap/React twitter clone

A Twitter clone (in layout only) React app utilizing Bootstrap 4 & FontAwesome for styling. The data is pulled from the JSON Placeholder service.

A great exercise in passing data from an API down through a React app!

5. React Bootstrap Carousel

This project support carousel components built with React.

React Bootstrap Carousel

View on GitHub

6.React Bootstrap Typeahead

A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter’s typeahead.js. It supports both single- and multi-selection and is compliant with WAI-ARIA authoring practices. Try the live examples.

Please note that documentation and examples apply to the most recent release and may no longer be applicable if you’re using an outdated version.

React Bootstrap Typeahead

Demo: http://ericgio.github.io/react-bootstrap-typeahead/

View on GitHub

7.React bootstrap table2

Rebuilt react-bootstrap-table

react-bootstrap-table2’s npm module name is react-bootstrap-table-next due to some guys already used it

react-bootstrap-table2 separate some functionalities from core modules to other modules like following:

View on GitHub

8.React Bootstrap Dropdown Menu

A simple Dropdown Menu for React. Commonly used as a ‘User Settings’ menu on websites where users login.

React Bootstrap Dropdown Menu

View on GitHub

9.Simple React Bootstrap

Simple and slim React bindings for those Bootstrap components which modify the DOM. Includes Modal, ButtonDropdown, and NavBar.
These React components implement the Bootstrap widgets which require more than just css classes, namely Modal, ButtonDropdown, NavBar and Tabs.

Simple React Bootstrap

View on GitHub

10.React Bootstrap Table

It’s a react.js table for bootstrap, named react-bootstrap-table. It’s a configurable, functional table component and make you build a Bootstrap Table more efficiency and easy in your React application, However react-bootstrap-table support these features:

  • Striped, borderless, condensed table
  • Column align, hidden, width, sort, title, styling, customization
  • Table scrolling
  • Cell format
  • Pagination
  • Row selection
  • Table Search, Column filter
  • Cell editor
  • Insert & delete Row
  • Export to CSV
  • Rich function hooks
  • Header column span
  • Remote mode
  • Row expand
  • Key board navigation

React Bootstrap Table

Demo: https://allenfang.github.io/react-bootstrap-table/

View on GitHub

12. Reactstrap

Stateless React Components for Bootstrap 4.
Follow the create-react-app instructions up to the Adding Bootstrap section and instead follow the reactstrap version of adding bootstrap.
Reactstrap

Demo: https://reactstrap.github.io/

View on GitHub

13. React UI

A collection of components for React, base on bootstrap 4.0.

React UI

Live Demo
http://lobos.github.io/react-ui/0.7/#/?_k=o4dpjt

View on GitHub

14.React Bootstrap Tab

React Bootstrap Tab example with basic usage.

Live Demo
https://codepen.io/lemanse/pen/ZbwJxe?limit=all&page=8&q=react

15.React Tabs with Bootstrap

simple example of a tab navigation built with React.

Live Demo
https://codepen.io/amwill/pen/qOMyEp?limit=all&page=8&q=react

16. React Bootstrap

Bootstrap 3 components built with React.

Under active development - APIs will change. Check out the 1.0.0 roadmap and contributing guidelines to see where you can help out. Prior to the 1.0.0 release, deprecations or breaking changes will result in a minor version bump.

React Bootstrap

live demo
https://react-bootstrap.github.io/

View on GitHub

17.React Bootstrap Datetimepicker

This project is a port of https://github.com/Eonasdan/bootstrap-datetimepicker for React.js

React Bootstrap Datetimepicker
live demo
A react.js datetime picker for bootstrap http://dev.quri.com/react-bootstrap-datetimepicker/

View on GitHub

#reactjs #javascript

Top React Bootstrap Component Examples
78.00 GEEK