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

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

4 months ago

606

v.4.6
Blog template

Author:
Riz Mohammad

1 year ago

2.6k

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

Author:
Juniper

1 year ago

3.3k

v.5.3
Search section

Author:
Ankit khedkar

1 year ago

2.1k

v.5.3
hero parallax

Author:
java stories story

3 months ago

2.8k

v.5.3
Error Page, you can use HTML, CSS, and Bootstrap.
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects.

Author:
zobaidul kaziex

1 year ago

2k

v.4.6
Audio player with bootstrap

Author:
Arturo

10 months ago

3.7k

v.5.3
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

1 year ago

2.9k

v.5.3
About Section

Author:
Anonymous

1 year ago

1.9k

v.5.3
Pulsing Button with Bootstrap 5

Author:
Andreas Müller

1 year ago

2.1k

v.5.3
Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

1 year ago

5k

v.5.3
Spinner buttons
Loading spinner buttons

Author:
Mishti

1 year ago

2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent