Bootstrap about page snipp example v03

Bootstrap about page snipp example v03

bootstrap html snipp

Whole html/css code

<!doctype html>
<html lang="en">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="" rel="stylesheet">

<title>About snipp</title>
figure {
    margin: 0;
    padding: 0;
.rounded img {
    border-radius: 0.4rem;
figure img {
    width: 100%;
    max-width: 100%;
    height: auto!important;
.card {
    border: 0;

<section class="bg-light">
  <div class="container py-5">
    <figure class="rounded"><img src=""  alt="" /></figure>
    <div class="row">
      <div class="col-xl-10 mx-auto">
        <div class="card text-white" style="background-image:url(; background-size:cover; top:-60px;" >
          <div class="card-body p-5">
            <div class="row align-items-center counter-wrapper gy-4 text-center">
              <div class="col-6 col-lg-3">
                <h3 class="text-white h1 fw-bolder">7518</h3>
                <p class="mb-0 fw-bold">Completed Projects</p>
              <!--/column -->
              <div class="col-6 col-lg-3">
                <h3 class="text-white h1 fw-bolder">3472</h3>
                <p class="mb-0 fw-bold">Satisfied Customers</p>
              <!--/column -->
              <div class="col-6 col-lg-3">
                <h3 class="text-white h1 fw-bolder">2184</h3>
                <p class="mb-0 fw-bold">Expert Employees</p>
              <!--/column -->
              <div class="col-6 col-lg-3">
                <h3 class="text-white h1 fw-bolder">4523</h3>
                <p class="mb-0 fw-bold">Awards Won</p>
              <!--/column -->
            <!--/.row -->
          <!--/.card-body -->
        <!--/.card -->
      <!-- /column -->
    <!-- /.row -->
  <!-- /.container -->
<!-- /section -->


jsfiddle example

Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top