An “About Us” page is essential for any website. It helps visitors learn more about your company or project. This Bootstrap 5 About Us Page Template creates a visually appealing section on your website. It includes a welcoming header, an introduction, and several feature highlights. The template uses Bootstrap’s responsive grid system to ensure the layout looks great on any device.
It features a combination of text, icons, and images, making it easy to convey key information about your company or project. This template is perfect for quickly setting up an About Us page with a professional and modern design.
How to Create Bootstrap 5 About Us Page Template
1. First, create a new HTML file and name it about.html. In the <head> section of your HTML file, include the Bootstrap CSS and FontAwesome links:
<!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- Font Awesome 5 CSS --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
2. Inside the <body> tag, add the following HTML code to create the structure of your “About Us” page. Replace the sample text, icons, and image with your own content.
<section class="section_all bg-light" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section_title_all text-center">
<h3 class="font-weight-bold">Welcome To <span class="text-custom">Lorem Ipsum</span></h3>
<p class="section_subtitle mx-auto text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>Lorem Ipsum has been the industry's standard dummy text.</p>
<div class="">
<i class=""></i>
</div>
</div>
</div>
</div>
<div class="row vertical_content_manage mt-5">
<div class="col-lg-6">
<div class="about_header_main mt-3">
<div class="about_icon_box">
<p class="text_custom font-weight-bold">Lorem Ipsum is simply dummy text</p>
</div>
<h4 class="about_heading text-capitalize font-weight-bold mt-4">Lorem Ipsum is simply dummy text of the printing industry.</h4>
<p class="text-muted mt-3">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
<p class="text-muted mt-3"> Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage.</p>
</div>
</div>
<div class="col-lg-6">
<div class="img_about mt-3">
<img src="https://picsum.photos/640/360" alt="Bootstrap 5 About Us Page" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-lg-4">
<div class="about_content_box_all mt-3">
<div class="about_detail text-center">
<div class="about_icon">
<i class="fas fa-pencil-alt"></i>
</div>
<h5 class="text-dark text-capitalize mt-3 font-weight-bold">Creative Design</h5>
<p class="edu_desc mt-3 mb-0 text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="about_content_box_all mt-3">
<div class="about_detail text-center">
<div class="about_icon">
<i class="fab fa-angellist"></i>
</div>
<h5 class="text-dark text-capitalize mt-3 font-weight-bold">We make Best Result</h5>
<p class="edu_desc mb-0 mt-3 text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="about_content_box_all mt-3">
<div class="about_detail text-center">
<div class="about_icon">
<i class="fas fa-paper-plane"></i>
</div>
<h5 class="text-dark text-capitalize mt-3 font-weight-bold">best platform </h5>
<p class="edu_desc mb-0 mt-3 text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
</div>
</div>
</div>
</section>
3. Finally, add the following CSS styles to customize the “About Us” page. You can modify the text size, color and icons size according to your needs.
h1, h2, h3, h4, h5, h6 {
color: #2c3145;
}
a, a:hover, a:focus, a:active {
text-decoration: none;
outline: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.section_all {
position: relative;
padding-top: 80px;
padding-bottom: 80px;
min-height: 100vh;
}
.section-title {
font-weight: 700;
text-transform: capitalize;
letter-spacing: 1px;
}
.section-subtitle {
letter-spacing: 0.4px;
line-height: 28px;
max-width: 550px;
}
.section-title-border {
background-color: #000;
height: 1 3px;
width: 44px;
}
.section-title-border-white {
background-color: #fff;
height: 2px;
width: 100px;
}
.text_custom {
color: #00bd2a;
}
.about_icon i {
font-size: 22px;
height: 65px;
width: 65px;
line-height: 65px;
display: inline-block;
background: #fff;
border-radius: 35px;
color: #00bd2a;
box-shadow: 0 8px 20px -2px rgba(158, 152, 153, 0.5);
}
.about_header_main .about_heading {
max-width: 450px;
font-size: 24px;
}
.about_icon span {
position: relative;
top: -10px;
}
.about_content_box_all {
padding: 28px;
}
That’s all! hopefully, you have successfully integrated this Bootstrap 5 About Us page template into your project. If you have any questions or suggestions, feel free to comment below.
