CODEWITHSUNDEEP
phptwitter-bootstraplaravel
mafortis
mafortis

Reputation: 7138

laravel foreach broke column

Sorry for title i couldn't think better title!

anyway, this is my blog page code:

@extends('layouts.frontend_index')

@section('title', 'Blog')

@section('content')

  <div class="container">

    <div class="row" style="margin-bottom:30px;">
      <div class="col-md-8">
        <div class="row">
          @forelse($posts as $post)
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin-bottom:15px;">
            <div class="card card2">
              <div class="cardimg">
                <a href="{{ route('frontshow', $post->slug ) }}"><img src="{{ url('images/') }}/{{ $post->image }}" class="card-img-top" style="width:100%; height:auto; max-height:500px;" alt="{{ $post->title }}"></a>
              </div>
              <div class="card-block">
                <h4 class="card-title"><a href="{{ route('frontshow', $post->slug ) }}">{{$post->title}}</a></h4>
                <p class="card-text">{!!  str_limit($post->body, 10) !!}</p>
                <p><a class="btn btn-block btn-link" href="{{ route('frontshow', $post->slug ) }}">Read More <i class="fa fa-arrow-right"></i></a></p>
              </div>
            </div>
          </div>
          @empty
            <p>No Post Available yet!</p>
            <div class="text-center">
              <a class="btn btn-error" href="{{url('/')}}">Back to Main Page</a>
            </div>
          @endforelse

          <div class="col-md-12 text-center">
            {{$posts->links()}}
          </div>
        </div><!--end row-->
      </div><!--end col-md-8-->

      <div class="col-md-4">
        <h3>Get Latest Updates...</h3>
        <a target="_blank" href="https://t.me/studiotjd"><div id="telegram"></div></a>
        <a target="_blank" href="https://www.facebook.com/studiotjd"><div id="facebook"></div></a>
        <a target="_blank" href="https://www.instagram.com/studiotjd/"><div id="instagram"></div></a>
      </div><!--end col-md-4-->
    </div><!--end row-->

    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4 span3 wow rollIn" style="animation-delay: 1s;"><a href="{{route('categories.lists')}}"><div id="Library"></div></a></div><!--end col-md-4-->
          <div class="col-md-4 span3 wow bounceInDown center" style="animation-delay: 1s;"><a href="{{route('shop')}}"><div id="Library2"></div></a></div><!--end col-md-4-->
          <div class="col-md-4 span3 wow bounceInRight" style="animation-delay: 1s;"><a href="{{route('courses')}}"><div id="Library3"></div></a></div><!--end col-md-4-->
        </div><!--end row-->
      </div><!--end col-md-12-->
    </div><!--end row-->

</div>

@endsection

here is how it looks like in view: view

I tried almost everything to fix this issue but nothing works! As you can see in my inspect all col-md-4 goes under first col-md-4 and i don't know why

inspect

Is there anyone knows how to fix this issue?

Upvotes: 2

Views: 88

Answers (2)

underface
underface

Reputation: 45

problem is a height of div, check it on the inspector code. 1 px or more is

Upvotes: 0

Regolith
Regolith

Reputation: 2982

try this 

{{ strip_tags(str_limit($post->body, 10)) }}

I think you have html element stored in your database, and you are just using str_limit so the tags in your body is not closed.

Upvotes: 2

Related Questions