• Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

  • Appointment 12:03 21 Jan 2019

    What is Lorem Ipsum ?

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

Include File
                                            
<!--XEditor Css-->
<link rel="stylesheet" href="plugins/bootstrap4-editable/css/bootstrap-editable.css">
                                            
                                        
HTML Usage

To add color to pin board class="bg-info"

                                            
<ul class="pin-board" id="draggablePanelList">
<li class="pin-board-info">
    <div class="bg-info"> // Add color to pin board just use bg-info class
        <small class="task" data-type="text" data-placement="right">Appointment</small> <small class="pull-right editable editable-click date" data-type="text" data-placement="right"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-info-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-info-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-info-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-success">
    <div class="bg-success">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-success-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-success-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-success-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-danger">
    <div class="bg-danger">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-danger-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-danger-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-danger-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-warning">
    <div class="bg-warning">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-warning-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-warning-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-warning-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-primary">
    <div class="bg-primary">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-primary-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-primary-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-primary-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-dark">
    <div class="bg-dark">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-dark-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-dark-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-dark-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-purple">
    <div class="bg-purple">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-purple-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-purple-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-purple-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-orange">
    <div class="bg-orange">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-orange-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-orange-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-orange-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-red">
    <div class="bg-red">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-red-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-red-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-red-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-aqua">
    <div class="bg-aqua">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-aqua-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-aqua-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-aqua-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-secondary">
    <div class="bg-secondary">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-secondary-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-secondary-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-secondary-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
<li class="pin-board-light">
    <div class="bg-light text-muted">
        <small class="task">Appointment</small> <small class="pull-right editable editable-click date"
            style="padding-top: 2px;"><i class="far fa-clock"></i> 12:03 21 Jan 2019</small>
            <h4 title="" data-original-title="" class="editable editable-click" id="pin-board-bg-light-title" data-type="text" data-placement="right" data-title="Enter title">What is Lorem Ipsum ?</h4> 
        <p  id="pin-board-bg-light-message" data-type="textarea" data-pk="1" data-placeholder="Your message here..." data-title="Enter Message" class="editable editable-pre-wrapped editable-click pin-board-text text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</p>
        <a href="#" id="pin-board-light-delete"><i class="fa fa-trash"></i></a>
    </div>
</li>
</ul>
                                            
                                        
Include File
                                            
<!-- X-Editable (bootstrap version) -->
<script src="plugins/bootstrap4-editable/js/bootstrap-editable.js"></script>
<script>
    //Pin Board bg-info
    $('.pin-board-info .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-info .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-info-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-info-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Info
    $('#pin-board-info-delete').click(function(){
        $('.pin-board-info').css('display', 'none');
    });
    //Pin Board bg-success
    $('.pin-board-success .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-success .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-success-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-success-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Success
    $('#pin-board-success-delete').click(function(){
        $('.pin-board-success').css('display', 'none');
    });
    //Pin Board bg-danger
    $('.pin-board-danger .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-danger .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-danger-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-danger-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Danger
    $('#pin-board-danger-delete').click(function () {
        $('.pin-board-danger').css('display', 'none');
    });
    //Pin Board bg-warning
    $('.pin-board-warning .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-warning .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-warning-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-warning-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Warning
    $('#pin-board-warning-delete').click(function () {
        $('.pin-board-warning').css('display', 'none');
    });
    //Pin Board bg-primary
    $('.pin-board-primary .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-primary .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-primary-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-primary-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Primary
    $('#pin-board-primary-delete').click(function () {
        $('.pin-board-primary').css('display', 'none');
    });
    //Pin Board bg-dark
    $('.pin-board-dark .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-dark .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-dark-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-dark-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Dark
    $('#pin-board-dark-delete').click(function () {
        $('.pin-board-dark').css('display', 'none');
    });
    //Pin Board bg-purple
    $('.pin-board-purple .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-purple .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-purple-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-purple-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Purple
    $('#pin-board-purple-delete').click(function () {
        $('.pin-board-purple').css('display', 'none');
    });
    //Pin Board bg-orange
    $('.pin-board-orange .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-orange .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-orange-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-orange-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Orange
    $('#pin-board-orange-delete').click(function () {
        $('.pin-board-orange').css('display', 'none');
    });
    //Pin Board bg-red
    $('.pin-board-red .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-red .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-red-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-red-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Red
    $('#pin-board-red-delete').click(function () {
        $('.pin-board-red').css('display', 'none');
    });
    //Pin Board bg-aqua
    $('.pin-board-aqua .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-aqua .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-aqua-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-aqua-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Aqua
    $('#pin-board-aqua-delete').click(function () {
        $('.pin-board-aqua').css('display', 'none');
    });
    //Pin Board bg-secondary
    $('.pin-board-secondary .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-secondary .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-secondary-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-secondary-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Secondary
    $('#pin-board-secondary-delete').click(function () {
        $('.pin-board-secondary').css('display', 'none');
    });
    //Pin Board bg-light
    $('.pin-board-light .task').editable({
        showbuttons: 'bottom'
    });
    $('.pin-board-light .date').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-light-title').editable({
        showbuttons: 'bottom'
    });
    $('#pin-board-bg-light-message').editable({
        showbuttons: 'bottom'
    });
    //Delete Pin Board Light
    $('#pin-board-light-delete').click(function () {
        $('.pin-board-light').css('display', 'none');
    });
    //Here you can call ajax to submit / save your task to Database
</script>