Bootstrap Tabs used with Advanced Custom Fields ACF PHP JS HTML

Bootstrap Tabs used with Advanced Custom Fields ACF PHP JS HTML.php

<?php if( have_rows('tabs') ): ?>
	<ul class="nav nav-tabs" id="myTab" role="tablist">
		<?php $i=0; while ( have_rows('tabs') ) : the_row(); ?>
			<?php 
				$string = sanitize_title( get_sub_field('tab_title') ); 
			?>
			<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?>  >
				<a href="#<?php echo $string ?>" aria-controls="<?php echo $string ?>" role="tab" data-toggle="tab"><?php the_sub_field('tab_title'); ?></a>
			</li>
		<?php $i++; endwhile; ?>
	</ul>
	<div class="tab-content">
		<?php $i=0; while ( have_rows('tabs') ) : the_row(); ?>
			<?php 
				$string = sanitize_title( get_sub_field('tab_title') ); 
			?>
		    <div role="tabpanel" class="tab-pane text-center fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">
		    	<h2><?php the_sub_field('tab_title'); ?></h2>
		    	<?php the_sub_field('tab_text'); ?>
		    </div>
		<?php $i++; endwhile; ?>
	</div>
<?php endif; ?>

[ { "key": "group_57a2ebbd3e02a", "title": "Front Tabs", "fields": [ { "key": "field_57a2ebb2356db", "label": "Front Tabs", "name": "front_tabs", "type": "repeater", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "collapsed": "", "min": "", "max": 4, "layout": "table", "button_label": "Add Tab Item", "sub_fields": [ { "key": "field_57a2ebbb356dc", "label": "Title", "name": "title", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "", "readonly": 0, "disabled": 0 }, { "key": "field_57a2ebc1356dd", "label": "Content", "name": "content", "type": "textarea", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "maxlength": "", "rows": "", "new_lines": "wpautop", "readonly": 0, "disabled": 0 }, { "key": "field_57a2ebc9356de", "label": "Link", "name": "link", "type": "page_link", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "post_type": [], "taxonomy": [], "allow_null": 0, "multiple": 0 } ] } ], "location": [ [ { "param": "page_type", "operator": "==", "value": "front_page" } ] ], "menu_order": 0, "position": "normal", "style": "default", "label_placement": "top", "instruction_placement": "label", "hide_on_screen": [ "the_content" ], "active": 1, "description": "" } ]