Bootstrap forms

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:

Login:



Form login

Sign in

                      
import React from 'react';
import { Container, Row, Col, Input, Button } from 'mdbreact';

class FormsPage extends React.Component  {
  render() {
    return(
      <Container>
        <Row>
          <Col md="6">
            <form>
              <p className="h5 text-center mb-4">Sign in</p>
              <div className="grey-text">
                <Input label="Type your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                <Input label="Type your password" icon="lock" group type="password" validate/>
              </div>
              <div className="text-center">
                <Button>Login</Button>
              </div>
            </form>
          </Col>
        </Row>
      </Container>
    );
  }
};

export default FormsPage;
                      
                  

Sign in


                      
<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">
    <button className="btn btn-indigo" type="submit">Login</button>
    </div>
</form>
                      
                  

Form register

Sign up

                      
import React from 'react';
import { Container, Row, Col, Input, Button } from 'mdbreact';

class FormsPage extends React.Component  {
  render() {
    return(
      <Container>
        <Row>
          <Col md="6">
            <form>
              <p className="h5 text-center mb-4">Sign up</p>
              <div className="grey-text">
                <Input label="Your name" icon="user" group type="text" validate error="wrong" success="right"/>
                <Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                <Input label="Confirm your email" icon="exclamation-triangle" group type="text" validate error="wrong" success="right"/>
                <Input label="Your password" icon="lock" group type="password" validate/>
              </div>
              <div className="text-center">
                <Button color="primary">Register</Button>
              </div>
            </form>
          </Col>
        </Row>
      </Container>
    );
  }
};

export default FormsPage;
                      
                  

Sign up




                      
<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">
    <button className="btn btn-unique" type="submit">Register</button>
  </div>
</form>
                      
                  

Form subscription

Subscribe

                      
import React from 'react';
import { Container, Row, Col, Input, Button } from 'mdbreact';

class FormsPage extends React.Component  {
  render() {
    return(
      <Container>
        <Row>
          <Col md="6">
            <form>
              <p className="h5 text-center mb-4">Subscribe</p>
              <div className="grey-text">
                <Input label="Your name" icon="user" group type="text" validate error="wrong" success="right"/>
                <Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
              </div>
              <div className="text-center">
                <Button outline color="info">Send <Fa icon="paper-plane-o" className="ml-1"/></Button>
              </div>
            </form>
          </Col>
        </Row>
      </Container>
    );
  }
};

export default FormsPage;
                      
                  

Subscribe


                      
<form>
  <p className="h4 text-center mb-4">Subscribe</p>
  <label htmlFor="defaultFormSubscriptionNameEx" className="grey-text">Your name</label>
  <input type="text" id="defaultFormSubscriptionNameEx" className="form-control"/>
  <br/>
  <label htmlFor="defaultFormSubscriptionEmailEx" className="grey-text">Your email</label>
  <input type="email" id="defaultFormSubscriptionEmailEx" className="form-control"/>
  <div className="text-center mt-4">
    <button className="btn btn-outline-purple" type="submit">Send<i className="fa fa-paper-plane-o ml-2"></i></button>
  </div>
</form>
                      
                  

Form contact

Wite to us

                      
import React from 'react';
import { Container, Row, Col, Input, Button } from 'mdbreact';

class FormsPage extends React.Component  {
  render() {
    return(
      <Container>
        <Row>
          <Col md="6">
            <form>
              <p className="h5 text-center mb-4">Write to us</p>
              <div className="grey-text">
                <Input label="Your name" icon="user" group type="text" validate error="wrong" success="right"/>
                <Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                <Input label="Subject" icon="tag" group type="text" validate error="wrong" success="right"/>
                <Input type="textarea" rows="2" label="Your message" icon="pencil"/>
              </div>
              <div className="text-center">
                <Button outline color="secondary">Send <Fa icon="paper-plane-o" className="ml-1"/></Button>
              </div>
            </form>
          </Col>
        </Row>
      </Container>
    );
  }
};

export default FormsPage;
                      
                  

Write to us




                      
<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"></textarea>
  <div className="text-center mt-4">
    <button className="btn btn-outline-warning" type="submit">Send<i className="fa fa-paper-plane-o ml-2"></i></button>
  </div>
</form>
                      
                  

A form within a card

Sign up

                      
import React from 'react';
import { Container, Row, Col, Input, Button, Fa, Card, CardBody } from 'mdbreact';

class FormsPage extends React.Component  {
  render() {
    return(
      <Container>
        <Row>
          <Col md="6">
            <Card>
              <CardBody>
                <form>
                  <p className="h4 text-center py-4">Sign up</p>
                  <div className="grey-text">
                    <Input label="Your name" icon="user" group type="text" validate error="wrong" success="right"/>
                    <Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                    <Input label="Confirm your email" icon="exclamation-triangle" group type="text" validate error="wrong" success="right"/>
                    <Input label="Your password" icon="lock" group type="password" validate/>
                  </div>
                  <div className="text-center py-4 mt-3">
                    <Button color="cyan" type="submit">Register</Button>
                  </div>
                </form>
              </CardBody>
            </Card>   
          </Col>
        </Row>
      </Container>
    );
  }
};

export default FormsPage;
                      
                  

Subscribe


                      
<div className="card mx-xl-5">
  <div className="card-body">
    <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">
        <button className="btn btn-outline-purple" type="submit">Send<i className="fa fa-paper-plane-o ml-2"></i></button>
      </div>
    </form>
  </div>
</div>
                      
                  

A form within a modal

                      
import React from 'react';
import { Container, Row, Col, Input, Button, Fa, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';

class FormsPage extends React.Component  {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    }
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  render() {
    return(
      <Container>
        <Row>
          <Col md="6">
            <Button color="info" onClick={this.toggle}>Launch modal contact form</Button>
            <Modal isOpen={this.state.modal} toggle={this.toggle} className="cascading-modal">
              <div className="modal-header primary-color white-text">
                <h4 className="title">
                  <Fa className="fa fa-pencil" /> Contact form</h4>
                <button type="button" className="close" onClick={this.toggle}>
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <ModalBody className="grey-text">
                <Input size="sm" label="Your name" icon="user" group type="text" validate error="wrong" success="right"/>
                <Input size="sm" label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                <Input size="sm" label="Subject" icon="tag" group type="text" validate error="wrong" success="right"/>
                <Input size="sm" type="textarea" rows="2" label="Your message" icon="pencil"/>
              </ModalBody>
              <ModalFooter>
                <Button color="secondary" onClick={this.toggle}>Close</Button>{' '}
                <Button color="primary">Save changes</Button>
              </ModalFooter>
            </Modal>
          </Col>
        </Row>
      </Container>
    );
  }
};

export default FormsPage;
                      
                  

Form elegant MDB Pro component

Sign in

Forgot Password?

or Sign in with:

                
.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); }
                
            
            
import React from 'react';
import { Container, Row, Col, Input, Button, Fa, Card, CardBody, ModalFooter } from 'mdbreact';

class FormsPage extends React.Component  {
  render() {
    return(
      <Container>
        <section className="form-elegant">
          <Row>
            <Col md="5">
              <Card>
                <CardBody className="mx-4">
                  <div className="text-center">
                    <h3 className="dark-grey-text mb-5"><strong>Sign in</strong></h3>
                  </div>
                  <Input label="Your email" group type="email" validate error="wrong" success="right"/>
                  <Input 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">
                    <Button type="button" gradient="blue" rounded className="btn-block z-depth-1a">Sign in</Button>
                  </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">
                    <Button type="button" color="white" rounded className="mr-md-3 z-depth-1a"><Fa icon="facebook" className="blue-text text-center" /></Button>
                    <Button type="button" color="white" rounded className="mr-md-3 z-depth-1a"><Fa icon="twitter" className="blue-text" /></Button>
                    <Button type="button" color="white" rounded className="z-depth-1a"><Fa icon="google-plus" className="blue-text" /></Button>
                  </div>
                </CardBody>
                <ModalFooter 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>
                </ModalFooter>
              </Card>
            </Col>
          </Row>
        </section>
      </Container>
    );
  }
};

export default FormsPage;
            
            

Form gradient MDB Pro component

Log in

Forgot Password?

Don't have an account? Sign up

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

.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; }
                
            
            
import React from 'react';
import { Container, Row, Col, Input, Button, Fa, Card, CardBody, ModalFooter } from 'mdbreact';

class FormsPage extends React.Component  {
  render() {
    return(
      <Container>
        <section className="form-gradient">
          <Row>
            <Col md="5">
              <Card>
                <div className="header pt-3 peach-gradient">
                  <Row className="d-flex justify-content-center">
                    <h3 className="white-text mb-3 pt-3 font-weight-bold">Log in</h3>
                  </Row>
                  <Row className="mt-2 mb-3 d-flex justify-content-center">
                    <a className="fa-lg p-2 m-2 fb-ic"><Fa className="fa fa-facebook white-text fa-lg" /></a>
                    <a className="fa-lg p-2 m-2 tw-ic"><Fa className="fa fa-twitter white-text fa-lg" /></a>
                    <a className="fa-lg p-2 m-2 gplus-ic"><Fa className="fa fa-google-plus white-text fa-lg" /></a>
                  </Row>
                </div>
                <CardBody className="mx-4 mt-4">
                  <Input label="Your email" group type="text" validate />
                  <Input 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>
                  <Row className="d-flex align-items-center mb-4 mt-5">
                    <Col md="5" className="d-flex align-items-start">
                      <div className="text-center">
                        <Button color="grey" rounded type="button" className="z-depth-1a">Log in</Button>
                      </div>
                    </Col>
                    <Col 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>
                    </Col>
                  </Row>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </section>
      </Container>
    );
  }
};

export default FormsPage;
            
            

Form light MDB Pro component

Sign up

Have an account? Log in

                
.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; }
                
            
            
import React from 'react';
import { Container, Row, Col, Input, Button, Fa, Card, CardBody, ModalFooter } from 'mdbreact';

class FormsPage extends React.Component  {
  render() {
    return(
      <Container>
        <section className="form-light">
          <Row>
            <Col md="5">
              <Card>
                <CardBody className="mx-4">
                  <div className="text-center">
                    <h3 className="pink-text mb-5"><strong>Sign up</strong></h3>
                  </div>
                  <Input label="Your email" group type="text" validate />
                  <Input 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>
                  <Row className="d-flex align-items-center mb-4">
                    <Col md="6" className="text-center">
                      <button type="button" className="btn btn-pink btn-block btn-rounded z-depth-1">Sign up</button>
                    </Col>
                    <Col 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>
                    </Col>
                  </Row>
                </CardBody>
                <div className="footer pt-3 mdb-color lighten-3">
                  <Row className="d-flex justify-content-center">
                    <p className="font-small white-text mb-2 pt-3">or Sign up with:</p>
                  </Row>
                  <Row className="mt-2 mb-3 d-flex justify-content-center">
                    <a className="fa-lg p-2 m-2 fb-ic"><Fa className="fa fa-facebook white-text fa-lg"> </Fa></a>
                    <a className="fa-lg p-2 m-2 tw-ic"><Fa className="fa fa-twitter white-text fa-lg"> </Fa></a>
                    <a className="fa-lg p-2 m-2 gplus-ic"><Fa className="fa fa-google-plus white-text fa-lg"> </Fa></a>
                  </Row>
                </div>
              </Card>
            </Col>
          </Row>
        </section>
      </Container>
    );
  }
};

export default FormsPage;
            
            

Form dark MDB Pro component

SIGN UP

Have an account? Log in

                
.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%; }
                
            
            
import React from 'react';
import { Container, Row, Col, Input, Button, Fa, Card, CardBody, ModalFooter } from 'mdbreact';

class FormsPage extends React.Component  {
  render() {
    return(
      <Container>
        <section className="form-dark">
          <Row>
            <Col md="5">
              <Card 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 className="green-text font-weight-bold"><strong> UP</strong></a></h3>
                  </div>
                  <Input label="Your email" group type="text" validate />
                  <Input 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>
                  <Row className="d-flex align-items-center mb-4">
                    <div className="text-center mb-3 col-md-12">
                      <Button color="success" rounded type="button" className="btn-block z-depth-1">Sign in</Button>
                    </div>
                  </Row>
                  <Col 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>
                  </Col>
                </div>
              </Card>
            </Col>
          </Row>
        </section>
      </Container>
    );
  }
};

export default FormsPage;
            
            

Form simple MDB Pro component

Log in

Forgot Password?

Don't have an account? Sign up

                
.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; }
                
            
            
import React from 'react';
import { Container, Row, Col, Input, Button, Fa, Card, CardBody, ModalFooter } from 'mdbreact';

class FormsPage extends React.Component  {
  render() {
    return(
      <Container>
        <section className="form-simple">
          <Row>
            <Col md="5">
              <Card>
                <div className="header pt-3 grey lighten-2">
                  <Row className="d-flex justify-content-start">
                    <h3 className="deep-grey-text mt-3 mb-4 pb-1 mx-5">Log in</h3>
                  </Row>
                </div>
                <CardBody className="mx-4 mt-4">
                  <Input label="Your email" group type="text" validate />
                  <Input 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">
                    <Button color="danger" type="button" className="btn-block z-depth-2">Log in</Button>
                  </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>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </section>
      </Container>
    );
  }
};

export default FormsPage;