Boostrap Tabs via ACF

• mustafaslk334

• March 14, 2019 at 6:39 pm

I’m trying to integrate Bootstrap Tabs with ACF.

But how should I pull data when I create more than one tab?

When I use a tab at this time I can pull in this way but when I use more than one, how should I do?

How do I create a loop to use multiple tabs?

How to pull Tab links and content?

Front-end Codes

	<!-- tab start -->
	<div class="row mar0 tabrk">
		<ul class="tabnav nav-pills">
			<li class="active"><a data-toggle="pill" href="#home"><img class="img-responsive" src="logo.png"></a></li>
			<li><a data-toggle="pill" href="#menu1"><img class="img-responsive" src="logo.png"></a></li>
		</ul>
		<div class="tabbody tab-content">
			<div id="home" class="tab-pane fade in active">
				<ul>
					<li>
						<div class="media">
							<div class="media-left" style="border-color: #ecb319;">
								<a href="#">
									<img class="media-object" src="images/marka/1.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading" style="color: #ecb319;">Asset Management</h4>
								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.

							</div>
						</div>
					</li>
					<li>
						<div class="media">
							<div class="media-left" style="border-color: #a8bbe1;">
								<a href="#">
									<img class="media-object" src="images/marka/2.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading" style="color: #a8bbe1;">Asset Management</h4>
								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.

							</div>
						</div>
					</li>
					<li>
						<div class="media">
							<div class="media-left" style="border-color: #3dd0d9;">
								<a href="#">
									<img class="media-object" src="images/marka/3.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading" style="color: #3dd0d9;">Asset Management</h4>
								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.

							</div>
						</div>
					</li>
					<li>
						<div class="media">
							<div class="media-left" style="border-color: #8a8065;">
								<a href="#">
									<img class="media-object" src="images/marka/4.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading" style="color: #8a8065;">Asset Management</h4>
								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.

							</div>
						</div>
					</li>
					<li>
						<div class="media">
							<div class="media-left" style="border-color: #a4d46b;">
								<a href="#">
									<img class="media-object" src="images/marka/5.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading" style="color: #a4d46b;">Asset Management</h4>
								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.

							</div>
						</div>
					</li>
					<li>
						<div class="media">
							<div class="media-left" style="border-color: #164f9c;">
								<a href="#">
									<img class="media-object" src="images/marka/6.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading" style="color: #164f9c;">Asset Management</h4>
								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.

							</div>
						</div>
					</li>
					<li>
						<div class="media">
							<div class="media-left" style="border-color:#f0441c;">
								<a href="#">
									<img class="media-object" src="images/marka/7.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading" style="color: #f0441c;">Asset Management</h4>
								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.

							</div>
						</div>
					</li>
					<li>
						<div class="media">
							<div class="media-left" style="border-color: #9c6cb2;">
								<a href="#">
									<img class="media-object" src="images/marka/8.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading" style="color: #9c6cb2;">Asset Management</h4>
								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.

							</div>
						</div>
					</li>
					<li>
						<div class="media">
							<div class="media-left" style="border-color:#17dfc0; ">
								<a href="#">
									<img class="media-object" src="images/marka/9.png">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading" style="color: #17dfc0;">Asset Management</h4>
								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.

							</div>
						</div>
					</li>
				</ul>
			</div>
			<div id="menu1" class="tab-pane fade">
				<h3>Menu 1</h3>
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

			</div>

		</div>
	</div>
	<!-- tab end -->

Now:

	<!-- tab start -->
	<div class="row mar0 tabrk">
		<ul class="tabnav nav-pills">
			 	<?php while(have_rows('tabs')) : the_row(); ?>
 <li class=""><a data-toggle="pill" href="#home"><img class="img-responsive" src="<?php the_sub_field('marka_logo'); ?>"></a></li>
				<?php endwhile;?>
		</ul>

<?php // reset the rows of the repeater
  reset_rows(); ?>

		<div class="tabbody tab-content">
			<div id="home" class="tab-pane fade in active">
				<ul>

					  <?php while(have_rows('tabs')) : the_row('marka_ozellikler'); ?>
					<li>
						<div class="media">
							<div class="media-left" style="border-color: <?php the_sub_field('marka_color'); ?>;">
								<a href="#">
									<img class="media-object" src="<?php the_sub_field('marka_sol_gorsel'); ?>">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading" style="color: <?php the_sub_field('marka_color'); ?>;"><?php the_sub_field('marka_baslik'); ?></h4>
								<?php the_sub_field('marka_aciklama'); ?>

							</div>
						</div>
					</li>
				<?php endwhile; ?>

				</ul>

			</div>
		</div>
	</div>
	<!-- tab end -->