React js example. bs4 team list

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="container py-7">
  <h2 class="text-uppercase text-letter-spacing-xs my-0 text-dark font-weight-bold">
    Our Team <i class="ion-ios-body pl-1 text-primary op-8 z-index-1"></i>
  </h2>
  <hr class="hr-primary w-15 hr-xl ml-0 mb-5"/>
  <div class="row mb-5">
    <div class="col-md-6 order-md-2">
      <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Personal Trainer 1" class="img-fluid border-white border-w-5 w-50 w-md-80 w-lg-60 rounded-circle"/>
    </div>
    <div class="col-md-6 flex-valign text-md-right">
      <h3 class="text-uppercase text-letter-spacing-xs mt-0 mb-1 text-dark font-weight-bold">
        Mike Jones
      </h3>
      <h5 class="my-0 font-weight-normal">
        <em>Strength Coach</em>
      </h5>
      <hr class="hr-primary w-70 ml-0 ml-md-auto mr-md-0 mb-3"/>
      <p>Aptent dolore enim facilisi humo magna melior nisl occuro. Ad os sed utinam. Accumsan autem brevitas esse exerci ludus ratis.</p>
      <p>Adipiscing nimis sed tego turpis. Abico genitus quadrum qui singularis te.</p>
      <a href="#join" data-toggle="scroll-link" class="text-sm font-weight-bold"><i class="fa fa-chevron-right text-xs text-pink"></i> Train with Mike</a>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-md-6 text-md-right">
      <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Personal Trainer 2" class="img-fluid border-white border-w-5 w-50 w-md-80 w-lg-60 rounded-circle"/>
    </div>
    <div class="col-md-6 flex-valign">
      <h3 class="text-uppercase text-letter-spacing-xs mt-0 mb-1 text-dark font-weight-bold">
        Kim Kirk
      </h3>
      <h5 class="my-0 font-weight-normal">
        <em>Prenatal Specialist</em>
      </h5>
      <hr class="hr-primary w-70 ml-0 mb-3"/>
      <p>Commoveo gilvus iaceo nutus pagus tincidunt. Eligo nutus proprius saluto vulputate. Brevitas eligo et fere quadrum quae ratis.</p>
      <p>Eum pecus quis. Accumsan genitus humo inhibeo ut vel. Augue bene enim gemino ideo ille luptatum os veniam venio.</p>
      <a href="#join" data-toggle="scroll-link" class="text-sm font-weight-bold"><i class="fa fa-chevron-right text-xs text-pink"></i> Train with Kim</a>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-md-6 order-md-2">
      <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Personal Trainer 3" class="img-fluid border-white border-w-5 w-50 w-md-80 w-lg-60 rounded-circle"/>
    </div>
    <div class="col-md-6 flex-valign text-md-right">
      <h3 class="text-uppercase text-letter-spacing-xs mt-0 mb-1 text-dark font-weight-bold">
        Kurt Marler
      </h3>
      <h5 class="my-0 font-weight-normal">
        <em>CrossFit Trainer</em>
      </h5>
      <hr class="hr-primary w-70 ml-0 ml-md-auto mr-md-0 mb-3"/>
      <p>Causa dolor et immitto typicus. Gilvus minim nunc pala suscipere tation usitas volutpat. Abbas abdo meus.</p>
      <p>Amet incassum mos quidem refoveo tation usitas vicis vulpes. Abigo accumsan acsi adipiscing esca hendrerit interdico occuro suscipere torqueo.</p>
      <a href="#join" data-toggle="scroll-link" class="text-sm font-weight-bold"><i class="fa fa-chevron-right text-xs text-pink"></i> Train with Kurt</a>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-md-6 text-md-right">
      <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Personal Trainer 4" class="img-fluid border-white border-w-5 w-50 w-md-80 w-lg-60 rounded-circle"/>
    </div>
    <div class="col-md-6 flex-valign">
      <h3 class="text-uppercase text-letter-spacing-xs mt-0 mb-1 text-dark font-weight-bold">
        Lina Andrews
      </h3>
      <h5 class="my-0 font-weight-normal">
        <em>Yoga Specialist</em>
      </h5>
      <hr class="hr-primary w-70 ml-0 mb-3"/>
      <p>Abico diam scisco. Amet conventio ex ille iriure metuo olim probo. Conventio esca incassum metuo ulciscor.</p>
      <p>Abdo appellatio decet jus mauris neque plaga sino wisi ymo.</p>
      <a href="#join" data-toggle="scroll-link" class="text-sm font-weight-bold"><i class="fa fa-chevron-right text-xs text-pink"></i> Train with Lina</a>
    </div>
  </div>
</div>
		</div>
	);
}
export default App;

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

body{
    background-color:#eee;
    margin-top:20px;
}
.border-5, .border-w-5 {
    border-width: 5px !important;
}
.border-white {
    border: 1px solid transparent;
    border-color: #fff !important;
}
hr.hr-primary {
    border-top-color: #CC164D!important;
}
em {
    font-style: italic;
}
.font-weight-normal {
    font-weight: 400 !important;
}