JSFiddle

  • Solar #5 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Solar</h1>
    <div>
        <a href="#" class="btn btn-primary">Primary</a>
        <a href="#" class="btn btn-secondary">Secondary</a>
        <a href="#" class="btn btn-success">Success</a>
        <a href="#" class="btn btn-info">Info</a>
        <a href="#" class="btn btn-warning">Warning</a>
        <a href="#" class="btn btn-danger">Danger</a>
    </div>
  • Sketchy

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Sketchy</h1>
    <div>
        <a href="#" class="btn btn-primary">Primary</a>
        <a href="#" class="btn btn-secondary">Secondary</a>
        <a href="#" class="btn btn-success">Success</a>
        <a href="#" class="btn btn-info">Info</a>
        <a href="#" class="btn btn-warning">Warning</a>
        <a href="#" class="btn btn-danger">Danger</a>
    </div>
  • Pulse #36 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Pulse</h1>
    <div>
        <a href="#" class="btn btn-primary">Primary</a>
        <a href="#" class="btn btn-secondary">Secondary</a>
        <a href="#" class="btn btn-success">Success</a>
        <a href="#" class="btn btn-info">Info</a>
        <a href="#" class="btn btn-warning">Warning</a>
        <a href="#" class="btn btn-danger">Danger</a>
    </div>
  • Minty

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Minty</h1>
    <div>
        <a href="#" class="btn btn-primary">Primary</a>
        <a href="#" class="btn btn-secondary">Secondary</a>
        <a href="#" class="btn btn-success">Success</a>
        <a href="#" class="btn btn-info">Info</a>
        <a href="#" class="btn btn-warning">Warning</a>
        <a href="#" class="btn btn-danger">Danger</a>
    </div>
  • Lux #9 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Lux</h1>
    <div>
        <a href="#" class="btn btn-primary">Primary</a>
        <a href="#" class="btn btn-secondary">Secondary</a>
        <a href="#" class="btn btn-success">Success</a>
        <a href="#" class="btn btn-info">Info</a>
        <a href="#" class="btn btn-warning">Warning</a>
        <a href="#" class="btn btn-danger">Danger</a>
    </div>
  • Litera

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Litera</h1>
    <div>
        <a href="#" class="btn btn-default">Default</a>
        <a href="#" class="btn btn-primary">Primary</a>
        <a href="#" class="btn btn-success">Success</a>
        <a href="#" class="btn btn-info">Info</a>
        <a href="#" class="btn btn-warning">Warning</a>
        <a href="#" class="btn btn-danger">Danger</a>
    </div>
  • Bootswatch Paper

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="well">
    <form class="form-horizontal">
      <fieldset>
        <legend>File Input</legend>
        <div class="form-group">
          <div class="col-sm-10">
            <label for="inputFile" class="col-sm-2 control-label">
              <span class="btn btn-primary">File</span>
            </label>
              <input type="file" class="form-control" id="inputFile">
          </div>
        </div>
      </fieldset>
    </form>
    </div>
    
  • Bootswatch Paper #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="well">
    <form class="form-horizontal">
      <fieldset>
        <legend>File Input</legend>
        <div class="form-group">
          <div class="col-sm-10">
            <label for="inputFile" class="col-sm-2 control-label">File
              <input type="file" class="form-control" id="inputEmail">
            </label>
          </div>
        </div>
      </fieldset>
    </form>
    </div>
    
  • Solar #49 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="well">
        <form class="form-horizontal">
          <fieldset>
            <legend>Legend</legend>
            <div class="form-group">
              <label for="inputEmail" class="col-lg-2 control-label">Email</label>
              <div class="col-lg-10">
                <input class="form-control" id="inputEmail" placeholder="Email" type="text">
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword" class="col-lg-2 control-label">Password</label>
              <div class="col-lg-10">
                <input class="form-control" id="inputPassword" placeholder="Password" type="password">
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Checkbox
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="textArea" class="col-lg-2 control-label">Textarea</label>
              <div class="col-lg-10">
                <textarea class="form-control" rows="3" id="textArea"></textarea>
                <span class="help-block">A longer block of help text that breaks onto a new line and may extend ...</span></div></div></fieldset></form></div>
  • Slate #2 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="well">
        <form class="form-horizontal">
          <fieldset>
            <legend>Legend</legend>
            <div class="form-group">
              <label for="inputEmail" class="col-lg-2 control-label">Email</label>
              <div class="col-lg-10">
                <input class="form-control" id="inputEmail" placeholder="Email" type="text">
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword" class="col-lg-2 control-label">Password</label>
              <div class="col-lg-10">
                <input class="form-control" id="inputPassword" placeholder="Password" type="password">
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Checkbox
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="textArea" class="col-lg-2 control-label">Textarea</label>
              <div class="col-lg-10">
                <textarea class="form-control" rows="3" id="textArea"></textarea>
                <span class="help-block">A longer block of help text that breaks onto a new line and may extend ...</span></div></div></fieldset></form></div>