Cubes: Headers

Itaque libero eum.

Reprehenderit omnis dolore.
Tempore labore similique est.
Vero non iure harum.

<div class="jumbotron">
    <div class="row">
        <div class="col-12 col-md-6 col-xl-5 pb-5 p-2 pb-0">
            <h1>{HEADER}</h1>

            <div class="ml-3">
                <ul class="fa-ul ml-4 mt-4 h4">
                    <li><i class="fa-li fa fa-check text-success"></i>{HEADER}</li>
                    <li><i class="fa-li fa fa-check text-success"></i>{HEADER}</li>
                    <li><i class="fa-li fa fa-check text-success"></i>{HEADER}</li>
                </ul>
            </div>

            <form class="form-inline mt-4">
                <div class="form-group mb-2">
                    <input type="text" class="form-control" value="email@example.com">
                </div>
                <button type="submit" class="btn btn-primary mb-2 ml-2">Get started</button>
            </form>
        </div>
        <div class="col-12 col-md-6 col-xl-7 pt-sm-0 text-center">
            {IMAGE}
        </div>
    </div>
</div>

Get code

Direct link All categories

Ratione et expedita.

Provident qui quis et dolorum voluptatum alias odio. Non esse blanditiis est qui aperiam optio. Sint qui placeat officia velit eos. Id esse doloremque et est aliquam quis provident.

<div class="jumbotron text-center">
    <h1 class="display-4">{HEADER}</h1>
    <p class="lead">{TEXT}</p>

    <form class="form-inline justify-content-center">
        <div class="form-group mb-2">
            <input type="text" class="form-control" value="email@example.com">
        </div>
        <div class="form-group mx-sm-3 mb-2">
            <input type="password" class="form-control" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary mb-2">Sign-up</button>
    </form>
</div>

Get code

Cubes: Benefits

Direct link All categories

Officiis est iure sint.

Voluptatem ad rem eos repellat dolorem sunt. Distinctio omnis odit rerum ut dolor molestias.

Magnam numquam est.

Iure aut quis deserunt aut natus sint. Animi excepturi quia est nulla qui quo. Quo rerum ipsam quas sunt. Est ducimus quae hic.

Quia necessitatibus et.

Velit omnis omnis aperiam facilis molestias. Modi similique numquam quaerat autem eaque modi sed occaecati. Omnis ducimus ex omnis aut.

<section>
    <div class="row">
        <div class="col-md-6">{IMAGE}</div>
        <div class="col-md-6 my-auto">
            <h2 class="mb-4 text-primary">{HEADER}</h2>
            <p class="pr-md-5">{TEXT}</p>
            <div class="d-flex align-items-start">
                <i class="far fa-check fa-2x mx-3"></i>
                <div>
                    <h4>{HEADER}</h4>
                    <p>{TEXT}</p>
                </div>
            </div>
            <div class="d-flex align-items-start">
                <i class="far fa-check fa-2x mx-3"></i>
                <div>
                    <h4>{HEADER}</h4>
                    <p>{TEXT}</p>
                </div>
            </div>
        </div>
    </div>
</section>

Get code

Direct link All categories

Tempore reprehenderit recusandae quia.

Est fugiat et est porro est corporis. Nemo vitae nihil sit corrupti vel. Cum consequatur et est rem.

Aut molestias vel provident nam.

Doloribus vero voluptate qui hic quia odit sapiente. Architecto eligendi dolores quis aut ad. A qui aut amet dolorem a.

Eos vitae autem.

Ad occaecati natus doloremque ea voluptate quod. Non fugiat illum eveniet non accusamus. Et fuga reiciendis iusto accusantium.

<section>
    <div class="row">
        <div class="col-md-6 my-auto">
            <h2 class="mb-4 text-primary">{HEADER}</h2>
            <p class="pr-md-5">{TEXT}</p>
            <div class="d-flex align-items-start">
                <i class="far fa-check fa-2x mx-3"></i>
                <div>
                    <h4>{HEADER}</h4>
                    <p>{TEXT}</p>
                </div>
            </div>
            <div class="d-flex align-items-start">
                <i class="far fa-check fa-2x mx-3"></i>
                <div>
                    <h4>{HEADER}</h4>
                    <p>{TEXT}</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">{IMAGE}</div>
    </div>
</section>

Get code

Direct link All categories

Earum non recusandae debitis. Voluptatem eaque culpa.

Provident modi deleniti libero corporis. Qui consequuntur dolorum accusamus voluptatibus aut vero. Omnis dolor iste doloremque eligendi harum magni voluptas fuga.

Minus nostrum a veritatis.

Voluptatem eaque distinctio ea in sed a maxime modi. Qui aut odio tenetur culpa repellat. Aut consequuntur harum voluptatem ea vero. Rerum harum ut aliquam dolor provident.

Similique doloribus.

Velit illo corporis exercitationem magni. Et neque iure iure sit. Dolore maiores nostrum sed est ipsam.

<section>
    <div class="row">
        <div class="col-md-6 my-auto">
            <h2 class="mb-4 text-primary">{HEADER} <span class="text-muted">{HEADER}</span></h2>
            <p class="pr-md-5">{TEXT}</p>
            <div class="row mt-4" data-config-id="features_14">
                <div class="col-lg-6">
                    <h4>{HEADER}</h4>
                    <p>{TEXT}</p>
                </div>
                <div class="col-lg-6">
                    <h4>{HEADER}</h4>
                    <p>{TEXT}</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 mt-4 mt-md-0">{IMAGE}</div>
    </div>
</section>

Get code

Direct link All categories

Magni unde doloremque. Et tempora sapiente.

Dolores voluptatum officiis perspiciatis. Dolor nobis quo ut nam non fugit. Quaerat quisquam illum odio sed blanditiis.

Suscipit et et.

Qui similique assumenda itaque exercitationem. Omnis dolorum a laboriosam quod quis. Cumque rem vitae fugit ex sapiente consequatur ullam.

Nemo doloribus quo.

Dolore eum incidunt quis. Doloribus et voluptas odio non autem. Et voluptates incidunt quod cupiditate quia maxime molestiae.

<section>
    <div class="row">
        <div class="col-md-6 mt-4 mt-md-0">{IMAGE}</div>
        <div class="col-md-6 my-auto">
            <h2 class="mb-4 text-primary">{HEADER} <span class="text-muted">{HEADER}</span></h2>
            <p class="pr-md-5">{TEXT}</p>
            <div class="row mt-4" data-config-id="features_14">
                <div class="col-lg-6">
                    <h4>{HEADER}</h4>
                    <p>{TEXT}</p>
                </div>
                <div class="col-lg-6">
                    <h4>{HEADER}</h4>
                    <p>{TEXT}</p>
                </div>
            </div>
        </div>
    </div>
</section>

Get code

Direct link All categories

Sunt ipsum incidunt quibusdam non.

Maxime

Eum voluptatem doloremque doloremque et autem ducimus. Autem non ut quasi quisquam.

Ipsa

Sapiente aut veniam sint doloribus sint rerum. Repellat nostrum veritatis quibusdam molestiae vel. Aut nobis fuga et doloribus. Accusantium ut pariatur enim.

Minus

Alias molestias esse ipsa quibusdam. Quae placeat dolorem sed sunt ducimus. Nulla sequi illum aut aut aspernatur neque nihil quia. Possimus ut voluptatibus ullam fugiat laboriosam animi.

Quidem

Provident laboriosam facere provident enim maxime totam. Quos et temporibus ratione id omnis. Esse ipsa ipsa nam ipsum totam alias sit.

<section class="text-center">
    <h2 class="text-primary">{HEADER}</h2>
    <div class="card-group">
        <div class="card border-0">
            <div class="card-body">
                <i class="d-inline-block text-secondary my-4 far fa-check fa-2x"></i>
                <h3 class="card-title">{NAME}</h3>
                <p>{TEXT}</p>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-body">
                <i class="d-inline-block text-secondary my-4 far fa-check fa-2x"></i>
                <h3 class="card-title">{NAME}</h3>
                <p>{TEXT}</p>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-body">
                <i class="d-inline-block text-secondary my-4 far fa-check fa-2x"></i>
                <h3 class="card-title">{NAME}</h3>
                <p>{TEXT}</p>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-body">
                <i class="d-inline-block text-secondary my-4 far fa-check fa-2x"></i>
                <h3 class="card-title">{NAME}</h3>
                <p>{TEXT}</p>
            </div>
        </div>
    </div>
</section>

Get code

Direct link All categories

Optio architecto voluptatibus ipsa.

Reprehenderit

Vitae voluptatem hic ut eos quia aut odio nostrum. Aut vero ea nulla distinctio consequatur enim. Beatae nemo cumque delectus molestiae aut ut nulla.

Learn more

Nihil

Qui corporis aspernatur voluptates dolores asperiores aspernatur. Rerum suscipit architecto ut voluptas quis. Non magnam sit accusamus error. Sunt quae et ea. Sunt illum rerum animi.

Learn more

Molestiae

Atque ratione aut rem porro aspernatur. Consectetur omnis fugit sit similique in. Iure minima voluptas iusto omnis dolore. Et eum voluptatem qui modi ipsum.

Learn more

<section>
    <h2 class="text-primary text-center mb-5">{HEADER}</h2>
    <div class="card-deck">
        <div class="card">
            <img alt="" class="card-img-top" src="{IMAGE_SRC}">
            <div class="card-body">
                <h3 class="card-title">{NAME}</h3>
                <p>{TEXT}</p>
            </div>
            <div class="card-footer border-top-0 bg-transparent text-right">
                <a href="./">Learn more</a>
            </div>
        </div>
        <div class="card">
            <img alt="" class="card-img-top" src="{IMAGE_SRC}">
            <div class="card-body">
                <h3 class="card-title">{NAME}</h3>
                <p>{TEXT}</p>
            </div>
            <div class="card-footer border-top-0 bg-transparent text-right">
                <a href="./">Learn more</a>
            </div>
        </div>
        <div class="card">
            <img alt="" class="card-img-top" src="{IMAGE_SRC}">
            <div class="card-body">
                <h3 class="card-title">{NAME}</h3>
                <p>{TEXT}</p>
            </div>
            <div class="card-footer border-top-0 bg-transparent text-right">
                <a href="./">Learn more</a>
            </div>
        </div>
    </div>
</section>

Get code

Cubes: Process

Direct link All categories

Qui corporis quia enim.

Nulla

Incidunt saepe aliquid neque ipsa sit quam veritatis natus. Qui recusandae mollitia in. Vitae aspernatur beatae doloremque eaque explicabo reiciendis. Animi sequi optio est sint et.

Cumque

Quod optio consequatur nihil ratione qui dignissimos natus. Illum qui reprehenderit hic dolorem. Fuga qui dolores delectus consectetur vero. Neque qui laborum sunt vel vel velit.

Perspiciatis

Pariatur quis praesentium quia earum sint assumenda perspiciatis. Voluptate amet fuga est est. Porro et modi aut est occaecati in. Aut vero amet consequuntur explicabo beatae dolores suscipit.

Dolores

Rerum autem cumque quae eius. Quo corporis a natus non corporis qui laborum. Cumque non at eveniet qui qui. Atque beatae molestiae dolores asperiores qui sed quod ullam.

<section class="text-center">
    <h2 class="text-primary">{HEADER}</h2>
    <div class="card-group">
        <div class="card border-0">
            <div class="card-body">
                <i class="d-inline-block text-secondary my-4 far fa-comment-dots fa-3x"></i>
                <h3 class="card-title mb-4">{NAME}</h3>
                <p class="text-left">{TEXT}</p>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-body">
                <i class="d-inline-block text-secondary my-4 far fa-comment-dots fa-3x"></i>
                <h3 class="card-title mb-4">{NAME}</h3>
                <p class="text-left">{TEXT}</p>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-body">
                <i class="d-inline-block text-secondary my-4 far fa-comment-dots fa-3x"></i>
                <h3 class="card-title mb-4">{NAME}</h3>
                <p class="text-left">{TEXT}</p>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-body">
                <i class="d-inline-block text-secondary my-4 far fa-comment-dots fa-3x"></i>
                <h3 class="card-title mb-4">{NAME}</h3>
                <p class="text-left">{TEXT}</p>
            </div>
        </div>
    </div>
</section>

Get code

Direct link All categories

Steps to get this done

Iure

Unde nulla vel eum velit ipsa ea. Eligendi harum nostrum non quo nulla. Rem earum enim voluptatum debitis hic. Aut ducimus explicabo repellendus ut.

Perferendis

Eaque omnis eveniet blanditiis sed dolore nemo debitis. Quos in reiciendis voluptatum doloremque odit iste quisquam.

Eveniet

Ut tempora aut blanditiis dicta consequatur et atque doloremque. Accusantium molestias quidem aliquam maiores doloribus aut sit vel.

Enim

Est possimus ipsam eveniet eum veritatis. Qui quo quod et dolor et. Architecto nihil inventore voluptatem modi id vel. Earum omnis ratione cum cum reprehenderit omnis officia.

Earum

Ipsum explicabo tempora delectus eaque sequi corrupti veniam. Nihil non sit ab dolorum voluptatem ullam nostrum. Consequatur quam dicta maiores dolores voluptatem. Blanditiis dolore qui dolor.

{COMMENT}Todo: Align all p-elements with each other at the top.{/COMMENT}
<section>
    <h2 class="text-primary text-center">Steps to get this done</h2>
    <div class="card-group">
        <div class="card border-0">
            <div class="card-body">
                <p class="h1 text-secondary">1.</p>
                <h3 class="card-title mb-4">{NAME}</h3>
                <p class="text-left">{TEXT}</p>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-body">
                <p class="h1 text-secondary">2.</p>
                <h3 class="card-title mb-4">{NAME}</h3>
                <p class="text-left">{TEXT}</p>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-body">
                <p class="h1 text-secondary">3.</p>
                <h3 class="card-title mb-4">{NAME}</h3>
                <p class="text-left">{TEXT}</p>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-body">
                <p class="h1 text-secondary">4.</p>
                <h3 class="card-title mb-4">{NAME}</h3>
                <p class="text-left">{TEXT}</p>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-body">
                <p class="h1 text-secondary">5.</p>
                <h3 class="card-title mb-4">{NAME}</h3>
                <p class="text-left">{TEXT}</p>
            </div>
        </div>
    </div>
</section>

Get code

Cubes: Pricing

Direct link All categories

Voluptate ut deserunt.

Alias

29,- per month

Sed

49,- per month

Error

79,- per month

Aut repellat labore.
Delectus et.

Get started

Voluptatem similique ut.
Ut consequatur sed et.
Quibusdam earum quibusdam.

Get started

Officia eum nulla.
Dolorem sequi.
Non vitae.
Et fuga nam.

Get started

<section>
    <h2 class="text-primary mb-4">{HEADER}</h2>
    <div class="row flex-column flex-lg-row">
        <div class="col-lg-4 d-flex align-items-stretch order-lg-1 order-1 mb-3">
            <div class="card w-100 mx-auto">
                <div class="card-body text-center">
                    <h3 class="text-secondary">{NAME}</h3>
                    <h5 class="my-4">29,- <small>per month</small></h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 d-flex align-items-stretch order-lg-2 order-3 mb-3">
            <div class="card w-100 mx-auto">
                <div class="card-body text-center">
                    <h3 class="text-secondary">{NAME}</h3>
                    <h5 class="my-4">49,- <small>per month</small></h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 d-flex align-items-stretch order-lg-3 order-5 mb-3">
            <div class="card w-100 mx-auto">
                <div class="card-body text-center">
                    <h3 class="text-secondary">{NAME}</h3>
                    <h5 class="my-4">79,- <small>per month</small></h5>
                </div>
            </div>
        </div>

        <div class="col-lg-4 d-flex align-items-stretch order-lg-4 order-2 mb-3 px-4">
            <div class="row w-100 justify-content-center">
                <div class="col-12 mb-3">
                    <ul class="fa-ul ml-4">
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                    </ul>
                </div>
                <div class="col-12 align-self-end">
                    <a href="./" class="btn btn-primary btn-block"><i class="fas fa-chevron-right"></i> Get started</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 d-flex align-items-stretch order-lg-5 order-4 mb-3 px-4">
            <div class="row w-100">
                <div class="col-12 mb-3">
                    <ul class="fa-ul ml-4">
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                    </ul>
                </div>
                <div class="col-12 align-self-end">
                    <a href="./" class="btn btn-primary btn-lg btn-block"><i class="fas fa-chevron-right"></i> Get started</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 d-flex align-items-stretch order-lg-6 order-6 mb-3 px-4">
            <div class="row w-100 justify-content-center">
                <div class="col-12 mb-3">
                    <ul class="fa-ul ml-4">
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                    </ul>
                </div>
                <div class="col-12 align-self-end">
                    <a href="./" class="btn btn-primary btn-block"><i class="fas fa-chevron-right"></i> Get started</a>
                </div>
            </div>
        </div>
    </div>
</section>

Get code

Direct link All categories

Ut quas est laudantium.

Nostrum

29,- per month

Inventore ut tempore exercitationem.
In nostrum autem.

Get started

Culpa

49,- per month

Officia est.
Consequatur id molestias.
Dolorem consequuntur similique.

Get started

Inventore

79,- per month

Esse amet.
Repudiandae dolore quia.
Omnis cupiditate quidem.
Et omnis voluptatem consequatur.

Get started

<section>
    <h2 class="text-primary mb-4">{HEADER}</h2>
    <div class="row flex-column flex-lg-row">
        <div class="col-lg-4 d-flex align-items-stretch mb-3">
            <div class="card w-100 mx-auto">
                <div class="card-body">
                    <h3 class="text-secondary">{NAME}</h3>
                    <h5 class="my-4">29,- <small>per month</small></h5>

                    <ul class="fa-ul ml-4">
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                    </ul>
                </div>

                <div class="card-footer border-top-0 bg-transparent">
                    <a href="./" class="btn btn-primary"><i class="fas fa-chevron-right"></i> Get started</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 d-flex align-items-stretch mb-3">
            <div class="card w-100 mx-auto">
                <div class="card-body">
                    <h3 class="text-secondary">{NAME}</h3>
                    <h5 class="my-4">49,- <small>per month</small></h5>

                    <ul class="fa-ul ml-4">
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                    </ul>
                </div>

                <div class="card-footer border-top-0 bg-transparent">
                    <a href="./" class="btn btn-primary"><i class="fas fa-chevron-right"></i> Get started</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 d-flex align-items-stretch mb-3">
            <div class="card w-100 mx-auto">
                <div class="card-body">
                    <h3 class="text-secondary">{NAME}</h3>
                    <h5 class="my-4">79,- <small>per month</small></h5>

                    <ul class="fa-ul ml-4">
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                        <li><span class="fa-li"><i class="fas fa-check"></i></span>{HEADER}</li>
                    </ul>
                </div>
                <div class="card-footer border-top-0 bg-transparent">
                    <a href="./" class="btn btn-primary"><i class="fas fa-chevron-right"></i> Get started</a>
                </div>
            </div>
        </div>
    </div>
</section>

Get code

Direct link All categories

Rem repellendus ex.

Monthly

29,- per month

Get started

Yearly

49,- per month

Get started

Bi-annually

79,- per month

Get started

<section>
    <h2 class="text-primary mb-4">{HEADER}</h2>
    <div class="card-deck">
        <div class="card">
            <div class="card-body pb-0">
                <h3 class="text-secondary">Monthly</h3>
                <p>29,- <small>per month</small></p>
            </div>
            <div class="card-footer border-top-0 bg-transparent">
                <a href="./" class="btn btn-primary"><i class="fas fa-chevron-right"></i> Get started</a>
            </div>
        </div>
        <div class="card">
            <div class="card-body pb-0">
                <h3 class="text-secondary">Yearly</h3>
                <p>49,- <small>per month</small></p>
            </div>
            <div class="card-footer border-top-0 bg-transparent">
                <a href="./" class="btn btn-primary"><i class="fas fa-chevron-right"></i> Get started</a>
            </div>
        </div>
        <div class="card">
            <div class="card-body pb-0">
                <h3 class="text-secondary">Bi-annually</h3>
                <p>79,- <small>per month</small></p>
            </div>
            <div class="card-footer border-top-0 bg-transparent">
                <a href="./" class="btn btn-primary"><i class="fas fa-chevron-right"></i> Get started</a>
            </div>
        </div>
    </div>
</section>

Get code

Cubes: Other

Direct link All categories

Comments

Modi

5 days ago

Ut esse perspiciatis ea ab assumenda animi dolorem. Illo temporibus modi omnis voluptatem facere consequatur eius. Dolorem non deserunt saepe libero corporis mollitia.

Ratione

3 days ago

Aut eum voluptatibus beatae. Nihil atque quo dolorum porro excepturi consequuntur. Enim et consectetur nam quibusdam est. Non impedit mollitia numquam consequatur aut.

Neque admin

5 days ago

Similique aut quaerat voluptas. Recusandae maiores dolorem laboriosam qui dolore et. Possimus maiores iusto rerum beatae.

<section>
    <h2 class="text-primary mb-5">Comments</h2>
    <div class="row mb-3">
        <div class="col-sm-2 d-none d-sm-block">
            <img alt="" src="{IMAGE_SRC}" class="rounded-circle mr-2 mt-2" style="height: 60px; width: 60px;"/>
        </div>
        <div class="col-sm-10 col-12">
            <div class="card arrow">
                <div class="card-body">
                    <div class="btn-toolbar float-right" role="toolbar">
                        <div class="btn-group mr-2">
                            <a href="#" class="btn btn-primary btn-sm small">Reply</a>
                        </div>
                        <div class="btn-group">
                            <a href="#" class="btn btn-primary btn-sm small"><i class="far fa-heart"></i>&nbsp;</a>
                        </div>
                    </div>

                    <div>
                        <i class="fa fa-user d-none d-sm-inline"></i>
                        <img alt="" src="{IMAGE_SRC}" class="img-fluid d-inline d-sm-none rounded-circle" style="height: 20px; width: 20px;"/>
                        <a class="text-body" href="#">{NAME}</a>
                        <p class="text-muted small"><i class="fa fa-clock-o"></i> 5 days ago</p>
                        {TEXT}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="offset-sm-1">
        <div class="row mb-3">
            <div class="col-sm-2 d-none d-sm-block">
                <img alt="" src="{IMAGE_SRC}" class="rounded-circle mr-2 mt-2" style="height: 40px; width: 40px;"/>
            </div>
            <div class="col-sm-10 col-12">
                <div class="card arrow">
                    <div class="card-body">
                        <div class="btn-toolbar float-right" role="toolbar">
                            <div class="btn-group mr-2">
                                <a href="#" class="btn btn-primary btn-sm small">Reply</a>
                            </div>
                            <div class="btn-group">
                                <a href="#" class="btn btn-primary btn-sm small"><i class="far fa-heart"></i>&nbsp;</a>
                            </div>
                        </div>

                        <div>
                            <i class="fa fa-user d-none d-sm-inline"></i>
                            <img alt="" src="{IMAGE_SRC}" class="img-fluid d-inline d-sm-none rounded-circle" style="height: 20px; width: 20px;"/>
                            <a class="text-body" href="#">{NAME}</a>
                            <p class="text-muted small"><i class="fa fa-clock-o"></i> 3 days ago</p>
                            {TEXT}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="offset-sm-1">
        <div class="row mb-3">
            <div class="col-sm-2 d-none d-sm-block">
                <img alt="" src="{IMAGE_SRC}" class="rounded-circle mr-2 mt-2" style="height: 40px; width: 40px;"/>
            </div>
            <div class="col-sm-10 col-12">
                <div class="card arrow">
                    <div class="card-body">
                        <div class="btn-toolbar float-right" role="toolbar">
                            <div class="btn-group mr-2">
                                <a href="#" class="btn btn-primary btn-sm small">Reply</a>
                            </div>
                            <div class="btn-group">
                                <a href="#" class="btn btn-primary btn-sm small"><i class="far fa-heart"></i>&nbsp;</a>
                            </div>
                        </div>

                        <div>
                            <i class="fa fa-user d-none d-sm-inline"></i>
                            <img alt="" src="{IMAGE_SRC}" class="img-fluid d-inline d-sm-none rounded-circle" style="height: 20px; width: 20px;"/>
                            <a class="text-body" href="#">{NAME}</a>  <span class="badge small badge-secondary ml-1">admin</span>
                            <p class="text-muted small"><i class="fa fa-clock-o"></i> 5 days ago</p>
                            {TEXT}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="offset-sm-2 col-sm-10 mb-3">
            <form>
                <div class="input-group">
                    <textarea name="comment" class="form-control" minlength="20" maxlength="6000" rows="2" placeholder="Write your reply..." required></textarea>
                </div>
                <button type="submit" class="btn btn-success mb-1 mt-2">Reply</button>
            </form>
        </div>
    </div>
</section>

Get code

Direct link All categories

"Ullam eaque qui odit quia possimus ut. Dignissimos nesciunt magnam eum consequuntur officia maiores deleniti. Inventore adipisci inventore quos dolores dolor."

Consequatur

Maiores

<section>
    <div class="row">
        <h2 class="text-center col-md-6 font-italic mt-2" style="font-family: Georgia, Times, serif;">&quot;{TEXT}&quot;</h2>
        <div class="text-center col-md-6 mt-md-2 mt-5 mt-sm-2">
            <img alt="Picture" src="{IMAGE_SRC}" class="rounded-circle" style="width: 200px; height: 200px;">
            <h5 class="font-weight-bold mt-4">{NAME}</h5>
            <p>{NAME}</p>
        </div>
    </div>
</section>

Get code

Direct link All categories

<section>
    <form class="text-center mx-auto" style="max-width: 350px;">
        <h3>{HEADER}</h3>
        <input type="email" class="form-control mt-3" placeholder="Email" required>
        <input type="password" class="form-control mt-3" placeholder="Password" required>
        <div class="form-check my-3">
            <input class="form-check-input" type="checkbox" value="" id="remember_me">
            <label class="form-check-label" for="remember_me">Remember me</label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
</section>

Get code

Direct link All categories

From our blog

Et deleniti officiis aut voluptatem ea. Et eligendi illum molestias. Dolorum facere rerum quis numquam sed temporibus quaerat vero. Fugiat dolores fugit consequatur a recusandae quod.

Read 9 mins

Culpa iste magni id quis iusto animi commodi. A sit odit in qui recusandae culpa officiis modi. Maxime nesciunt quos fugit recusandae deserunt asperiores voluptates.

Read 9 mins

Architecto et ut suscipit quibusdam sed. Voluptate eum dolorem velit itaque et. Porro ad ex nihil cum facere. Reprehenderit voluptas qui in et. Qui non quam est.

Read 9 mins

<section>
    <h2 class="text-primary text-center mb-5">From our blog</h2>
    <div class="card-deck">
        <div class="card">
            <img alt="" class="card-img-top" src="{IMAGE_SRC}">
            <div class="card-body">
                <p>{TEXT}</p>
            </div>
            <div class="card-footer border-top-0 bg-transparent text-right d-flex justify-content-between align-items-center">
                <a class="btn btn-primary" href="./">Read</a>
                <small class="text-muted">9 mins</small>
            </div>
        </div>
        <div class="card">
            <img alt="" class="card-img-top" src="{IMAGE_SRC}">
            <div class="card-body">
                <p>{TEXT}</p>
            </div>
            <div class="card-footer border-top-0 bg-transparent text-right d-flex justify-content-between align-items-center">
                <a class="btn btn-primary" href="./">Read</a>
                <small class="text-muted">9 mins</small>
            </div>
        </div>
        <div class="card">
            <img alt="" class="card-img-top" src="{IMAGE_SRC}">
            <div class="card-body">
                <p>{TEXT}</p>
            </div>
            <div class="card-footer border-top-0 bg-transparent text-right d-flex justify-content-between align-items-center">
                <a class="btn btn-primary" href="./">Read</a>
                <small class="text-muted">9 mins</small>
            </div>
        </div>
    </div>
</section>

Get code

Direct link All categories

FAQ

Nam rerum aliquid odio.

Tenetur assumenda sit distinctio. Libero fuga repellendus qui illum consequatur blanditiis maiores. Quas culpa quia quae molestias omnis.

Qui nihil.

Natus quod soluta soluta neque sint quisquam. Facere voluptates quae provident exercitationem inventore. Voluptatem omnis tenetur vel debitis aut. Repellat fugit aut commodi non deserunt eum.

<section>
    <h2 class="mb-5">FAQ</h2>
    <div>
        <div class="mb-2 border-bottom">
            <h5><a href="#" class="btn-block text-left d-flex" data-toggle="collapse" data-target="#faq1" aria-expanded="false" aria-controls="faq1">{HEADER} <i class="p-1 ml-auto my-auto far fa-caret-down"></i></a></h5>
            <div class="collapse" id="faq1">
                <p>{TEXT}</p>
            </div>
        </div>
        <div class="mb-2 border-bottom">
            <h5><a href="#" class="btn-block text-left d-flex" data-toggle="collapse" data-target="#faq2" aria-expanded="false" aria-controls="faq2">{HEADER} <i class="p-1 ml-auto my-auto far fa-caret-down"></i></a></h5>
            <div class="collapse" id="faq2">
                <p>{TEXT}</p>
            </div>
        </div>
    </div>
</section>

Get code

Direct link All categories

Userlist

Name	Status	Activity
Quibusdam	Odio	10
Sunt	Eos	10

<section>
    <h2 class="text-primary">Userlist</h2>
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th class="text-left">Name</th>
                <th class="text-left">Status</th>
                <th>Activity</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <img alt="Person" src="{IMAGE_SRC}" class="mr-3 float-left rounded-circle" style="height: 40px; width: 40px;">
                    {NAME}
                </td>
                <td><span class="badge small badge-pill badge-warning">{NAME}</span></td>
                <td class="text-center text-muted ">10</td>
                <td class="text-right"><a href="#" class="btn btn-secondary btn-sm"><i class="far fa-edit"></i></a></td>
            </tr>
            <tr>
                <td>
                    <img alt="Person" src="{IMAGE_SRC}" class="mr-3 float-left rounded-circle" style="height: 40px; width: 40px;">
                    {NAME}
                </td>
                <td><span class="badge small badge-pill badge-success">{NAME}</span></td>
                <td class="text-center text-muted ">10</td>
                <td class="text-right"><a href="#" class="btn btn-secondary btn-sm"><i class="far fa-edit"></i></a></td>
            </tr>
        </tbody>
    </table>
</section>

Get code

Direct link All categories

<nav>
    <ul class="pagination justify-content-center">
        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item"><a class="page-link" href="#">6</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

Get code

Direct link All categories

<footer class="pt-4 my-md-5 pt-md-5 border-top">
    <div class="row">
        <div class="col-12 col-md">
            <img alt="Logo" class="mb-2" src="{IMAGE_SRC}" width="50" height="50">
            <small class="d-block mb-3 text-muted">&copy; 2019-2020</small>
        </div>
        <div class="col-6 col-md">
            <h5>Features</h5>
            <ul class="list-unstyled">
                <li><a class="text-muted" href="#">{NAME}</a></li>
                <li><a class="text-muted" href="#">{NAME}</a></li>
                <li><a class="text-muted" href="#">{NAME}</a></li>
                <li><a class="text-muted" href="#">{NAME}</a></li>
            </ul>
        </div>
        <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled">
                <li><a class="text-muted" href="#">{NAME}</a></li>
                <li><a class="text-muted" href="#">{NAME}</a></li>
                <li><a class="text-muted" href="#">{NAME}</a></li>
                <li><a class="text-muted" href="#">{NAME}</a></li>
            </ul>
        </div>
        <div class="col-6 col-md">
            <h5>About</h5>
            <ul class="list-unstyled">
                <li><a class="text-muted" href="#">{NAME}</a></li>
                <li><a class="text-muted" href="#">{NAME}</a></li>
                <li><a class="text-muted" href="#">{NAME}</a></li>
                <li><a class="text-muted" href="#">{NAME}</a></li>
            </ul>
        </div>
    </div>
</footer>

Get code

Bootstrap cubes for inspiration and to build faster.

Cubes: Headers

Itaque libero eum.

Ratione et expedita.

Cubes: Benefits

Officiis est iure sint.

Magnam numquam est.

Quia necessitatibus et.

Tempore reprehenderit recusandae quia.

Aut molestias vel provident nam.

Eos vitae autem.

Earum non recusandae debitis. Voluptatem eaque culpa.

Minus nostrum a veritatis.

Similique doloribus.

Magni unde doloremque. Et tempora sapiente.

Suscipit et et.

Nemo doloribus quo.

Sunt ipsum incidunt quibusdam non.

Maxime

Ipsa

Minus

Quidem

Optio architecto voluptatibus ipsa.

Reprehenderit

Nihil

Molestiae

Cubes: Process

Qui corporis quia enim.

Nulla

Cumque

Perspiciatis

Dolores

Steps to get this done

Iure

Perferendis

Eveniet

Enim

Earum

Cubes: Pricing

Voluptate ut deserunt.

Alias

29,- per month

Sed

49,- per month

Error

79,- per month

Ut quas est laudantium.

Nostrum

29,- per month

Culpa

49,- per month

Inventore

79,- per month

Rem repellendus ex.

Monthly

Yearly

Bi-annually

Cubes: Other

Comments

"Ullam eaque qui odit quia possimus ut. Dignissimos nesciunt magnam eum consequuntur officia maiores deleniti. Inventore adipisci inventore quos dolores dolor."

Consequatur

Rerum in voluptate.

From our blog

FAQ

Nam rerum aliquid odio.

Qui nihil.

Userlist