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 start2. 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 again3. 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 bootstrap snippets bootdey">
<div class="row">
<h1>Bootstrap 3 Lightbox using Modal</h1>
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/6495ED/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/5F9EA0/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/DC143C/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/FF7F50/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/008B8B/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/00FFFF/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/FF1493/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 9" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/9400D3/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 10" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/FF69B4/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 11" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/ADD8E6/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 12" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/E6E6FA/000000"/></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 13" href="#/"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/B0C4DE/000000"/></a></div>
</div>
<hr/>
</div>
</div>
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modalCarousel" class="carousel">
<div class="carousel-inner"></div>
<a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</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{margin-top:20px;}
.modal-dialog {}
.thumbnail {margin-bottom:6px;}
.carousel-control.left,.carousel-control.right{
background-image:none;
margin-top:10%;
width:5%;
} 
