Bootstrap 5 Masonry Grid Layout Component - HTMLCSSFreebies

PHOTO

Sat Oct 01 2022 06:54:20 GMT+0000 (Coordinated Universal Time)

Saved by @wnakswl #markup

HTML
<!-- Masonry 1 - HCF Bootstrap 5 Component -->
<section class="bg-light py-5 py-xl-6">
  <div class="container mb-5 mb-md-6">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6 text-center">
        <h2 class="mb-4 display-5">Masonry Layout</h2>
        <p class="text-secondary mb-4 mb-md-5">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque et neque id ligula mattis commodo.</p>
        <hr class="w-50 mx-auto mb-0 text-secondary">
      </div>
    </div>
  </div>

  <div class="container overflow-hidden">
    <div class="row gy-3 g-md-3 hcf-isotope-grid">
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#!">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/img-1.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Charming Concept</h3>
            <div class="card-category text-white text-center">Photography</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-6 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#!">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/img-2.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Linear Architecture</h3>
            <div class="card-category text-white text-center">Inspiration</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#!">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/img-3.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Endless Looks</h3>
            <div class="card-category text-white text-center">Nature</div>
          </div>
        </a>
      </div>

      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#!">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/img-4.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Sleek Typography</h3>
            <div class="card-category text-white text-center">Design</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#!">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/img-5.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Ebony Vintage</h3>
            <div class="card-category text-white text-center">Fashion</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#!">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/img-6.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Orange Shine</h3>
            <div class="card-category text-white text-center">Food</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#!">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/img-7.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Boat Adventure</h3>
            <div class="card-category text-white text-center">Health</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#!">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/img-8.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Offroad Moves</h3>
            <div class="card-category text-white text-center">Nature</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-3 hcf-isotope-item">
        <a class="hcf-masonry-card rounded rounded-4" href="#!">
          <img class="card-img img-fluid" loading="lazy" src="./assets/img/masonry/masonry-1/img-9.jpg" alt="">
          <div class="card-overlay d-flex flex-column justify-content-center bg-dark p-4" style="--bs-bg-opacity: .5;">
            <h3 class="card-title text-white text-center mb-1">Cozy Occupancy</h3>
            <div class="card-category text-white text-center">Design</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>
Copy

https://htmlcssfreebies.com/bootstrap-5-masonry-grid-layout-component/

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

Emmet Playground

<div class="a-class" id="an-id">Edit me!</div>

Shadow DOM slots, composition

<custom-menu id="menu">
  <span slot="title">Candy menu</span>
  <li slot="item">Lollipop</li>
  <li slot="item">Fruit Toast</li>
</custom-menu>

<script>
customElements.define('custom-menu', class extends HTMLElement {
  items = []

  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `<div class="menu">
      <slot name="title"></slot>
      <ul><slot name="item"></slot></ul>
    </div>`;

    // triggers when slot content changes
    this.shadowRoot.firstElementChild.addEventListener('slotchange', e => {
      let slot = e.target;
      if (slot.name == 'item') {
        this.items = slot.assignedElements().map(elem => elem.textContent);
        alert("Items: " + this.items);
      }
    });
  }
});

// items update after 1 second
setTimeout(() => {
  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Cup Cake</li>')
}, 1000);
</script>

Bilinear Gradients

<svg>
  <gradientRect x="0" y="0" width="100%" height="100%"
    gradient-type="bilinear"
    gradient-x1="30" gradient-y1="30"
    gradient-x2="100%-60" gradient-y2="100%-60"
    gradient-color1="cyan"
    gradient-color2="white"
    gradient-color3="magenta"
    gradient-color4="green" />
</svg>

<svg viewport-fill="#222">
  <mask id="mask">
    <rect x="50%+15" y="50%"  width="60" height="10" />
    <rect x="$-160"  y="$-10" width="60" height="10" />
    <rect x="$+15"   y="$-85" width="10" height="60" />
    <rect x="$-10"   y="$+40" width="10" height="60" />
  </mask>
  <svg mask="#mask" width="100%" height="100%">
    <gradientRect width="100%" height="100%" fill="cyan"
      gradient-type="bilinear"
      gradient-x1="10%" gradient-y1="10%"
      gradient-x2="80%" gradient-y2="80%"
      gradient-color2="yellow"
      gradient-color3="magenta"
      gradient-color4="green" />
  </svg>
</svg>

Clock face Guide

<svg viewport-fill="fb-cyan">
  <text id="clock-label" x="50%" y="50%+15"
      fill="black" font-size="32" font-family="System-Regular"
      text-anchor="middle" text-length="20">00:00:00</text>
</svg>

Clock face Guide

<svg viewport-fill="fb-cyan">
  <g id="mins" pointer-events="visible" transform="translate(50%,50%)">
    <rect x="$-4" y="-110" width="8" height="110" fill="#e0e0e0" />
  </g>
  <g id="hours" pointer-events="visible" transform="translate(50%,50%)">
    <rect x="$-6" y="-75" width="12" height="75" fill="#ffffff" />
  </g>
  <g id="secs" pointer-events="visible" transform="translate(50%,50%)">
    <rect x="$-2" y="-120" width="4" height="120" fill="#ff0000" />
  </g>
  <circle cx="50%" cy="50%" r="10" fill="#444444" />
</svg>

Angular 12 Detect Width and Height of Screen Tutorial - positronX.io

<div class="container text-center mt-5">

  <p>Window width: <strong>{{ getScreenWidth }}</strong></p>
  <p>Window height: <strong>{{ getScreenHeight }}</strong></p>

</div>

Navbar - Materialize

  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

How to remove ssl in centos and cyberpanel - CV.Irando

rm -rf /etc/letsencrypt/live/example.com

HTML5 Template: A Basic Boilerplate for Any Project - SitePoint

<!doctype html>

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

  <title>A Basic HTML5 Template</title>
  <meta name="description" content="A simple HTML5 Template for new projects.">
  <meta name="author" content="SitePoint">

  <meta property="og:title" content="A Basic HTML5 Template">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
  <meta property="og:description" content="A simple HTML5 Template for new projects.">
  <meta property="og:image" content="image.png">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>

<body>
  <!-- your content here... -->
  <script src="js/scripts.js"></script>
</body>
</html>

How to Use Position: Sticky for Sidebars with Pure CSS and Bootstrap | DigitalOcean

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sticky Position Example</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }

      .placeholder-example {
        background: lavender;
        height: 100vh;
        padding: 1em;
      }

      .sticky-example {
        background: cornflowerblue;
        padding: 1em;
      }

      .sticky {
        position: sticky;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="sticky-example sticky">Sticky</div>
    <div class="placeholder-example">Placeholder</div>
  </body>
</html>

Fetch GET API Call

<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });
    }).
    .catch(function(error) {
      console.log(error);
    });

  ul.appendChild(list);
</script>

Basic slick Slider Codes

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>

HTML5 Structural Elements

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Chili Recipe</title>
</head>
<body>
   <h1>Recipe Book</h1>
   <nav>
      <ul>
         <li><a href="recipes.html">Recipes</a></li>
         <li><a href="tips.html">Tips</a></li>
         <li><a href="about.html">About</a></li>
      </ul>
   </nav>
   
   <main>
      <h2>Recipe for Chili</h2>
      <p>Instructions...</p>
   </main>
   
   <footer>Copyright, me</footer>
   
</body>
</html>

HTML5 Structural Elements<article>

<article>
   <h1>PB&J Sandwiches</h1>
   <p>Here's how to make this snack staple.</p> 
   
   <section>
      <h2>Ingredients</h2>
      <ul>
         <li>Peanut Butter</li>
         <li>Jelly</li>
         <li>Bread</li>
      </ul>
   </section>

   <section>
      <h2>Instructions</h2>
      <ol>
         <li>Get two slices of bread.</li>
         <li>Spread peanut butter on one side of both slices.</li>
         <li>Spread jelly over the peanut button on one slice of bread.</li>
         <li>Press bread slices together.</li>
      </ol>
   </section>
</article>

Browse more snippets >>