Rich-React

React js UI example. bs4 light resume page

React js UI example and template, bs4 light resume page! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: resume,profile,bs4

Preview Code

1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:

npx create-react-app my-awesome-project

cd my-awesome-project

npm start

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install [email protected] --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  
	return (
		<div>
			<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/css/materialdesignicons.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js" integrity="sha256-Zr3vByTlMGQhvMfgkQ5BtWRSKBGa2QlspKYJnkjZTmo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css" integrity="sha256-mLBIhmBvigTFWPSCtvdu6a76T+3Xyt+K571hupeFLg4=" crossorigin="anonymous" />

<section class="candidates-profile-bg">
        <div class="bg-overlay"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="candidates-profile-details text-center">
                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-fluid d-block mx-auto rounded-circle img-thumbnail mb-4"/>
                        <h4 class="text-white candidates-profile-name mb-2">Michael Brown</h4>
                        <p class="text-white-50 mb-2"><i class="mdi mdi-bank mr-2"></i>Web Themes.pvt.Ltd</p>
                        <ul class="candidates-profile-icons list-inline mb-3">
                            <li class="list-inline-item text-white-50 pr-2 f-16">PHP Developer</li>
                            <li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star"></i></a></li>
                            <li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star"></i></a></li>
                            <li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star"></i></a></li>
                            <li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star"></i></a></li>
                            <li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star"></i></a></li>
                        </ul>

                        <ul class="candidates-profile-social-icons list-inline mb-0">
                            <li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-facebook"></i></a></li>
                            <li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-twitter"></i></a></li>
                            <li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-instagram"></i></a></li>
                            <li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</section>

<section class="section"> 
    <div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="text-dark">About Us</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="job-detail mt-2 p-4">
                <div class="job-detail-desc">
                    <p class="text-muted f-14 mb-3">Aliquam erat volutpat Etiam vitae tortor Morbi vestibulum volutpat enim Aliquam nunc Nunc sed turpis sed mollis eros et ultrices tempus mauris ipsum aliquam libero non adipiscing dolor urna a orci Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos hymenaeos pellentesque dapibus hendrerit tortor Praesent egestas tristique nibh sed a libero cras us varius donec vitae orci sed dolor rutrum auctor fusce egestas elit eget lorem.</p>

                    <p class="text-muted f-14 mb-0">Libero venenatis faucibus ullam quis ante tiam sit amet orci eget eros faucibus tincidunt ed fringilla mauris sit amet nibh Donec sodales sagittis magna ed consequat leo eget bibendum sodales augue velit cursus nunc quis gravida magna mi libero usce vulputate eleifend sapien estibulum purus qua scelerisque ut mollis sed nonummy id metus ullam accumsan lorem Vivamus elementum semper enean vulputate eleifend tellus enean leo ligula porttitor.</p>
                </div>
                <hr/>
                <ul class="list-inline mt-3 mb-0">
                    <li class="list-inline-item mr-3">
                        <a href="" class="text-muted f-15 mb-0"><i class="mdi mdi-map-marker mr-2"></i>3659 Turkey Pen Road Manhattan, NY 10016</a>
                    </li>

                    <li class="list-inline-item mr-3">
                        <a href="" class="text-muted f-15 mb-0"><i class="mdi mdi-web mr-2"></i>Www.webthemes.co.in</a>
                    </li>

                    <li class="list-inline-item mr-3">
                        <a href="" class="text-muted f-15 mb-0"><i class="mdi mdi-email mr-2"></i>[email protected]</a>
                    </li>

                    <li class="list-inline-item mr-3">
                        <a href="" class="text-muted f-15 mb-0"><i class="mdi mdi-cellphone-iphone mr-2"></i>123 456 7890</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <h3 class="text-dark mt-4">Overview</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="job-detail mt-2 p-4">
                <div class="job-detail-desc">
                    <p class="text-muted f-14 mb-3">Cras dapibus Vivamus elementum semper nisi Aenean vulputate eleifend tellus Aenean leo ligula porttitor eu consequat vitae eleifend ac enim aliquam lorem ante dapibus in viverra quis feugiat a tellus phasellus viverra nulla ut metus variuse laoreet quisque rutrum aenean imperdiet etiam ultricies nisi that is maecenas tempus tini tellus eget condimentum rhoncus sem semper libero sit amet adipiscing sem neque sed ipsum nam quam nunc blandit vel luctus pulvinar hendrerit lorem maecenas nec odio et ante tincidunt tempus donec vitae libero venenatis faucibus nullam quis ante etiam sit amet orci eget eros faucibus tincidunt Duis leo Sed fringilla a mauris sit amet nibh donec sodales sagittis magna vel augue curabitur ullamcorper ultricies nisi nam eget dui etiame rhoncus ut enim as minima veniam quis nostrum exercitationem ullam corporis suscipit laboriosam nisi ut aliquid commodi.</p>

                    <p class="text-muted f-14 mb-0">Sed consequat eget bibendum augue cursus nunc quis gravida magna mi a Itaque earum rerum hic tenetur a sapiente delectus ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat liber fusce vulputate eleifend sapien vestibulum purus quam scelerisque ut mollis sed nonummy id metus nullam accumsan lorem in dui cras ultricies mi eu turpis hendrerit fringilla vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia in dui quis consectetuer lacinia nam pretium turpis arcu duis arcu tortor.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <h3 class="text-dark mt-4 mb-4">Education</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <div class="job-detail candidates-profile-education text-center text-muted mb-5 mt-5">
                <div class="profile-education-icon">
                    <i class="mdi mdi-school"></i>
                </div>
                <h6 class="text-uppercase f-17"><a href="#/" class="text-muted">University Of USA</a></h6>
                <p class="f-14 mb-1">May 2016 - April 2017</p>
                <p class="f-14 mb-0">Diploma In Management Studies</p>
                <hr class="mt-2 mb-2"/>
                <p class="f-14 mb-0">Suspendisse faucibus et pellentesque egestas lacus ante convallis.</p>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="job-detail candidates-profile-education text-center text-muted mb-5 mt-5">
                <div class="profile-education-icon">
                    <i class="mdi mdi-library"></i>
                </div>
                <h6 class="text-uppercase f-17"><a href="#/" class="text-muted">University Of USA</a></h6>
                <p class="f-14 mb-1">May 2017 - April 2018</p>
                <p class="f-14 mb-0">Diploma In Management</p>
                <hr class="mt-2 mb-2"/>
                <p class="f-14 mb-0">Suspendisse faucibus et pellentesque egestas lacus ante convallis.</p>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="job-detail candidates-profile-education text-center text-muted mb-5 mt-5">
                <div class="profile-education-icon">
                    <i class="mdi mdi-briefcase-check"></i>
                </div>
                <h6 class="text-uppercase f-17"><a href="#/" class="text-muted">University Of USA</a></h6>
                <p class="f-14 mb-1">May 2018 - April 2019</p>
                <p class="f-14 mb-0">Management Of Company</p>
                <hr class="mt-2 mb-2"/>
                <p class="f-14 mb-0">Suspendisse faucibus et pellentesque egestas lacus ante convallis.</p>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <h3 class="text-dark mb-4">Experience</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="job-detail job-list-box mt-4 p-4">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="company-brand-logo text-center mb-4">
                            <img src="images/featured-job/img-2.png" alt="" class="img-fluid mx-auto d-block"/>
                        </div>
                    </div>

                    <div class="col-lg-9">
                        <div class="job-list-desc candidates-profile-exp-desc">
                            <h5 class="f-19 mb-2"><a href="#/" class="text-dark">Web Themes Pvt.Ltd</a></h5>
                            <p class="text-muted mb-0 f-16">PHP Developer</p>
                            <p class="text-muted mb-0 f-16">Jan 2016 - Dec 2017</p>
                            <p class="text-muted mb-0 f-16">Salary : $950</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-bank mr-2"></i>www.webthemesltd.co.in</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-map-marker mr-2"></i>1919 Ward Road West Nyack, NY 10994</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="job-detail job-list-box mt-4 p-4">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="company-brand-logo text-center mb-4">
                            <img src="images/featured-job/img-3.png" alt="" class="img-fluid mx-auto d-block"/>
                        </div>
                    </div>

                    <div class="col-lg-9">
                        <div class="job-list-desc candidates-profile-exp-desc">
                            <h5 class="f-19 mb-2"><a href="#/" class="text-dark">Web code Pvt.Ltd</a></h5>
                            <p class="text-muted mb-0 f-16">Web Developer</p>
                            <p class="text-muted mb-0 f-16">Fab 2015 - July 2018</p>
                            <p class="text-muted mb-0 f-16">Salary : $1100</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-bank mr-2"></i>www.webcodeltd.co.in</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-map-marker mr-2"></i>519 Leo Street Butler, PA 16001</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="job-detail job-list-box mt-4 p-4">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="company-brand-logo text-center mb-4">
                            <img src="images/featured-job/img-5.png" alt="" class="img-fluid mx-auto d-block"/>
                        </div>
                    </div>

                    <div class="col-lg-9">
                        <div class="job-list-desc candidates-profile-exp-desc">
                            <h5 class="f-19 mb-2"><a href="#/" class="text-dark">Brand Themes Pvt.Ltd</a></h5>
                            <p class="text-muted mb-0 f-16">PHP Developer</p>
                            <p class="text-muted mb-0 f-16">Jan 2016 - Dec 2017</p>
                            <p class="text-muted mb-0 f-16">Salary : $1000</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-bank mr-2"></i>www.brandthemesltd.co.in</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-map-marker mr-2"></i>519 Leo Street Butler, PA 16001</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="job-detail job-list-box mt-4 p-4">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="company-brand-logo text-center mb-4">
                            <img src="images/featured-job/img-7.png" alt="" class="img-fluid mx-auto d-block"/>
                        </div>
                    </div>

                    <div class="col-lg-9">
                        <div class="job-list-desc candidates-profile-exp-desc">
                            <h5 class="f-19 mb-2"><a href="#/" class="text-dark">Small Themes Pvt.Ltd</a></h5>
                            <p class="text-muted mb-0 f-16">PHP Developer</p>
                            <p class="text-muted mb-0 f-16">Jan 2016 - Dec 2017</p>
                            <p class="text-muted mb-0 f-16">Salary : $900</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-bank mr-2"></i>www.smallthemesltd.co.in</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-map-marker mr-2"></i>519 Leo Street Butler, PA 16001</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>
		</div>
	);
}
export default App;

4. Now we need to add below code into our my-awesome-project/src/App.css file :

body{margin-top:20px;}
.candidates-profile-bg {
  padding: 180px 0px 80px 0px;
  background-image: url("https://www.bootdey.com/img/Content/bg1.jpg");
  background-size: cover;
  position: relative;
  background-position: center center;
}

.candidates-profile-details img {
  max-width: 130px;
  background: transparent;
}

.candidates-profile-details .candidates-profile-name {
  font-weight: 300;
}

.candidates-profile-icons .list-inline-item {
  margin: 0 1px !important;
}

.candidates-profile-social-icons li a {
  height: 32px;
  width: 32px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-size: 15px;
  display: inline-block;
  line-height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.candidates-profile-social-icons li a:hover {
  background-color: #ff4f6c;
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  border-color: #ff4f6c;
}

.profile-education-icon {
  border: 1px solid #ececec;
  position: absolute;
  width: 90px;
  height: 90px;
  line-height: 90px;
  font-size: 42px;
  border-radius: 50px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: #ffffff;
  color: #ff4f6c;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.candidates-profile-education {
  padding: 64px 24px 24px;
}

.candidates-profile-education:hover .profile-education-icon {
  background-color: #ff4f6c;
  border: 1px solid #ff4f6c;
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.job-details {
  padding: 210px 0px 60px 0px;
  
  background-size: cover;
  position: relative;
  background-position: center center;
}

.job-detail {
  border: 1px solid #ececec;
  border-radius: 6px;
}

.job-details-desc-item p {
  overflow: hidden;
}

.job-detail-icons li {
  margin: 2px !important;
}

.job-detail-icons li a {
  height: 32px;
  width: 32px;
  color: #ff4f6c;
  text-align: center;
  font-size: 15px;
  display: inline-block;
  line-height: 30px;
  border-radius: 50%;
  border: 1px solid #ff4f6c;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.job-detail-icons li a:hover {
  background-color: #ff4f6c;
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.job-detail-time li {
  padding: 10px 4px;
  border-top: 1px solid #ececec;
}

.job-detail-time li:first-child {
  border-top: none;
}
.section {
    padding-bottom: 80px;
    padding-top: 80px;
    position: relative;
}

Similar snippets

Find more similar snippets using the following tags:resume,profile,bs4

React js template and ui example bs4 seller cards

bs4 seller cards

View
React js template and ui example Contact list label

Contact list label

View
React js template and ui example bs5 team member details

bs5 team member details

View
React js template and ui example about me section

about me section

View
React js template and ui example bs5 dark footer

bs5 dark footer

View
React js template and ui example Bootstrap 3 Toggle Switch buttons

Bootstrap 3 Toggle Switch buttons

View
React js template and ui example bs5 forum list

bs5 forum list

View
React js template and ui example bs4 my experience timeline

bs4 my experience timeline

View