Search...
graphql
react

Forms

React Bootstrap Forms

React Bootstrap 5 forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.

The Contrast React Bootstrap 5 forms have predefined form logins, form registers, form subscriptions or form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.

Creating a Contrast React Bootstrap form

To create a form with Contrast React Bootstrap 5, we use input fields. To use that in our project you have to import CDBInput.

js
import { CDBInput } from 'cdbreact';

Alongside the CDBInput component we use the CDBCard component for the form body, the CDBBtn for creating the form button and CDBLink component for navigation.

js
import { CDBInput, CDBCard, CDBBtn } from 'cdbreact';

CDBLink Component

The CDBLink component is built on react-router-dom@6. It provides a smooth user navigation experience in your web applications. To use CDBLink for navigation in your projects, first step is to wrap your App component with BrowerRouter as shown below to enable client side routing in your web projects.

js
import React from 'react';
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";


import App from './App'


ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
);

Default Form Login

Use the CDBIcon component to put icons in your form and the CDBLink for creating links in your form.

Sign in

Remember me

Forgot Password ?

Not a member? Register

or sign in with

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Sign in </p>
          </div>
          <CDBInput material hint="E-mail" type="email" />
          <CDBInput material hint="Password" type="password" />
          <div className="d-flex flex-wrap justify-content-center align-items-center">
            <CDBInput type="Checkbox" />
            <p className="m-0">Remember me</p>
            <CDBLink to="#">Forgot Password ?</CDBLink>
          </div>
          <CDBBtn color="dark" className="btn-block my-3 mx-0">
            Sign in
          </CDBBtn>
          <p className="text-center">
            Not a member?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Register
            </CDBLink>
          </p>
          <p className="text-center"> or sign in with</p>
          <div className="flex-row my-3 d-flex justify-content-center">
            <CDBBtn color="white" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="white" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="google-plus-g" />
            </CDBBtn>
          </div>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Contrast Form Login

Sign in

Remember me

Forgot Password ?

Not a member? Register

or sign in with

js
import React from 'react';
import {
  CDBInput,
  CDBCheckbox,
  CDBCard,
  CDBCardBody,
  CDBIcon,
  CDBBtn,
  CDBLink,
  CDBContainer,
} from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <div style={{ background: 'black' }} className="text-center text-white">
          <p className="h5 mt-2 py-4 font-weight-bold">Sign in</p>
        </div>
        <CDBCardBody className="mx-4">
          <CDBInput label="Email" type="email" />
          <CDBInput label="Password" type="password" />
          <div className="mt-5 d-flex flex-wrap justify-content-center align-items-center">
            <CDBCheckbox className="me-2" />
            <p className="m-0">Remember me</p>
            <CDBLink to="#">Forgot Password ?</CDBLink>
          </div>
          <CDBBtn color="dark" outline className="btn-block my-3 mx-0">
            Sign in
          </CDBBtn>
          <p className="text-center">
            Not a member?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Register
            </CDBLink>
          </p>
          <p className="text-center"> or sign in with</p>
          <div className="flex-row my-3 d-flex justify-content-center">
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="linkedin-in" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="github" />
            </CDBBtn>
          </div>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Default Form Register

Sign up

At least 8 characters and 1 digit

Optional - for two step authentication

Subscribe to our newsletter

or sign up with

Already have an account? Sign In

By clicking Sign up you agree to our terms of service

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Sign up </p>
          </div>
          <div className="form-flex-row mb-n4">
            <div className="col">
              <CDBInput material hint="First name" type="text" />
            </div>
            <div className="col">
              <CDBInput material hint="Last name" type="text" />
            </div>
          </div>
          <CDBInput material hint="E-mail" type="email" />
          <p className="text-muted text-center small mt-n4">At least 8 characters and 1 digit</p>
          <CDBInput material hint="Password" type="password" />
          <CDBInput material hint="Phone number" type="text" />
          <p className="text-muted text-center small mt-n4">
            Optional - for two step authentication
          </p>
          <div className="d-flex justify-content-center align-items-center mt-4">
            <CDBInput type="Forms" />
            <p className="m-0">Subscribe to our newsletter</p>
          </div>
          <CDBBtn color="dark" className="btn-block my-3 mx-0">
            Sign up
          </CDBBtn>
          <p className="text-center"> or sign up with</p>
          <div className="flex-row mb-3 d-flex justify-content-center">
            <CDBBtn color="white" className="m-0" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="google-plus-g" />
            </CDBBtn>
          </div>
          <p className="text-center m-0">
            Already have an account?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Sign In
            </CDBLink>
          </p>
          <hr />
          <p className="text-center">
            By clicking <em>Sign up</em> you agree to our{' '}
            <CDBLink className="d-inline p-0" to="#">
              terms of service
            </CDBLink>
          </p>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Contrast Form Register

Sign up

At least 8 characters and 1 digit

Optional - for two step authentication

Subscribe to our newsletter

or sign up with

Already have an account? Sign In

By clicking Sign up you agree to our terms of service

js
import React from 'react';
import {
  CDBInput,
  CDBCheckbox,
  CDBCard,
  CDBCardBody,
  CDBIcon,
  CDBBtn,
  CDBLink,
  CDBContainer,
} from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <div className="text-center text-white" style={{ background: 'black' }}>
          <p className="h5 mt-2 py-4 font-weight-bold"> Sign up </p>
        </div>
        <CDBCardBody className="mx-4">
          <div className="form-row mb-n4">
            <div className="col">
              <CDBInput label="First name" type="text" />
            </div>
            <div className="col">
              <CDBInput label="Last name" type="text" />
            </div>
          </div>
          <CDBInput label="E-mail" type="email" />
          <p className="text-muted text-center small mt-n4">At least 8 characters and 1 digit</p>
          <CDBInput label="Password" type="password" />
          <CDBInput label="Phone number" type="text" />
          <p className="text-muted text-center small mt-n4">
            Optional - for two step authentication
          </p>
          <div className="d-flex justify-content-center align-items-center mt-4">
            <CDBCheckbox className="me-2" />
            <p className="m-0">Subscribe to our newsletter</p>
          </div>
          <CDBBtn color="dark" outline className="btn-block my-3 mx-0">
            Sign up
          </CDBBtn>
          <p className="text-center"> or sign up with</p>
          <div className="flex-row mb-3 d-flex justify-content-center">
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="linkedin-in" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="github" />
            </CDBBtn>
          </div>
          <p className="text-center m-0">
            Already have an account?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Sign In
            </CDBLink>
          </p>
          <hr />
          <p className="text-center">
            By clicking <em>Sign up</em> you agree to our{' '}
            <CDBLink className="d-inline p-0" to="#">
              terms of service
            </CDBLink>
          </p>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Default Form Subscription

Subscribe

Join our mailing list. We write rarely, but only the best content.

See the last newsletter

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBLink, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4">Subscribe</p>
          </div>
          <p className="text-center mt-4 font-weight-light">
            Join our mailing list. We write rarely, but only the best content.
          </p>
          <CDBLink className="text-center p-0 font-weight-light" to="#">
            See the last newsletter
          </CDBLink>
          <CDBInput material hint="Name" type="text" />
          <CDBInput material hint="E-mail" type="email" />
          <CDBBtn color="dark" className="btn-block my-3 mx-0">
            Subscribe
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Contrast Form Subscription

Subscribe

Join our mailing list. We write rarely, but only the best content.

See the last newsletter

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBLink, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <div className="text-center text-white" style={{ background: 'black' }}>
          <p className="h5 mt-2 py-4 font-weight-bold">Subscribe</p>
        </div>
        <CDBCardBody className="mx-4">
          <p className="text-center mt-2">
            Join our mailing list. We write rarely, but only the best content.
          </p>
          <CDBLink className="text-center p-0" to="#">
            See the last newsletter
          </CDBLink>
          <CDBInput label="Name" type="text" />
          <CDBInput label="E-mail" type="email" />
          <CDBBtn color="dark" outline className="btn-block my-3 mx-0">
            Subscribe
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Default Form Contact

Contact us

Subject

Send me a copy of this message

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBSelect, CDBContainer } from 'cdbreact';


const Forms = () => {
  const option = [
    {
      text: 'Feature request',
      value: '1',
    },
    {
      text: 'Report a bug',
      value: '2',
    },
    {
      text: 'Help',
      value: '3',
      icon: 'question-circle',
    },
  ];
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Contact us </p>
          </div>
          <CDBInput material hint="Name" type="text" />
          <CDBInput material hint="E-mail" type="email" />
          <p className="text-center m-0">Subject</p>
          <CDBSelect options={option} selected="Feedback" />
          <CDBInput hint="Message" type="textarea" />
          <div className="d-flex justify-content-center align-items-center mt-4">
            <CDBInput material type="Checkbox" />
            <p className="m-0">Send me a copy of this message</p>
          </div>
          <CDBBtn color="dark" className="btn-block my-3 mx-0">
            Send
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Contrast Form Contact

Contact Us

Subject

Send me a copy of this message

js
import React from 'react';
import { CDBInput, CDBSelect2, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  const option = [
    {
      text: 'Feature request',
      value: '1',
    },
    {
      text: 'Report a bug',
      value: '2',
    },
    {
      text: 'Help',
      value: '3',
      icon: 'question-circle',
    },
  ];
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <div style={{ background: 'black' }} className="text-center text-white">
          <p className="h5 mt-2 py-4 font-weight-bold">Contact Us</p>
        </div>
        <CDBCardBody className="mx-4">
          <CDBInput label="Name" type="text" />
          <CDBInput label="E-mail" type="email" />
          <p className="text-center m-0 text-muted">Subject</p>
          <CDBSelect2 color="white" options={option} selected="Feedback" />
          <CDBInput label="Message" type="textarea" />
          <div className="d-flex justify-content-center align-items-center mt-4">
            <CDBInput type="Checkbox" />
            <p className="m-0">Send me a copy of this message</p>
          </div>
          <CDBBtn color="dark" outline className="btn-block my-3 mx-0">
            Send
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Login Form with Icons

Sign in

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4 font-weight-bold"> Sign in </p>
          </div>
          <CDBInput label="E-mail" type="email" icon="envelope" iconClass="text-muted" />
          <CDBInput label="Password" type="password" icon="lock" iconClass="text-muted" />
          <CDBBtn color="success" style={{ width: '40%' }} className="btn-block mt-5 mx-auto">
            Login
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Login Form with Outside Label

Sign in

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-4">
            <p className="h4"> Sign in </p>
          </div>
          <label htmlFor="defaultLoginEmail" className="text-muted m-0">
            Your email
          </label>
          <CDBInput id="defaultLoginEmail" className="mt-n3" type="email" />
          <label htmlFor="defaultLoginPassword" className="text-muted m-0">
            Your password
          </label>
          <CDBInput id="defaultLoginPassword" className="mt-n3" type="password" />
          <CDBBtn color="primary" style={{ width: '40%' }} className="btn-block mt-5 mx-auto">
            Login
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Sign Up Form with Icon

Sign in

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4 font-weight-bold"> Sign up </p>
          </div>
          <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted" />
          <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted" />
          <CDBInput
            label="Confirm your email"
            type="email"
            icon="exclamation-triangle"
            iconClass="text-muted"
          />
          <CDBInput label="Your Password" type="password" icon="lock" iconClass="text-muted" />
          <CDBBtn color="primary" style={{ width: '40%' }} className="btn-block mt-5 mx-auto">
            Register
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Sign Up Form Outside Label

Sign in

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Sign up </p>
          </div>
          <label htmlFor="defaultRegisterName" className="text-muted m-0">
            Your name
          </label>
          <CDBInput id="defaultRegisterName" className="mt-n3" type="text" />
          <label htmlFor="defaultRegisterEmail" className="text-muted m-0">
            Your email
          </label>
          <CDBInput id="defaultRegisterEmail" className="mt-n3" type="email" />
          <label htmlFor="defaultRegisterEmailConfirm" className="text-muted m-0">
            Confirm your email
          </label>
          <CDBInput id="defaultRegisterEmailConfirm" className="mt-n3" type="email" />
          <label htmlFor="defaultRegisterPassword" className="text-muted m-0">
            Your password
          </label>
          <CDBInput id="defaultRegisterPassword" className="mt-n3" type="password" />
          <CDBBtn color="danger" style={{ width: '40%' }} className="btn-block mt-5 mx-auto">
            Register
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Subscription Form with Icon

Subscribe

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4 font-weight-bold"> Subscribe </p>
          </div>
          <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted" />
          <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted" />
          <CDBBtn
            outline
            color="primary"
            style={{ width: '40%' }}
            className="btn-block mt-5 mx-auto"
          >
            Send
            <CDBIcon far icon="paper-plane" />
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Subscription Form with Outside Label

Subscribe

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Subscribe </p>
          </div>
          <label htmlFor="defaultSubscribeName" className="text-muted m-0">
            Your name
          </label>
          <CDBInput id="defaultSubscribeName" className="mt-n3" type="text" />
          <label htmlFor="defaultSubscribeEmail" className="text-muted m-0">
            Your email
          </label>
          <CDBInput id="defaultSubscribeEmail" className="mt-n3" type="email" />
          <CDBBtn
            outline
            color="danger"
            style={{ width: '40%' }}
            className="btn-block mt-5 mx-auto"
          >
            Send
            <CDBIcon far icon="paper-plane" />
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Contact Form with Icon

Write to us

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4 font-weight-bold"> Write to Us </p>
          </div>
          <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted" />
          <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted" />
          <CDBInput label="Subject" type="text" icon="tags" iconClass="text-muted" />
          <CDBInput label="Your message" type="textarea" icon="pencil-alt" iconClass="text-muted" />
          <CDBBtn
            outline
            color="secondary"
            style={{ width: '40%' }}
            className="btn-block mt-5 mx-auto"
          >
            Send
            <CDBIcon far icon="paper-plane" />
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Contact Form without Icon

Write to us

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-4">
            <p className="h4"> Write to Us </p>
          </div>
          <label htmlFor="defaultContactName" className="text-muted m-0">
            Your name
          </label>
          <CDBInput id="defaultContactName" className="mt-n3" type="text" />
          <label htmlFor="defaultContactEmail" className="text-muted m-0">
            Your email
          </label>
          <CDBInput id="defaultContactEmail" className="mt-n3" type="email" />
          <label htmlFor="defaultContactSubject" className="text-muted m-0">
            Subject
          </label>
          <CDBInput id="defaultContactSubject" className="mt-n3" type="text" />
          <label htmlFor="defaultContactMessage" className="text-muted m-0">
            Your message
          </label>
          <CDBInput id="defaultContactMessage" className="mt-n3" type="textarea" />
          <CDBBtn
            outline
            color="secondary"
            style={{ width: '40%' }}
            className="btn-block mt-5 mx-auto"
          >
            Send
            <CDBIcon far icon="paper-plane" />
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Form Login

Sign in

Forgot Password ?

or sign in with

Not a member? Sign up

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4 font-weight-bold"> Sign in </p>
          </div>
          <CDBInput label="E-mail" type="email" />
          <CDBInput label="Password" type="password" />
          <p className="mt-n3 text-end ">
            <CDBLink className="p-0" to="#">
              Forgot Password ?
            </CDBLink>
          </p>
          <CDBBtn color="dark" className="btn-block my-4 mx-0">
            Sign in
          </CDBBtn>
          <p className="text-center"> or sign in with</p>
          <div className="flex-row my-3 d-flex justify-content-center">
            <CDBBtn color="white" className="m-0">
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0">
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0">
              <CDBIcon fab icon="google-plus-g" />
            </CDBBtn>
          </div>
          <hr />
          <p className="text-center">
            Not a member?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Sign up
            </CDBLink>
          </p>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Sign Up

Sign up

Accept the terms and conditions

Have an account? Log in

or sign up with

js
import React from 'react';
import {
  CDBInput,
  CDBCard,
  CDBCheckbox,
  CDBCardBody,
  CDBLink,
  CDBIcon,
  CDBBtn,
  CDBContainer,
} from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Sign up </p>
          </div>
          <CDBInput label="E-mail" type="email" />
          <CDBInput label="Password" type="password" />
          <div className="d-flex align-items-center">
            <CDBCheckbox className="me-2" />
            <p className="mb-0 ms-2">
              Accept the{' '}
              <CDBLink className="d-inline p-0" to="#">
                terms and conditions
              </CDBLink>
            </p>
          </div>
          <div className="d-flex mt-4 align-items-center">
            <CDBBtn
              color="none"
              style={{
                width: '30%',
                background:
                  'linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)',
              }}
              className="btn-block mx-0"
            >
              Sign up
            </CDBBtn>
            <p className="ms-auto mb-0">
              Have an account?{' '}
              <CDBLink className="d-inline p-0" to="#">
                Log in
              </CDBLink>
            </p>
          </div>
        </CDBCardBody>
        <div
          className="pt-4"
          style={{
            background: 'linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)',
          }}
        >
          <p className="text-center m-0"> or sign up with</p>
          <div className="flex-row mb-3 d-flex justify-content-center">
            <CDBBtn color="none" className="m-0">
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="none" className="m-0">
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="none" className="m-0">
              <CDBIcon fab icon="google-plus-g" />
            </CDBBtn>
          </div>
        </div>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Login Form

Login

Forgot Password ?

Don't have an account? Sign Up

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBLink, CDBIcon, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <div
          style={{
            background: 'linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)',
          }}
          className="text-center"
        >
          <p className="h5 mt-2 mt-5 mb-2 font-weight-bold">Login</p>
          <div className="flex-row mb-3 d-flex justify-content-center">
            <CDBBtn color="none" className="m-0" flat>
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="none" className="m-0" flat>
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="none" className="m-0" flat>
              <CDBIcon fab icon="linkedin-in" />
            </CDBBtn>
            <CDBBtn color="none" className="m-0" flat>
              <CDBIcon fab icon="github" />
            </CDBBtn>
          </div>
        </div>
        <CDBCardBody className="mx-4">
          <CDBInput label="E-mail" type="email" />
          <CDBInput label="Password" type="password" />
          <p className="text-end ">
            Forgot{' '}
            <CDBLink className="d-inline p-0 ms-auto" to="#">
              Password ?
            </CDBLink>
          </p>
          <CDBBtn
            color="none"
            style={{
              width: '40%',
              background: 'linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)',
            }}
            className="btn-block my-3 mx-0 font-weight-bold"
          >
            Login
          </CDBBtn>
          <p className=" text-end  mt-4">
            Don't have an account?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Sign Up
            </CDBLink>
          </p>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Sign Up with Background Image

Sign up

Accept the terms and conditions

Have an account? Log in

js
import React from 'react';
import {
  CDBInput,
  CDBCard,
  CDBCardBody,
  CDBLink,
  CDBMask,
  CDBCheckbox,
  CDBBtn,
  CDBContainer,
} from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard
        style={{
          width: '30rem',
          background:
            'url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJh)',
          backgroundSize: 'cover',
        }}
      >
        <CDBMask overlay="darkStrong" className="flex-center" />
        <CDBCardBody className="mx-4" style={{ zIndex: '2' }}>
          <div className="text-center mt-5 mb-2">
            <p className="h4 font-weight-bold text-white"> Sign up </p>
          </div>
          <CDBInput material label="E-mail" type="email" />
          <CDBInput material label="Password" type="password" />
          <div className="d-flex mt-3 align-items-center justify-content-center">
            <CDBCheckbox />
            <p className="text-white mb-0 ms-2">
              Accept the{' '}
              <CDBLink className="d-inline p-0" to="#">
                terms and conditions
              </CDBLink>
            </p>
          </div>
          <CDBBtn color="primary" className="btn-block mx-0 my-4">
            Sign up
          </CDBBtn>
          <p className="text-white text-center mb-5">
            Have an account?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Log in
            </CDBLink>
          </p>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

API Reference: Contrast React Bootstrap 5 Input Props

This section will build on your information about the props you get to use with the Contrast React Bootstrap Input component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBInput component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBInput className="myClass" ... />
tagStringdivChanges default input tag<CDBInput tag="input" ... />
containerClassStringAdds custom class to wrapping div<CDBInput containerClass="wrapper" ... />
errorStringSets the error message for the labels data-error attribute<CDBInput error="Ouch!" ... />
hintStringSets the placeholder for the Input<CDBInput hint="Placeholder" ... />
valueNumber, Boolean or StringThe value of the input element (use with the controlled input)<CDBInput value="I am controlled" onChange={this.handleChange} ... />
materialBooleanfalseChanges component styles for material theme<CDBInput material .../>
valueDefaultNumber or StringThe default value of the input (use with the uncontrolled input)<CDBInput valueDefault="I am uncontrolled" ... />
idStringRequired! Set the id of the input element<CDBInput id="myId" ... />
labelStringAdd label to the component; you can attach jsx elements (f.e. links)<CDBInput label="My custom input" ... />
labelClassStringAdd custom class to label<CDBInput labelClass="My custom label class" ... />
labelIdStringSets custom id to label<CDBInput labelId="myId" ... />
sizeStringlgChanges size of the component; available lg and sm<CDBInput size="lg" ... />
successStringSets the success message for the labels data-success attribute<CDBInput success="Great!" ... />
typeStringtextThe type of the input element<CDBInput type="checkbox" ... />
inputRefObject or functionAllows to attach React Ref to the input component; accepts only Callback Ref<CDBInput inputRef={ref => this.myRef = ref } .../>
iconStringAdds font awesome icon<CDBInput icon="caret-right" ... />
iconBrandStringUse this property to set brand icon (fab)<CDBInput icon="twitter" iconBrand ... />
iconLightStringUse this property to set light icon (fal)<CDBInput icon="twitter" iconLight ... />
iconRegularStringUse this property to set regular icon (far)<CDBInput icon="twitter" iconRegular ... />
iconClassStringAdds custom classes to icon element<CDBInput icon="caret-right" iconClass="my-class" ... />
disableBooleanfalseDisables Input component<CDBInput disabled .../>
groupBooleanfalseAdd .form-group class to the wrapping div<CDBInput error .../>
filledBooleanfalseAdd filled-in style to checkbox/radio button<CDBInput type="checkbox" filled .../>
validateBooleanfalseAdds .validate class to the Input component<CDBInput validate .../>
gapBooleanfalseCreates gap inside checkbox/radio button<CDBInput type="checkbox" gap .../>

API Reference: Contrast React Bootstrap 5 Card Props

The table below lists other prop options of the CDBCard component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCard className="myClass" ... />
tagStringdivChanges default input tag<CDBCard tag="div" ... />
colorStringSets background color<CDBCard color="dark" .../>
borderBooleanfalseGives border<CDBCard border .../>

API Reference: Contrast React Bootstrap 5 Card Body Props

The table below lists other prop options of the CDBCardBody component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCardBody className="myClass" ... />
tagfunction or StringdivChanges default html tag<CDBCardBody tag="div" ... />
cascadeBooleanfalseSwitches the CardBody to cascade style mode<CDBCardBody cascade .../>

API Reference: Contrast React Bootstrap 5 Card Image Props

The table below lists other prop options of the CDBCardImage component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBCardImage className="myClass" ... />
tagfunction or StringimgChanges default html tag<CDBCardImage tag="div" ... />
cascadeBooleanfalseSwitches the CardBody to cascade style mode<CDBCardImage cascade .../>
hoverBooleanfalseSwitches on hover behaviour<CDBCardImage hover .../>
overlayStringwhite-lightSets the color of hover overlay<CDBCardImage overlay="white-light" ... />
srcStringSource of the image<CDBCardImage src="image_src" ... />
topBooleanfalseMakes image fluid<CDBCardImage top .../>

API Reference: Contrast React Bootstrap 5 Card Text Props

The table below lists other prop options of the CDBCardText component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCardText className="myClass" ... />
tagfunction or StringpChanges default html tag<CDBCardText tag="p" ... />
mutedBooleanfalseMutes the text color<CDBCardText muted .../>
smallBooleanfalseUses html small as component's tag<CDBCardText small .../>

API Reference: Contrast React Bootstrap 5 Card Title Props

The table below lists other prop options of the CDBCardTitle component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCardTitle className="myClass" ... />
tagfunction or Stringh4Changes default html tag<CDBCardTitle tag="h1" ... />
subBooleanfalseStyles title as subtitle<CDBCardTitle sub .../>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Previous
Components
Next
Navigation