Bootstrap 5 Hero Section with Lottie Animation Integration

Bootstrap 5 Hero Section with Lottie Animation Integration
Copy link
July 13, 2025
Bootstrap, Bootstrap 5, Responsive, Hero Section, Clean UI, Animation
Full Screen 


<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
    xintegrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
</head>

<body>
  <section class="py-5 bg-light">
    <div class="container">
      <div class="row align-items-lg-center mb-5 g-4"> <!-- Increased gutter (g-4) for better spacing -->
        <!-- Text content - Order 1 on large screens, default (first) on small -->
        <div class="col-12 col-lg-8 order-lg-1 mb-5 mb-lg-0">
          <h1 class="display-3 fw-bold">Code snippets for <br> Front-end
            <span class="theme-color">designers & developers</span>
          </h1>
          <p class="lead mt-3 mb-4">Build your website faster and easier with ready-made code snippets.</p>
          <a class="btn btn-lg btn-theme" href="#">Get Started</a>
        </div>
        <!-- DotLottie Player - Order 2 on large screens, default (second) on small -->
        <div class="col-12 col-lg-4 order-lg-2">
          <script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs"
            type="module"></script>
          <dotlottie-player src="https://lottie.host/92ce8657-a4ca-4667-bd1b-c2435029cc50/88cvvmMLBW.lottie"
            background="transparent" speed="1" loop autoplay></dotlottie-player>
        </div>
      </div>

      <!-- Logo Row - visible on all screen sizes, adjusts columns dynamically -->
      <div class="row text-center align-items-center logo-row row-cols-2 row-cols-md-3 row-cols-lg-5 g-3">
        <!-- Each logo within its responsive column -->
        <div class="col p-3">
          <svg id="logo-a" width="134" height="34" viewBox="0 0 134 34" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M15.45 6.64999V2.39999H2.05V31.6H15.45V27.35C12.705 27.35 10.0724 26.2595 8.13144 24.3185C6.19044 22.3775 5.1 19.745 5.1 17C5.1 14.255 6.19044 11.6224 8.13144 9.68144C10.0724 7.74044 12.705 6.64999 15.45 6.64999V6.64999Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M15.45 6.64999V27.35C18.195 27.35 20.8276 26.2595 22.7686 24.3185C24.7096 22.3775 25.8 19.745 25.8 17C25.8 14.255 24.7096 11.6224 22.7686 9.68144C20.8276 7.74044 18.195 6.64999 15.45 6.64999V6.64999Z"
              class="ccustom" fill="#394149"></path>
            <path d="M33.32 9.25H36.32V23.7H33.32V9.25Z" class="ccustom" fill="#394149"></path>
            <path
              d="M38 18.75C38 17.7104 38.3087 16.6942 38.8869 15.8302C39.4651 14.9662 40.2868 14.2933 41.2479 13.8968C42.209 13.5004 43.2661 13.3982 44.2853 13.6032C45.3045 13.8082 46.2399 14.3112 46.9729 15.0484C47.7059 15.7857 48.2036 16.7239 48.4028 17.7443C48.6019 18.7647 48.4937 19.8212 48.0917 20.78C47.6897 21.7387 47.0122 22.5566 46.1449 23.1298C45.2776 23.7031 44.2596 24.0059 43.22 24C42.5305 24.0054 41.8468 23.8731 41.2091 23.6107C40.5714 23.3484 39.9924 22.9614 39.5062 22.4725C39.02 21.9835 38.6364 21.4023 38.3777 20.7631C38.1191 20.1239 37.9907 19.4395 38 18.75ZM45.52 18.75C45.5082 18.3018 45.3645 17.867 45.1069 17.5001C44.8493 17.1331 44.4893 16.8502 44.0717 16.6868C43.6542 16.5234 43.1978 16.4867 42.7596 16.5814C42.3213 16.676 41.9207 16.8977 41.6078 17.2189C41.2949 17.54 41.0836 17.9462 41.0004 18.3868C40.9172 18.8274 40.9657 19.2827 41.1399 19.6958C41.3141 20.1089 41.6062 20.4616 41.9798 20.7095C42.3533 20.9575 42.7916 21.0898 43.24 21.09C43.5453 21.096 43.8485 21.0389 44.1307 20.9223C44.4129 20.8058 44.668 20.6323 44.8801 20.4127C45.0922 20.1931 45.2567 19.932 45.3634 19.646C45.4701 19.3599 45.5166 19.0549 45.5 18.75H45.52Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M60.31 13.8V23.21C60.31 26.53 57.71 27.94 55.08 27.94C54.1523 28.0161 53.2218 27.8318 52.3933 27.4078C51.5647 26.9838 50.8709 26.3369 50.39 25.54L52.92 24.08C53.125 24.4934 53.4511 24.8344 53.8549 25.0577C54.2587 25.281 54.7209 25.376 55.18 25.33C55.4725 25.366 55.7693 25.337 56.0492 25.245C56.3292 25.1529 56.5853 25.0002 56.7993 24.7976C57.0134 24.595 57.18 24.3477 57.2873 24.0732C57.3946 23.7988 57.4399 23.504 57.42 23.21V22.3C57.0709 22.7233 56.6279 23.0593 56.1263 23.2815C55.6246 23.5037 55.0781 23.6059 54.53 23.58C53.2039 23.58 51.9322 23.0532 50.9945 22.1155C50.0568 21.1779 49.53 19.9061 49.53 18.58C49.53 17.2539 50.0568 15.9822 50.9945 15.0445C51.9322 14.1068 53.2039 13.58 54.53 13.58C55.0781 13.5541 55.6246 13.6563 56.1263 13.8785C56.6279 14.1007 57.0709 14.4367 57.42 14.86V13.86L60.31 13.8ZM57.42 18.55C57.4399 18.0716 57.3163 17.5981 57.065 17.1905C56.8137 16.7829 56.4463 16.4598 56.0098 16.2627C55.5734 16.0656 55.0881 16.0036 54.6161 16.0846C54.1442 16.1656 53.7072 16.3859 53.3615 16.7172C53.0158 17.0485 52.7771 17.4757 52.6761 17.9438C52.5751 18.4119 52.6164 18.8994 52.7947 19.3438C52.9731 19.7882 53.2803 20.1691 53.6768 20.4375C54.0734 20.7059 54.5412 20.8496 55.02 20.85C55.3325 20.8725 55.6462 20.8292 55.9408 20.723C56.2355 20.6167 56.5047 20.4498 56.7308 20.233C56.957 20.0163 57.1352 19.7545 57.2539 19.4646C57.3726 19.1747 57.4292 18.8631 57.42 18.55Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M62 18.75C62 17.7112 62.3082 16.6958 62.8855 15.8322C63.4628 14.9686 64.2833 14.2957 65.2432 13.8987C66.2031 13.5016 67.2592 13.3982 68.2779 13.6016C69.2966 13.805 70.232 14.306 70.9659 15.0412C71.6997 15.7765 72.1989 16.7129 72.4003 17.7319C72.6018 18.751 72.4964 19.8069 72.0975 20.766C71.6986 21.7252 71.0241 22.5444 70.1595 23.1201C69.2948 23.6958 68.2788 24.002 67.24 24C66.5492 24.0067 65.8639 23.8754 65.2245 23.6138C64.5851 23.3522 64.0043 22.9656 63.5163 22.4766C63.0282 21.9876 62.6427 21.4061 62.3823 20.7662C62.122 20.1263 61.992 19.4408 62 18.75ZM69.52 18.75C69.5082 18.3014 69.3642 17.8662 69.1062 17.499C68.8482 17.1319 68.4875 16.849 68.0694 16.6859C67.6513 16.5228 67.1944 16.4867 66.7559 16.5822C66.3174 16.6776 65.9168 16.9004 65.6043 17.2225C65.2918 17.5446 65.0813 17.9518 64.9993 18.393C64.9172 18.8342 64.9671 19.2898 65.1428 19.7027C65.3185 20.1157 65.6122 20.4676 65.9871 20.7144C66.3619 20.9611 66.8012 21.0918 67.25 21.09C67.5553 21.096 67.8585 21.0389 68.1407 20.9223C68.4229 20.8058 68.678 20.6323 68.8901 20.4127C69.1022 20.1931 69.2667 19.932 69.3734 19.646C69.4801 19.3599 69.5266 19.0549 69.51 18.75H69.52Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M73.87 11.15C73.87 10.798 73.9744 10.4538 74.17 10.1611C74.3656 9.86836 74.6436 9.64022 74.9688 9.50549C75.2941 9.37077 75.652 9.33552 75.9973 9.4042C76.3425 9.47288 76.6597 9.64241 76.9087 9.89135C77.1576 10.1403 77.3271 10.4575 77.3958 10.8027C77.4645 11.148 77.4292 11.5059 77.2945 11.8312C77.1598 12.1564 76.9316 12.4344 76.6389 12.63C76.3462 12.8256 76.0021 12.93 75.65 12.93C75.1795 12.9248 74.7298 12.7356 74.3971 12.4029C74.0644 12.0702 73.8752 11.6205 73.87 11.15ZM74.16 13.8H77.16V23.7H74.16V13.8Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M90 18.75C90.0336 19.4084 89.9367 20.067 89.7148 20.6878C89.493 21.3086 89.1505 21.8794 88.7072 22.3673C88.2638 22.8553 87.7284 23.2507 87.1316 23.5309C86.5349 23.8111 85.8886 23.9705 85.23 24C84.6711 24.0372 84.111 23.9477 83.5916 23.7382C83.0721 23.5286 82.6067 23.2045 82.23 22.79V27.68H79.23V13.8H82.23V14.73C82.6072 14.3167 83.073 13.9941 83.5925 13.7863C84.112 13.5784 84.6718 13.4908 85.23 13.53C85.886 13.5595 86.5297 13.718 87.1244 13.9963C87.7191 14.2746 88.2532 14.6674 88.6961 15.1521C89.1391 15.6368 89.4822 16.204 89.7059 16.8214C89.9296 17.4387 90.0296 18.094 90 18.75ZM87 18.75C86.9882 18.2855 86.8395 17.8349 86.5727 17.4546C86.3059 17.0743 85.9327 16.7811 85.5 16.612C85.0673 16.4428 84.5943 16.4052 84.1402 16.5037C83.6862 16.6022 83.2714 16.8326 82.9477 17.1659C82.624 17.4992 82.4059 17.9206 82.3208 18.3774C82.2356 18.8341 82.2871 19.3058 82.4689 19.7334C82.6507 20.1609 82.9546 20.5253 83.3426 20.7809C83.7306 21.0365 84.1854 21.1718 84.65 21.17C84.9682 21.1835 85.2857 21.1296 85.5816 21.0118C85.8776 20.894 86.1453 20.715 86.3672 20.4865C86.5891 20.258 86.7601 19.9851 86.8692 19.6859C86.9783 19.3866 87.0228 19.0677 87 18.75Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M99.13 20.73C99.13 23.01 97.13 23.98 95.01 23.98C94.1453 24.0578 93.2772 23.8745 92.5178 23.4538C91.7584 23.0331 91.1426 22.3943 90.75 21.62L93.33 20.16C93.4322 20.5168 93.6538 20.8277 93.9578 21.0407C94.2618 21.2537 94.6297 21.3558 95 21.33C95.71 21.33 96.07 21.11 96.07 20.71C96.07 19.62 91.2 20.2 91.2 16.77C91.2 14.61 93.02 13.53 95.08 13.53C95.863 13.4949 96.641 13.6726 97.3311 14.0441C98.0213 14.4156 98.598 14.9671 99 15.64L96.42 17C96.306 16.742 96.1198 16.5226 95.8838 16.3682C95.6477 16.2138 95.372 16.1311 95.09 16.13C94.57 16.13 94.26 16.33 94.26 16.68C94.26 17.82 99.13 17.07 99.13 20.73Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M110 13.8V23.7H107V22.77C106.659 23.1817 106.226 23.5074 105.737 23.7211C105.247 23.9348 104.714 24.0303 104.18 24C102.18 24 100.47 22.57 100.47 19.9V13.8H103.47V19.45C103.446 19.6862 103.474 19.9247 103.552 20.1491C103.63 20.3734 103.755 20.5782 103.919 20.7494C104.084 20.9205 104.284 21.0539 104.505 21.1404C104.726 21.2268 104.963 21.2642 105.2 21.25C106.28 21.25 107.04 20.61 107.04 19.25V13.8H110Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M127 17.62V23.7H124V17.88C124 16.88 123.53 16.26 122.58 16.26C121.63 16.26 121.03 16.95 121.03 18.12V23.7H118.03V17.88C118.03 16.88 117.56 16.26 116.61 16.26C115.66 16.26 115.06 16.95 115.06 18.12V23.7H112.06V13.8H115.06V14.71C115.371 14.308 115.776 13.9896 116.241 13.7836C116.705 13.5776 117.214 13.4904 117.72 13.53C118.227 13.5035 118.733 13.6095 119.187 13.8374C119.641 14.0653 120.028 14.4074 120.31 14.83C120.64 14.3884 121.076 14.0376 121.578 13.8103C122.079 13.5829 122.631 13.4865 123.18 13.53C125.52 13.53 127 15.15 127 17.62Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M129.52 13.74C130.735 13.74 131.72 12.755 131.72 11.54C131.72 10.325 130.735 9.34 129.52 9.34C128.305 9.34 127.32 10.325 127.32 11.54C127.32 12.755 128.305 13.74 129.52 13.74Z"
              class="ccustom" fill="#394149"></path>
          </svg>
        </div>
        <div class="col p-3">
          <svg id="logo-b" width="132" height="35" viewBox="0 0 132 35" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M38.51 11.26H41.72V24.26H38.51V11.26ZM43 19.37C43 16.15 45 14.22 48 14.22C51 14.22 53 16.15 53 19.37C53 22.59 51.07 24.54 48 24.54C44.93 24.54 43 22.66 43 19.37ZM49.82 19.37C49.82 17.6 49.13 16.56 48.03 16.56C46.93 16.56 46.25 17.56 46.25 19.37C46.25 21.18 46.93 22.17 48.03 22.17C49.13 22.17 49.84 21.18 49.84 19.38L49.82 19.37ZM54.28 24.93H57.38C57.5211 25.2637 57.7676 25.5422 58.0818 25.7227C58.396 25.9033 58.7606 25.9761 59.12 25.93C60.35 25.93 60.99 25.27 60.99 24.29V22.49H61C60.7351 23.0505 60.3067 23.5176 59.7713 23.83C59.2358 24.1424 58.6183 24.2853 58 24.24C55.65 24.24 54.09 22.45 54.09 19.37C54.09 16.29 55.58 14.37 58.09 14.37C58.7241 14.3361 59.3532 14.4996 59.8904 14.8381C60.4277 15.1766 60.8468 15.6734 61.09 16.26H61V14.45H64.18V24.19C64.18 26.54 62.1 28.01 59.04 28.01C56.26 28 54.48 26.73 54.3 24.94L54.28 24.93ZM61 19.37C61 17.8 60.28 16.81 59.14 16.81C58 16.81 57.3 17.81 57.3 19.37C57.3 20.93 57.99 21.85 59.14 21.85C60.29 21.85 61 21 61 19.37ZM65.45 19.37C65.45 16.15 67.45 14.22 70.45 14.22C73.45 14.22 75.45 16.15 75.45 19.37C75.45 22.59 73.51 24.54 70.45 24.54C67.39 24.54 65.47 22.66 65.47 19.37H65.45ZM72.27 19.37C72.27 17.6 71.57 16.56 70.48 16.56C69.39 16.56 68.7 17.56 68.7 19.37C68.7 21.18 69.38 22.17 70.48 22.17C71.58 22.17 72.29 21.18 72.29 19.38L72.27 19.37ZM76.75 12.08C76.736 11.753 76.8202 11.4293 76.9917 11.1506C77.1632 10.8718 77.4142 10.6508 77.7124 10.5159C78.0106 10.3809 78.3423 10.3383 78.6649 10.3935C78.9875 10.4486 79.2862 10.599 79.5226 10.8253C79.759 11.0517 79.9223 11.3435 79.9915 11.6634C80.0606 11.9833 80.0325 12.3166 79.9107 12.6203C79.7889 12.9241 79.579 13.1845 79.308 13.368C79.037 13.5515 78.7173 13.6497 78.39 13.65C78.1809 13.6553 77.9727 13.619 77.7777 13.5433C77.5827 13.4675 77.4046 13.3537 77.2539 13.2086C77.1032 13.0635 76.9828 12.8899 76.8998 12.6978C76.8167 12.5058 76.7726 12.2992 76.77 12.09L76.75 12.08ZM76.75 14.44H80V24.3H76.8L76.75 14.44ZM91.69 19.37C91.69 22.58 90.25 24.44 87.8 24.44C87.1728 24.4787 86.5488 24.3239 86.0123 23.9967C85.4758 23.6694 85.0527 23.1854 84.8 22.61H84.74V27.47H81.53V14.47H84.72V16.23H84.78C85.024 15.6433 85.443 15.146 85.9798 14.806C86.5167 14.466 87.1453 14.2998 87.78 14.33C90.3 14.31 91.75 16.16 91.75 19.38L91.69 19.37ZM88.42 19.37C88.42 17.81 87.69 16.8 86.56 16.8C85.43 16.8 84.72 17.8 84.71 19.37C84.7 20.94 85.43 21.93 86.56 21.93C87.69 21.93 88.48 21 88.48 19.38L88.42 19.37ZM97.17 14.21C99.86 14.21 101.53 15.48 101.55 17.52H98.62C98.62 16.81 98.03 16.37 97.15 16.37C96.27 16.37 95.85 16.71 95.85 17.22C95.85 17.73 96.22 17.89 96.96 18.04L99.02 18.46C101.02 18.88 101.82 19.68 101.82 21.17C101.82 23.17 99.97 24.53 97.22 24.53C94.47 24.53 92.68 23.21 92.55 21.2H95.66C95.75 21.93 96.33 22.36 97.27 22.36C98.21 22.36 98.65 22.06 98.65 21.53C98.65 21 98.35 20.91 97.58 20.75L95.72 20.36C93.79 19.95 92.78 18.94 92.78 17.43C92.84 15.47 94.52 14.22 97.23 14.22L97.17 14.21ZM112.57 24.29H109.46V22.44H109.4C109.226 23.0571 108.847 23.5964 108.325 23.969C107.803 24.3417 107.17 24.5254 106.53 24.49C106.047 24.5057 105.565 24.4191 105.118 24.2357C104.671 24.0524 104.267 23.7765 103.934 23.4262C103.6 23.0758 103.345 22.6589 103.184 22.2029C103.023 21.7469 102.96 21.2619 103 20.78V14.45H106.21V20.09C106.21 21.25 106.82 21.88 107.82 21.88C108.055 21.8782 108.286 21.8261 108.499 21.7273C108.712 21.6284 108.901 21.485 109.053 21.3068C109.206 21.1286 109.319 20.9197 109.384 20.6943C109.448 20.4688 109.464 20.2321 109.43 20V14.45H112.63L112.57 24.29ZM114.12 14.44H117.24V16.34H117.31C117.482 15.7313 117.852 15.197 118.36 14.8206C118.869 14.4443 119.488 14.2471 120.12 14.26C120.755 14.2048 121.388 14.3884 121.894 14.7749C122.401 15.1614 122.745 15.7231 122.86 16.35H123C123.2 15.7197 123.602 15.1731 124.145 14.7952C124.687 14.4172 125.34 14.2291 126 14.26C126.439 14.2433 126.877 14.3195 127.284 14.4836C127.692 14.6476 128.06 14.8959 128.365 15.2122C128.67 15.5284 128.904 15.9055 129.053 16.3187C129.203 16.7319 129.263 17.1719 129.23 17.61V24.3H126V18.43C126 17.43 125.53 16.87 124.62 16.87C124.418 16.8667 124.218 16.9071 124.033 16.9883C123.848 17.0696 123.684 17.1899 123.55 17.3409C123.416 17.492 123.316 17.6701 123.257 17.8633C123.199 18.0565 123.183 18.26 123.21 18.46V24.3H120.15V18.4C120.15 17.4 119.66 16.87 118.78 16.87C118.576 16.8684 118.374 16.9104 118.188 16.9932C118.001 17.0761 117.835 17.1978 117.699 17.3503C117.564 17.5028 117.463 17.6825 117.403 17.8773C117.342 18.0722 117.324 18.2777 117.35 18.48V24.3H114.14L114.12 14.44Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M32.16 12.11C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 3.62453 25.8641 2.90253C24.0094 2.18052 21.9798 2.03552 20.0413 2.48651C18.1027 2.9375 16.3456 3.96346 15 5.43H2.52002V31.77H28.87V19.46C29.9042 18.535 30.7318 17.4023 31.2987 16.1358C31.8656 14.8693 32.1591 13.4976 32.16 12.11V12.11ZM27.09 12.11C27.092 13.0637 26.811 13.9966 26.2826 14.7906C25.7541 15.5845 25.0021 16.2039 24.1215 16.5702C23.2409 16.9366 22.2715 17.0335 21.3358 16.8486C20.4002 16.6638 19.5404 16.2055 18.8653 15.5318C18.1902 14.8581 17.7302 13.9993 17.5434 13.064C17.3566 12.1288 17.4515 11.1591 17.816 10.2778C18.1805 9.39646 18.7983 8.64309 19.5911 8.11302C20.384 7.58295 21.3163 7.30001 22.27 7.3C23.5466 7.3 24.7711 7.80645 25.6747 8.70821C26.5784 9.60997 27.0874 10.8334 27.09 12.11V12.11ZM23.8 26.7H7.59002V10.5H12.53C12.4346 11.0315 12.3844 11.5701 12.38 12.11C12.3827 14.7322 13.4255 17.2462 15.2797 19.1004C17.1338 20.9545 19.6478 21.9974 22.27 22C22.7827 21.9973 23.2943 21.9538 23.8 21.87V26.7Z"
              class="ccustom" fill="#394149"></path>
          </svg>
        </div>
        <div class="col p-3">
          <svg id="logo-c" width="134" height="34" viewBox="0 0 134 34" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M15.45 6.64999V2.39999H2.05V31.6H15.45V27.35C12.705 27.35 10.0724 26.2595 8.13144 24.3185C6.19044 22.3775 5.1 19.745 5.1 17C5.1 14.255 6.19044 11.6224 8.13144 9.68144C10.0724 7.74044 12.705 6.64999 15.45 6.64999V6.64999Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M15.45 6.64999V27.35C18.195 27.35 20.8276 26.2595 22.7686 24.3185C24.7096 22.3775 25.8 19.745 25.8 17C25.8 14.255 24.7096 11.6224 22.7686 9.68144C20.8276 7.74044 18.195 6.64999 15.45 6.64999V6.64999Z"
              class="ccustom" fill="#394149"></path>
            <path d="M33.32 9.25H36.32V23.7H33.32V9.25Z" class="ccustom" fill="#394149"></path>
            <path
              d="M38 18.75C38 17.7104 38.3087 16.6942 38.8869 15.8302C39.4651 14.9662 40.2868 14.2933 41.2479 13.8968C42.209 13.5004 43.2661 13.3982 44.2853 13.6032C45.3045 13.8082 46.2399 14.3112 46.9729 15.0484C47.7059 15.7857 48.2036 16.7239 48.4028 17.7443C48.6019 18.7647 48.4937 19.8212 48.0917 20.78C47.6897 21.7387 47.0122 22.5566 46.1449 23.1298C45.2776 23.7031 44.2596 24.0059 43.22 24C42.5305 24.0054 41.8468 23.8731 41.2091 23.6107C40.5714 23.3484 39.9924 22.9614 39.5062 22.4725C39.02 21.9835 38.6364 21.4023 38.3777 20.7631C38.1191 20.1239 37.9907 19.4395 38 18.75ZM45.52 18.75C45.5082 18.3018 45.3645 17.867 45.1069 17.5001C44.8493 17.1331 44.4893 16.8502 44.0717 16.6868C43.6542 16.5234 43.1978 16.4867 42.7596 16.5814C42.3213 16.676 41.9207 16.8977 41.6078 17.2189C41.2949 17.54 41.0836 17.9462 41.0004 18.3868C40.9172 18.8274 40.9657 19.2827 41.1399 19.6958C41.3141 20.1089 41.6062 20.4616 41.9798 20.7095C42.3533 20.9575 42.7916 21.0898 43.24 21.09C43.5453 21.096 43.8485 21.0389 44.1307 20.9223C44.4129 20.8058 44.668 20.6323 44.8801 20.4127C45.0922 20.1931 45.2567 19.932 45.3634 19.646C45.4701 19.3599 45.5166 19.0549 45.5 18.75H45.52Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M60.31 13.8V23.21C60.31 26.53 57.71 27.94 55.08 27.94C54.1523 28.0161 53.2218 27.8318 52.3933 27.4078C51.5647 26.9838 50.8709 26.3369 50.39 25.54L52.92 24.08C53.125 24.4934 53.4511 24.8344 53.8549 25.0577C54.2587 25.281 54.7209 25.376 55.18 25.33C55.4725 25.366 55.7693 25.337 56.0492 25.245C56.3292 25.1529 56.5853 25.0002 56.7993 24.7976C57.0134 24.595 57.18 24.3477 57.2873 24.0732C57.3946 23.7988 57.4399 23.504 57.42 23.21V22.3C57.0709 22.7233 56.6279 23.0593 56.1263 23.2815C55.6246 23.5037 55.0781 23.6059 54.53 23.58C53.2039 23.58 51.9322 23.0532 50.9945 22.1155C50.0568 21.1779 49.53 19.9061 49.53 18.58C49.53 17.2539 50.0568 15.9822 50.9945 15.0445C51.9322 14.1068 53.2039 13.58 54.53 13.58C55.0781 13.5541 55.6246 13.6563 56.1263 13.8785C56.6279 14.1007 57.0709 14.4367 57.42 14.86V13.86L60.31 13.8ZM57.42 18.55C57.4399 18.0716 57.3163 17.5981 57.065 17.1905C56.8137 16.7829 56.4463 16.4598 56.0098 16.2627C55.5734 16.0656 55.0881 16.0036 54.6161 16.0846C54.1442 16.1656 53.7072 16.3859 53.3615 16.7172C53.0158 17.0485 52.7771 17.4757 52.6761 17.9438C52.5751 18.4119 52.6164 18.8994 52.7947 19.3438C52.9731 19.7882 53.2803 20.1691 53.6768 20.4375C54.0734 20.7059 54.5412 20.8496 55.02 20.85C55.3325 20.8725 55.6462 20.8292 55.9408 20.723C56.2355 20.6167 56.5047 20.4498 56.7308 20.233C56.957 20.0163 57.1352 19.7545 57.2539 19.4646C57.3726 19.1747 57.4292 18.8631 57.42 18.55Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M62 18.75C62 17.7112 62.3082 16.6958 62.8855 15.8322C63.4628 14.9686 64.2833 14.2957 65.2432 13.8987C66.2031 13.5016 67.2592 13.3982 68.2779 13.6016C69.2966 13.805 70.232 14.306 70.9659 15.0412C71.6997 15.7765 72.1989 16.7129 72.4003 17.7319C72.6018 18.751 72.4964 19.8069 72.0975 20.766C71.6986 21.7252 71.0241 22.5444 70.1595 23.1201C69.2948 23.6958 68.2788 24.002 67.24 24C66.5492 24.0067 65.8639 23.8754 65.2245 23.6138C64.5851 23.3522 64.0043 22.9656 63.5163 22.4766C63.0282 21.9876 62.6427 21.4061 62.3823 20.7662C62.122 20.1263 61.992 19.4408 62 18.75ZM69.52 18.75C69.5082 18.3014 69.3642 17.8662 69.1062 17.499C68.8482 17.1319 68.4875 16.849 68.0694 16.6859C67.6513 16.5228 67.1944 16.4867 66.7559 16.5822C66.3174 16.6776 65.9168 16.9004 65.6043 17.2225C65.2918 17.5446 65.0813 17.9518 64.9993 18.393C64.9172 18.8342 64.9671 19.2898 65.1428 19.7027C65.3185 20.1157 65.6122 20.4676 65.9871 20.7144C66.3619 20.9611 66.8012 21.0918 67.25 21.09C67.5553 21.096 67.8585 21.0389 68.1407 20.9223C68.4229 20.8058 68.678 20.6323 68.8901 20.4127C69.1022 20.1931 69.2667 19.932 69.3734 19.646C69.4801 19.3599 69.5266 19.0549 69.51 18.75H69.52Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M73.87 11.15C73.87 10.798 73.9744 10.4538 74.17 10.1611C74.3656 9.86836 74.6436 9.64022 74.9688 9.50549C75.2941 9.37077 75.652 9.33552 75.9973 9.4042C76.3425 9.47288 76.6597 9.64241 76.9087 9.89135C77.1576 10.1403 77.3271 10.4575 77.3958 10.8027C77.4645 11.148 77.4292 11.5059 77.2945 11.8312C77.1598 12.1564 76.9316 12.4344 76.6389 12.63C76.3462 12.8256 76.0021 12.93 75.65 12.93C75.1795 12.9248 74.7298 12.7356 74.3971 12.4029C74.0644 12.0702 73.8752 11.6205 73.87 11.15ZM74.16 13.8H77.16V23.7H74.16V13.8Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M90 18.75C90.0336 19.4084 89.9367 20.067 89.7148 20.6878C89.493 21.3086 89.1505 21.8794 88.7072 22.3673C88.2638 22.8553 87.7284 23.2507 87.1316 23.5309C86.5349 23.8111 85.8886 23.9705 85.23 24C84.6711 24.0372 84.111 23.9477 83.5916 23.7382C83.0721 23.5286 82.6067 23.2045 82.23 22.79V27.68H79.23V13.8H82.23V14.73C82.6072 14.3167 83.073 13.9941 83.5925 13.7863C84.112 13.5784 84.6718 13.4908 85.23 13.53C85.886 13.5595 86.5297 13.718 87.1244 13.9963C87.7191 14.2746 88.2532 14.6674 88.6961 15.1521C89.1391 15.6368 89.4822 16.204 89.7059 16.8214C89.9296 17.4387 90.0296 18.094 90 18.75ZM87 18.75C86.9882 18.2855 86.8395 17.8349 86.5727 17.4546C86.3059 17.0743 85.9327 16.7811 85.5 16.612C85.0673 16.4428 84.5943 16.4052 84.1402 16.5037C83.6862 16.6022 83.2714 16.8326 82.9477 17.1659C82.624 17.4992 82.4059 17.9206 82.3208 18.3774C82.2356 18.8341 82.2871 19.3058 82.4689 19.7334C82.6507 20.1609 82.9546 20.5253 83.3426 20.7809C83.7306 21.0365 84.1854 21.1718 84.65 21.17C84.9682 21.1835 85.2857 21.1296 85.5816 21.0118C85.8776 20.894 86.1453 20.715 86.3672 20.4865C86.5891 20.258 86.7601 19.9851 86.8692 19.6859C86.9783 19.3866 87.0228 19.0677 87 18.75Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M99.13 20.73C99.13 23.01 97.13 23.98 95.01 23.98C94.1453 24.0578 93.2772 23.8745 92.5178 23.4538C91.7584 23.0331 91.1426 22.3943 90.75 21.62L93.33 20.16C93.4322 20.5168 93.6538 20.8277 93.9578 21.0407C94.2618 21.2537 94.6297 21.3558 95 21.33C95.71 21.33 96.07 21.11 96.07 20.71C96.07 19.62 91.2 20.2 91.2 16.77C91.2 14.61 93.02 13.53 95.08 13.53C95.863 13.4949 96.641 13.6726 97.3311 14.0441C98.0213 14.4156 98.598 14.9671 99 15.64L96.42 17C96.306 16.742 96.1198 16.5226 95.8838 16.3682C95.6477 16.2138 95.372 16.1311 95.09 16.13C94.57 16.13 94.26 16.33 94.26 16.68C94.26 17.82 99.13 17.07 99.13 20.73Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M110 13.8V23.7H107V22.77C106.659 23.1817 106.226 23.5074 105.737 23.7211C105.247 23.9348 104.714 24.0303 104.18 24C102.18 24 100.47 22.57 100.47 19.9V13.8H103.47V19.45C103.446 19.6862 103.474 19.9247 103.552 20.1491C103.63 20.3734 103.755 20.5782 103.919 20.7494C104.084 20.9205 104.284 21.0539 104.505 21.1404C104.726 21.2268 104.963 21.2642 105.2 21.25C106.28 21.25 107.04 20.61 107.04 19.25V13.8H110Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M127 17.62V23.7H124V17.88C124 16.88 123.53 16.26 122.58 16.26C121.63 16.26 121.03 16.95 121.03 18.12V23.7H118.03V17.88C118.03 16.88 117.56 16.26 116.61 16.26C115.66 16.26 115.06 16.95 115.06 18.12V23.7H112.06V13.8H115.06V14.71C115.371 14.308 115.776 13.9896 116.241 13.7836C116.705 13.5776 117.214 13.4904 117.72 13.53C118.227 13.5035 118.733 13.6095 119.187 13.8374C119.641 14.0653 120.028 14.4074 120.31 14.83C120.64 14.3884 121.076 14.0376 121.578 13.8103C122.079 13.5829 122.631 13.4865 123.18 13.53C125.52 13.53 127 15.15 127 17.62Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M129.52 13.74C130.735 13.74 131.72 12.755 131.72 11.54C131.72 10.325 130.735 9.34 129.52 9.34C128.305 9.34 127.32 10.325 127.32 11.54C127.32 12.755 128.305 13.74 129.52 13.74Z"
              class="ccustom" fill="#394149"></path>
          </svg>
        </div>
        <div class="col p-3">
          <svg id="logo-d" width="132" height="35" viewBox="0 0 132 35" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M38.51 11.26H41.72V24.26H38.51V11.26ZM43 19.37C43 16.15 45 14.22 48 14.22C51 14.22 53 16.15 53 19.37C53 22.59 51.07 24.54 48 24.54C44.93 24.54 43 22.66 43 19.37ZM49.82 19.37C49.82 17.6 49.13 16.56 48.03 16.56C46.93 16.56 46.25 17.56 46.25 19.37C46.25 21.18 46.93 22.17 48.03 22.17C49.13 22.17 49.84 21.18 49.84 19.38L49.82 19.37ZM54.28 24.93H57.38C57.5211 25.2637 57.7676 25.5422 58.0818 25.7227C58.396 25.9033 58.7606 25.9761 59.12 25.93C60.35 25.93 60.99 25.27 60.99 24.29V22.49H61C60.7351 23.0505 60.3067 23.5176 59.7713 23.83C59.2358 24.1424 58.6183 24.2853 58 24.24C55.65 24.24 54.09 22.45 54.09 19.37C54.09 16.29 55.58 14.37 58.09 14.37C58.7241 14.3361 59.3532 14.4996 59.8904 14.8381C60.4277 15.1766 60.8468 15.6734 61.09 16.26H61V14.45H64.18V24.19C64.18 26.54 62.1 28.01 59.04 28.01C56.26 28 54.48 26.73 54.3 24.94L54.28 24.93ZM61 19.37C61 17.8 60.28 16.81 59.14 16.81C58 16.81 57.3 17.81 57.3 19.37C57.3 20.93 57.99 21.85 59.14 21.85C60.29 21.85 61 21 61 19.37ZM65.45 19.37C65.45 16.15 67.45 14.22 70.45 14.22C73.45 14.22 75.45 16.15 75.45 19.37C75.45 22.59 73.51 24.54 70.45 24.54C67.39 24.54 65.47 22.66 65.47 19.37H65.45ZM72.27 19.37C72.27 17.6 71.57 16.56 70.48 16.56C69.39 16.56 68.7 17.56 68.7 19.37C68.7 21.18 69.38 22.17 70.48 22.17C71.58 22.17 72.29 21.18 72.29 19.38L72.27 19.37ZM76.75 12.08C76.736 11.753 76.8202 11.4293 76.9917 11.1506C77.1632 10.8718 77.4142 10.6508 77.7124 10.5159C78.0106 10.3809 78.3423 10.3383 78.6649 10.3935C78.9875 10.4486 79.2862 10.599 79.5226 10.8253C79.759 11.0517 79.9223 11.3435 79.9915 11.6634C80.0606 11.9833 80.0325 12.3166 79.9107 12.6203C79.7889 12.9241 79.579 13.1845 79.308 13.368C79.037 13.5515 78.7173 13.6497 78.39 13.65C78.1809 13.6553 77.9727 13.619 77.7777 13.5433C77.5827 13.4675 77.4046 13.3537 77.2539 13.2086C77.1032 13.0635 76.9828 12.8899 76.8998 12.6978C76.8167 12.5058 76.7726 12.2992 76.77 12.09L76.75 12.08ZM76.75 14.44H80V24.3H76.8L76.75 14.44ZM91.69 19.37C91.69 22.58 90.25 24.44 87.8 24.44C87.1728 24.4787 86.5488 24.3239 86.0123 23.9967C85.4758 23.6694 85.0527 23.1854 84.8 22.61H84.74V27.47H81.53V14.47H84.72V16.23H84.78C85.024 15.6433 85.443 15.146 85.9798 14.806C86.5167 14.466 87.1453 14.2998 87.78 14.33C90.3 14.31 91.75 16.16 91.75 19.38L91.69 19.37ZM88.42 19.37C88.42 17.81 87.69 16.8 86.56 16.8C85.43 16.8 84.72 17.8 84.71 19.37C84.7 20.94 85.43 21.93 86.56 21.93C87.69 21.93 88.48 21 88.48 19.38L88.42 19.37ZM97.17 14.21C99.86 14.21 101.53 15.48 101.55 17.52H98.62C98.62 16.81 98.03 16.37 97.15 16.37C96.27 16.37 95.85 16.71 95.85 17.22C95.85 17.73 96.22 17.89 96.96 18.04L99.02 18.46C101.02 18.88 101.82 19.68 101.82 21.17C101.82 23.17 99.97 24.53 97.22 24.53C94.47 24.53 92.68 23.21 92.55 21.2H95.66C95.75 21.93 96.33 22.36 97.27 22.36C98.21 22.36 98.65 22.06 98.65 21.53C98.65 21 98.35 20.91 97.58 20.75L95.72 20.36C93.79 19.95 92.78 18.94 92.78 17.43C92.84 15.47 94.52 14.22 97.23 14.22L97.17 14.21ZM112.57 24.29H109.46V22.44H109.4C109.226 23.0571 108.847 23.5964 108.325 23.969C107.803 24.3417 107.17 24.5254 106.53 24.49C106.047 24.5057 105.565 24.4191 105.118 24.2357C104.671 24.0524 104.267 23.7765 103.934 23.4262C103.6 23.0758 103.345 22.6589 103.184 22.2029C103.023 21.7469 102.96 21.2619 103 20.78V14.45H106.21V20.09C106.21 21.25 106.82 21.88 107.82 21.88C108.055 21.8782 108.286 21.8261 108.499 21.7273C108.712 21.6284 108.901 21.485 109.053 21.3068C109.206 21.1286 109.319 20.9197 109.384 20.6943C109.448 20.4688 109.464 20.2321 109.43 20V14.45H112.63L112.57 24.29ZM114.12 14.44H117.24V16.34H117.31C117.482 15.7313 117.852 15.197 118.36 14.8206C118.869 14.4443 119.488 14.2471 120.12 14.26C120.755 14.2048 121.388 14.3884 121.894 14.7749C122.401 15.1614 122.745 15.7231 122.86 16.35H123C123.2 15.7197 123.602 15.1731 124.145 14.7952C124.687 14.4172 125.34 14.2291 126 14.26C126.439 14.2433 126.877 14.3195 127.284 14.4836C127.692 14.6476 128.06 14.8959 128.365 15.2122C128.67 15.5284 128.904 15.9055 129.053 16.3187C129.203 16.7319 129.263 17.1719 129.23 17.61V24.3H126V18.43C126 17.43 125.53 16.87 124.62 16.87C124.418 16.8667 124.218 16.9071 124.033 16.9883C123.848 17.0696 123.684 17.1899 123.55 17.3409C123.416 17.492 123.316 17.6701 123.257 17.8633C123.199 18.0565 123.183 18.26 123.21 18.46V24.3H120.15V18.4C120.15 17.4 119.66 16.87 118.78 16.87C118.576 16.8684 118.374 16.9104 118.188 16.9932C118.001 17.0761 117.835 17.1978 117.699 17.3503C117.564 17.5028 117.463 17.6825 117.403 17.8773C117.342 18.0722 117.324 18.2777 117.35 18.48V24.3H114.14L114.12 14.44Z"
              class="ccustom" fill="#394149"></path>
            <path
              d="M32.16 12.11C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 3.62453 25.8641 2.90253C24.0094 2.18052 21.9798 2.03552 20.0413 2.48651C18.1027 2.9375 16.3456 3.96346 15 5.43H2.52002V31.77H28.87V19.46C29.9042 18.535 30.7318 17.4023 31.2987 16.1358C31.8656 14.8693 32.1591 13.4976 32.16 12.11V12.11ZM27.09 12.11C27.092 13.0637 26.811 13.9966 26.2826 14.7906C25.7541 15.5845 25.0021 16.2039 24.1215 16.5702C23.2409 16.9366 22.2715 17.0335 21.3358 16.8486C20.4002 16.6638 19.5404 16.2055 18.8653 15.5318C18.1902 14.8581 17.7302 13.9993 17.5434 13.064C17.3566 12.1288 17.4515 11.1591 17.816 10.2778C18.1805 9.39646 18.7983 8.64309 19.5911 8.11302C20.384 7.58295 21.3163 7.30001 22.27 7.3C23.5466 7.3 24.7711 7.80645 25.6747 8.70821C26.5784 9.60997 27.0874 10.8334 27.09 12.11V12.11ZM23.8 26.7H7.59002V10.5H12.53C12.4346 11.0315 12.3844 11.5701 12.38 12.11C12.3827 14.7322 13.4255 17.2462 15.2797 19.1004C17.1338 20.9545 19.6478 21.9974 22.27 22C22.7827 21.9973 23.2943 21.9538 23.8 21.87V26.7Z"
              class="ccustom" fill="#394149"></path>
          </svg>
        </div>
        <div class="col p-3"><img alt="Logo" src="https://freefrontend.dev/assets/logo5.svg"></div>
      </div>
    </div>
  </section>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
    xintegrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
    crossorigin="anonymous"></script>
</body>

</html>
                                            
                                        

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");

html {
    scroll-behavior: smooth;
}


body {
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    font-style: normal;
    overflow-x: hidden;
}


.theme-color {
    color: #31a499;
}

.btn-theme {
    background-color: #31a499;
    color: white;
    border: none;
    /* Remove default button border */
    transition: background-color 0.3s ease;
    /* Smooth hover effect */
}

.btn-theme:hover {
    background-color: #278177;
    /* Slightly darker on hover */
    color: white;
    /* Keep text white on hover */
}

dotlottie-player {
    width: 100% !important;
    height: auto !important;
    max-height: 600px;
    display: block;
    margin: 0 auto;
}

.logo-row svg,
.logo-row img {
    width: 100%;
    /* Make SVG logos fill their column width */
    height: auto;
    /* Maintain aspect ratio */
    max-width: 134px;
    /* Maintain original max width for consistency */
    display: block;
    /* Ensure they behave as block elements */
    margin: 0 auto;
    /* Center the logos in their column */
}

/* Adjust heading font size for smaller screens */
@media (max-width: 767.98px) {
    .display-3 {
        font-size: 2.5rem;
        /* Smaller heading on mobile */
    }

    .lead {
        font-size: 1rem;
        /* Smaller lead text on mobile */
    }

    .hero-section .row>div {
        text-align: center;
        /* Center align content on smaller screens */
    }

    .hero-section .btn {
        width: fit-content;
        /* Adjust button width */
        margin: 0 auto;
        /* Center button */
    }

    .mb-5.mb-md-0 {
        margin-bottom: 2rem !important;
        /* Adjust margin for mobile when elements stack */
    }
}

/* Adjust spacing for the logo row on smaller screens */
@media (max-width: 991.98px) {
    .logo-row .col {
        padding: 1rem !important;
        /* Reduce padding for logo columns on smaller screens */
    }
}

                                        

//Doesn't require any JS.

This Bootstrap 5 snippet showcases a modern and impactful hero section designed to capture immediate attention with dynamic Lottie animation integration, a compelling headline, and a clear call to action.

Key Features:

  • Responsive Design: The hero section adapts fluidly to different screen sizes, providing optimal viewing and interaction on desktops, tablets, and mobile devices.
  • Dynamic Lottie Animation Integration: Seamlessly incorporates a Lottie animation to add a lightweight, high-quality, and visually engaging element that reinforces the main message.
  • Compelling Headline & Subtext: Features a clear, concise headline and a supporting paragraph that quickly conveys the value proposition or main idea.
  • Clear Call-to-Action: Provides prominent button(s) to guide users towards the primary action you want them to take.

Implementation:

  • Include Bootstrap 5: Ensure that Bootstrap 5 CSS and JavaScript files are included in your project.
  • Include LottiePlayer Library: Add the LottiePlayer JavaScript library (e.g., via CDN) to enable the rendering of Lottie animations.
  • Create the HTML Structure: Define the HTML structure for the hero section, typically using Bootstrap's grid system to arrange content. Include elements for the headline, a descriptive paragraph, your call-to-action button(s), and a dedicated container for the Lottie animation.
  • Integrate Lottie Animation: Use the LottiePlayer custom element (<lottie-player>) or JavaScript API to embed your Lottie JSON file, configuring properties like autoplay, loop, and src.
  • Apply Bootstrap Classes: Utilize Bootstrap 5's utility classes and components (e.g., container, row, col, text-center, btn) to style the hero section's layout, typography, button appearance, and responsiveness.

By following these steps, you can seamlessly integrate a responsive and highly effective hero section with dynamic Lottie animation into your Bootstrap 5 project, ensuring an impactful and engaging introduction for your website visitors.

Latest Snippets
View All
DocsAllOver - Responsive Tailwind CSS SaaS Hero with Theme Switcher

Responsive Tailwind CSS SaaS Hero with Theme Switcher

Tailwind
DocsAllOver - Creative CSS Intro Text Reveal Animation

Creative CSS Intro Text Reveal Animation with No JS

CSS
DocsAllOver - Tailwind CSS Hero Section with Dual CTA Buttons and Prominent Image

Tailwind CSS Hero Section with Dual CTA Buttons and Prominent Image

Tailwind
DocsAllOver - Bootstrap 4 Pricing Cards with Monthly and Yearly Options

Bootstrap 4 Pricing Cards with Monthly and Yearly Options

Bootstrap
DocsAllOver - Responsive CSS Only Smooth Sliding Tab Transitions

Responsive CSS Only Smooth Sliding Tab Transitions

CSS
DocsAllOver - Tailwind CSS Subscription Section for Services & Plans

Tailwind CSS Subscription Section for Services & Plans

Tailwind
DocsAllOver - Responsive Bootstrap 5 Contact Form with Image Preview and Map

Responsive Bootstrap 5 Contact Form with Image Preview and Map

Bootstrap
DocsAllOver - Modern CSS Only Loading Spinners Collection

Modern CSS Only Loading Spinners Collection

CSS
DocsAllOver - Modern Tailwind CSS Hero Section with Promo and Dual Buttons

Modern Tailwind CSS Hero Section with Promo and Dual Buttons

Tailwind
DocsAllOver - Clean Bootstrap 5 Contact Form and Contact Details Layout

Clean Bootstrap 5 Contact Form and Contact Details Layout

Bootstrap
DocsAllOver - Stylish CSS Toast Notification With Animated Progress Bar

Stylish CSS Toast Notification With Animated Progress Bar

CSS

Building Blocks for Your Web Pages

Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.

Bootstrap

Browse Snippets

Tailwind

Browse Snippets

CSS

Browse Snippets
See More Categories

DocsAllOver

Where knowledge is just a click away ! DocsAllOver is a one-stop-shop for all your software programming needs, from beginner tutorials to advanced documentation

Get In Touch

We'd love to hear from you! Get in touch and let's collaborate on something great

Quick Links

Home Search Link In Bio Privacy Policy

Popular Links

Technical Docs FAQ's Tools Blogs
Copyright copyright © Docsallover - Your One Shop Stop For Documentation