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>