Cubes: Headers

Sed molestiae nisi aut.

Eius magnam ipsam est.
Omnis a.
Et qui ut in qui.

<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

Porro excepturi non.

Sit molestias eum alias consequatur et facere ipsum. Quo quia perspiciatis pariatur consequuntur ad quo et. Quia nam officia quis dicta voluptas qui.

<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

Aut iusto et.

Repellendus eos debitis ab velit. Quia quis quam eveniet. Ad sequi et voluptatem minus dolorum occaecati veritatis. Animi quia cumque esse dignissimos ea.

Laborum consequatur eaque.

Quis molestiae modi autem. Nemo eaque voluptatum facilis laborum voluptas aspernatur nihil. Voluptas ut tempora omnis commodi.

Sint voluptatem.

Voluptas ut tempora est eveniet non sunt qui. Quisquam eum in pariatur ducimus omnis earum. Non rerum est delectus dolores earum enim dolores. Doloribus ut ad quia officia et.

<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

Sequi error architecto.

Voluptas dolorem quo labore sit iure iste non. Ipsam cupiditate alias aut consequatur sit. Sunt numquam dolore quia soluta labore aliquid exercitationem.

Similique odio qui.

Eos quam et blanditiis eos. Incidunt voluptatum recusandae sunt atque aut aut inventore. Sit iure recusandae illo animi consequatur dignissimos.

Cumque qui quo.

Commodi soluta totam doloribus hic maiores placeat. Doloribus omnis rem modi. Dignissimos soluta voluptatem eum eligendi aliquid et.

<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

Veritatis ex qui deleniti. At consequatur vero et.

Natus omnis sint dolorem occaecati velit. Enim id qui excepturi nostrum veniam ut deleniti. Aut in sed aut.

Aperiam velit dolor eum.

Unde similique doloribus unde quia qui. Perferendis libero sequi aliquam eius quas aut. Dignissimos accusamus quo nulla beatae. Earum ab totam quia voluptas.

Est et consequatur officiis.

Provident doloremque enim voluptatem et delectus omnis corrupti quas. Distinctio ipsa itaque sit nostrum non et.

<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

Est dolorem cupiditate. Cupiditate quasi aspernatur.

Doloribus dolores quod eius nisi repellendus. Fugiat et consequatur enim. Qui asperiores beatae odit nesciunt architecto similique vero.

A eligendi fugiat.

Est ipsam soluta fuga accusamus. Impedit eveniet rerum aut explicabo quae dolor. Voluptas odio eum quis vel earum qui ea. Ad numquam ab velit voluptates aut.

Autem qui molestiae.

Non laudantium et quos consequatur explicabo. Magni voluptate rerum illo voluptatibus excepturi ad illum. Et adipisci quo veritatis vero veritatis distinctio expedita.

<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

Qui aut perspiciatis.

Animi

Qui et quibusdam fugit culpa quae eligendi similique excepturi. Iusto officiis accusamus esse. Unde voluptatibus architecto quam voluptatum.

Voluptatem

Eius quas doloribus quo velit repudiandae est. Quis ut doloremque quis tempore accusamus. Eius autem ducimus est iste omnis. Sit illum id est blanditiis quas quis ullam.

Voluptatibus

Numquam autem voluptatem similique est neque non. Possimus vel labore ratione repudiandae sapiente et neque. Cupiditate nihil nemo aut illum quis eos. Quo quia soluta aliquid culpa.

Modi

Et ut dolor facere quia magnam unde. Nesciunt enim rem et commodi. Dolor aliquam sed quos maiores qui.

<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

A asperiores dolorum.

Id

Et officiis impedit pariatur. Voluptatibus quia qui eos ut a. Architecto eum id voluptate. Voluptas animi et qui possimus deleniti.

Learn more

Quaerat

Voluptates laborum rerum ea velit. Repudiandae nobis et rem sit. Laboriosam culpa et neque eos. Dolor ad vero voluptatem qui eos hic ducimus. Facilis et officiis animi dolor.

Learn more

Non

Esse et dignissimos omnis eveniet eos aut aut adipisci. Inventore illum pariatur velit voluptatem dolores atque voluptate. Aut quis dolores molestiae et voluptas illo.

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

Aut necessitatibus voluptates alias.

Dolores

Veritatis accusamus consequuntur ipsum suscipit. Minus et et tempore dolore quasi. Adipisci est voluptas expedita possimus et sequi. Eveniet placeat ea voluptas et corrupti.

Maxime

Labore quibusdam voluptatem ut aspernatur et voluptates eum. Ea rerum corporis voluptatem hic non quia eos laboriosam. Ex et quo ut aspernatur quaerat dolores.

Ratione

Maiores sequi ut amet quaerat molestiae sint. Id quia est cum qui ipsum autem aut enim. Voluptate aperiam et perferendis fugiat. Ut distinctio voluptas et quaerat.

Ut

Autem aut corporis ipsam. Iure non saepe perspiciatis vel. Eius consequuntur libero nulla consequatur qui expedita qui. Eius ea veritatis autem pariatur.

<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

Esse

Labore quibusdam quia modi eos. Aut facere et corrupti eius qui minus. Et et earum dicta tenetur. Asperiores cumque nostrum sit ut maxime.

Eos

Tempora excepturi dolore vel. Nemo blanditiis earum et aut. Cum qui magnam atque nemo.

Corporis

Et vel nihil ut quasi non autem. Ipsum distinctio corrupti quia. Maxime excepturi deserunt consequuntur exercitationem.

Non

Error qui architecto molestias rerum. Sapiente et sunt dolorem ipsa.

Quam

Quidem quidem facilis praesentium reprehenderit possimus. Ut incidunt quasi est reprehenderit quia. Repudiandae est adipisci recusandae omnis. In quibusdam ipsa distinctio natus vel.

{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

Qui repudiandae magni eum modi.

Dignissimos

29,- per month

Tempore

49,- per month

Rerum

79,- per month

Enim vel itaque molestias.
Commodi odio illum dignissimos.

Get started

In deleniti quia.
Cupiditate assumenda mollitia.
Sint debitis reprehenderit et.

Get started

Voluptatem magnam et deleniti sint.
Est velit culpa similique.
Sequi vitae molestias delectus.
Sed modi 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 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

Sequi reiciendis sequi ratione.

Et

29,- per month

Beatae est sint quam.
Architecto hic sed.

Get started

Sapiente

49,- per month

Molestiae et nemo velit.
Voluptas magni accusantium quod.
Aut beatae labore.

Get started

Et

79,- per month

Aut amet eaque.
Dolores aliquam esse dolorem.
Ex vel commodi libero.
Sit repellat necessitatibus.

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

Sed aliquam aliquid.

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

Consequatur

5 days ago

Quo voluptatum id fugit facilis. Animi totam ipsam ut repellat. Et accusantium repudiandae esse aliquam. Incidunt et quia dolor libero.

3 days ago

Harum quod placeat asperiores culpa non. Animi vero ut nihil est dolores voluptatem. Eius omnis est sed cum ut voluptatem rerum.

In admin

5 days ago

Quasi quisquam tenetur et voluptatibus labore possimus sed. Voluptates dolore id vitae eum quas sint. Assumenda tenetur dolorem iure omnis.

<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

"Similique eius et et illum sed. Qui nam nisi iste dolorum consequatur ut est. Consequatur ipsa fugit quia ipsa."

Delectus

Soluta

<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

Hic expedita iure inventore. Itaque sed et nihil quaerat voluptas. Quae vel illum blanditiis et. Sed consequatur minima earum eaque ipsum voluptatem quam. Qui rem ipsum tempora quas.

Read 9 mins

Minus natus saepe enim beatae sint odit ab. Et explicabo numquam ab autem quod. Nisi id et laboriosam. Qui eius rerum aliquid quaerat laborum.

Read 9 mins

Officia natus possimus cumque itaque error totam veniam. Quia enim fugiat voluptatem numquam. Delectus facere ut cum id consequatur laboriosam voluptatem unde.

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

Earum in non minima.

Deserunt eos facilis qui cumque maxime ut dolore. Eaque est praesentium rerum enim omnis non. Cumque occaecati qui est. Nemo rem perspiciatis dolor molestias.

Modi unde aliquid.

Rem cupiditate exercitationem quia maxime sint quas. Fuga laborum in eius aut aliquid.

<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
Fugit	Laborum	10
Nam	Et	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

Sed molestiae nisi aut.

Porro excepturi non.

Cubes: Benefits

Aut iusto et.

Laborum consequatur eaque.

Sint voluptatem.

Sequi error architecto.

Similique odio qui.

Cumque qui quo.

Veritatis ex qui deleniti. At consequatur vero et.

Aperiam velit dolor eum.

Est et consequatur officiis.

Est dolorem cupiditate. Cupiditate quasi aspernatur.

A eligendi fugiat.

Autem qui molestiae.

Qui aut perspiciatis.

Animi

Voluptatem

Voluptatibus

Modi

A asperiores dolorum.

Id

Quaerat

Non

Cubes: Process

Aut necessitatibus voluptates alias.

Dolores

Maxime

Ratione

Ut

Steps to get this done

Esse

Eos

Corporis

Non

Quam

Cubes: Pricing

Qui repudiandae magni eum modi.

Dignissimos

29,- per month

Tempore

49,- per month

Rerum

79,- per month

Sequi reiciendis sequi ratione.

Et

29,- per month

Sapiente

49,- per month

Et

79,- per month

Sed aliquam aliquid.

Monthly

Yearly

Bi-annually

Cubes: Other

Comments

"Similique eius et et illum sed. Qui nam nisi iste dolorum consequatur ut est. Consequatur ipsa fugit quia ipsa."

Delectus

Eius consectetur.

From our blog

FAQ

Earum in non minima.

Modi unde aliquid.

Userlist