→ 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

3.2k

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

Personl

Author:
Gana JNsksk

4 months ago

316

v.4.6
E-Commerce Full

Author:
Zahid Hasan Riyad

1 month ago

427

v.5.3
skill

Author:
istiakahmedchowdhury10

1 month ago

126

v.4.6
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

1 year ago

1.1k

v.4.6
Blog template

Author:
Riz Mohammad

2 years ago

3.3k

v.5.3
Liberation War Archive - Documents

Author:
web.asset.edu

2 months ago

267

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

Author:
Juniper

1 year ago

4.6k

v.5.3
personal biography

Author:
Huryra

1 month ago

128

v.4.6
Personl Details

Author:
Gana JNsksk

4 months ago

343

v.4.6
Working

Author:
istiakahmedchowdhury10

1 month ago

108

v.4.6
Liberation War Archive - Home

Author:
web.asset.edu

2 months ago

210

v.5.3
about me gana

Author:
Gana JNsksk

4 months ago

652

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent