css - can bootstrap tabs show code? -

i want use bootstrap panels , tabs show image , on tab show code. how can this? writing in haml. proper way use pre , code tags? when code in html executes form, want show code use on how it.

thanks

    .col-md-4       .panel.panel-default         .panel-body           .container             %ul.nav.nav-tabs               %li.active                 %a{:href => "#home"} preview               %li                 %a{:href => "#menu1"} html               %li                 %a{:href => "#menu2"} haml             .tab-content               #home.tab-pane.fade.in.active                 .col-md-3                   %img{:alt => "forms", :src => image_path('form.png'), :style => 'width: 100%; height: auto;'}                 #menu1.tab-pane.fade                 %h3 html                 %pre                   %code                     %p                       <div class="section section-form">                       <div class="section-head">form</div>                       <div class="section-body">                       <form>                       <div class="form-group">                       <label for="exampleinputemail1">email address</label>                       <input type="email" class="form-control" id="exampleinputemail1" placeholder="enter email">                       </div>                       <div class="form-group">                       <label for="exampleinputemail1">email address</label>                       <input type="email" class="form-control" id="exampleinputemail1" placeholder="enter email" disabled>                       </div> 

got it

               %pre                   %code                     :ruby                       html = <<-html                         <div class="section section-form">                         <div class="section-head">form</div>                         <div class="section-body">                         <form>                         <div class="form-group">                         <label for="exampleinputemail1">email address</label>                         <input type="email" class="form-control" id="exampleinputemail1" placeholder="enter email">                         </div>                         <div class="form-group">                         <label for="exampleinputemail1">email address</label>                         <input type="email" class="form-control" id="exampleinputemail1" placeholder="enter email" disabled>                         </div>                       html                     = html