I'm facing an issue with the layout of items in my view. I have a list of items, and I can display up to 6 items at a time using class="col-md-2".
However, when there are more than 6 items, they move to the next row automatically. I want them to be displayed horizontally with a big > symbol indicating there are more items ahead.
- Show the items horizontally
- Display a big
>symbol for users to know there are more items - Add two dots in the middle
Currently, this is what I have achieved using Laravel 4 syntax in HTML/Blade:
@foreach ( MarketingMaterialCategory::all() as $mmc )
<h2><i class="fa fa-file-image-o color lighter"></i> {{{ $mmc->name or '' }}} <small> </small></h2>
<div class="row">
@foreach ( MarketingMaterial::where('marketing_materials_category_id','=', $mmc->id )->get() as $marketing_material)
<div class="col-md-2" >
<div class="shopping-item">
<div class="col-sm-12 imgbox" >
<a href="#"><img class="col-sm-12 pull-right" width="200" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" /></a>
</div>
<h6><a href="#">{{{ $marketing_material->title or '' }}}</a><span class="color pull-right">{{ FileHelper::formatBytes($marketing_material->media_size,0) }}</span></h6>
<div class="item-hover bg-color hidden-xs">
<a href="#">Download</a>
</div>
</div>
</div>
@endforeach
</div>
<hr>
@endforeach
Can anyone guide me on how to resolve this issue?