→ 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.1k

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 Details

Author:
Gana JNsksk

2 months ago

294

v.4.6
Liberation War Archive - Home

Author:
web.asset.edu

3 weeks ago

146

v.5.3
Plant

Author:
Code Bro io

1 week ago

47

v.5.3
Liberation War Archive - Documents

Author:
web.asset.edu

3 weeks ago

195

v.5.3
personal biography

Author:
Huryra

1 week ago

74

v.4.6
about me gana

Author:
Gana JNsksk

2 months ago

612

v.4.6
Personl

Author:
Gana JNsksk

2 months ago

272

v.4.6
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

1 year ago

1k

v.4.6
Working

Author:
istiakahmedchowdhury10

1 week ago

56

v.4.6
Restaurant Menu Page

Author:
Code Bro io

2 weeks ago

102

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

Author:
Juniper

1 year ago

4.4k

v.5.3
Portfolio About

Author:
Code Bro io

2 weeks ago

46

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent