1- <p align =" center " >
2- <a href =" http://mdbootstrap.com/docs/react/ " >
3- <img width="500" src="https://mdbootstrap.com/img/Marketing/general/logo/huge/mdb-react.png">
4- </a >
5- </p >
1+ <a href =" http://mdbootstrap.com/docs/react/getting-started/download/ " ><img src =" https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react2.png " ></a >
2+ # React Bootstrap with Material Design
63
7- <h1 align =" center " >React Bootstrap with Material Design</h1 >
8-
9- <p align =" center " >
10- Built with <b >React and Bootstrap 4</b >. Absolutely <b >no jQuery</b >.
11- </p >
12-
13- <p align =" center " >
14- <b >400+</b > material UI elements, <b >600+</b > material icons, <b >74</b > CSS animations, SASS files and many more.
15- </p >
16-
17- <p align =" center " >
18- All fully responsive. All compatible with different browsers.
19- </p >
20-
21- <p align =" center " >
224 <a href =" https://npmcharts.com/compare/mdbreact?minimal=true " ><img src =" https://img.shields.io/npm/dm/mdbreact.svg " alt =" Downloads " ></a >
235 <a href =" https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design/blob/master/license.pdf " ><img src =" https://img.shields.io/badge/license-MIT-green.svg " alt =" License " ></a >
246 <a href =" https://badge.fury.io/js/angular-bootstrap-md " ><img src =" https://badge.fury.io/js/mdbreact.svg " alt =" npm " ></a >
257 <a href =" https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/react/&hashtags=react,code,webdesign,bootstrap " ><img src =" https://img.shields.io/twitter/url/http/shields.io.svg?style=social " ></a >
26- </p >
278
28- <p align =" center " >
29- <a href =" https://mdbootstrap.com/docs/react/ " target =" _blank " >
30- <img width="700" src="https://mdbootstrap.com/img/Marketing/products/react/mdb-free.jpg" alt="logo">
31- </a >
32- </p >
9+ Built with <b >React and Bootstrap 4</b >. Absolutely <b >no jQuery</b >. <b >400+</b > material UI elements, <b >600+</b > material icons, <b >74</b > CSS animations, SASS files and many more. All fully responsive. All compatible with different browsers.
10+
11+ Trusted by <b >2 000 000+</b > developers & designers. Used by companies like
12+ <table >
13+ <tbody >
14+ <tr>
15+ <td><img src="https://mdbootstrap.com/img/logo/brands/nike.png" style="width: 10px;"></td>
16+ <td><img src="https://mdbootstrap.com/img/logo/brands/amazon.png" style="width: 10px;"></td>
17+ <td><img src="https://mdbootstrap.com/img/logo/brands/sony.png" style="width: 10px;"></td>
18+ <td><img src="https://mdbootstrap.com/img/logo/brands/samsung.png" style="height: 40px">
19+ <td><img src="https://mdbootstrap.com/img/logo/brands/airbus.png" style="height: 40px">
20+ <td><img src="https://mdbootstrap.com/img/logo/brands/yahoo.png" style="height: 40px">
21+ <td><img src="https://mdbootstrap.com/img/logo/brands/deloitte.png" style="height: 40px"></div>
22+ <td><img src="https://mdbootstrap.com/img/logo/brands/ge.png" style="height: 40px">
23+ <td><img src="https://mdbootstrap.com/img/logo/brands/kpmg.png" style="height: 40px">
24+ <td><img src="https://mdbootstrap.com/img/logo/brands/unity.png" style="height: 40px">
25+ <td><img src="https://mdbootstrap.com/img/logo/brands/ikea.png" style="max-height: 40px">
26+ <td><img src="https://mdbootstrap.com/img/logo/brands/aegon.png" style="height: 40px">
27+ </tr>
28+ </tbody >
29+ </table >
3330
3431---
3532
36- ## Table of Contents
33+ # More Web Development Technologies
34+
35+ | ⠀ MDBootstrap Angular⠀ | ⠀ MDBootstrap jQuery ⠀ | ⠀ MDBootstrap Vue⠀ | MDBootstrap 5 |
36+ | --------------- | ------------------ | ------------- | ------------- |
37+ | [ ![ MDB Angular] ( https://mdbootstrap.com/img/Marketing/general/logo/small/angular.png" )] ( https://mdbootstrap.com/docs/angular/ ) |⠀ [ ![ MDB jQuery] ( https://mdbootstrap.com/img/Marketing/general/logo/small/jquery.png )] ( https://mdbootstrap.com/docs/react/ ) ⠀ |⠀ [ ![ MDB Vue] ( https://mdbootstrap.com/img/Marketing/general/logo/small/vue.png )] ( https://mdbootstrap.com/docs/vue/ ) | [ ![ MDB 5] ( https://mdbootstrap.com/wp-content/uploads/2020/08/bootstrap5-logo.png )] ( https://mdbootstrap.com/docs/standard/ ) ⠀
38+
39+
40+ # Quick Start
41+
42+ <a href =" https://youtu.be/ozXDtSi5ByM " ><img src =" https://mdbootstrap.com/wp-content/uploads/2020/08/react-play-yt.png " ></a >
43+
44+ According to your preference, you can follow a [ video] ( https://youtu.be/ozXDtSi5ByM ) or [ written version] ( https://mdbootstrap.com/docs/react/getting-started/quick-start/ )
45+
46+ Also, you can install MDB Free using NPM [ installation guide] ( https://mdbootstrap.com/docs/react/getting-started/quick-start/ )
47+
48+ # MDB CLI - the fastest way to create and host MDB projects
49+
50+ <table >
51+ <tbody >
52+ <tr>
53+ <td align="center" valign="middle">
54+ <a href="https://mdbootstrap.com/cli/">
55+ <img
56+ src="https://mdbootstrap.com/img/Marketing/products/cli/cli-free.jpg"
57+ style="width: 60px;">
58+ </a>
59+ </td>
60+ <td align="left" valign="top">
61+ <b>Initiate</b>
62+ <br />
63+ With MDB CLI you can start a new project within seconds! Use <b><code>mdb init</code></b> command and start with a pre-set configuration!
64+ </td>
65+ <td align="left" valign="top">
66+ <b>Publish and host</b>
67+ <br />
68+ Make your project visible with <b><code>mdb publish</code></b>, no need to store your code, simply get the link and share it with the world!
69+ </td>
70+ <td align="center">
71+ <b><a href="https://mdbootstrap.com/cli/">Get started</a> </p>
72+ </td>
73+ </tr>
74+ </tbody >
75+ </table >
76+
77+ # Demo
78+
79+ ### Carousel
80+
81+ <p >React Bootstrap carousel is responsive and interactive slideshow which is created for presenting content, especially images and videos.</p >
82+
83+ <a href =" https://mdbootstrap.com/docs/react/advanced/carousel/ " alt =" Bootstrap 5 " rel =" dofollow " >
84+ <p align =" center " >
85+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-carousel-mask.gif">
86+ </p >
87+ </a >
88+
89+ ### Loader / Spinner
3790
38- - [ Other Technologies] ( #other-technologies )
39- - [ Demo] ( #demo )
40- - [ Version] ( #version )
41- - [ Quick start] ( #quick-start )
42- - [ Available commands] ( #available-commands )
43- - [ How to install MDB via npm] ( #how-to-install-mdb-via-npm )
44- - [ Supported Browsers] ( #supported-browsers )
45- - [ Documentation] ( #documentation )
46- - [ Pro version] ( #pro-version )
47- - [ Highlights] ( #highlights )
48- - [ Useful Links] ( #useful-links )
49- - [ Social Media] ( #social-media )
91+ <p >React Bootstrap loader is animation that is used to keep visitors entertained while the page is still loading, which helps to increase the user experience.</p >
5092
51- # Other Technologies
93+ <a href =" https://mdbootstrap.com/docs/react/components/spinners/ " alt =" Bootstrap 5 " rel =" dofollow " >
94+ <p align =" center " >
95+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-loader.gif">
96+ </p >
97+ </a >
5298
53- [ <img src =" https://mdbootstrap.com/img/Marketing/general/logo/small/jquery.png " />] ( https://mdbootstrap.com/docs/jquery/ ) [ <img src =" https://mdbootstrap.com/img/Marketing/general/logo/small/angular.png " />] ( https://mdbootstrap.com/docs/react/ ) [ <img src =" https://mdbootstrap.com/img/Marketing/general/logo/small/vue.png " />] ( https://mdbootstrap.com/docs/vue/ )
99+ <a href =" https://mdbootstrap.com/docs/react/components/spinners/ " alt =" Bootstrap 5 " rel =" dofollow " >
100+ <p align =" center " >
101+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-color-spinners.gif">
102+ </p >
103+ </a >
54104
55- # Demo:
105+ <a href =" https://mdbootstrap.com/docs/react/components/spinners/ " alt =" Bootstrap 5 " rel =" dofollow " >
106+ <p align =" center " >
107+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-multicolor.gif">
108+ </p >
109+ </a >
56110
57- [ Main demo] ( https://mdbootstrap.com/docs/react/components/demo/ )
111+ <a href =" https://mdbootstrap.com/docs/react/components/spinners/ " alt =" Bootstrap 5 " rel =" dofollow " >
112+ <p align =" center " >
113+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-crazyloader.gif">
114+ </p >
115+ </a >
58116
59- # Version:
117+ ### Buttons
60118
61- - MDBReact 4.27.0
62- - React 16.12.0
119+ <p >React Bootstrap buttons are components which are triggering a desirable user interaction. Easy to customize in terms of size, shape, and color.</p >
63120
64- # Quick start
121+ <a href =" https://mdbootstrap.com/docs/react/components/buttons/ " alt =" Bootstrap 5 " rel =" dofollow " >
122+ <p align =" center " >
123+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-buttons.gif">
124+ </p >
125+ </a >
65126
66- - Clone following repo:
127+ <a href =" https://mdbootstrap.com/docs/react/components/buttons/ " alt =" Bootstrap 5 " rel =" dofollow " >
128+ <p align =" center " >
129+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-social-buttons.png">
130+ </p >
131+ </a >
67132
68- ``` bash
69- git clone https://github.com/mdbootstrap/react-bootstrap-with-material-design .
70- ```
133+ ### Cards
71134
72- note "." at the end. It will clone files directly into current folder.
135+ < p >React Bootstrap cards are components which display content build of different elements with characteristic shadows, depth and hover effects.</ p >
73136
74- - Run ` npm i `
75- - Run ` npm start `
76- - Voilà! Open browser and visit http://localhost:3000
137+ <a href =" https://mdbootstrap.com/docs/react/components/cards/ " alt =" Bootstrap 5 " rel =" dofollow " >
138+ <p align =" center " >
139+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-cards-cascading.png">
140+ </p >
141+ </a >
142+
143+ <a href =" https://mdbootstrap.com/docs/react/components/cards/ " alt =" Bootstrap 5 " rel =" dofollow " >
144+ <p align =" center " >
145+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-fancy-cards.gif">
146+ </p >
147+ </a >
148+
149+
150+ <a href =" https://mdbootstrap.com/docs/react/components/cards/ " alt =" Bootstrap 5 " rel =" dofollow " >
151+ <p align =" center " >
152+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-cards-overlay.png">
153+ </p >
154+ </a >
155+
156+ ### Alerts
157+
158+ <p >Bootstrap alerts are feedback messages which are displayed after specific actions preceded by the user. Length of the text is not limited.</p >
77159
78- Now you can navigate to [ our documentation] ( http://mdbootstrap.com/docs/react/ ) , pick any component and place within your project.
160+ <a href =" https://mdbootstrap.com/docs/react/components/cards/ " alt =" Bootstrap 5 " rel =" dofollow " >
161+ <p align =" center " >
162+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-alerts.png">
163+ </p >
164+ </a >
79165
80- # Available commands
166+ ### Chart
81167
82- - npm start - runs the app in development mode.
83- - npm run remove-demo - remove demo directory from your project and generate a boilerplate for your app
84- - npm run build - builds the app for production to the build folder.
85- - npm test - runs the test watcher in an interactive mode.
168+ <p >React Bootstrap charts are graphical representations of data. Charts come in different sizes and shapes: bar, line, pie, radar, polar and more.</p >
86169
87- # How to install MDB via npm:
170+ <a href =" https://mdbootstrap.com/docs/react/advanced/charts/ " alt =" Bootstrap 5 " rel =" dofollow " >
171+ <p align =" center " >
172+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-charts.gif">
173+ </p >
174+ </a >
88175
89- - create new project ` create-react-app myApp `
90- - ` cd myApp `
91- - ` npm install --save mdbreact `
92- - Import style files into the src/index.js before the App.js file:
176+ <a href =" https://mdbootstrap.com/docs/react/advanced/charts/ " alt =" Bootstrap 5 " rel =" dofollow " >
177+ <p align =" center " >
178+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-charts-bar.gif">
179+ </p >
180+ </a >
93181
94- ``` javascript
95- import ' @fortawesome/fontawesome-free/css/all.min.css'
96- import ' bootstrap-css-only/css/bootstrap.min.css'
97- import ' mdbreact/dist/css/mdb.css'
98- ```
182+ ### Hamburger Menu
99183
100- ### Run server
184+ < p >Bootstrap Hamburger menu is a navigation with additional hamburger looks-like icon which activates hidden menu elements in Navbar or Sidenav.</ p >
101185
102- ``` bash
103- npm start
104- ```
186+ <a href =" https://mdbootstrap.com/docs/react/navigation/hamburger-menu/ " alt =" Bootstrap 5 " rel =" dofollow " >
187+ <p align =" center " >
188+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-hamburgermenu.gif">
189+ </p >
190+ </a >
191+
192+ ### Footer
193+
194+ <p >A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.</p >
195+
196+ <a href =" https://mdbootstrap.com/docs/react/navigation/footer/ " alt =" Bootstrap 5 " rel =" dofollow " >
197+ <p align =" center " >
198+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-footer.png">
199+ </p >
200+ </a >
201+
202+ ### Sidenav
203+
204+ <p >React Bootstrap sidenav is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.</p >
205+
206+ <a href =" https://mdbootstrap.com/docs/react/navigation/sidenav/ " alt =" Bootstrap 5 " rel =" dofollow " >
207+ <p align =" center " >
208+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo4-sidenav.gif">
209+ </p >
210+ </a >
211+
212+ ### Modal
213+
214+ <p >React Bootstrap modal is lightweight, but powerful & multipurpose popup. Learn how to manipulate size, styles & position. Multiple examples and detailed tutorial.</p >
215+
216+ <a href =" https://mdbootstrap.com/docs/react/modals/basic/ " alt =" Bootstrap 5 " rel =" dofollow " >
217+ <p align =" center " >
218+ <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-modal.gif">
219+ </p >
220+ </a >
105221
106222# Supported browsers
107223
@@ -128,77 +244,24 @@ Similarly, the latest versions of most desktop browsers are supported.
128244| Mac | Supported | Supported | N/A | N/A | Supported | Supported |
129245| Windows | Supported | Supported | N/A | Supported | Supported | Not supported |
130246
131- # Documentation:
132-
133- [ Huge, detailed documentation avilable online] ( http://mdbootstrap.com/docs/react/ )
134247
135- # PRO version:
248+ ## Useful resources
136249
137- [ React Bootstrap with Material Design PRO ] ( https://mdbootstrap.com/products /react-ui-kit / )
250+ Here you'll find more useful resources, like [ Getting Started ] ( https://mdbootstrap.com/docs /react/getting-started/download/ ) , [ Freebies ] ( https://mdbootstrap.com/freebies/ ) , [ Premium Templates ] ( https://mdbootstrap.com/templates/ ) & [ snippet editor ] ( https://mdbootstrap.com/snippets /)
138251
139- # Highlights:
252+ ## Connect with us on
140253
141- ** Bootstrap 4**
142- Up-to-date with the latest standards of Bootstrap 4 and all the best it has to offer.
254+ [ Twitter] ( https://twitter.com/MDBootstrap ) | [ Facebook] ( https://www.facebook.com/mdbootstrap ) | [ Pinterest] ( https://pl.pinterest.com/mdbootstrap ) | [ Dribbble] ( https://dribbble.com/mdbootstrap ) | [ LinkedIn] ( https://www.linkedin.com/company/material-design-for-bootstrap ) | [ YouTube] ( https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA )
143255
144- ** Detailed documentation**
145- Intuitive and user-friendly documentation, created with a copy-paste approach.
146-
147- ** No jQuery**
148- Writing you code with pure React is now quicker, easier, and cleaner.
149-
150- ** Cross-browser compatibility**
151- Works perfectly with Chrome, Firefox, Safari, Opera and Microsoft Edge.
152-
153- ** Frequent updates**
154- Expect any bugs being fixed in a matter of days.
155-
156- ** Active community**
157- MDB is broadly used by professionals on multiple levels, who are ready to aid you.
158-
159- ** Useful helpers**
160- Reduce the frequency of highly repetitive declarations in your CSS.
161-
162- ** Technical support**
163- Every day we help our users with their issues and problems.
164-
165- ** SASS files**
166- Thought-out .scss files come in a compile-ready form.
167-
168- ** Flexbox**
169- Full support of Flexbox layout system lets you forget about alignment issues.
170-
171- ### Support MDB developers
256+ ## Support MDB developers
172257
173258- Star our GitHub repo
174259- Create pull requests, submit bugs, suggest new features or documentation updates
175260- Follow us on [ Twitter] ( https://twitter.com/mdbootstrap )
176261- Like our page on [ Facebook] ( https://www.facebook.com/mdbootstrap )
177262
178- A big ❤️ ** thank you to all our users** ❤️ who are working with us to improve the software. We wouldn't be where we are without you.
179-
180- # Useful Links:
181-
182- [ Getting started] ( https://mdbootstrap.com/docs/react/getting-started/download/ )
183-
184- [ Quick Start] ( https://mdbootstrap.com/docs/react/getting-started/quick-start/ )
185-
186- [ Changelog] ( https://mdbootstrap.com/docs/react/changelog/ )
187-
188- # Social Media:
189-
190- [ Twitter] ( https://twitter.com/MDBootstrap )
191-
192- [ Facebook] ( https://www.facebook.com/mdbootstrap )
193-
194- [ Pinterest] ( https://pl.pinterest.com/mdbootstrap )
195-
196- [ Google+] ( https://plus.google.com/u/0/b/107863090883699620484/+Mdbootstrap/posts )
197-
198- [ Dribbble] ( https://dribbble.com/mdbootstrap )
199-
200- [ LinkedIn] ( https://www.linkedin.com/company/material-design-for-bootstrap )
263+ A BIG ❤️ ** thank you to all our users** ❤️ who are working with us to improve the software. We wouldn't be where we are without you.
201264
202- ## Contact :
265+ ## PRO version :
203266
204- contact@ mdbootstrap.com
267+ [ React Bootstrap with Material Design PRO ] ( https:// mdbootstrap.com/pricing/react/pro/ )
0 commit comments