Learn how to create a compelling 'Why Choose Us' section using HTML and Bootstrap. Step-by-step guide included.
Table of Contents
Creating a "Why Choose Us" section for your website is essential in highlighting the unique benefits and features of your services or products. Using HTML and Bootstrap simplifies this process by providing a flexible, responsive, and visually appealing framework. This post will guide you through the steps to create a professional "Why Choose Us" section using HTML and Bootstrap.
Source Code
Step 1 (HTML Code):
Begin by setting up the basic HTML structure for your section. This will include a container for your content, as well as individual elements for each benefit or feature you want to highlight.
Here is an explanation of the HTML code:
Document Type and Language
<!doctype html> <html lang="en">
- This declares the document type and sets the language to English.
Head Section
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap - Why Choose Us Section</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"> <link rel="stylesheet" href="styles.css"> </head>
- The
<head>section includes meta tags for character set and viewport settings. - The
<title>tag sets the title of the webpage. - Three
<link>tags import external stylesheets:- Font Awesome icons.
- Google Fonts (Roboto and Rubik).
- Bootstrap CSS.
- A local stylesheet (styles.css).
Body Section
<body>
<section class="why-choose-us active">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="finix-text">
<h6>Transparent process</h6>
<h2>Why people choose us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="https://raw.githubusercontent.com/farazc60/Project-Images/main/why_choose_us.png" alt="">
<div class="ct-btn">
<a href="#" class=""><i class="fas fa-play-circle"></i></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6">
<div class="feature-box mt-4">
<div class="feature-box-content text-center">
<div class="fbc-btn">
<i class="fas fa-percent"></i>
</div>
<h3>Guarantee</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="feature-box">
<div class="feature-box-content text-center">
<div class="fbc-btn">
<i class="fas fa-percent"></i>
</div>
<h3>Guarantee</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="feature-box">
<div class="feature-box-content text-center">
<div class="fbc-btn">
<i class="fas fa-percent"></i>
</div>
<h3>Guarantee</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="feature-box active-feature">
<div class="feature-box-content text-center">
<div class="fbc-btn">
<i class="fas fa-percent"></i>
</div>
<h3>Guarantee</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
- The
<body>contains a single<section>with the class why-choose-us active. - A
<div>with the class container provides a responsive fixed-width container. - Inside the container, there is a
<div class="row">for layout using Bootstrap's grid system.
Left Column
- The first
<div class="col-lg-6">creates a column that spans 6 of 12 grid spaces on large screens. - Inside it, the
<div class="finix-text">contains:- A subtitle
<h6>Transparent process</h6>. - A main heading
<h2>Why people choose us</h2>. - A paragraph
<p>with placeholder text. - An image
<img src="https://raw.githubusercontent.com/farazc60/Project-Images/main/why_choose_us.png" alt="">. - A clickable button with an icon
<div class="ct-btn"><a href="#"><i class="fas fa-play-circle"></i></a></div>.
- A subtitle
Right Column
- The second
<div class="col-lg-6">also spans 6 grid spaces. - Inside it, there is another row with four equal-width columns
<div class="col-lg-6">. - Each column contains a
<div class="feature-box">with:- An icon
<div class="fbc-btn"><i class="fas fa-percent"></i></div>. - A heading
<h3>Guarantee</h3>. - A paragraph
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>.
- An icon
The classes from Bootstrap (e.g., container, row, col-lg-6) and Font Awesome (e.g., fas fa-percent) are used to style and layout the content.
Step 2 (CSS Code):
For additional styling, use custom CSS to enhance the appearance of your "Why Choose Us" section.
Here is an explanation of the CSS code:
General Styling
body, p, span {
font-family: 'Roboto', sans-serif;
}
body, p, span: These elements use the 'Roboto' font with a fallback to sans-serif.
h1, h2, h3, h4, h5, h6, a {
font-family: 'Rubik', sans-serif;
}
h1, h2, h3, h4, h5, h6, a: These elements use the 'Rubik' font with a fallback to sans-serif.
.finix-text Class Styling
.finix-text h6 {
color: #e73c3e;
font-weight: 400;
font-size: 17px;
}
.finix-text h6: Sets the text color to a red shade (#e73c3e), font weight to 400 (normal), and font size to 17px.
.finix-text h2 {
font-weight: 400;
font-size: 35px;
margin-top: 20px;
margin-bottom: 20px;
}
.finix-text h2: Sets the font weight to 400, font size to 35px, and margins to 20px for the top and bottom.
.finix-text p {
color: #606060;
font-size: 15px;
line-height: 1.8rem;
}
.finix-text p: Sets the text color to a dark grey (#606060), font size to 15px, and line height to 1.8rem.
.why-choose-us Class Styling
.why-choose-us {
margin-top: 90px;
}
.why-choose-us: Adds a top margin of 90px.
.why-choose-us .finix-text h2 {
font-weight: 500;
}
.why-choose-us .finix-text h2: Sets the font weight to 500, specifically for h2 within.finix-textinside.why-choose-us.
.ct-btn Class Styling
.why-choose-us .ct-btn {
display: inline-block;
width: 85px;
height: 85px;
line-height: 85px;
text-align: center;
border-radius: 50%;
font-size: 60px;
background: #fff;
position: absolute;
top: 77%;
right: 43%;
}
.ct-btn: Creates a circular button (85px by 85px) with centered text, font size of 60px, white background, and absolute positioning.
.why-choose-us .ct-btn::before {
content: "";
height: 85px;
width: 85px;
position: absolute;
top: 0;
left: 0;
background: #e73a3e;
border-radius: 50%;
animation: choose 1.6s ease-out infinite;
}
.ct-btn::before: Adds a red circular background with an animation named "choose."
Keyframes Animation
@keyframes choose {
0%, 30% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: .7;
}
100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes choose: Defines an animation that scales and fades out the element.
.why-choose-us .ct-btn a {
color: #e73c3e;
}
.ct-btn a: Sets the color of links inside.ct-btnto red.
.feature-box Class Styling
.why-choose-us .feature-box {
background: #fff;
padding: 30px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
transition: .4s;
}
.feature-box: Adds a white background, 30px padding, 30px bottom margin, relative positioning, hidden overflow, and a 0.4s transition.
.why-choose-us .feature-box:hover {
transform: translateY(-10px);
}
.feature-box: Moves the feature box up by 10px on hover.
.why-choose-us .feature-box:hover .fbc-btn {
background: #e73c3e;
color: #fff;
}
.feature-box .fbc-btn: Changes the background color to red and text color to white for.fbc-btninside a hovered.feature-box.
.why-choose-us .feature-box::before {
content: "";
position: absolute;
top: -115px;
left: 0;
right: 0;
margin: auto;
width: 90%;
height: 70%;
background: #fdebeb;
border-radius: 50%;
}
.feature-box::before: Adds a circular decorative background above the feature box.
.fbc-btn Class Styling
.why-choose-us .fbc-btn {
display: inline-block;
height: 90px;
width: 90px;
line-height: 90px;
background: #fff;
border-radius: 50%;
text-align: center;
color: #e73a3e;
position: relative;
transition: .4s;
}
.fbc-btn: Creates a circular button with centered text, white background, red text color, relative positioning, and a 0.4s transition.
Additional Styling
.active-feature {
margin-top: -30px;
}
.active-feature: Adds a negative top margin of 30px.
.why-choose-us .finix-text {
position: relative;
}
.why-choose-us .finix-text: Sets the position to relative for.finix-textinside.why-choose-us.
body, p, span{
font-family: 'Roboto', sans-serif;
}
h1,h2,h3,h4,h5,h6,a{
font-family: 'Rubik', sans-serif;
}
.finix-text h6{
color: #e73c3e;
font-weight: 400;
font-size: 17px;
}
.finix-text h2 {
font-weight: 400;
font-size: 35px;
margin-top: 20px;
margin-bottom: 20px;
}
.finix-text p {
color: #606060;
font-size: 15px;
line-height: 1.8rem;
}
.why-choose-us {
margin-top: 90px;
}
.why-choose-us .finix-text h2 {
font-weight: 500;
}
.why-choose-us .ct-btn {
display: inline-block;
width: 85px;
height: 85px;
line-height: 85px;
text-align: center;
border-radius: 50%;
font-size: 60px;
background: #fff;
position: absolute;
top: 77%;
right: 43%;
}
.why-choose-us .ct-btn::before {
content: "";
height: 85px;
width: 85px;
position: absolute;
top: 0;
left: 0;
background: #e73a3e;
border-radius: 50%;
animation: choose 1.6s ease-out infinite;
}
@keyframes choose{
0%,30%{
transform: scale(0);
opacity: 1;
}
50%{
transform: scale(1.5);
opacity: .7;
}
100%{
transform: scale(2);
opacity: 0;
}
}
.why-choose-us .ct-btn a{
color: #e73c3e;
}
.why-choose-us .feature-box {
background: #fff;
padding: 30px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
transition: .4s;
}
.why-choose-us .feature-box:hover {
transform: translateY(-10px);
}
.why-choose-us .feature-box:hover .fbc-btn{
background: #e73c3e;
color: #fff;
}
.why-choose-us .feature-box::before {
content: "";
position: absolute;
top: -115px;
left: 0;
right: 0;
margin: auto;
width: 90%;
height: 70%;
background: #fdebeb;
border-radius: 50%;
}
.why-choose-us .fbc-btn {
display: inline-block;
height: 90px;
width: 90px;
line-height: 90px;
background: #fff;
border-radius: 50%;
text-align: center;
color: #e73a3e;
position: relative;
transition: .4s;
}
.active-feature{
margin-top: -30px;
}
.why-choose-us .finix-text{
position: relative;
} Final Output:
Conclusion:
Creating a "Why Choose Us" section with HTML and Bootstrap is a straightforward process that enhances your website’s appeal and functionality. By following the steps outlined above, you can effectively communicate the unique benefits of your services or products to your audience. This not only improves user experience but also boosts your brand's credibility and trustworthiness.
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: html, bootstrap, web design, why choose us, frontend development, source code, why people choose us, benefits of choosing us, benefits of using html and bootstrap, how to create a why choose us section, responsive web design with bootstrap
End of the article
