ngx-admin/src/app/pages/forms/form-layouts/form-layouts.component.html

<div class="row">
  <div class="col-md-12">
    <nb-card>
      <nb-card-header>
        Inline form
      </nb-card-header>
      <nb-card-body>
        <form class="form-inline">
          <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0 fullname" placeholder="Jane Doe">
          <div class="input-group mb-2 mr-sm-2 mb-sm-0 username">
            <div class="input-group-addon">@</div>
            <input type="text" class="form-control" placeholder="Username">
          </div>
          <div class="form-check mb-2 mr-sm-2 mb-sm-0">
            <nb-checkbox>Remember me</nb-checkbox>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </nb-card-body>
    </nb-card>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>Using the Grid</nb-card-header>
      <nb-card-body>
        <form>
          <div class="form-group row">
            <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
          </div>
          <div class="form-group row">
            <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
          </div>
          <fieldset class="form-group row">
            <legend class="col-form-legend col-sm-2">Radios</legend>
            <div class="col-sm-10">
              <div class="form-check">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="gridRadios" checked>
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description">Option one is this and that&mdash;be sure to include why it's great</span>
                </label>
              </div>
              <div class="form-check">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="gridRadios">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description">Option two can be something else and selecting it will deselect option one</span>
                </label>
              </div>
              <div class="form-check disabled">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="gridRadios" disabled>
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description">Option three is disabled</span>
                </label>
              </div>
            </div>
          </fieldset>
          <div class="form-group row">
            <label class="col-sm-2">Checkbox</label>
            <div class="col-sm-10">
              <div class="form-check">
                <nb-checkbox>Check me out</nb-checkbox>
              </div>
            </div>
          </div>
          <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
              <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
          </div>
        </form>
      </nb-card-body>
    </nb-card>
    <nb-card>
      <nb-card-header>
        Form without labels
      </nb-card-header>
      <nb-card-body>
        <form>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Recipients">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Subject">
          </div>
          <div class="form-group">
            <textarea class="form-control" placeholder="Message"></textarea>
          </div>
          <button type="submit" class="btn btn-success">Send</button>
        </form>
      </nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>
        Basic form
      </nb-card-header>
      <nb-card-body>
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group">
            <nb-checkbox>Check me out</nb-checkbox>
          </div>
          <button type="submit" class="btn btn-danger">Submit</button>
        </form>
      </nb-card-body>
    </nb-card>
    <nb-card>
      <nb-card-header>
        Block form
      </nb-card-header>
      <nb-card-body>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="inputFirstName">First Name</label>
              <input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="inputLastName">Last Name</label>
              <input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="inputEmail">Email</label>
              <input type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="inputWebsite">Website</label>
              <input type="text" class="form-control" id="inputWebsite" placeholder="Website">
            </div>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </nb-card-body>
    </nb-card>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>
        Horizontal form
      </nb-card-header>
      <nb-card-body>
        <form class="form-horizontal">
          <div class="form-group row">
            <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
          </div>
          <div class="form-group row">
            <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
          </div>
          <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
              <div class="checkbox">
                <nb-checkbox>Remember me</nb-checkbox>
              </div>
            </div>
          </div>
          <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
              <button type="submit" class="btn btn-warning">Sign in</button>
            </div>
          </div>
        </form>
      </nb-card-body>
    </nb-card>
  </div>
</div>