@extends('layouts.app')
@section('content')
    <div class="container">
        <p>
            <strong class="mr-1">Cards</strong>
            can be organized into Masonry-like columns with just CSS by wrapping them in
            <code>.card-columns.</code>
            Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
        </p>
        <div class="card-columns">
            <div class="card mb-4">
                <img class="card-img-top img-fluid" src="/img/bg1.jpg" alt="Card image cap" />
                <div class="card-body">
                    <h4 class="card-title">Card title that wraps to a new line</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
            </div>
            <div class="card p-3 mb-4">
                <blockquote class="card-body mb-0 p-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer>
                        <div class="text-sm text-muted">
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </div>
                    </footer>
                </blockquote>
            </div>
            <div class="card mb-4">
                <img class="card-img-top img-fluid" src="/img/bg2.jpg" alt="Card image cap" />
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                    <p class="card-text"><span class="text-sm text-muted">Last updated 3 mins ago</span></p>
                </div>
            </div>
            <div class="card bg-inverse p-3 text-center mb-4 border-0">
                <blockquote class="mb-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                    <footer>
                        <div class="text-sm">
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </div>
                    </footer>
                </blockquote>
            </div>
            <div class="card text-center mb-4">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                    <p class="card-text"><span class="text-sm text-muted">Last updated 3 mins ago</span></p>
                </div>
            </div>
            <div class="card mb-4"><img class="card-img img-fluid" src="/img/bg3.jpg" alt="Card image" /></div>
            <div class="card p-3 text-right mb-4">
                <blockquote class="mb-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer>
                        <div class="text-sm text-muted">
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </div>
                    </footer>
                </blockquote>
            </div>
            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">
                        This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
                    </p>
                    <p class="card-text"><span class="text-sm text-muted">Last updated 3 mins ago</span></p>
                </div>
            </div>
            <div class="card mb-4">
                <img class="card-img-top img-fluid" src="/img/bg1.jpg" alt="Card image cap" />
                <div class="card-body">
                    <h4 class="card-title">Card title that wraps to a new line</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
            </div>
            <div class="card bg-inverse bg-primary p-3 text-center mb-4">
                <blockquote class="mb-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                    <footer>
                        <div class="text-sm">
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </div>
                    </footer>
                </blockquote>
            </div>
            <div class="card mb-4"><img class="card-img-top img-fluid" src="/img/bg4.jpg" alt="Card image cap" /></div>
            <div class="card bg-inverse p-3 text-center mb-4">
                <blockquote class="mb-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                    <footer>
                        <div class="text-sm">
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </div>
                    </footer>
                </blockquote>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')@endsection
