How To Add Labels To Bootstrap Dialog Footer

Need to add bootstrap label on footer of bootstrap3-dialog. according to this tutorial can add only buttons in footer area. BootstrapDialog.show({ title: 'Default Title',

Solution 1:

If the footer doesn't have any buttons will remain hidden by default (with style="display:none;") I managed to add any custom HTML to the footer like this:

BootstrapDialog.show({
  title: 'Default Title',
  message: 'Custom Footer',
  onshow: function(dialogRef) {
    dialogRef.getModalFooter()
      .css({display:'inline'})
      .find('.bootstrap-dialog-footer')
      .append('<span>Anything</span>');
   }
});

This is a very basic example, just expand the idea.

Solution 2:

I think you can handle that with CSS if you are familiar with, the aim is it will always be a button but with a "label" style, something like this :

1. Add a css class for each 'label' you want :

BootstrapDialog.show({ title: 'Default Title', message: 'Click buttons below.', buttons: [{ label: 'Title 1', cssClass: 'buttonAsLabel1' }, { label: 'Title 2', cssClass: 'buttonAsLabel2' }] });

2. Declare the Css classes the same way as the related Bootstrap label

.buttonAsLabel1 {..} .buttonAsLabel2 {..}

should worked ^^