React js example. bs4 social profile cover

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>
			<div class="ui-bg-cover ui-bg-overlay-container text-white">
    <div class="ui-bg-overlay bg-dark opacity-50"></div>
    <div class="container">
      <div class="d-flex justify-content-between align-items-center pt-4">
        <div>
          <a href="javascript:void(0)" class="d-inline-block text-white">
            <strong>234</strong>
            <span class="opacity-75">followers</span>
          </a>
          <a href="javascript:void(0)" class="d-inline-block text-white ml-3">
            <strong>111</strong>
            <span class="opacity-75">following</span>
          </a>
        </div>
        <div>
          <a href="javascript:void(0)" class="btn btn-success btn-sm">
            Follow
          </a>
          <a href="javascript:void(0)" class="btn btn-outline-white icon-btn btn-sm ml-1">
            <i class="ion ion-md-mail"></i>
          </a>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="text-center py-5">
        <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="ui-w-100 rounded-circle"/>

        <div class="col-md-8 col-lg-6 col-xl-5 p-0 mx-auto">
          <h4 class="font-weight-bold my-4">John Doe</h4>

          <div class="opacity-75 mb-4">
            Lorem ipsum dolor sit amet, nibh suavitate qualisque ut nam. Ad harum primis electram duo, porro principes ei has.
          </div>
        </div>

        <div class="text-center pt-3">
          <a href="javascript:void(0)" class="btn icon-btn btn-twitter btn-round">
            <span class="ion ion-logo-twitter"></span>
          </a>
          &nbsp;
          <a href="javascript:void(0)" class="btn icon-btn btn-facebook btn-round">
            <span class="ion ion-logo-facebook"></span>
          </a>
          &nbsp;
          <a href="javascript:void(0)" class="btn icon-btn btn-instagram btn-round">
            <span class="ion ion-logo-instagram"></span>
          </a>
        </div>
      </div>
    </div>

    <div class="ui-bg-overlay-container">
      <div class="ui-bg-overlay bg-dark opacity-25"></div>
      <ul class="nav nav-tabs tabs-alt justify-content-center border-transparent">
        <li class="nav-item">
          <a class="nav-link text-white py-4 active" href="javascript:void(0)">Posts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white py-4" href="javascript:void(0)">Likes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white py-4" href="javascript:void(0)">Followers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white py-4" href="javascript:void(0)">Following</a>
        </li>
      </ul>
    </div>

</div>
		</div>
	);
}
export default App;

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

.text-white {
    color: #fff !important;
}
.ui-bg-overlay-container, .ui-bg-video-container {
    position: relative;
}
.ui-bg-cover {
    background-color:#00b5ec;
    background-position: center center;
    background-size: cover;
}
.ui-bg-overlay-container .ui-bg-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
}

.bg-dark {
    background-color: rgba(24,28,33,0.9) !important;
}
.opacity-50 {
    opacity: .5 !important;
}
.bg-dark {
    background-color: rgba(24,28,33,0.9) !important;
}
.ui-bg-overlay-container>*, .ui-bg-video-container>* {
    position: relative;
}
@media (min-width: 992px){
    .container, .container-fluid {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}
.media, .media>:not(.media-body), .jumbotron, .card {
    -ms-flex-negative: 1;
    flex-shrink: 1;
}
.d-flex, .d-inline-flex, .media, .media>:not(.media-body), .jumbotron, .card {
    -ms-flex-negative: 1;
    flex-shrink: 1;
}
.ui-w-100 {
    width: 100px !important;
    height: auto;
}
.font-weight-bold {
    font-weight: 700 !important;
}
.opacity-75 {
    opacity: .75 !important;
}
.tabs-alt.nav-tabs .nav-link.active, .tabs-alt.nav-tabs .nav-link.active:hover, .tabs-alt.nav-tabs .nav-link.active:focus, .tabs-alt>.nav-tabs .nav-link.active, .tabs-alt>.nav-tabs .nav-link.active:hover, .tabs-alt>.nav-tabs .nav-link.active:focus {
    -webkit-box-shadow: 0 -2px 0 #26B4FF inset;
    box-shadow: 0 -2px 0 #26B4FF inset;
}

.nav-tabs:not(.nav-fill):not(.nav-justified) .nav-link, .nav-pills:not(.nav-fill):not(.nav-justified) .nav-link {
    margin-right: .125rem;
}
.nav-tabs.tabs-alt .nav-link, .tabs-alt>.nav-tabs .nav-link {
    border-width: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}
.nav-tabs .nav-link.active {
    border-bottom-color: #fff;
}