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">
<div class="jumbotron">
<h1>Floating label css</h1>
</div>
<div class="col-md-5 col-md-offset-1">
<form role="form" id="floating-label">
<div class="form-group">
<label class="control-label">First Name</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input type="text" class="form-control"/>
</div>
</form>
</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;}
#floating-label .form-group {
display: flex;
height: 55px;
}
#floating-label .control-label {
font-size: 16px;
font-weight: 400;
opacity: 0.4;
pointer-events: none;
position: absolute;
transform: translate3d(6px, 22px, 0) scale(1);
transform-origin: left top;
transition: 240ms;
}
#floating-label .form-group.focused .control-label {
opacity: 1;
transform: scale(0.75);
}
#floating-label .form-control {
align-self: flex-end;
}
#floating-label .form-control::-webkit-input-placeholder {
color: transparent;
transition: 240ms;
}
#floating-label .form-control:focus::-webkit-input-placeholder {
transition: none;
}
#floating-label .form-group.focused .form-control::-webkit-input-placeholder {
color: #bbb;
}