Responsive Bootstrap 5 Detailed Features Section
Responsive Bootstrap 5 Detailed Features Section
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Bootstrap 5 Detailed Features Section</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
html {
scroll-behavior: smooth;
}
body {
font-family: "Poppins", sans-serif;
font-weight: normal;
font-style: normal;
overflow-x: hidden;
}
</style>
</head>
<body>
<section class="py-5">
<div class="container">
<div class="row justify-content-center text-center mb-3">
<div class="col-lg-8 col-xl-7">
<span class="text-muted">Features</span>
<h2 class="display-5 fw-bold">Our Features</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum
voluptatum quasi delectus.</p>
</div>
</div>
<div class="row gx-5 align-items-center">
<div class="col-md-4 mb-5 mb-md-0"><img alt="" class="img-fluid rounded"
src="https://docsallover.com/static/images/docsallover_advantage.png"></div>
<div class="col-md-8">
<div class="row gy-4">
<div class="col-md-6">
<div class="d-flex">
<div class="text-muted">
<svg class="bi bi-aspect-ratio" fill="currentColor" height="48" viewbox="0 0 16 16"
width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z">
</path>
<path
d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z">
</path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">Responsive Design</h5>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<div class="text-muted">
<svg class="bi bi-emoji-wink" fill="currentColor" height="48" viewbox="0 0 16 16"
width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z">
</path>
<path
d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z">
</path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">Easy-To-Use</h5>
<p class="fw-light">Lorem ipsum</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<div class="text-muted">
<svg class="bi bi-layout-text-window-reverse" fill="currentColor" height="48"
viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z">
</path>
<path
d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z">
</path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">100+ Components</h5>
<p class="fw-light">Lorem ipsum</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<div class="text-muted">
<svg class="bi bi-clipboard-check" fill="currentColor" height="48"
viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"
fill-rule="evenodd"></path>
<path
d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z">
</path>
<path
d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z">
</path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">Copy & Paste</h5>
<p class="fw-light">Lorem ipsum</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<div class="text-muted">
<svg class="bi bi-speedometer2" fill="currentColor" height="48" viewbox="0 0 16 16"
width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z">
</path>
<path
d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"
fill-rule="evenodd"></path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">Unlimited Usage</h5>
<p class="fw-light">Lorem ipsum</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<div class="text-muted">
<svg class="bi bi-pencil-square" fill="currentColor" height="48" viewbox="0 0 16 16"
width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z">
</path>
<path
d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"
fill-rule="evenodd"></path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">100% Customizable</h5>
<p class="fw-light">Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<div class="row justify-content-center text-center mb-3">
<div class="col-lg-8 col-xl-7">
<span class="text-muted">Features</span>
<h2 class="display-5 fw-bold">Our Features</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum
voluptatum quasi delectus.</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-4 order-2 order-md-1">
<div class="d-flex mb-4 mt-4 mt-md-0">
<div class="text-muted">
<svg class="bi bi-aspect-ratio" fill="currentColor" height="48" viewbox="0 0 16 16"
width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z">
</path>
<path
d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z">
</path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">Responsive Design</h5>
<p class="fw-light">Lorem ipsum</p>
</div>
</div>
<div class="d-flex mb-4">
<div class="text-muted">
<svg class="bi bi-emoji-wink" fill="currentColor" height="48" viewbox="0 0 16 16" width="48"
xmlns="http://www.w3.org/2000/svg">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path
d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z">
</path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">Easy-To-Use</h5>
<p class="fw-light">Lorem ipsum</p>
</div>
</div>
<div class="d-flex">
<div class="text-muted">
<svg class="bi bi-layout-text-window-reverse" fill="currentColor" height="48"
viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z">
</path>
<path
d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z">
</path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">100+ Components</h5>
<p class="fw-light mb-0">Lorem ipsum</p>
</div>
</div>
</div>
<div class="col-md-4 pe-lg-5 order-1 order-md-2"><img alt="" class="img-fluid rounded"
src="https://docsallover.com/static/images/docsallover_advantage.png"></div>
<div class="col-md-4 ps-lg-5 order-3 order-md-3">
<div class="d-flex mb-4 mt-5 mt-md-0">
<div class="text-muted">
<svg class="bi bi-clipboard-check" fill="currentColor" height="48" viewbox="0 0 16 16"
width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"
fill-rule="evenodd"></path>
<path
d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z">
</path>
<path
d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z">
</path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">Copy & Paste</h5>
<p class="fw-light">Lorem ipsum</p>
</div>
</div>
<div class="d-flex mb-4">
<div class="text-muted">
<svg class="bi bi-speedometer2" fill="currentColor" height="48" viewbox="0 0 16 16"
width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z">
</path>
<path
d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"
fill-rule="evenodd"></path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">Unlimited Usage</h5>
<p class="fw-light">Lorem ipsum</p>
</div>
</div>
<div class="d-flex">
<div class="text-muted">
<svg class="bi bi-pencil-square" fill="currentColor" height="48" viewbox="0 0 16 16"
width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z">
</path>
<path
d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"
fill-rule="evenodd"></path>
</svg>
</div>
<div class="ms-4">
<h5 class="fw-bold">100% Customizable</h5>
<p class="fw-light mb-0">Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</section>
<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://docsallover.com/static/images/docsallover_advantage.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>
<section class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center">
<div class="pe-lg-5"><img alt="" class="img-fluid rounded"
src="https://docsallover.com/static/images/docsallover_advantage.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>
<div class="row">
<div class="col-sm-6 text-center">
<div class="py-4">
<div class="text-muted">
<svg class="bi bi-aspect-ratio" fill="currentColor" height="48"
viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z">
</path>
<path
d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z">
</path>
</svg>
</div>
<h5 class="mt-3">Responsive Design</h5>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="py-4">
<div class="text-muted">
<svg class="bi bi-emoji-wink" fill="currentColor" height="48"
viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z">
</path>
<path
d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z">
</path>
</svg>
</div>
<h5 class="mt-3">Easy-To-Use</h5>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="py-4">
<div class="text-muted">
<svg class="bi bi-layout-text-window-reverse" fill="currentColor" height="48"
viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z">
</path>
<path
d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z">
</path>
</svg>
</div>
<h5 class="mt-3">100+ Components</h5>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="py-4">
<div class="text-muted">
<svg class="bi bi-clipboard-check" fill="currentColor" height="48"
viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"
fill-rule="evenodd"></path>
<path
d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z">
</path>
<path
d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z">
</path>
</svg>
</div>
<h5 class="mt-3">Copy & Paste</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Bootstrap 5 snippet provides a modern and visually appealing component for showcasing your product or service's key features or benefits. It's designed to present information clearly and effectively, ensuring a compelling display across all devices.
Key Features
- Responsive Design: The features section adapts seamlessly to different screen sizes, ensuring optimal readability and presentation on desktops, tablets, and mobile devices.
- Clear Benefit Presentation: Each feature block is structured to clearly articulate a specific benefit or capability, often paired with an icon or image for enhanced understanding. The layout alternates between a detailed description and a visual mockup of a mobile application for a dynamic presentation.
- Customizable Styling: Easily modify the appearance of feature cards, icons, text, and overall layout using Bootstrap's extensive utility classes to match your brand.
- Detailed & Dynamic Layout: The design effectively combines a list of key features with a prominent visual mockup, providing both textual and visual information to the user.
Implementation
- Include Bootstrap 5: Ensure you have Bootstrap 5 installed or configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the features section, typically using Bootstrap's grid system (
row,col) to arrange individual feature cards or blocks. The layout uses columns to display the feature list on one side and the visual mockup on the other. - Apply Bootstrap Classes: Utilize Bootstrap 5's CSS classes for styling, such as
container,row,col-,card,card-body,text-center,mb-,p-, and responsive grid classes (col-md-4,col-lg-3). - Populate Content: Fill each feature block with relevant content, including a compelling heading, a concise description, and an appropriate icon or small image. Place the visual mockup within its designated column.
Latest Snippets
View All
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Developer-Focused Tailwind Hero with Live Sample Code Block
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
