React + Bootstrap
*
If you want to make a
responsive website using react js with the help of bootstrap, then use the
following command lines in your project.
*
<link rel=”stylesheet”
href=https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>
*
<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css” rel=”stylesheet”>
*
<link
href=”css/bootstrap.min.css” rel=”stylesheet”>
*
<link rel=”stylesheet”
href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
*
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js></script>
*
<script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js></script>
*
<script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js></script>
If you use online use this Link copy and paste
it on index.html
<link rel=”stylesheet” href=https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>
<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css” rel=”stylesheet”>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js></script>
<script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js></script>
If you use offline use this Link copy and paste
it on index.html.before that you must download bootstrap and jquary zip file
after copy css,fonts,js folders paste it on in your app public folder.
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Login Form using React and Bootstrap
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
//import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root')
);
class Login extends React.Component{
render(){
return(
<div class="row">
<div class="col-md-8 offset-md-2">
<form class="was-validated container">
<div class="form-group">
<h1 style={{color:"blue",textAlign:"center"}}>Login</h1>
<label class="skills"
for="subject"
style={{color:"red",textAlign:"center"}}>
User Name
</label>
<input type="text"
id="username"
class="form-control"
required
/>
</div>
<div>
<label class="skills"
for="Body"
style={{color:"red",textAlign:"center"}} >
Password</label>
<input
type="password"
id="pwd" required class="form-control" />
</div>
<br/>
<div class="form-group">
<label for="uname" style={{color:"red",textAlign:"center"}} > Phone number</label>
<input type="text" class="form-control" id="pno" name="pno" required style={{color:"red",textAlign:"center"}}/>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required/> I agree the Terms and Condition.
</label>
</div>
<input type="submit"
value="Login"
id="navigation"
class="btn
btn-primary" />
</form>
</div>
</div>
);
}
}
const element =<Login/>
root.render(element);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app
is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder
during the build.
Only files inside the `public` folder can be
referenced from the HTML.
Unlike "/favicon.ico" or
"favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a
non-root public URL.
Learn how to configure a non-root public URL by
running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this
app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see
an empty page.
You can add webfonts, meta tags, or analytics to this
file.
The build step will place the bundled scripts into the
<body> tag.
To begin the development, run `npm start` or `yarn
start`.
To create a production bundle, use `npm run build` or
`yarn build`.
-->
</body>
</html>
Output
No comments:
Post a Comment