Bootstrap

    <h1 class="display-3 text-center">Cards Basics</h1>

    <div class="container">

        <div class="row">

            <div class="col-6 offset-3">

                <div class="card">

                    <div class="card-body">

                        <h5 class="card-title">Some Title</h5>

                        <h6 class="card-subtitle text-muted mb-2">Some Subtitle</h6>

                        <p class="card-text">

                             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore voluptatibus maiores aliquam, accusamus adipisci ipsum

                            veniam voluptatum veritatis deserunt dignissimos?

                        </p>

                        <a href="" class="card-link">First Link</a>

                        <a href="" class="card-link">Second Link</a>

                    </div>

                </div>

            </div>

            <div class="col-6 mt-4">

                <div class="card">

                    <div class="card-header">Card Header</div>

                    <ul class="list-group list-group-flush">

                        <li class="list-group-item">First Thing</li>

                        <li class="list-group-item">First Thing</li>

                        <li class="list-group-item">First Thing</li>

                    </ul>

                    <div class="card-footer">Card Footer</div>

                </div>

            </div>

            <div class="col-6 mt-4">

                <div class="card">

                    <div class="card-body">

                        <h5 class="card-title">Some Title</h5>

                        <h6 class="card-subtitle text-muted mb-2">Some Subtitle</h6>

                        <p class="card-text">

                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore voluptatibus maiores aliquam, accusamus adipisci ipsum veniam

                            voluptatum veritatis deserunt dignissimos?

                        </p>

                    </div>

                    <ul class="list-group list-group-flush">

                        <li class="list-group-item">First Thing</li>

                        <li class="list-group-item">Second Thing</li>

                        <li class="list-group-item">Third Thing</li>

                    </ul>

                    <div class="card-body">

                        <a href="" class="card-link">Some Link</a>

                        <a href="" class="card-link">Another Link</a>

                    </div>

                </div>

            </div>

        </div>

     </div>

    <div class="container">

        <h1 class="display-3 text-center">Badges!</h1>

        <h3>Inbox <span class="badge badge-primary">49</span></h3>

        <h3>Inbox <span class="badge badge-secondary">49</span></h3>

        <h3>Inbox <span class="badge badge-warning">49</span></h3>

        <h3 class="d-flex justify-content-between">Inbox <span class="badge badge-danger badge-pill">49</span></h3>

        <button class="btn-info btn">Profile <span class="badge badge-light">73</span></button>

        <ul class="list-group">

            <li class="list-group-item d-flex justify-content-between align-items-center">

                Cras justo odio

                <span class="badge badge-primary badge-pill">14</span>

            </li>

            <li class="list-group-item d-flex justify-content-between align-items-center">

                Dapibus ac facilisis in

                <span class="badge badge-primary badge-pill">2</span>

            </li>

            <li class="list-group-item d-flex justify-content-between align-items-center">

                Morbi leo risus

                <span class="badge badge-primary badge-pill">1</span>

            </li>

        </ul>

    </div>

        <h1 class="display-1">Padding Utility</h1>

        <h1 class="p-0 bg-info d-inline-block">p-0</h1>

        <h1 class="p-1 bg-info d-inline-block">p-1</h1>

        <h1 class="p-2 bg-info d-inline-block">p-2</h1>

        <h1 class="p-3 bg-info d-inline-block">p-3</h1>

        <h1 class="p-4 bg-info d-inline-block">p-4</h1>

        <h1 class="p-5 bg-info d-inline-block">p-5</h1>

        <button class="pt-5 btn btn-lg btn-warning">pt-5</button>

        <button class="pb-5 btn btn-lg btn-warning">pb-5</button>

        <button class="pl-5 btn btn-lg btn-warning">pl-5</button>

        <button class="pr-5 btn btn-lg btn-warning">pr-5</button>

        <button class="px-5 btn btn-lg btn-warning">px-5</button>

        <button class="py-5 btn btn-lg btn-warning">py-5</button>

        <h1 class="display-1">Margin Utility</h1>

        <div class="container bg-dark">

        <h1 class="m-0 bg-white border border-danger d-inline-block">m-0</h1>

        <h1 class="m-1 bg-white border border-danger d-inline-block ">m-1</h1>

        <h1 class="m-2 bg-white border border-danger d-inline-block ">m-2</h1>

        <h1 class="m-3 bg-white border border-danger d-inline-block ">m-3</h1>

        <h1 class="m-4 bg-white border border-danger d-inline-block ">m-4</h1>

        <h1 class="m-5 bg-white border border-danger d-inline-block ">m-5</h1>

      </div>

----------------------------------------------------------------------------------

Descarga ||| Download   ↓

https://github.com/webdvt/bootstrap_sandbox_starter