→ 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

1.8k

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

Blog post layout
Minimal and clean blog post layout

Author:
Juniper

7 months ago

2.3k

v.5.3
Blog template

Author:
Riz Mohammad

10 months ago

2k

v.5.3
Custom buttons

Author:
Anonymous

1 year ago

872

v.5.3
Newsletter section

Author:
Anonymous

10 months ago

1.4k

v.4.6
Author box
minimal author box with author image

Author:
Kemaya m

1 year ago

1.1k

v.4.6
Pricing cards

Author:
Prajwal Hallale

1 year ago

897

v.5.3
Product details page
Beautiful product detail page with

Author:
Andreas Müller

10 months ago

14.8k

v.5.3
Footer
Footer de Bootstrap con enlaces rápidos, contacto y redes sociales, usando íconos para mejor navegación. Diseño limpio y responsivo. 🚀

Author:
Anonymous

3 months ago

1.3k

v.4.6
Privacy policy template with boostrap 5

Author:
Anonymous

5 months ago

1.7k

v.5.3
Simple Footer

Author:
Anonymous

1 year ago

1.2k

v.4.6
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

9 months ago

5.3k

v.4.6
404 error page template

Author:
Ross Wille

10 months ago

2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent