→ Juniper
→ Responsive blog home layout

Responsive blog home layout

This bootstrap css example is contributed by Juniper, on 21-Oct-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is blog template

Tags: Blog

Author Juniper

2.3k

v.5.3

Fork Fullscreen

<header class="blog-header py-5">
  <h1>Welcome to My Blog</h1>
  <p>Sharing insights and ideas on technology, design, and development.</p>
</header>

<div class="container mb-5">
  <div class="row">
    <div class="col-lg-12">
      <div class="featured-post">
        <div class="row">
          <div class="col-md-6">
            <img src="https://via.placeholder.com/600x400" alt="Featured Post">
          </div>
          <div class="col-md-6">
            <h2>Featured Post Title</h2>
            <p class="mt-3">This is a brief description of the featured post. It highlights the main points and draws
              readers in to click and read more about the topic. Learn about the latest trends in technology, design,
              and more.</p>
            <a href="#" class="btn btn-primary mt-4">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row g-4">
    <div class="col-md-6 col-lg-4">
      <div class="card">
        <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="Post 1">
        <div class="card-body">
          <h5 class="card-title">Blog Post 1</h5>
          <p class="card-text">A short description of this blog post to capture the reader's attention and give them a
            quick preview.</p>
          <a href="#" class="btn btn-primary">Read More</a>
        </div>
      </div>
    </div>

<div class="col-md-6 col-lg-4">
      <div class="card">
        <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="Post 2">
        <div class="card-body">
          <h5 class="card-title">Blog Post 2</h5>
          <p class="card-text">This is another exciting blog post. It provides value and insights on various topics.</p>
          <a href="#" class="btn btn-primary">Read More</a>
        </div>
      </div>
    </div>

<div class="col-md-6 col-lg-4">
      <div class="card">
        <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="Post 3">
        <div class="card-body">
          <h5 class="card-title">Blog Post 3</h5>
          <p class="card-text">A brief description of this blog post. Keep your readers engaged with interesting
            content.</p>
          <a href="#" class="btn btn-primary">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>

More Examples

addadfadadfadfadf
adfadfadf

Author:
Pranjal Adhikari

3 months ago

386

v.4.6
Blog post layout
Minimal and clean blog post layout

Author:
Juniper

11 months ago

3k

v.5.3
Blog template

Author:
Riz Mohammad

1 year ago

2.4k

v.5.3
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

1 year ago

1.8k

v.4.6
Responsive Admin Dashboard Component

Author:
Isaac Winslow

10 months ago

2.2k

v.5.3
Elegant Bootstrap Footer
with social media icons, newsletter forms, and other important links

Author:
Mateo Rojas

9 months ago

3.1k

v.5.3
Feature showcase
Feature showcase with icos

Author:
Anonymous

1 year ago

1.3k

v.4.6
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

10 months ago

5.3k

v.5.3
Beautiful Spinners made with Bootstrap 5
collection of loading spinners

Author:
Anonymous

1 year ago

1.7k

v.5.3
Professional Bootstrap Pricing Table
Beautiful pricing component built with Bootstrap 5.3, featuring interactive hover effects, mobile-responsive layout, and professional design elements.

Author:
Mason Ashford

10 months ago

3.3k

v.5.3
Cookie Consent Banner Made with bootstrap
Fade from the bottom with options and persistent storage

Author:
Arturo

9 months ago

2.6k

v.5.3
navbar
navbar 2 line

Author:
almounkez

9 months ago

1.3k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent