Life & Work with Michelle Navajas, on Bold Journey

<div class="row">

  @foreach ($blogs as $blog)

    <div class="col-lg-3 col-md-6 d-flex align-items-stretch">

      <div class="card blog-card shadow-sm" style="margin: 10px; height: 100%;">

        <!-- Image Section -->

        <img src="{{ asset('storage/' . $blog->cover_image) }}" 

           class="card-img-top" 

           alt="{{ $blog->title }}" 

           style="height: 200px; object-fit: cover;">

        <!-- Card Body -->

        <div class="card-body d-flex flex-column">

          <h5 class="card-title text-truncate" title="{{ $blog->title }}">

            {{ $blog->title }}

          </h5>

          <p class="card-text flex-grow-1">

            {{ \Illuminate\Support\Str::limit($blog->description, 100, '...') }}

          </p>

          <!-- Button -->

          <div class="mt-auto">

            <a href="{{ route('viewblogpage', $blog->slug) }}" 

              class="btn btn-primary w-100" 

              style="background-color: #006a7e; color: white !important;">

              View

            </a>

          </div>

        </div>

      </div>

    </div>

  @endforeach

</div>