Rate this docs

React Bootstrap Forms Examples

React Forms - Bootstrap 4 & Material Design

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

Bootstrap forms in Material Design are simple and eye-pleasant. While creating MDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.

Such constructions like 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.

You can use material design version or default bootstrap style.


Login Form

Sign in


              import React from "react";
              import { MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn } from 'mdbreact';

              const FormPage = () => {
                return (
                  <MDBContainer>
                    <MDBRow>
                      <MDBCol md="6">
                        <form>
                          <p className="h5 text-center mb-4">Sign in</p>
                          <div className="grey-text">
                            <MDBInput
                              label="Type your email"
                              icon="envelope"
                              group
                              type="email"
                              validate
                              error="wrong"
                              success="right"
                            />
                            <MDBInput
                              label="Type your password"
                              icon="lock"
                              group
                              type="password"
                              validate
                            />
                          </div>
                          <div className="text-center">
                            <MDBBtn>Login</MDBBtn>
                          </div>
                        </form>
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                );
              };

              export default FormPage;
          

Sign in



              import React from "react";
              import { MDBContainer, MDBRow, MDBCol, MDBBtn } from 'mdbreact';

              const FormPage = () => {
                return (
                  <MDBContainer>
                    <MDBRow>
                      <MDBCol md="6">
                        <form>
                          <p className="h4 text-center mb-4">Sign in</p>
                          <label htmlFor="defaultFormLoginEmailEx" className="grey-text">
                            Your email
                          </label>
                          <input
                            type="email"
                            id="defaultFormLoginEmailEx"
                            className="form-control"
                          />
                          <br />
                          <label htmlFor="defaultFormLoginPasswordEx" className="grey-text">
                            Your password
                          </label>
                          <input
                            type="password"
                            id="defaultFormLoginPasswordEx"
                            className="form-control"
                          />
                          <div className="text-center mt-4">
                            <MDBBtn color="indigo" type="submit">Login</MDBBtn>
                          </div>
                        </form>
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                );
              };

              export default FormPage;
          

Form register

Sign up


                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBInput } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h5 text-center mb-4">Sign up</p>
                            <div className="grey-text">
                              <MDBInput
                                label="Your name"
                                icon="user"
                                group
                                type="text"
                                validate
                                error="wrong"
                                success="right"
                              />
                              <MDBInput
                                label="Your email"
                                icon="envelope"
                                group
                                type="email"
                                validate
                                error="wrong"
                                success="right"
                              />
                              <MDBInput
                                label="Confirm your email"
                                icon="exclamation-triangle"
                                group
                                type="text"
                                validate
                                error="wrong"
                                success="right"
                              />
                              <MDBInput
                                label="Your password"
                                icon="lock"
                                group
                                type="password"
                                validate
                              />
                            </div>
                            <div className="text-center">
                              <MDBBtn color="primary">Register</MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

Sign up






                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h4 text-center mb-4">Sign up</p>
                            <label htmlFor="defaultFormRegisterNameEx" className="grey-text">
                              Your name
                            </label>
                            <input
                              type="text"
                              id="defaultFormRegisterNameEx"
                              className="form-control"
                            />
                            <br />
                            <label htmlFor="defaultFormRegisterEmailEx" className="grey-text">
                              Your email
                            </label>
                            <input
                              type="email"
                              id="defaultFormRegisterEmailEx"
                              className="form-control"
                            />
                            <br />
                            <label
                              htmlFor="defaultFormRegisterConfirmEx"
                              className="grey-text"
                            >
                              Confirm your email
                            </label>
                            <input
                              type="email"
                              id="defaultFormRegisterConfirmEx"
                              className="form-control"
                            />
                            <br />
                            <label
                              htmlFor="defaultFormRegisterPasswordEx"
                              className="grey-text"
                            >
                              Your password
                            </label>
                            <input
                              type="password"
                              id="defaultFormRegisterPasswordEx"
                              className="form-control"
                            />
                            <div className="text-center mt-4">
                              <MDBBtn color="unique" type="submit">
                                Register
                              </MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

Form subscription

Subscribe


                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon, MDBInput } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h5 text-center mb-4">Subscribe</p>
                            <div className="grey-text">
                              <MDBInput
                                label="Your name"
                                icon="user"
                                group
                                type="text"
                                validate
                                error="wrong"
                                success="right"
                              />
                              <MDBInput
                                label="Your email"
                                icon="envelope"
                                group
                                type="email"
                                validate
                                error="wrong"
                                success="right"
                              />
                            </div>
                            <div className="text-center">
                              <MDBBtn outline color="info">
                                Send <MDBIcon icon="paper-plane-o" className="ml-1" />
                              </MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;


            

Subscribe




                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h4 text-center py-4">Subscribe</p>
                            <label
                              htmlFor="defaultFormCardNameEx"
                              className="grey-text font-weight-light"
                            >
                              Your name
                            </label>
                            <input
                              type="text"
                              id="defaultFormCardNameEx"
                              className="form-control"
                            />
                            <br />
                            <label
                              htmlFor="defaultFormCardEmailEx"
                              className="grey-text font-weight-light"
                            >
                              Your email
                            </label>
                            <input
                              type="email"
                              id="defaultFormCardEmailEx"
                              className="form-control"
                            />
                            <div className="text-center py-4 mt-3">
                              <MDBBtn className="btn btn-outline-purple" type="submit">
                                Send
                                <MDBIcon icon="paper-plane-o" className="ml-2" />
                              </MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;

            

Form contact

Wite to us


                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon, MDBInput } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h5 text-center mb-4">Write to us</p>
                            <div className="grey-text">
                              <MDBInput
                                label="Your name"
                                icon="user"
                                group
                                type="text"
                                validate
                                error="wrong"
                                success="right"
                              />
                              <MDBInput
                                label="Your email"
                                icon="envelope"
                                group
                                type="email"
                                validate
                                error="wrong"
                                success="right"
                              />
                              <MDBInput
                                label="Subject"
                                icon="tag"
                                group
                                type="text"
                                validate
                                error="wrong"
                                success="right"
                              />
                              <MDBInput
                                type="textarea"
                                rows="2"
                                label="Your message"
                                icon="pencil"
                              />
                            </div>
                            <div className="text-center">
                              <MDBBtn outline color="secondary">
                                Send <MDBIcon icon="paper-plane-o" className="ml-1" />
                              </MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;

            

Write to us





                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h4 text-center mb-4">Write to us</p>
                            <label htmlFor="defaultFormContactNameEx" className="grey-text">
                              Your name
                            </label>
                            <input
                              type="text"
                              id="defaultFormContactNameEx"
                              className="form-control"
                            />
                            <br />
                            <label htmlFor="defaultFormContactEmailEx" className="grey-text">
                              Your email
                            </label>
                            <input
                              type="email"
                              id="defaultFormContactEmailEx"
                              className="form-control"
                            />
                            <br />
                            <label
                              htmlFor="defaultFormContactSubjectEx"
                              className="grey-text"
                            >
                              Subject
                            </label>
                            <input
                              type="text"
                              id="defaultFormContactSubjectEx"
                              className="form-control"
                            />
                            <br />
                            <label
                              htmlFor="defaultFormContactMessageEx"
                              className="grey-text"
                            >
                              Your message
                            </label>
                            <textarea
                              type="text"
                              id="defaultFormContactMessageEx"
                              className="form-control"
                              rows="3"
                            />
                            <div className="text-center mt-4">
                              <MDBBtn color="warning" outline type="submit">
                                Send
                                <MDBIcon icon="paper-plane-o" className="ml-2" />
                              </MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;

            

A form within a card

Sign up


                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn, MDBCard, MDBCardBody } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <MDBCard>
                            <MDBCardBody>
                              <form>
                                <p className="h4 text-center py-4">Sign up</p>
                                <div className="grey-text">
                                  <MDBInput
                                    label="Your name"
                                    icon="user"
                                    group
                                    type="text"
                                    validate
                                    error="wrong"
                                    success="right"
                                  />
                                  <MDBInput
                                    label="Your email"
                                    icon="envelope"
                                    group
                                    type="email"
                                    validate
                                    error="wrong"
                                    success="right"
                                  />
                                  <MDBInput
                                    label="Confirm your email"
                                    icon="exclamation-triangle"
                                    group
                                    type="text"
                                    validate
                                    error="wrong"
                                    success="right"
                                  />
                                  <MDBInput
                                    label="Your password"
                                    icon="lock"
                                    group
                                    type="password"
                                    validate
                                  />
                                </div>
                                <div className="text-center py-4 mt-3">
                                  <MDBBtn color="cyan" type="submit">
                                    Register
                                  </MDBBtn>
                                </div>
                              </form>
                            </MDBCardBody>
                          </MDBCard>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

Subscribe




                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBCard, MDBCardBody, MDBIcon } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <MDBCard>
                            <MDBCardBody>
                              <form>
                                <p className="h4 text-center py-4">Subscribe</p>
                                <label
                                  htmlFor="defaultFormCardNameEx"
                                  className="grey-text font-weight-light"
                                >
                                  Your name
                                </label>
                                <input
                                  type="text"
                                  id="defaultFormCardNameEx"
                                  className="form-control"
                                />
                                <br />
                                <label
                                  htmlFor="defaultFormCardEmailEx"
                                  className="grey-text font-weight-light"
                                >
                                  Your email
                                </label>
                                <input
                                  type="email"
                                  id="defaultFormCardEmailEx"
                                  className="form-control"
                                />
                                <div className="text-center py-4 mt-3">
                                  <MDBBtn className="btn btn-outline-purple" type="submit">
                                    Send
                                    <MDBIcon icon="paper-plane-o" className="ml-2" />
                                  </MDBBtn>
                                </div>
                              </form>
                            </MDBCardBody>
                          </MDBCard>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

A gradient login form

Login:


                import React from "react";
                import {
                  MDBContainer,
                  MDBRow,
                  MDBCol,
                  MDBCard,
                  MDBCardBody,
                  MDBModalFooter,
                  MDBIcon,
                  MDBCardHeader,
                  MDBBtn,
                  MDBInput
                } from "mdbreact";

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <MDBCard>
                            <MDBCardBody>
                              <MDBCardHeader className="form-header deep-blue-gradient rounded">
                                <h3 className="my-3">
                                  <MDBIcon icon="lock" /> Login:
                                </h3>
                              </MDBCardHeader>
                              <form>
                                <div className="grey-text">
                                  <MDBInput
                                    label="Type your email"
                                    icon="envelope"
                                    group
                                    type="email"
                                    validate
                                    error="wrong"
                                    success="right"
                                  />
                                  <MDBInput
                                    label="Type your password"
                                    icon="lock"
                                    group
                                    type="password"
                                    validate
                                  />
                                </div>

                              <div className="text-center mt-4">
                                <MDBBtn
                                  color="light-blue"
                                  className="mb-3"
                                  type="submit"
                                >
                                  Login
                                </MDBBtn>
                              </div>
                              </form>
                              <MDBModalFooter>
                                <div className="font-weight-light">
                                  <p>Not a member? Sign Up</p>
                                  <p>Forgot Password?</p>
                                </div>
                              </MDBModalFooter>
                            </MDBCardBody>
                          </MDBCard>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

Login:



                import React from "react";
                import {
                  MDBContainer,
                  MDBRow,
                  MDBCol,
                  MDBCard,
                  MDBCardBody,
                  MDBModalFooter,
                  MDBIcon,
                  MDBCardHeader,
                  MDBBtn
                } from "mdbreact";

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <MDBCard>
                            <MDBCardBody>
                              <MDBCardHeader className="form-header warm-flame-gradient rounded">
                                <h3 className="my-3">
                                  <MDBIcon icon="lock" /> Login:
                                </h3>
                              </MDBCardHeader>
                              <label
                                htmlFor="defaultFormEmailEx"
                                className="grey-text font-weight-light"
                              >
                                Your email
                              </label>
                              <input
                                type="email"
                                id="defaultFormEmailEx"
                                className="form-control"
                              />

                              <label
                                htmlFor="defaultFormPasswordEx"
                                className="grey-text font-weight-light"
                              >
                                Your password
                              </label>
                              <input
                                type="password"
                                id="defaultFormPasswordEx"
                                className="form-control"
                              />

                              <div className="text-center mt-4">
                                <MDBBtn color="deep-orange" className="mb-3" type="submit">
                                  Login
                                </MDBBtn>
                              </div>

                              <MDBModalFooter>
                                <div className="font-weight-light">
                                  <p>Not a member? Sign Up</p>
                                  <p>Forgot Password?</p>
                                </div>
                              </MDBModalFooter>
                            </MDBCardBody>
                          </MDBCard>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

Form elegant MDB Pro component

Sign in

Forgot Password?

or Sign in with:


            import React from "react";
            import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardBody, MDBInput, MDBBtn, MDBIcon, MDBModalFooter } from 'mdbreact';

            const FormPage = () => {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBCard>
                        <MDBCardBody className="mx-4">
                          <div className="text-center">
                            <h3 className="dark-grey-text mb-5">
                              <strong>Sign in</strong>
                            </h3>
                          </div>
                          <MDBInput
                            label="Your email"
                            group
                            type="email"
                            validate
                            error="wrong"
                            success="right"
                          />
                          <MDBInput
                            label="Your password"
                            group
                            type="password"
                            validate
                            containerClass="mb-0"
                          />
                          <p className="font-small blue-text d-flex justify-content-end pb-3">
                            Forgot
                            <a href="#!" className="blue-text ml-1">

                              Password?
                            </a>
                          </p>
                          <div className="text-center mb-3">
                            <MDBBtn
                              type="button"
                              gradient="blue"
                              rounded
                              className="btn-block z-depth-1a"
                            >
                              Sign in
                            </MDBBtn>
                          </div>
                          <p className="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2">

                            or Sign in with:
                          </p>
                          <div className="row my-3 d-flex justify-content-center">
                            <MDBBtn
                              type="button"
                              color="white"
                              rounded
                              className="mr-md-3 z-depth-1a"
                            >
                              <MDBIcon icon="facebook" className="blue-text text-center" />
                            </MDBBtn>
                            <MDBBtn
                              type="button"
                              color="white"
                              rounded
                              className="mr-md-3 z-depth-1a"
                            >
                              <MDBIcon icon="twitter" className="blue-text" />
                            </MDBBtn>
                            <MDBBtn
                              type="button"
                              color="white"
                              rounded
                              className="z-depth-1a"
                            >
                              <MDBIcon icon="google-plus" className="blue-text" />
                            </MDBBtn>
                          </div>
                        </MDBCardBody>
                        <MDBModalFooter className="mx-5 pt-3 mb-1">
                          <p className="font-small grey-text d-flex justify-content-end">
                            Not a member?
                            <a href="#!" className="blue-text ml-1">

                              Sign Up
                            </a>
                          </p>
                        </MDBModalFooter>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            };

            export default FormPage;


        


            .form-elegant .font-small {
              font-size: 0.8rem; }

            .form-elegant .z-depth-1a {
              -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
              box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }

            .form-elegant .z-depth-1-half,
            .form-elegant .btn:hover {
              -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
              box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }

              

Form gradient MDB Pro component

Log in

Forgot Password?

Don't have an account? Sign up


            import React from "react";
            import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardBody, MDBInput, MDBBtn, MDBIcon } from 'mdbreact';

            const FormPage = () => {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBCard>
                        <div className="header pt-3 peach-gradient">
                          <MDBRow className="d-flex justify-content-center">
                            <h3 className="white-text mb-3 pt-3 font-weight-bold">
                              Log in
                            </h3>
                          </MDBRow>
                          <MDBRow className="mt-2 mb-3 d-flex justify-content-center">
                            <a href="#!" className="fa-lg p-2 m-2 fb-ic">
                              <MDBIcon className="fa fa-facebook white-text fa-lg" />
                            </a>
                            <a href="#!" className="fa-lg p-2 m-2 tw-ic">
                              <MDBIcon className="fa fa-twitter white-text fa-lg" />
                            </a>
                            <a href="#!" className="fa-lg p-2 m-2 gplus-ic">
                              <MDBIcon className="fa fa-google-plus white-text fa-lg" />
                            </a>
                          </MDBRow>
                        </div>
                        <MDBCardBody className="mx-4 mt-4">
                          <MDBInput label="Your email" group type="text" validate />
                          <MDBInput
                            label="Your password"
                            group
                            type="password"
                            validate
                            containerClass="mb-0"
                          />
                          <p className="font-small grey-text d-flex justify-content-end">
                            Forgot
                            <a
                              href="#!"
                              className="dark-grey-text ml-1 font-weight-bold"
                            >
                              Password?
                            </a>
                          </p>
                          <MDBRow className="d-flex align-items-center mb-4 mt-5">
                            <MDBCol md="5" className="d-flex align-items-start">
                              <div className="text-center">
                                <MDBBtn
                                  color="grey"
                                  rounded
                                  type="button"
                                  className="z-depth-1a"
                                >
                                  Log in
                                </MDBBtn>
                              </div>
                            </MDBCol>
                            <MDBCol md="7" className="d-flex justify-content-end">
                              <p className="font-small grey-text mt-3">
                                Don't have an account?
                                <a
                                  href="#!"
                                  className="dark-grey-text ml-1 font-weight-bold"
                                >
                                  Sign up
                                </a>
                              </p>
                            </MDBCol>
                          </MDBRow>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            };

            export default FormPage;
        


          .form-gradient .header {
            border-top-left-radius: .3rem;
            border-top-right-radius: .3rem; }

          .form-gradient input[type=text]:focus:not([readonly]) {
            border-bottom: 1px solid #fd9267;
            -webkit-box-shadow: 0 1px 0 0 #fd9267;
            box-shadow: 0 1px 0 0 #fd9267; }

          .form-gradient input[type=text]:focus:not([readonly]) + label {
            color: #4f4f4f; }

          .form-gradient input[type=password]:focus:not([readonly]) {
            border-bottom: 1px solid #fd9267;
            -webkit-box-shadow: 0 1px 0 0 #fd9267;
            box-shadow: 0 1px 0 0 #fd9267; }

          .form-gradient input[type=password]:focus:not([readonly]) + label {
            color: #4f4f4f; }

            

Form light MDB Pro component

Sign up

Have an account? Log in


            import React from "react";
            import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardBody, MDBInput, MDBIcon } from 'mdbreact';

            const FormPage = () => {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBCard>
                        <MDBCardBody className="mx-4">
                          <div className="text-center">
                            <h3 className="pink-text mb-5">
                              <strong>Sign up</strong>
                            </h3>
                          </div>
                          <MDBInput label="Your email" group type="text" validate />
                          <MDBInput label="Your password" group type="password" validate />
                          <div className="md-form pb-3">
                            <div className="form-check my-4">
                              <input
                                className="form-check-input"
                                type="checkbox"
                                id="defaultCheck12"
                              />
                              <label htmlFor="defaultCheck12" className="grey-text">
                                Accept the
                                <a href="#!" className="blue-text">

                                  Terms and Conditions
                                </a>
                              </label>
                            </div>
                          </div>
                          <MDBRow className="d-flex align-items-center mb-4">
                            <MDBCol md="6" className="text-center">
                              <button
                                type="button"
                                className="btn btn-pink btn-block btn-rounded z-depth-1"
                              >
                                Sign up
                              </button>
                            </MDBCol>
                            <MDBCol md="6">
                              <p className="font-small grey-text d-flex justify-content-end">
                                Have an account?
                                <a href="#!" className="blue-text ml-1">

                                  Log in
                                </a>
                              </p>
                            </MDBCol>
                          </MDBRow>
                        </MDBCardBody>
                        <div className="footer pt-3 mdb-color lighten-3">
                          <MDBRow className="d-flex justify-content-center">
                            <p className="font-small white-text mb-2 pt-3">
                              or Sign up with:
                            </p>
                          </MDBRow>
                          <MDBRow className="mt-2 mb-3 d-flex justify-content-center">
                            <a href="#!" className="fa-lg p-2 m-2 fb-ic">
                              <MDBIcon className="fa fa-facebook white-text fa-lg"> </MDBIcon>
                            </a>
                            <a href="#!" className="fa-lg p-2 m-2 tw-ic">
                              <MDBIcon className="fa fa-twitter white-text fa-lg"> </MDBIcon>
                            </a>
                            <a href="#!" className="fa-lg p-2 m-2 gplus-ic">
                              <MDBIcon className="fa fa-google-plus white-text fa-lg"> </MDBIcon>
                            </a>
                          </MDBRow>
                        </div>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            };

            export default FormPage;
        


            .form-light .font-small {
              font-size: 0.8rem; }

            .form-light [type="radio"] + label,
            .form-light [type="checkbox"] + label {
              font-size: 0.8rem; }

            .form-light [type="checkbox"] + label:before {
              top: 2px;
              width: 15px;
              height: 15px; }

            .form-light input[type="checkbox"] + label:before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 17px;
              height: 17px;
              z-index: 0;
              border-radius: 1px;
              margin-top: 2px;
              -webkit-transition: 0.2s;
              transition: 0.2s; }

            .form-light input[type="checkbox"]:checked + label:before {
              top: -4px;
              left: -3px;
              width: 12px;
              height: 22px;
              border-style: solid;
              border-width: 2px;
              border-color: transparent #EB3573 #EB3573 transparent;
              -webkit-transform: rotate(40deg);
              -ms-transform: rotate(40deg);
              transform: rotate(40deg);
              -webkit-backface-visibility: hidden;
              -webkit-transform-origin: 100% 100%;
              -ms-transform-origin: 100% 100%;
              transform-origin: 100% 100%; }

            .form-light .footer {
              border-bottom-left-radius: .3rem;
              border-bottom-right-radius: .3rem; }

            

Form dark MDB Pro component

SIGN UP

Have an account? Log in



            import React from "react";
            import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBCard, MDBInput } from 'mdbreact';

            const FormPage = () => {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBCard
                        className="card-image"
                        style={{
                          backgroundImage:
                            "url(https://mdbootstrap.com/img/Photos/Others/pricing-table7.jpg)",
                          width: "28rem"
                        }}
                      >
                        <div className="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
                          <div className="text-center">
                            <h3 className="white-text mb-5 mt-4 font-weight-bold">
                              <strong>SIGN</strong>
                              <a href="#!" className="green-text font-weight-bold">
                                <strong> UP</strong>
                              </a>
                            </h3>
                          </div>
                          <MDBInput label="Your email" group type="text" validate />
                          <MDBInput label="Your password" group type="password" validate />
                          <div className="md-form pb-3">
                            <div className="form-check my-4">
                              <input
                                className="form-check-input"
                                type="checkbox"
                                value=""
                                id="defaultCheck17"
                              />
                              <label
                                className="form-check-label white-text"
                                htmlFor="defaultCheck17"
                              >
                                Accept the
                                <a href="#!" className="green-text font-weight-bold">
                                  Terms and Conditions
                                </a>
                              </label>
                            </div>
                          </div>
                          <MDBRow className="d-flex align-items-center mb-4">
                            <div className="text-center mb-3 col-md-12">
                              <MDBBtn
                                color="success"
                                rounded
                                type="button"
                                className="btn-block z-depth-1"
                              >
                                Sign in
                              </MDBBtn>
                            </div>
                          </MDBRow>
                          <MDBCol md="12">
                            <p className="font-small white-text d-flex justify-content-end">
                              Have an account?
                              <a href="#!" className="green-text ml-1 font-weight-bold">
                                Log in
                              </a>
                            </p>
                          </MDBCol>
                        </div>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            };

            export default FormPage;

        


            .form-dark .font-small {
              font-size: 0.8rem; }

            .form-dark [type="radio"] + label,
            .form-dark [type="checkbox"] + label {
              font-size: 0.8rem; }

            .form-dark [type="checkbox"] + label:before {
              top: 2px;
              width: 15px;
              height: 15px; }

            .form-dark .md-form label {
              color: #fff; }

            .form-dark input[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #00C851;
              -webkit-box-shadow: 0 1px 0 0 #00C851;
              box-shadow: 0 1px 0 0 #00C851; }

            .form-dark input[type=text]:focus:not([readonly]) + label {
              color: #fff; }

            .form-dark input[type=password]:focus:not([readonly]) {
              border-bottom: 1px solid #00C851;
              -webkit-box-shadow: 0 1px 0 0 #00C851;
              box-shadow: 0 1px 0 0 #00C851; }

            .form-dark input[type=password]:focus:not([readonly]) + label {
              color: #fff; }

            .form-dark input[type="checkbox"] + label:before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 17px;
              height: 17px;
              z-index: 0;
              border: 1.5px solid #fff;
              border-radius: 1px;
              margin-top: 2px;
              -webkit-transition: 0.2s;
              transition: 0.2s; }

            .form-dark input[type="checkbox"]:checked + label:before {
              top: -4px;
              left: -3px;
              width: 12px;
              height: 22px;
              border-style: solid;
              border-width: 2px;
              border-color: transparent #00c851 #00c851 transparent;
              -webkit-transform: rotate(40deg);
              -ms-transform: rotate(40deg);
              transform: rotate(40deg);
              -webkit-backface-visibility: hidden;
              -webkit-transform-origin: 100% 100%;
              -ms-transform-origin: 100% 100%;
              transform-origin: 100% 100%; }

            

Form simple MDB Pro component

Log in

Forgot Password?

Don't have an account? Sign up


            import React from "react";
            import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBCard, MDBCardBody, MDBInput } from 'mdbreact';

            const FormPage = () => {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBCard>
                        <div className="header pt-3 grey lighten-2">
                          <MDBRow className="d-flex justify-content-start">
                            <h3 className="deep-grey-text mt-3 mb-4 pb-1 mx-5">
                              Log in
                            </h3>
                          </MDBRow>
                        </div>
                        <MDBCardBody className="mx-4 mt-4">
                          <MDBInput label="Your email" group type="text" validate />
                          <MDBInput
                            label="Your password"
                            group
                            type="password"
                            validate
                            containerClass="mb-0"
                          />
                          <p className="font-small grey-text d-flex justify-content-end">
                            Forgot
                            <a
                              href="#!"
                              className="dark-grey-text font-weight-bold ml-1"
                            >
                              Password?
                            </a>
                          </p>
                          <div className="text-center mb-4 mt-5">
                            <MDBBtn
                              color="danger"
                              type="button"
                              className="btn-block z-depth-2"
                            >
                              Log in
                            </MDBBtn>
                          </div>
                          <p className="font-small grey-text d-flex justify-content-center">
                            Don't have an account?
                            <a
                              href="#!"
                              className="dark-grey-text font-weight-bold ml-1"
                            >
                              Sign up
                            </a>
                          </p>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            };

            export default FormPage;
        


        .form-simple .font-small {
          font-size: 0.8rem; }

        .form-simple .header {
          border-top-left-radius: .3rem;
          border-top-right-radius: .3rem; }

        .form-simple input[type=text]:focus:not([readonly]) {
          border-bottom: 1px solid #ff3547;
          -webkit-box-shadow: 0 1px 0 0 #ff3547;
          box-shadow: 0 1px 0 0 #ff3547; }

        .form-simple input[type=text]:focus:not([readonly]) + label {
          color: #4f4f4f; }

        .form-simple input[type=password]:focus:not([readonly]) {
          border-bottom: 1px solid #ff3547;
          -webkit-box-shadow: 0 1px 0 0 #ff3547;
          box-shadow: 0 1px 0 0 #ff3547; }

        .form-simple input[type=password]:focus:not([readonly]) + label {
          color: #4f4f4f; }