Logo

Bootstrap Markdown Examples

<div class="card card-custom">
 <div class="card-header">
  <div class="card-title">
   <h3 class="card-title">
    Bootstrap Markdown Examples
   </h3>
  </div>
 </div>
 <!--begin::Form-->
 <form class="form form-label">
  <div class="card-body">
   <div class="form-group row">
    <label class="col-form-label text-right col-lg-3 col-sm-12">Default Demo</label>
    <div class="col-lg-6 col-md-9 col-sm-12">
     <textarea name="content" class="form-control" data-provide="markdown" rows="10"></textarea>
    </div>
   </div>
   <div class="form-group row">
    <label class="col-form-label text-right col-lg-3 col-sm-12">Modal Demos</label>
    <div class="col-lg-6 col-md-9 col-sm-12">
     <a href="#" class="btn btn-light-primary font-weight-bold btn-sm" data-toggle="modal" data-target="#kt_markdown_modal">Launch modal examples</a>
    </div>
   </div>
  </div>
  <div class="card-footer">
   <div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-9">
     <button type="submit" class="btn btn-primary">Submit</button>
     <button type="submit" class="btn btn-secondary">Cancel</button>
    </div>
   </div>
  </div>
 </form>
 <!--end::Form-->
</div>
"use strict";
// Class definition

var KTBootstrapMarkdown = function () {
 // Private functions
 var demos = function () {

 }

 return {
  // public functions
  init: function() {
   demos();
  }
 };
}();

// Initialization
jQuery(document).ready(function() {
 KTBootstrapMarkdown.init();
});

Validation State Examples

Success! You've done it.
Example help text that remains unchanged.
Sorry, that username's taken. Try another?
Example help text that remains unchanged.
<div class="card card-custom">
 <div class="card-header">
  <div class="card-title">
   <h3 class="card-title">
    Validation State Examples
   </h3>
  </div>
 </div>
 <!--begin::Form-->
 <form class="form form-label">
  <div class="card-body">
   <div class="form-group row is-valid">
    <label class="col-form-label text-right col-lg-3 col-sm-12">Success State</label>
    <div class="col-lg-6 col-md-9 col-sm-12">
     <textarea name="content" class="form-control" data-provide="markdown" rows="10"></textarea>
     <div class="valid-feedback">Success! You've done it.</div>
     <span class="form-text text-muted">Example help text that remains unchanged.</span>
    </div>
   </div>
   <div class="form-group row is-invalid">
    <label class="col-form-label text-right col-lg-3 col-sm-12">Error State</label>
    <div class="col-lg-6 col-md-9 col-sm-12">
     <textarea name="content" class="form-control" data-provide="markdown" rows="10"></textarea>
     <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
     <span class="form-text text-muted">Example help text that remains unchanged.</span>
    </div>
   </div>
  </div>
  <div class="card-footer">
   <div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-9">
     <button type="submit" class="btn btn-primary">Submit</button>
     <button type="submit" class="btn btn-secondary">Cancel</button>
    </div>
   </div>
  </div>
 </form>
 <!--end::Form-->
</div>
"use strict";
// Class definition

var KTBootstrapMarkdown = function () {
 // Private functions
 var demos = function () {

 }

 return {
  // public functions
  init: function() {
   demos();
  }
 };
}();

// Initialization
jQuery(document).ready(function() {
 KTBootstrapMarkdown.init();
});

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo