<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h4>Working well in Moodle 3.3.3 - Note using the FontAwesome Icon Filter- plugin for icons</h4> </div> </div> </div> </div> <!-- Start of content block - copy from below this for Moodle --> <div class="editor-indent" style="margin-left: 20px; padding: 0 0 0 40px; margin-right: 50px"> <h5>Intro text</h5> <div class="panel panel-default" style="box-sizing: border-box; margin-bottom: 24px; border: 1px solid rgb(221, 221, 221); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px; color: rgb(51, 51, 51); ;"> <div class="panel-heading"><h3>[fa-book]Reading:</h3></div> <div class="panel-body"><div class="panel-body"><h5>Some text</h5> <!-- Start of content block --> <!-- Start of content block --> <div class="editor-indent" style="margin-left: 20px; padding: 0 0 0 40px; margin-right: 50px"> <ul class="nav nav-tabs"> <li class=""><a data-toggle="tab" href="#home">FAQ 1</a></li> <li class="active"><a data-toggle="tab" href="#menu1">FAQ 2</a></li> <li class=""><a data-toggle="tab" href="#menu2">FAQ 3</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade"><p>tab1</p></div> <div id="menu1" class="tab-pane fade active in"><p>tab2</p></div> <div id="menu2" class="tab-pane fade"><p>tab3</p></div> </div><p></p></div>