blob: 6ac9a6718b89b58dcea92826e032813bb2b8bc62 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
---
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>
|
