Learn how to create a modern feature section using HTML, CSS, and Bootstrap 5. Follow easy steps to design a clean and mobile-friendly layout.
Table of Contents
A feature section is a part of a website that highlights key services, benefits, or features of a product. It's often placed on the homepage to catch attention.
In this tutorial, we will create a modern, clean, and responsive feature section using HTML, CSS, and Bootstrap 5. The design will work well on both desktop and mobile screens.
Prerequisites
Before you start, make sure you have the following:
- Basic understanding of HTML & CSS
- Basic knowledge of Bootstrap 5
- A code editor like VS Code
- Bootstrap 5 CDN link
Source Code
Step 1 (HTML Code):
To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our feature section. Lets break down the HTML code step by step:
1. Document Setup
<!DOCTYPE html>
<html lang="en">- Declares HTML5 doctype.
- lang="en" sets the language of the webpage to English.
2. <head> Section
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Features</title>- charset="UTF-8" allows support for most characters and symbols.
- viewport ensures the page is responsive on mobile devices.
- title sets the name seen on the browser tab.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">- Loads Bootstrap CSS v5.0.2, a popular CSS framework.
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">- Loads the Inter font from Google Fonts.
<link rel="stylesheet" href="styles.css">
</head>- Links to an external custom CSS file named styles.css.
3. <body> Section
<h2 class="text-center mt-2 fw-bold">Key Features</h2>- Displays a centered heading with Bootstrap classes:
- text-center – center aligns text.
- mt-2 – margin top.
- fw-bold – bold font weight.
4. Feature Section
<section class="my-5">
<div class="container-fluid">
<div class="flex-container"><section>groups all feature boxes.- container-fluid (Bootstrap) allows full-width layout.
- flex-container is styled in styles.css using Flexbox.
5. Each Feature Block (Repeated 3 times)
Each feature is made of:
- Text (feature title)
- Icon (SVG graphic)
- Tooltip/description
- Circular decoration
Example:
A. Feature Box Layout
<div class="custom-flex-layout arrow-left arrow-violet">- custom-flex-layout: Flexbox layout for feature alignment.
- arrow-left: may display a left-pointing arrow.
- arrow-violet: custom color theme for this box.
B. Feature Text
<div class="text-container">
<h3 class="headline">Customized access and permissions for different user types</h3>
</div>- Displays a feature title.
- headline is styled with custom font and spacing.
C. Icon and Tooltip
<div class="custom-icon-wrapper feature-violet feature-icon">
<svg>...</svg>
<p class="custom-tooltip feature-violet">Lorem ipsum...</p>
</div>- svg: A scalable icon (in this case, a monitor or database).
- custom-tooltip: Appears on hover or focus, explaining the feature.
- feature-violet: Applies matching colors.
D. Decorative Circle
<div class="circle-decoration rotate90">
<svg viewBox="0 0 100 100" class="circle-svg">
<circle cx="50" cy="50" r="49" fill="none" stroke="#9762AA" stroke-width="1" stroke-dasharray="70 40 70 40" stroke-linecap="round" />
</svg>
</div>- Adds a dashed circular border with custom color (#9762AA).
- rotate90 may rotate the SVG 90 degrees for a visual effect.
.jpg)
Step 2 (CSS Code):
Once the basic HTML structure of the website is in place, the next step is to add styling to the feature section using CSS. Below is a detailed explanation of each section:
Global Styling
body {
font-family: 'Inter', sans-serif;
}- Applies the "Inter" font to the entire page for a clean, modern look.
Feature Icon Size
.feature-icon svg {
width: 2rem;
height: 2rem;
}- Ensures all icons inside .feature-icon elements are uniformly sized at 2rem.
Arrow Decorations (Desktop Only)
@media (min-width: 1024px) {
.arrow-left::after {
content: '';
position: absolute;
width: 145px;
height: 1px;
right: -150px;
}
.arrow-right::after {
content: '';
position: absolute;
width: 155px;
height: 1px;
left: -160px;
}
}- Adds horizontal lines (arrows) next to feature blocks for visual connection.
- Only appears on large screens (min-width: 1024px).
Arrow Colors
Each arrow class applies a different color:
.arrow-violet::after { background: #9762aa; }
.arrow-green::after { background-color: #69aa43; }
/* ... other colors ... */Feature Color Themes
Each .feature-* class applies a background color and white text, used for icons/tooltips.
.feature-violet { background-color: #9762aa; color: white; }
/* ... other feature color classes ... */Text Container Styling
.text-container {
text-align: center;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
order: 2;
}- Mobile: Text is centered and appears below the icon.
- Tablet and above (min-width: 640px): Text aligns right and moves before the icon.
- Desktop (min-width: 1024px): Adds margin to the right.
Headline Styling
.headline {
font-size: 1.125rem;
font-weight: 600;
color: #131313;
}- Makes feature titles bold and slightly larger.
- Increases font size on tablets (min-width: 640px).
Circular Decoration
.circle-decoration {
position: absolute;
top: -5px; right: -5px; bottom: -5px; left: -5px;
display: none;
}
.circle-svg {
width: 100%;
height: 100%;
}
.rotate90 {
transform: rotate(90deg);
}
@media (min-width: 1024px) {
.circle-decoration {
display: block;
}
}- Decorative circular SVG appears behind icons on desktop only.
- Rotated 90 degrees for visual styling.
Layout Containers
Flex Container
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (min-width: 1024px) {
.flex-container {
flex-direction: row;
gap: 2rem;
}
}- Mobile: Stack feature blocks vertically.
- Desktop: Arrange blocks in a horizontal row with gaps.
Content Box
.content-box {
width: 100%;
margin-bottom: 2.5rem;
}
.content-box > * + * {
margin-top: 2rem;
}- Each block takes full width on mobile, 33.33% on desktop.
- Adds spacing between feature sections.
Custom Flex Layout for Feature Blocks
.custom-flex-layout {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}- Core layout for individual feature blocks.
- Ensures proper alignment and allows use of ::after arrows.
Responsive Ordering & Layout
.custom-order
.custom-order {
order: 1;
position: relative;
}
@media (min-width: 640px) {
.custom-order { order: 2; }
}
@media (min-width: 1024px) {
.custom-order { order: 2; }
}- Defines layout order in flexbox:
- Mobile: appears first (order: 1)
- Tablet and desktop: moved later (order: 2)
- position: relative is for positioning absolutely placed children (e.g. tooltips).
Tooltip Display
.custom-tooltip
.custom-tooltip {
position: absolute;
bottom: 100%;
margin-bottom: 0.5rem;
...
opacity: 0;
pointer-events: none;
...
transition: opacity 0.3s ease;
}
.custom-flex-layout:hover .custom-tooltip {
opacity: 1;
}- Hidden tooltip positioned above the element by default (bottom: 100%).
- Appears with a fade-in effect when .custom-flex-layout is hovered.
- pointer-events: none ensures the tooltip doesn't block mouse interaction.
Icon Wrapper
.custom-icon-wrapper
.custom-icon-wrapper {
width: 3.5rem;
height: 3.5rem;
border-radius: 9999px;
display: flex;
...
}
@media (min-width: 640px) {
.custom-icon-wrapper {
width: 4rem;
height: 4rem;
}
}- Centers an icon inside a perfect circle.
- Increases size slightly on tablets and larger screens.
Column & Box Layout
.custom-column
.custom-column {
width: 100%;
...
order: -9999;
z-index: 50;
}
@media (min-width: 1024px) {
.custom-column {
width: 33.333333%;
...
order: 0;
}
}- Full width and high display priority on small screens (order: -9999).
- Acts as a column with 1/3 width on desktops.
.custom-square-box
.custom-square-box {
aspect-ratio: 1 / 1;
max-width: 260px;
...
}- Maintains a square ratio.
- Max width increases as the screen size increases:
- 260px → 300px → 340px from mobile to tablet to desktop.
Circular Layers for Decoration
These are concentric layered circles, often used in branding or hero sections.
.circle-layer-one
.circle-layer-one {
border: 1px solid #377dff;
...
}
@media (min-width: 1024px) {
.circle-layer-one {
inset: -70px;
}
}.circle-layer-two
.circle-layer-two {
box-shadow: 0 4px 6px rgba(2, 1, 61, 0.5);
}
@media (min-width: 1024px) {
.circle-layer-two {
inset: -25px;
}
}.circle-layer-three
.circle-layer-three {
border: 3px solid #377dff;
...
}
@media (min-width: 640px) {
.circle-layer-three { inset: 12%; }
}
@media (min-width: 1024px) {
.circle-layer-three { inset: 0; }
}.circle-layer-four
.circle-layer-four {
transform: rotate(90deg);
}These create concentric circles layered behind an icon/logo, and rotate for visual effect.
Logo Placement
.logo-container & .logo-image
.logo-container {
position: absolute;
inset: 18%;
z-index: 0;
}
.logo-image {
object-fit: contain;
z-index: 10;
}- Places the logo inside the circular layout, centered and layered correctly.
- Responsive inset values for better alignment on different screen sizes.
Column Wrapper Layout
.column-wrapper
.column-wrapper {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1280px) {
.column-wrapper {
padding-left: 3rem;
}
}- Stacks feature blocks with vertical spacing (gap).
- Adds left padding only on extra-large screens.
Text Block Placement
.text-block
.text-block {
text-align: center;
order: 2;
}
@media (min-width: 640px) {
.text-block {
text-align: left;
}
}
@media (min-width: 1024px) {
.text-block {
margin-left: 1rem;
}
}- Text block appears after the icon on mobile.
- Aligned and repositioned properly on larger devices.
Relative Ordering Helper
.custom-relative-order
.custom-relative-order {
position: relative;
order: 1;
}- Utility class to ensure certain elements appear first in flex layouts and allow absolutely-positioned children.
Responsive Font Size for .headline
@media (min-width: 768px) and (max-width: 1140px) {
.headline {
font-size: 1rem;
}
}- This media query targets tablet to small desktop screen sizes (between 768px and 1140px).
- Inside it, .headline elements will have a font size of 1rem (typically 16px).
- Purpose: Optimize readability on medium-sized screens (not too large or too small).
Responsive Order for .text-container
@media (min-width: 640px) and (max-width: 1020px) {
.text-container {
order: 2;
}
}- Applies to small to medium screens (between 640px and 1020px).
- The .text-container will have its order changed to 2 in a flexbox layout.
- Purpose: Rearrange layout visually without changing the HTML, depending on screen size.
Keyframe Animation for Rotation
@keyframes slow-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}- Defines a CSS keyframe animation named slow-rotate.
- Rotates an element from 0 to 360 degrees.
- It performs one full circle rotation.
Animation Class: .animate-rotate-slow
.animate-rotate-slow {
animation: slow-rotate 10s linear infinite;
}- Uses the slow-rotate animation:
- Duration: 10 seconds
- Timing: linear (constant speed)
- Repeats: infinitely
- Apply this class to any element you want to rotate slowly and continuously — like a spinning icon or background circle.
body {
font-family: 'Inter', sans-serif;
}
.feature-icon svg {
width: 2rem;
height: 2rem;
}
@media (min-width: 1024px) {
.arrow-left::after {
content: '';
position: absolute;
width: 145px;
height: 1px;
right: -150px;
}
.arrow-violet::after {
background: #9762aa;
}
.arrow-green::after {
background-color: #69aa43;
}
.arrow-slate::after {
background-color: #44546a;
}
.arrow-red::after {
background-color: #bf2424;
}
.arrow-orange::after {
background-color: #fbad4b;
}
.arrow-cyan::after {
background-color: #0a9ccd;
}
.arrow-coral::after {
background-color: #ff6f61;
}
.arrow-teal::after {
background-color: #00b8a9;
}
.arrow-right::after {
content: '';
position: absolute;
width: 155px;
height: 1px;
left: -160px;
}
}
.feature-violet {
background-color: #9762aa;
color: white;
}
.feature-green {
background-color: #69aa43;
color: white;
}
.feature-slate {
background-color: #44546a;
color: white;
}
.feature-red {
background-color: #bf2424;
color: white;
}
.feature-orange {
background-color: #fbad4b;
color: white;
}
.feature-cyan {
background-color: #0a9ccd;
color: white;
}
.feature-coral {
background-color: #ff6f61;
color: white;
}
.feature-teal {
background-color: #00b8a9;
color: white;
}
.text-container {
text-align: center;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
order: 2;
}
@media (min-width: 640px) {
.text-container {
text-align: right;
order: 1;
}
}
@media (min-width: 1024px) {
.text-container {
margin-right: 1rem;
margin-bottom: 0;
}
}
.headline {
font-size: 1.125rem;
font-weight: 600;
color: #131313;
}
@media (min-width: 640px) {
.headline {
font-size: 1.25rem;
}
}
.circle-decoration {
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
display: none;
}
.rotate90 {
transform: rotate(90deg);
}
@media (min-width: 1024px) {
.circle-decoration {
display: block;
}
}
.circle-svg {
width: 100%;
height: 100%;
}
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (min-width: 1024px) {
.flex-container {
flex-direction: row;
gap: 2rem;
}
}
.content-box {
width: 100%;
margin-bottom: 2.5rem;
}
.content-box > * + * {
margin-top: 2rem;
}
@media (min-width: 640px) {
.content-box > * + * {
margin-top: 2.5rem;
}
}
@media (min-width: 1024px) {
.content-box {
width: 33.3333%;
padding-right: 2rem;
margin-bottom: 0;
}
}
@media (min-width: 1280px) {
.content-box {
padding-right: 3rem;
}
}
.custom-flex-layout {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
@media (min-width: 640px) {
.custom-order {
order: 2;
}
}
@media (min-width: 1024px) {
.custom-flex-layout {
flex-direction: row;
}
.custom-order {
order: 2;
}
}
.custom-order {
order: 1;
position: relative;
}
.custom-tooltip {
position: absolute;
bottom: 100%;
margin-bottom: 0.5rem;
width: max-content;
max-width: 20rem;
font-size: 0.875rem;
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
opacity: 0;
pointer-events: none;
white-space: normal;
z-index: 100;
transition: opacity 0.3s ease;
}
.custom-flex-layout:hover .custom-tooltip {
opacity: 1;
}
.custom-icon-wrapper {
position: relative;
flex-shrink: 0;
width: 3.5rem;
height: 3.5rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
@media (min-width: 640px) {
.custom-icon-wrapper {
width: 4rem;
height: 4rem;
}
}
.custom-column {
width: 100%;
margin: 2.5rem 0;
padding-left: 1rem;
padding-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
order: -9999;
z-index: 50;
}
@media (min-width: 1024px) {
.custom-column {
width: 33.333333%;
margin-top: 0;
margin-bottom: 0;
order: 0;
}
}
.custom-square-box {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 260px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 640px) {
.custom-square-box {
max-width: 300px;
}
}
@media (min-width: 768px) {
.custom-square-box {
max-width: 340px;
}
}
.circle-layer-one {
position: absolute;
inset: 0;
border: 1px solid #377dff;
background-color: white;
border-radius: 9999px;
}
@media (min-width: 1024px) {
.circle-layer-one {
inset: -70px;
}
}
.circle-layer-two {
position: absolute;
inset: 0;
background-color: white;
border-radius: 9999px;
box-shadow: 0 4px 6px rgba(2, 1, 61, 0.5);
}
@media (min-width: 1024px) {
.circle-layer-two {
inset: -25px;
}
}
.circle-layer-three {
position: absolute;
border: 3px solid #377dff;
border-radius: 9999px;
inset: 10%;
}
@media (min-width: 640px) {
.circle-layer-three {
inset: 12%;
}
}
@media (min-width: 1024px) {
.circle-layer-three {
inset: 0;
}
}
.circle-layer-four {
position: absolute;
inset: 16%;
transform: rotate(90deg);
}
@media (min-width: 640px) {
.circle-layer-four {
inset: 18%;
}
}
@media (min-width: 1024px) {
.circle-layer-four {
inset: 10%;
}
}
.logo-container {
position: absolute;
inset: 18%;
z-index: 0;
}
.logo-image {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
object-fit: contain;
}
.column-wrapper {
width: 100%;
display: flex;
flex-direction: column;
gap: 2rem; /* space-y-8 = 2rem vertical gap */
padding-left: 0;
}
@media (min-width: 1280px) {
.column-wrapper {
padding-left: 3rem; /* xl:pl-12 */
}
}
.text-block {
text-align: center;
order: 2;
}
@media (min-width: 640px) {
.logo-container {
inset: 22%;
}
.column-wrapper {
gap: 2.5rem;
}
.text-block {
text-align: left;
}
}
@media (min-width: 1024px) {
.logo-container {
inset: 16%;
}
.column-wrapper {
width: 33.3333%;
padding-left: 2rem;
}
.text-block {
text-align: left;
margin-left: 1rem;
}
}
.custom-relative-order {
position: relative;
order: 1;
}
@media (min-width: 768px) and (max-width: 1140px) {
.headline {
font-size: 1rem;
}
}
@media (min-width: 640px) and (max-width: 1020px) {
.text-container {
order: 2;
}
}
@keyframes slow-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.animate-rotate-slow {
animation: slow-rotate 10s linear infinite;
} Final Output:
Conclusion:
Building a modern feature section using HTML, CSS, and Bootstrap 5 is simple and quick. With Bootstrap’s grid and ready-made components, you can easily create a layout that looks good on all devices.
This kind of section is perfect for homepages, landing pages, or product descriptions. It improves visual appeal and helps users understand your offerings better.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Tags: feature section, about us section, html feature section, css feature layout, responsive feature block, bootstrap 5, html and css, web design, how to create a feature section using bootstrap 5, modern responsive feature section layout, easy feature box design with html and css, mobile-friendly feature section tutorial
End of the article
