<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>
<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>
<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>
<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>