I am facing an issue with a bootstrap button bar that is using the well class. The problem occurs when I create it twice in my code: once using HTML and another using dynamic javascript.
The bootstrap functions properly when created with HTML.
However, the buttons lose their padding when dynamically generated with javascript.
My expectation is to have consistent horizontal spacing in both instances.
Why does the dynamically created version not maintain the original formatting present in the HTML-created one?
If anyone has a solution to this, please assist me.
Original code:
<div class="well">
<button type="button" class="btn btn-primary btn-xs">Button 1</button>
<button type="button" class="btn btn-primary btn-xs">Button 2</button>
<button type="button" class="btn btn-primary btn-xs">Button 3</button>
<small class="pull-right">Right Text</small>
</div>
<div id="myMenu">
</div>
<script type="text/javascript">
$(document).ready(function () {
var upperWell = $("<div class='well clearfix'>");
$('#myMenu').append(upperWell);
var createButton = $("<button type='button' class='btn btn-primary btn-xs'>Button1</button>");
var updateButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 2</button>");
var exportButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 3</button>");
$(upperWell).append(createButton);
$(upperWell).append(updateButton);
$(upperWell).append(exportButton);
});
</script>
The JsFiddle for reference:
Your assistance is greatly appreciated.