Blog Setup

Blog Setup

Canvas ships a complete blog system built on Bootstrap 5 grid columns. Every blog page (grid, list, masonry, sidebar layouts) shares the same .entry post structure, so you learn the markup once and reuse it across all layouts. This guide covers the wrapper, the post entry, and the meta/content blocks used on every blog demo (blog-full-width.html, blog-grid.html, blog-list-1.html, and the sidebar variants).

Structure

A blog listing lives inside a .content-wrap and a #posts grid row. Each post is a .entry column, and the visible card is wrapped in .grid-inner. Inside the entry you place four blocks in order: .entry-image, .entry-title, .entry-meta, and .entry-content.

<div class="content-wrap">
    <div class="container">

        <!-- Posts -->
        <div id="posts" class="row gutter-30">

            <div class="entry col-12">
                <div class="grid-inner">
                    <div class="entry-image">
                        <a href="images/blog/full/17.jpg" data-lightbox="image"><img src="images/blog/standard/17.jpg" alt="Standard Post with Image"></a>
                    </div>
                    <div class="entry-title">
                        <h2><a href="blog-single.html">This is a Standard post with a Preview Image</a></h2>
                    </div>
                    <div class="entry-meta">
                        <ul>
                            <li><i class="uil uil-schedule"></i> 10th February 2021</li>
                            <li><a href="#"><i class="uil uil-user"></i> admin</a></li>
                            <li><i class="uil uil-folder-open"></i> <a href="#">General</a>, <a href="#">Media</a></li>
                            <li><a href="blog-single.html#comments"><i class="uil uil-comments-alt"></i> 13 Comments</a></li>
                            <li><a href="#"><i class="uil uil-camera"></i></a></li>
                        </ul>
                    </div>
                    <div class="entry-content">
                        <p>Photography tutorials, design inspiration, and creative how-tos come together in this featured post.</p>
                        <a href="blog-single.html" class="more-link">Read More</a>
                    </div>
                </div>
            </div>

        </div><!-- #posts end -->

    </div>
</div>

Setup

The #posts row controls the layout by column classes on .entry:

• Full width / list: <div class="entry col-12"> (one post per row).
• Grid 2 columns: add the grid columns on the row (.row.gutter-30) and use col-md-6 on each .entry.
• Grid 3 columns: use col-md-4 on each .entry.
• Gutter spacing: the gutter-30 class on #posts sets a 30px gutter between cards. Other blog demos use .row.gutter-40 or col-mb-30 for vertical rhythm.

Every post entry keeps the same inner blocks:

• .entry-image holds the featured image, video iframe, gallery slider, blockquote, or link. It is the visual header of the card.
• .entry-title wraps the post heading in an <h2><a> (use <h4> in compact sidebar .posts-sm lists).
• .entry-meta holds a <ul> of date, author, categories, comment count, and post-format icon.
• .entry-content holds the excerpt <p> plus a .more-link Read More link.

The Single Post

A single article (blog-single.html, blog-single-both-sidebar.html) reuses the same blocks inside .single-post wrapping one .entry. The Read More link is dropped and the full body sits in .entry-content.

<main class="postcontent col-lg-9">
    <div class="single-post mb-0">
        <div class="entry">

            <div class="entry-title">
                <h2>This is a Standard post with a Preview Image</h2>
            </div><!-- .entry-title end -->

            <div class="entry-meta">
                <ul>
                    <li><i class="uil uil-schedule"></i> 10th July 2021</li>
                    <li><a href="#"><i class="uil uil-user"></i> admin</a></li>
                    <li><i class="uil uil-folder-open"></i> <a href="#">General</a>, <a href="#">Media</a></li>
                    <li><a href="#"><i class="uil uil-comments-alt"></i> 43 Comments</a></li>
                    <li><a href="#"><i class="uil uil-camera"></i></a></li>
                </ul>
            </div><!-- .entry-meta end -->

            <div class="entry-image">
                <a href="#"><img src="images/blog/standard/1.jpg" alt="Preview image for the blog post"></a>
            </div><!-- .entry-image end -->

            <div class="entry-content mt-0">
                <!-- full article body -->
            </div><!-- .entry-content end -->

        </div>
    </div>
</main>

Layout Options

Canvas provides ready-made blog page layouts. Pick the file that matches your sidebar and column needs:

• Full width: blog-full-width.html (no sidebar, col-12 posts).
• Left / right sidebar: blog-left-sidebar.html, blog-both-sidebar.html.
• Grid: blog-grid.html, blog-grid-2.html, blog-grid-3.html plus sidebar variants.
• Masonry: blog-masonry.html, blog-masonry-2.html, blog-masonry-3.html (uses the isotope masonry engine on #posts).
• List: blog-list-1.html, blog-list-2.html, blog-list-3.html.

Tips

• Keep the four .entry-* blocks in order. The CSS spacing assumes image, title, meta, then content.
• Sidebar and footer recent-post lists use the compact .posts-sm variant with a .grid-inner.row.g-0 split into col-auto (thumb) and col (text).
• The lightbox on .entry-image links is enabled with data-lightbox="image" (single) or data-lightbox="gallery" (grouped). See the Lightbox docs for details.
• Use .more-link for the Read More anchor so it inherits the themed link style.