Responsive login form built with Bootstrap 5. Collection of examples for signup forms, full page login templates, login modals & many other sign in designs.
OTHER License
Responsive React Login form built with Bootstrap 5. Collection of examples for signup forms, full page login templates, login modals & many other sign in designs.
Check out React Login Form Documentation for detailed instructions & even more examples.
import React from 'react';
import {
MDBContainer,
MDBInput,
MDBCheckbox,
MDBBtn,
MDBIcon
}
from 'mdb-react-ui-kit';
function App() {
return (
<MDBContainer className="p-3 my-5 d-flex flex-column w-50">
<MDBInput wrapperClass='mb-4' label='Email address' id='form1' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'/>
<div className="d-flex justify-content-between mx-3 mb-4">
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
<a href="!#">Forgot password?</a>
</div>
<MDBBtn className="mb-4">Sign in</MDBBtn>
<div className="text-center">
<p>Not a member? <a href="#!">Register</a></p>
<p>or sign up with:</p>
<div className='d-flex justify-content-between mx-auto' style={{width: '40%'}}>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='facebook-f' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='twitter' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='google' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='github' size="sm"/>
</MDBBtn>
</div>
</div>
</MDBContainer>
);
}
export default App;
Download MDB 5 - free REACT UI KIT
Choose your favourite customized component and click on the image
Copy & paste the code into your MDB project
▶️ Subscribe to YouTube channel for web development tutorials & resources
You can find other examples here.