Images

Responsive image styles, thumbnails and shapes.

Rounded Image

	

	
	<img class="rounded-lg" src="assets/img/avatar/avatar-11.jpg" alt="image">

Image Thumbnail

	

	
	<img class="border-2 border-border-color rounded-lg" src="assets/img/avatar/avatar-11.jpg" alt="image">

Rounded Circle

	

	
	<div class="flex items-center justify-center">
		<img class="rounded-full w-50" src="assets/img/avatar/avatar-01.jpg" alt="image">
	</div>

Rounded Bordered

	

	
	<div class="flex items-center justify-center">
		<img class="rounded-full border-2 border-border-color w-50" src="assets/img/avatar/avatar-01.jpg" alt="image">
	</div>

Image Left Align

	

	
	<img class="rounded-lg w-46" src="assets/img/avatar/avatar-11.jpg" alt="image">

Image Center Align

	

	
	<div class="flex items-center justify-center">
		<img class="rounded-lg w-46" src="assets/img/avatar/avatar-11.jpg" alt="image">
	</div>

Image Right Align

	

	
	<div class="flex items-end justify-end">
		<img class="rounded-lg w-46" src="assets/img/avatar/avatar-11.jpg" alt="image">
	</div>

Figures

A caption for the above image.

	

	
	<div class="flex gap-6">
		<div>
			<img class="rounded-lg w-auto mb-2" src="assets/img/avatar/avatar-11.jpg" alt="image">
			<p class="text-start">A caption for the above image.</p>
		</div>  

		<div>
			<img class="rounded-lg w-auto mb-2" src="assets/img/avatar/avatar-11.jpg" alt="image">
			<p class="text-center">A caption for the above image.</p>
		</div>

		<div>
			<img class="rounded-lg w-auto mb-2" src="assets/img/avatar/avatar-11.jpg" alt="image">
			<p class="text-end">A caption for the above image.</p>
		</div> 
	</div>