Our Features Template Example

488 ViewsFreeFrontend.dev

This code snippet represents a “Our Features” template which is built using Bootstrap to be responsive and provide consistent styling. It includes a prominent image which can be used to showcase the product or service, and the features are presented in a clear and concise manner. The template provides a simple and easy-to-use interface for users to quickly find the information they are looking for, and it is visually appealing and user-friendly.

<section class="py-5">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-md-6">
				<div class="pe-lg-5"><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/square.png"></div>
			</div>
			<div class="col-md-6">
				<div class="ps-lg-5 mt-4 mt-lg-0">
					<span class="text-muted">Features</span>
					<h2 class="display-6 fw-bold">Our Features</h2>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit Mollitia totam recusandae voluptatibus quam!</p>
					<ul class="list-unstyled">
						<li class="d-flex align-items-center mb-3">
							<div class="text-primary me-3">
								<svg class="bi bi-check-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
								<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg>
							</div>Lorem ipsum dolor sit amet consectetur adipisicing elit
						</li>
						<li class="d-flex align-items-center mb-3">
							<div class="text-primary me-3">
								<svg class="bi bi-check-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
								<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg>
							</div>Lorem ipsum dolor sit amet consectetur
						</li>
						<li class="d-flex align-items-center mb-3">
							<div class="text-primary me-3">
								<svg class="bi bi-check-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
								<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg>
							</div>Lorem ipsum dolor sit amet consectetur adipis
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</section>

Related Code Examples

Our Features Page Block

This code snippet is for a “Our Features” page block made with Bootstrap, which means it will adjust its layout […]

Our Features Code Block

This code snippet is a “Our Features” section that displays a prominent image in the center surrounded by a list […]

Our Features Component

This code snippet is a feature section built with Bootstrap to be responsive and user-friendly. It includes 6 features with […]

Our Features Code Snippet

This code snippet is a “Our Features” section that displays two features, each with an icon and a prominent image. […]

Features Code Block

This code snippet is for a feature section that highlights 4 features with icons and an image. It is built […]

Our Features Template Example

This code snippet represents a “Our Features” template which is built using Bootstrap to be responsive and provide consistent styling. […]