---
layout: simple
title: Examples
description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
redirect_from: "/examples/"
---

{% for entry in site.data.examples %}
  <h2>{{ entry.category | capitalize }}</h2>
  <p>{{ entry.description }}</p>
  {% for example in entry.examples %}
    {% if forloop.first %}<div class="row">{% endif %}
      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
        <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/{{ example.name | slugify }}/">
          <img class="img-thumbnail mb-3" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png,
                                                  {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}@2x.png 2x"
                                          src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png"
                                          alt="{{ example.name }} screenshot" width="480" height="300" loading="lazy">
          <h5 class="mb-1">{{ example.name }}</h5>
        </a>
        <p class="text-muted">{{ example.description }}</p>
      </div>
    {% if forloop.last %}</div>{% endif %}
  {% endfor %}
{% endfor %}

<hr class="my-5">

<div class="container">
  <div class="text-center">
    <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
      {% include icons/droplet-fill.svg width="32" height="32" %}
    </div>
    <h2>Go further with Bootstrap Themes</h2>
    <p class="col-md-10 mx-auto lead font-weight-normal">
      Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ site.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
    </p>
    <a href="{{ site.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
  </div>
  <img class="d-block img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png,
                                              {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
                                              src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png"
                                              alt="Bootstrap Themes" width="1151" height="320" loading="lazy">
</div>