Please wait...

Try Bacotna with other template and color skins
Index variants
Color options

Components images

  1. Home
  2. Components
  3. Images
Image responsive
Image demo 1
Image circle
Image demo 2
Image thumbnail
Image demo 3
Image thumbnail gray
Image demo 4 
<img src="img/dummy/img01.jpg" class="img-responsive" alt="Image demo 1" />
<img src="img/dummy/img02.jpg" class="img-circle img-responsive" alt="Image demo 2" />
<img src="img/dummy/img01.jpg" class="img-thumbnail img-responsive" alt="Image demo 3" />
<img src="img/dummy/img01.jpg" class="img-thumbnail thumbnail-gray img-responsive" alt="Image demo 4" />

Cargo package

Ea sea veniam perpetua, ei pro saepe melius. Ex sea summo maluisset sit ad adhuc illum.

Learn more

<div class="thumbnail">
	<img src="img/courier/img01.jpg" class="img-responsive" alt="" />
	<div class="content">
		<h4>Cargo package</h4>
		<p>[...]</p>
		<p><a href="#" class="btn btn-default btn-sm">Learn more</a></p>
	</div>
</div>

Regular classes

Regular class for beginner

Aliquam vocibus repudiare, possim perfecto mei an. Te mei quem quot, in sale fugit doctus est.

Join this classes

  • Monday-Friday
  • 08:00AM-10:00AM
$120/mon
<div class="classes-wrapp">
	<div class="img-wrapper">
		<div class="coption-heading">
			<h4>Regular classes</h4>
		</div>
		<img src="img/fitness/img01.jpg" class="img-responsive" alt="" />
	</div>
	<div class="classes-content">
		<h5>Regular class for beginner</h5>
		<p>[...]</p>
		<p><a href="#" class="btn btn-default">Join this classes</a></p>
		<ul class="schedules">
			<li><i class="fa fa-calendar primary"></i> Monday-Friday</li>
			<li><i class="fa fa-sun-o primary"></i> 08:00AM-10:00AM</li>
		</ul>
		<div class="price">$120<span>/mon</span></div>
	</div>
</div>

Company profile

Ea sea veniam perpetua, ei pro saepe melius. Ex sea summo maluisset sit ad adhuc illum.

Learn more

<div class="thumbnail content-center">
	<img src="img/construction/img01.jpg" class="img-responsive" alt="" />
	<div class="content">
		<h4>Company profile</h4>
		<p>[...]</p>
		<p><a href="#" class="btn btn-buttercup btn-sm">Learn more</a></p>
	</div>
</div>
Caption style 1
Project title here

Web design

Caption style 2
Dissentias By 99webpage
Caption style 3
Caption style 4
Project title here

Cu nec salutandi voluptatibus. Ceteros ad ius ut eam.

Learn more 
<!-- Caption style 1 -->
<div class="img-wrapper">
	<div class="img-caption link-zoom primary capZoomInDown">
		<div class="caption-content">
			<div>
				<a href="portfolio-detail.html"><i class="fa fa-link icon-circle fa-3x"></i></a>
				<a href="img/gallery/570x440/img01.jpg" data-pretty="prettyPhoto"><i class="fa fa-search icon-circle fa-3x"></i></a>
				<h5><a href="#">Project title here</a></h5>
				<p>Web design</p>
			</div>
		</div>
	</div>
	<img src="img/gallery/380x340/img01.jpg" class="img-responsive" alt="" />
</div>

<!-- Caption style 2 -->
<div class="img-wrapper">
	<div class="img-caption white-bg capBounceOut">
		<a href="portfolio-detail.html" class="zoomer">
			<h5>Dissentias
			<span>By 99webpage</span></h5>
		</a>
	</div>
	<img src="img/gallery/380x340/img02.jpg" class="img-responsive" alt="" />
</div>

<!-- Caption style 3 -->
<div class="img-wrapper">
	<div class="img-caption dark-frame capZoomIn">
		<div class="caption-content">
			<div>
				<a href="portfolio-detail.html" class="linker"><i class="fa fa-link"></i></a>
				<a href="img/gallery/450x260/img01.jpg" data-pretty="prettyPhoto" class="zoomer"><i class="fa fa-search"></i></a>
			</div>
		</div>
	</div>
	<img src="img/gallery/380x340/img03.jpg" class="img-responsive" alt="" />
</div>

<!-- Caption style 4 -->
<div class="img-wrapper">
	<div class="img-caption primary capBounceOut">
		<div class="caption-content">
			<div>
				<h5>Project <span>title here</span></h5>
				<p>[...]</p>
				<a href="#" class="btn btn-stroke btn-sm">Learn more</a>
			</div>
		</div>
	</div>
	<img src="img/gallery/380x340/img04.jpg" class="img-responsive" alt="" />
</div>