Creative Bootstrap About Us Design with Services List

How to use this Bootstrap snippet

Our Best Offers

We pride ourselves on delivering top-notch repair and maintenance solutions to cyclists of all levels.

About Us

Our Services

  • Tune-Up Services
  • Wheel Services
  • Brake Services
  • Drivetrain Services
  • Suspension Services
  • Frame Services

Accessory Installation

  • Handlebar Tape Installation
  • Pedal Installation
  • Fender Installation
  • Rack and Pannier Installation
Explore

How to use this Creative Bootstrap About Us Design with Services List

Place the code in the <body> for Interface 
          
<!-- About 8 - Bootstrap Brain Component -->
<section class="py-3 py-md-5 py-xl-8">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
        <h2 class="mb-4 display-5 text-center">Our Best Offers</h2>
        <p class="text-secondary mb-5 text-center lead fs-4">We pride ourselves on delivering top-notch repair and maintenance solutions to cyclists of all levels.</p>
        <hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle">
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row gy-4 gy-lg-0 align-items-lg-center">
      <div class="col-12 col-lg-6">
        <img class="img-fluid rounded border border-dark" loading="lazy" src="./assets/img/about-img-1.webp" alt="About Us">
      </div>
      <div class="col-12 col-lg-6 col-xxl-6">
        <div class="row justify-content-lg-end justify-content-xxl-around">
          <div class="col-12 col-lg-11 col-xxl-10">
            <div class="card border-0 mb-4">
              <div class="card-body p-0">
                <h4 class="card-title mb-3">Our Services</h4>
                <ul class="list-unstyled m-0 p-0 d-sm-flex flex-sm-wrap">
                  <li class="py-1 d-flex align-items-center gap-2 col-sm-6">
                    <span class="text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-all" viewBox="0 0 16 16">
                        <path d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486z" />
                      </svg>
                    </span>
                    <span>Tune-Up Services</span>
                  </li>
                  <li class="py-1 d-flex align-items-center gap-2 col-sm-6">
                    <span class="text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-all" viewBox="0 0 16 16">
                        <path d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486z" />
                      </svg>
                    </span>
                    <span>Wheel Services</span>
                  </li>
                  <li class="py-1 d-flex align-items-center gap-2 col-sm-6">
                    <span class="text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-all" viewBox="0 0 16 16">
                        <path d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486z" />
                      </svg>
                    </span>
                    <span>Brake Services</span>
                  </li>
                  <li class="py-1 d-flex align-items-center gap-2 col-sm-6">
                    <span class="text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-all" viewBox="0 0 16 16">
                        <path d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486z" />
                      </svg>
                    </span>
                    <span>Drivetrain Services</span>
                  </li>
                  <li class="py-1 d-flex align-items-center gap-2 col-sm-6">
                    <span class="text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-all" viewBox="0 0 16 16">
                        <path d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486z" />
                      </svg>
                    </span>
                    <span>Suspension Services</span>
                  </li>
                  <li class="py-1 d-flex align-items-center gap-2 col-sm-6">
                    <span class="text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-all" viewBox="0 0 16 16">
                        <path d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486z" />
                      </svg>
                    </span>
                    <span>Frame Services</span>
                  </li>
                </ul>
              </div>
            </div>

            <div class="card border-0 mb-4 mb-xxl-5">
              <div class="card-body p-0">
                <h4 class="card-title mb-3">Accessory Installation</h4>
                <ul class="list-unstyled m-0 p-0 d-sm-flex flex-sm-wrap">
                  <li class="py-1 d-flex align-items-center gap-2 col-sm-6">
                    <span class="text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-all" viewBox="0 0 16 16">
                        <path d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486z" />
                      </svg>
                    </span>
                    <span>Handlebar Tape Installation</span>
                  </li>
                  <li class="py-1 d-flex align-items-center gap-2 col-sm-6">
                    <span class="text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-all" viewBox="0 0 16 16">
                        <path d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486z" />
                      </svg>
                    </span>
                    <span>Pedal Installation</span>
                  </li>
                  <li class="py-1 d-flex align-items-center gap-2 col-sm-6">
                    <span class="text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-all" viewBox="0 0 16 16">
                        <path d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486z" />
                      </svg>
                    </span>
                    <span>Fender Installation</span>
                  </li>
                  <li class="py-1 d-flex align-items-center gap-2 col-sm-6">
                    <span class="text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-all" viewBox="0 0 16 16">
                        <path d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486z" />
                      </svg>
                    </span>
                    <span>Rack and Pannier Installation</span>
                  </li>
                </ul>
              </div>
            </div>

            <a href="#!" class="btn btn-primary bsb-btn-2xl">
              Explore
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/utilities/bsb-btn-size/bsb-btn-size.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/utilities/margin/margin.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/utilities/padding/padding.css">

The Creative Bootstrap About Us Design with Services List is a captivating and informative component tailored for websites utilizing the Bootstrap framework. This innovative design seamlessly combines an engaging "About Us" section with a comprehensive list of services the company or organization offers. The layout attracts and captivates visitors with visually appealing graphics and typography, enhancing user engagement and retention. With its responsive design, this template ensures seamless viewing across all devices. Customizable options empower users to personalize the content and styling to suit their branding and objectives, making it an ideal choice for businesses, agencies, or organizations seeking to showcase their unique identity and service offerings creatively and memorably.