White alerts

Primary! This is a primary box!

Success! This is a success box!

Info! This is a info box!

Alert! This is a warning box!

Error! This is a error box!

<div class="alert alert-white alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <div class="icon"><i class="fas fa-history"></i></div>
    <strong>Primary!</strong> This is a primary box!
</div>
<div class="alert alert-white alert-success alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <div class="icon"><i class="fas fa-check"></i></div>
    <strong>Success!</strong> This is a success box!
</div>

Buttons

Show Code

<div>
  <button class="btn btn-primary" type="button">Primary</button>
  <button class="btn btn-secondary" type="button">Secondary</button>
  <button class="btn btn-success" type="button">Success</button>
  <button class="btn btn-info" type="button">Info</button>
  <button class="btn btn-warning" type="button">Warning</button>
  <button class="btn btn-danger" type="button">Danger</button>
  <button class="btn btn-light" type="button">Light</button>
  <button class="btn btn-dark" type="button">Dark</button>
  <button class="btn btn-link" type="button">Link</button>
</div>

<div class="mt-3">
  <button class="btn btn-primary btn-app" type="button"><span>42</span> Primary</button>
  <button class="btn btn-secondary btn-app" type="button"><i class="fa fa-car"></i> Secondary</button>
  <button class="btn btn-success btn-app" type="button"><span>300</span> Success</button>
  <button class="btn btn-info btn-app btn-lg" type="button"><i class="fa fa-info"></i> Info</button>
  <button class="btn btn-warning btn-app btn-sm" type="button"><i class="fa fa-leaf"></i> Warning</button>
  <button class="btn btn-danger btn-app btn-xs" type="button"><i class="fa fa-warning"></i> Danger</button>
  <button class="btn btn-link btn-app" type="button"><i class="fa fa-calendar"></i> Link</button>
</div>

New Form elements

Show Code

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-md-4 control-label">input-check</label>
    <div class="col-md-8">
      <div class="checkbox">
        <label>
          <input type="checkbox" class="input-check">
          <span class="form-add"></span> Extra text
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4 control-label">input-switch</label>
    <div class="col-md-8">
      <div class="checkbox">
        <label>
          <input type="checkbox" class="input-switch">
          <span class="form-add"></span> Extra text
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4 control-label">input-radio</label>
    <div class="col-md-8">
      <div class="radio">
        <label>
          <input type="radio" class="input-radio" name="test2">
          <span class="form-add"></span> Radio 1
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" class="input-radio" name="test2">
          <span class="form-add"></span> Radio 2
        </label>
      </div>
    </div>
  </div>
</form>

Form Validation

Add the .pando-ajax-form to your form and the use html5 rules. (see https://getbootstrap.com/docs/5.0/forms/validation/)

To hide/show elements after submit you can use the following classes .form-hide-success, .form-show-success, .form-show-error.

For this to work the post should return at least a JSON including {"success": true}.

Show Code

<form method="GET" action="/pando/assets/post.json" class="pando-ajax-form needs-validation" novalidate>
  <div class="alert alert-danger form-show-error">
    <h4 class="alert-heading">Error</h4>
    <p class="mb-0">Error Message</p>
  </div>
  <div class="alert alert-success form-show-success">
    <h4 class="alert-heading">Success</h4>
    <p class="mb-0">Success Message</p>
  </div>
  <div class="form-hide-success">
    <div class="mb-3">
      <input name="firstname" type="text" class="form-control" placeholder="First Name" required>
      <div class="invalid-feedback">Enter a First Name.</div>
    </div>
    <div class="mb-3">
      <input name="lastname" type="text" class="form-control" placeholder="Last Name" required>
      <div class="invalid-feedback">Enter a Last Name.</div>
    </div>
    <div class="mb-3">
      <input name="email" type="email" class="form-control" placeholder="Email" required>
      <div class="invalid-feedback">Invalid Email.</div>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" name="checkbox" class="form-check-input" required>
        <label class="form-check-label">Checkbox</label>
        <div class="invalid-feedback">Checkbox is required.</div>
      </div>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radios" value="option1" required>
      <label class="form-check-label">Option 1</label>
    </div>
    <div class="form-check mb-3">
      <input class="form-check-input" type="radio" name="radios" value="option2" required>
      <label class="form-check-label">Option 2</label>
      <div class="invalid-feedback">Select an Option.</div>
    </div>
    <div class="text-end">
      <button type="submit" class="btn btn-primary">Send</button>
    </div>
  </div>
</form>

Random Stuff

Footer Bottom

You need to add the class .page-footer-bottom to the body. If you have an element with the class .page-footer on the page, it will be at least on the bottom of the page.

If you update the Footer you may have to call pandoFooterPush(); to update the height of the push element.

Show Code

<body class="page-footer-bottom">
  <footer class="page-footer"></footer>
</body>