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>
<script src="https://use.fontawesome.com/cb2d0db4c2.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<button class="btn btn-info" data-target="#exampleModal" data-toggle="modal" data-whatever="@getbootstrap" type="button">
<i aria-hidden="true" class="fa fa-angle-double-right">
</i>
Contac us
</button>
<div aria-labelledby="exampleModalLabel" class="modal fade" id="exampleModal" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" data-toggle="tooltip" title="Exit" type="button">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">
<i class="fa fa-envelope-o">
</i>
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="contact-title">
Follow us
</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 icons-container">
<ul class="text-center icon-list">
<a href="">
<li id="facebook-circle">
<span>
<i class="fa fa-facebook fa-2x" id="facebook-icon">
</i>
</span>
</li>
</a>
<a href="">
<li id="twitter-circle">
<span>
<i class="fa fa-twitter fa-2x" id="twitter-icon">
</i>
</span>
</li>
</a>
<a href="">
<li id="youtube-circle">
<span>
<i class="fa fa-youtube-play fa-2x" id="youtube-icon">
</i>
</span>
</li>
</a>
</ul>
</div>
</div>
<div class="col-sm-12 box-separator">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-6 col-sm-offset-3">
<div class="col-sm-5 line-separator">
</div>
<div class="col-sm-2 icon-separator">
</div>
<div class="col-sm-5 line-separator">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i aria-hidden="true" class="fa fa-envelope-o fa-fw">
</i>
</span>
<input class="form-control" placeholder="Email address" type="text"/>
</input>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i aria-hidden="true" class="fa fa-question fa-fw">
</i>
</span>
<input class="form-control" placeholder="Subject" type="text"/>
</input>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i aria-hidden="true" class="fa fa-pencil fa-fw">
</i>
</span>
<textarea class="form-control" rows="3"/>
</textarea>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 text-center">
<button class="btn btn-primary " id="btn-send-message" type="button">
Send message
</button>
</div>
</div>
</div>
</div>
</div>
</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 :
.contact-title{
margin-bottom: 15px !important;
}
.icons-container ul li {
display: inline-block;
width: 4.2em;
height: 4.2em;
border: 1px solid #ccc;
padding: 10px;
border-radius: 50%;
margin: 0.25em;
line-height: 3.5em;
color: #999;
transition: 1s 0s linear;
text-decoration: none;
}
.icon-list{
padding:0px;
}
#facebook-circle{
border:1px solid #3B5998;
}
#facebook-icon{
color:#3B5998;
}
#twitter-circle{
border:1px solid #42ACC4;
}
#twitter-icon{
color:#42ACC4;
}
#youtube-circle{
border:1px solid #E62117;
}
#youtube-icon{
color:#E62117;
}
#btn-send-message{
width: 100%;
}
.line-separator{
border-bottom:1px solid #CDC1C5;
}
.box-separator{
margin-top: 20px;
padding-bottom: 20px;
}
.icon-separator{
border-bottom: 2px solid orange;
}
.modal-body{
}
