Elements


These modular elements can be readily used and customized across pages and in different blocks.


	<!-- With image background -->
	<div class="countUp counter1 bg-image row justify-content-center" style="background-image: url('assets/img/bg-counter.jpg');">
		<div class="col-12">
			<div class="d-md-flex d-block justify-content-md-between">
				<div class="d-md-flex d-block count-single-block">
					<div class="icon">
						<i class="fa fa-check-square-o" aria-hidden="true"></i>
					</div>
					<div class="count_block">
						<div class="counter">642</div>
						<p class="count-text">Completed Projects</p>
					</div>
				</div>
				<div class="d-md-flex d-block count-single-block">
					...
				</div>
				<div class="d-md-flex d-block count-single-block">
					...
				</div>
				<div class="d-md-flex d-block count-single-block">
					...
				</div>
			</div>
		</div>
	</div>

	<!-- Custom style 2 -->
	<div class="countUp counter2 bg-sand px-4 pb-4">	
		<div class="row">
			<div class="col-md-6 col-lg-3">
				<div class="info text-center info-count info-boxed">
					<div class="icon icon-circle">
						<i class="fa fa-check-square-o" aria-hidden="true"></i>
					</div>
					<div class="count_block">
						<div class="counter">642</div>
						<p class="count-text">Completed Projects</p>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-lg-3">
				<div class="info text-center info-count info-boxed">
					...
				</div>
			</div>
			<div class="col-md-6 col-lg-3">
				<div class="info text-center info-count info-boxed">
					...
				</div>
			</div>
			<div class="col-md-6 col-lg-3">
				<div class="info text-center info-count info-boxed">
					...
				</div>
			</div>
		</div>
	</div>

						
how to use
  • Just Copy the code. Don't remove the classnames. Use your own class for customization

Example 1:

642

Completed Projects

246

Employeers

3456

Coffee Cups

431

Happy Clients

Example 2:

642

Completed Projects

246

Employeers

3456

Coffee Cups

431

Happy Clients