How do I use this Bootstrap snippet?

Load Bootstrap 3.3.6, paste the HTML, add the CSS styles, and include the JS if present to match the live demo.

Can I use it commercially?

Yes. Snippets are free for personal and commercial projects. Review the snippets license page for details.

Is the layout responsive?

Yes. It is built on Bootstrap 3.3.6 and inherits its responsive grid and components.

Bootstrap html snippet. Login and register form

HTML code

Clean, semantic HTML that powers this Bootstrap 3.3.6 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<div class="col-sm-10 col-sm-push-1 col-md-6 col-md-push-3 col-lg-6 col-lg-push-3">
  <h2 class="text-primary center m-a-2">
     <span class="icon-text">Admin Plus</span>
  </h2>
  <div class="card-group">
    <div class="card bg-transparent">
      <div class="card-block">
        <div class="center">
          <h4 class="m-b-0"><span class="icon-text">Login</span></h4>
          <p class="text-muted">Access your account</p>
        </div>
        <form action="index.html" method="get">
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Email Address">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Password">
            <a href="#" class="pull-xs-right">
              <small>Forgot?</small>
            </a>
            <div class="clearfix"></div>
          </div>
          <div class="center">
            <button type="submit" class="btn  btn-primary-outline btn-circle-large">
              <i class="material-icons">lock</i>
            </button>
          </div>
        </form>
      </div>
    </div>
    <div class="card">
      <div class="card-block center">
        <h4 class="m-b-0">
          <i class="material-icons">person_add</i> <span class="icon-text">Sign Up</span>
        </h4>
        <p class="text-muted">Create a new account</p>
        <form action="index.html" method="get">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Full Name">
          </div>
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Email">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Password">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Confirm Password">
          </div>
          <button type="submit" class="btn btn-primary btn-rounded">Register</button>
        </form>
      </div>
    </div>
  </div>
</div>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.3.6 to keep the design, spacing, and responsiveness consistent.

body{margin-top:20px;}

.card {
    position: relative;
    background-color: #fff;
    border: 1px solid #fbe7e7;
    border-radius: 3px;
}

.card, .list-group {
    margin-bottom: 1.25rem;
}

.card {
    box-shadow: 0 2px 3px rgba(0,0,0,.05);
}

@media (min-width: 544px) {
.card-group .card {
    display: table-cell;
    vertical-align: top;
}
}

@media (min-width: 544px) {
.card-group .card+.card {
    margin-left: 0;
    border-left: 0;
}
}

@media (min-width: 544px) {
.card-group .card:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
}

.card-group {
    margin-bottom: 1.25rem;
}

@media (min-width: 544px){
.card-group {
    display: table;
    width: 100%;
    table-layout: fixed;
}
}

@media (min-width: 544px) {
.card-group .card:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
}

.card>.card-block>:last-child, .card>:last-child {
    margin-bottom: 0!important;
}

.card-block {
    padding: 1.25rem;
}

.center {
    text-align: center;
}
.m-a-2 {
    margin: 1.5rem!important;
}
.text-primary {
    color: #EF5350!important;
}