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.
Basic example
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;
How to use?
-
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
More examples
Login - register:
Login - register:
Login Template:
Sign in form:
You can find other examples here.
More extended React documentation
- React Bootstrap Code
- React Bootstrap Gallery
- React Bootstrap Hamburger Menu
- React Bootstrap Jumbotron
- React Bootstrap Maps
- React Bootstrap Mega Menu
- React Bootstrap Media object
- React Bootstrap Multiselect
- React Bootstrap Masonry
- React Bootstrap Contact form
- React Bootstrap Gradients
- React Bootstrap Pagination
- React Bootstrap Panels
- React Bootstrap Social Media icons & buttons
- React Bootstrap Search
- React Bootstrap Table sort
- React Bootstrap Table responsive
- React Bootstrap Table scroll
- React Bootstrap Table search
- React Bootstrap Textarea