How to make a responsive website using React JS and bootstrap.How to make a single-page website in REACT JS.How to Make a Responsive Website in REACT JS
React is an open-source, front-end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
Download code here: Download React Project
YouTube Tutorial link of the Project :
You must install some package such as Bootstrap and font awesome ( npm install bootstrap )
First, make Component folders inside react folder project ( Make Three files: Content.js, Header.js, Footer.js )
Copy this below code in the Header.js file
Header.js
import React from 'react';
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function Header() {
return (
<section class="navbar-dark bg-dark header">
<div class="container">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand text-white" href="#">Gammy Tours</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link " href="#about">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#destinations">Destinations<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#places">Places<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="#tourist">Tourists Detail<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</section>
);
}
export default Header;
Now We will make another file Content.js ( It will have the main content of the project )
Content.js
// Code Starts Here
import React from 'react';
function Content() {
return (
<div>
<section class="">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="Images/banner-1.jpg" alt="First slide" style={{height:"auto"}}/>
</div>
<div class="carousel-item">
<img class="d-block w-100 " src="Images/banner-1.jpg" alt="Second slide" style={{height:"auto"}}/>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Images/banner-1.jpg" alt="Third slide" style={{height:"auto"}}/>
</div>
</div>
</div>
</section>
<section class="bg-light" id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<h3 class="text-center mt-4 text-secondary">Know about us</h3>
</div>
</div>
<div class="row">
<p class="mt-4 mb-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
</section>
<section class="" id="destinations">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<h3 class="text-center mt-4 text-secondary">Favourite Destinations</h3>
</div>
</div>
<div class="row">
<div class="col-sm-4 mb-5">
<div class="card mt-4">
<img class="card-img-top" src="Images/ig-3.jpg" alt=""/>
<div class="card-body">
<h4 class="card-title text-secondary">Japan</h4>
<p class="card-text text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque sequi doloribus.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-sm-4 mb-5">
<div class="card mt-4">
<img class="card-img-top" src="Images/t-2.jpg" alt=""/>
<div class="card-body">
<h4 class="card-title text-secondary">Tokyo</h4>
<p class="card-text text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque sequi doloribus.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-sm-4 mb-5">
<div class="card mt-4">
<img class="card-img-top" src="Images/t-1.jpg" alt=""/>
<div class="card-body">
<h4 class="card-title text-secondary">India</h4>
<p class="card-text text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque sequi doloribus.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="" id="places">
<div class="container">
<div class="col-sm-12 col-md-12 mb-4">
<h3 class="text-center text-secondary mt-4">Places and Description</h3>
</div>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Tourist Places
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Best Destination
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Best Heritages
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-light mt-5" id="tourist">
<div class="container">
<div class="row text-center">
<div class="col-sm-12 col-md-12 mb-4">
<h3 class="text-center mt-4 text-secondary">Tourist Opinions</h3>
</div>
<div class="col-md-4">
<div class="testimonial mb-5">
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid"/>
</div>
<h4 class="font-weight-bold dark-grey-text mt-4">Anna Deynah</h4>
<h6 class="font-weight-bold blue-text my-3">Tourist</h6>
<p class="font-weight-normal dark-grey-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.</p>
</div>
</div>
<div class="col-md-4">
<div class="testimonial mb-5">
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg" class="rounded-circle z-depth-1 img-fluid"/>
</div>
<h4 class="font-weight-bold dark-grey-text mt-4">John Doe</h4>
<h6 class="font-weight-bold blue-text my-3">Tourist</h6>
<p class="font-weight-normal dark-grey-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid commodi.</p>
</div>
</div>
<div class="col-md-4">
<div class="testimonial mb-5">
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid"/>
</div>
<h4 class="font-weight-bold dark-grey-text mt-4">Maria Kate</h4>
<h6 class="font-weight-bold blue-text my-3">Toursit</h6>
<p class="font-weight-normal dark-grey-text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti.</p>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
export default Content;
Now, I Will make a footer page with the name Footer.js
Footer.js
// Code starts here
import React from 'react';
function Footer()
{
return(
<section class="bg-dark">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h6 class="text-white text-center mb-3 mt-3">Copyright @ Loreal Ipsom Rights Reserved</h6>
</div>
</div>
</div>
</section>
)
}
export default Footer;
// Code ends here
Now, We will call these pages in App.js page
App.js
// Code start here
import React from 'react';
import Header from './Components/Header';
import Content from './Components/Content';
import Footer from './Components/Footer';
function App() {
return (
<React.Fragment>
<Header />
<Content />
<Footer />
</React.Fragment>
);
}
export default App;
// Code ends here
Please run this project in URL http://Localhost:3000
Please Read More Tutorials