Ace editor doesn't work with bootstrap

Question

I use boostrap default example theme: http://getbootstrap.com/examples/jumbotron-narrow/

and i\'d like to past ace editor instead central block, but ace editor doesn\'t

Answer 1

Ace should work fine with Bootstrap. Make sure you've included the appropriate ACE js scripts and set an specific height for it's container.

Ace Bootstrap Example

http://www.bootply.com/5wt39zvswV

Answer 2

To test what goes wrong:

1. check if Ace have added other divs into <div id="editor">, if no, there must be some js error in console.
2. If Ace is there but isn't visible, remove all text from <div id="editor"> and comment out ace.edit line to see what size ace will get (ace tries to match height of that div)
3. if the issue is indeed that Ace gets height=0, either add explicit height to the editor div,
4. or if you want it to fit to text, set maxLines and minLines options as shown in https://github.com/ajaxorg/ace-builds/blob/v1.1.6/demo/autoresize.html#L41-L43, however setting maxLines very large isn't recomended since it disables optimization of drawing only visible text, and can make editor slow for large documents.