Skip to content

Commit 4ac43af

Browse files
MAKUSrefMAKUSref
committed
Update README.md
1 parent e1f4088 commit 4ac43af

2 files changed

Lines changed: 127 additions & 6 deletions

File tree

‎README.md‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,107 @@
1-
# react-profiles
1+
2+
Responsive Profiles built with Bootstrap 5. Lots of templates such as card profile, user profile, profile form, with followers, avatars, comments, stats, social media and many more
3+
4+
Check out [React Profiles Documentation](https://mdbootstrap.com/docs/react/extended/profiles/) for detailed instructions & even more examples.
5+
6+
## Basic example
7+
8+
![React Profiles](https://mdbootstrap.com/img/Marketing/github/profiles/basic.png)
9+
10+
```js
11+
import React from 'react';
12+
import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardTitle, MDBCardText, MDBCardBody, MDBCardImage, MDBBtn } from 'mdb-react-ui-kit';
13+
14+
export default function Basic() {
15+
return (
16+
<div className="vh-100" style={{ backgroundColor: '#9de2ff' }}>
17+
<MDBContainer>
18+
<MDBRow className="justify-content-center">
19+
<MDBCol md="9" lg="7" xl="5" className="mt-5">
20+
<MDBCard style={{ borderRadius: '15px' }}>
21+
<MDBCardBody className="p-4">
22+
<div className="d-flex text-black">
23+
<div className="flex-shrink-0">
24+
<MDBCardImage
25+
style={{ width: '180px', borderRadius: '10px' }}
26+
src='https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-profiles/avatar-1.webp'
27+
alt='Generic placeholder image'
28+
fluid />
29+
</div>
30+
<div className="flex-grow-1 ms-3">
31+
<MDBCardTitle>Danny McLoan</MDBCardTitle>
32+
<MDBCardText>Senior Journalist</MDBCardText>
33+
34+
<div className="d-flex justify-content-start rounded-3 p-2 mb-2"
35+
style={{ backgroundColor: '#efefef' }}>
36+
<div>
37+
<p className="small text-muted mb-1">Articles</p>
38+
<p className="mb-0">41</p>
39+
</div>
40+
<div className="px-3">
41+
<p className="small text-muted mb-1">Followers</p>
42+
<p className="mb-0">976</p>
43+
</div>
44+
<div>
45+
<p className="small text-muted mb-1">Rating</p>
46+
<p className="mb-0">8.5</p>
47+
</div>
48+
</div>
49+
<div class="d-flex pt-1">
50+
<MDBBtn outline className="me-1 flex-grow-1">Chat</MDBBtn>
51+
<MDBBtn className="flex-grow-1">Follow</MDBBtn>
52+
</div>
53+
</div>
54+
</div>
55+
</MDBCardBody>
56+
</MDBCard>
57+
</MDBCol>
58+
</MDBRow>
59+
</MDBContainer>
60+
</div>
61+
);
62+
}
63+
```
64+
65+
## How to use?
66+
67+
1. Download MDB React - free UI KIT
68+
69+
2. Choose your favourite customized component and click on the image
70+
71+
3. Copy & paste the code into your MDB project
72+
73+
[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)
74+
75+
## More examples
76+
77+
[React Profiles #2:
78+
![React Profiles](https://mdbootstrap.com/img/Marketing/github/profiles/section-2.png)](https://mdbootstrap.com/docs/react/extended/profiles/#section-2)
79+
80+
[React Profiles #3:
81+
![React Profiles](https://mdbootstrap.com/img/Marketing/github/profiles/section-3.png)](https://mdbootstrap.com/docs/react/extended/profiles/#section-3)
82+
83+
[React Profiles #4:
84+
![React Profiles](https://mdbootstrap.com/img/Marketing/github/profiles/section-4.png)](https://mdbootstrap.com/docs/react/extended/profiles/#section-4)
85+
86+
[React Profiles #5:
87+
![React Profiles](https://mdbootstrap.com/img/Marketing/github/profiles/section-5.png)](https://mdbootstrap.com/docs/react/extended/profiles/#section-5)
88+
89+
[React Profiles #6:
90+
![React Profiles](https://mdbootstrap.com/img/Marketing/github/profiles/section-6.png)](https://mdbootstrap.com/docs/react/extended/profiles/#section-6)
91+
92+
[React Profiles #7:
93+
![React Profiles](https://mdbootstrap.com/img/Marketing/github/profiles/section-7.png)](https://mdbootstrap.com/docs/react/extended/profiles/#section-7)
94+
95+
___
96+
97+
## More React documentation
98+
99+
<ul>
100+
<li><a href="https://mdbootstrap.com/docs/react/components/buttons/">React buttons</a></li>
101+
<li><a href="https://mdbootstrap.com/docs/react/components/carousel/">React carousel</a></li>
102+
<li><a href="https://mdbootstrap.com/docs/react/components/cards/">React cards</a></li>
103+
<li><a href="https://mdbootstrap.com/docs/react/content-styles/colors/">React colors</a></li>
104+
<li><a href="https://mdbootstrap.com/docs/react/components/progress/">React progress</a></li>
105+
<li><a href="https://mdbootstrap.com/docs/react/content-styles/icons/">React icons</a></li>
106+
<li><a href="https://mdbootstrap.com/docs/react/content-styles/typography/">React typography</a></li>
107+
</ul>

‎package.json‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
{
2-
"name": "mdb-react-template",
3-
"version": "4.0.0",
4-
"description": "template for mdb-react-ui-kit",
5-
"private": true,
2+
"name": "react-profiles",
3+
"version": "1.0.0",
4+
"description": "Responsive Profiles built with Bootstrap 5. Lots of templates such as card profile, user profile, profile form, with followers, avatars, comments, stats, social media and many more.",
5+
"private": false,
6+
"homepage": "https://mdbootstrap.com/docs/react/extended/profiles/",
7+
"bugs": {
8+
"url": "https://github.com/mdbootstrap/react-profiles/issues"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/mdbootstrap/react-profiles.git"
13+
},
614
"dependencies": {
715
"mdb-react-ui-kit": "^4.0.0",
816
"react": "^18.1.0",
@@ -18,8 +26,15 @@
1826
"eject": "react-scripts eject"
1927
},
2028
"keywords": [
29+
"bootstrap",
30+
"navigation",
31+
"bootstrap5",
32+
"responsive-design",
33+
"bootstrap-template",
2134
"template",
22-
"react"
35+
"react",
36+
"profiles",
37+
"react-profiles"
2338
],
2439
"author": "MDBootstrap",
2540
"license": "MIT",

0 commit comments

Comments
 (0)