We will see how we can create a simple bootstrap website using Custom panel ( Using Jquery ). We will use simple Jquery code for panel designing. We have used bootstrap 4 for template designing.
So the output will look like the below image.
Now we will see its code. The code is very simple , I have also used color code input for color picking
// Code Star here
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<section>
<div class="container mb-5">
<div class="row">
<div class="col-sm-4">
<h5 class="mt-3">Select Col for design</h5><br>
<select id="element" class="">
<option>Select Column</option>
<option value="col-sm-2">col-sm-2</option>
<option value="col-sm-3">col-sm-3</option>
<option value="col-sm-4">col-sm-4</option>
<option value="col-sm-6">col-sm-6</option>
<option value="col-sm-8">col-sm-8</option>
<option value="col-sm-10">col-sm-10</option>
</select>
<div class="mt-3">
<span><b>Choose Text Color</b></span>
<input type="color" id="textColor" class="mr-5 mb-3" onchange="clickColor(0, -1, -1, 2)" value="" style="width:13%;height:13%">
<br>
<span><b> Background Color</b></span>
<input type="color" id="bgColor" onchange="clickColor(0, -1, -1, 5)" value="" style="width:13%;height:13%">
<br>
<span><b> Adjust Padding </b></span>
<input type="number" id="paddng" class="mt-3" value="" style="width:13%">
</div>
</div>
<div class="col-sm-4 mt-3">
<h5 class="">Write something for Columns</h5><br>
<textarea col="4" row="4" id="message"></textarea> <br>
<button class="btn btn-primary mt-4" id="addColm" value="">Make Column</button>
</div>
</div>
<!-- Code for Display output -->
<div class="row mt-5" id="show_data">
</div>
</div>
</section>
</body>
</html>
<script>
$(document).ready(function(){
$('#addColm').click(function(){
var optionValu = $('#element').val();
var msg = $('#message').val();
var textColor = $('#textColor').val();
var bgColor = $('#bgColor').val();
var padding = $('#paddng').val();
$('#show_data').append('<div class="'+optionValu+'" style="color:'+textColor+';background-color:'+bgColor+';padding:'+padding+'">'+msg+'</div>')
// $('#show_data').addClass(optionValu);
});
});
</script>
// Code Ends here
Now run this code on the browser. Now Select col-sm- and color and hit the button
Select Col for design
Choose Text Color
Background Color
Adjust Padding
Background Color
Adjust Padding