Jquery Ui Dialog Buttons Not Working With Bootstrap

I'm using jquery 1.11.3 with jquery-ui 1.11.4 and with bootstrap 3.3.5 . All works fine except for standard close minibutton on the jquery ui dialog upper left corner. The symbol '

Solution 1:

You can change the order of the JS/CSS inclusion

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css

Refer https://jsfiddle.net/ZigmaEmpire/43hrvy26/2/

As jquery-ui.css comes last the CSS in that file will override any corresponding conflicting CSS in bootstrap, so now you can take advantage of jquery UI CSS instead of bootstrap CSS definitions if any