Browser docs

Bootstrap Hero Examples

Hugo Modules Authors June 21, 2023 2 min read

Quickly design and customize responsive, complex and beautiful Hero components with the Bootstrap shortcodes and the Hugo built-in shortcodes and the extended shortcodes.

On this page

This article offers some hero examples that built with the Bootstrap shortcodes and the Hugo built-in shortcodes and the extended shortcodes.

Centered Hero

Logo

Bootstrap Hero Examples

Quickly design and customize responsive, complex and beautiful Hero components with the Bootstrap shortcodes and the Hugo built-in shortcodes and the extended shortcodes.

Primary button Secondary button
 1{{< bs/container size=fluid class="text-center mb-5 px-4 py-5" >}}
 2
 3  {{% bs/col size=6 offset=3 class="text-center" %}}
 4  ![Logo](/images/logo.png?height=120px)
 5  {{% /bs/col %}}
 6
 7  {{< bs/display level=4 class="fw-bold" >}}
 8    {{< param title >}}
 9  {{< /bs/display >}}
10
11  {{< bs/lead class="mb-4" >}}
12    {{< param description >}}
13  {{< /bs/lead >}}
14
15  {{< html/div class="d-grid gap-3 d-sm-flex justify-content-sm-center flex-wrap" >}}
16    {{< bs/btn-link url="#" size=lg style=primary class="p-3" >}}Primary button{{< /bs/btn-link >}}
17    {{< bs/btn-link url="#" size=lg style=secondary class="p-3" >}}Secondary button{{< /bs/btn-link >}}
18  {{< /html/div >}}
19
20{{< /bs/container >}}

Centered Hero with Custom Background Color

For example, text-bg-dark represents the dark background.

Logo

Bootstrap Hero Examples

Quickly design and customize responsive, complex and beautiful Hero components with the Bootstrap shortcodes and the Hugo built-in shortcodes and the extended shortcodes.

Primary button Secondary button
 1{{< bs/container size=fluid class="text-center mb-5 px-4 py-5 text-bg-dark" >}}
 2
 3  {{% bs/col size=6 offset=3 class="text-center" %}}
 4  ![Logo](/images/logo.png?height=120px)
 5  {{% /bs/col %}}
 6
 7  {{< bs/display level=4 class="fw-bold" >}}
 8    {{< param title >}}
 9  {{< /bs/display >}}
10
11  {{< bs/lead class="mb-4" >}}
12    {{< param description >}}
13  {{< /bs/lead >}}
14
15  {{< html/div class="d-grid gap-3 d-sm-flex justify-content-sm-center flex-wrap" >}}
16    {{< bs/btn-link url="#" size=lg style=success class="p-3" >}}Primary button{{< /bs/btn-link >}}
17    {{< bs/btn-link url="#" size=lg style=light class="p-3" >}}Secondary button{{< /bs/btn-link >}}
18  {{< /html/div >}}
19
20{{< /bs/container >}}

Responsive Left-aligned Hero with Image

Bootstrap Hero Examples

Quickly design and customize responsive, complex and beautiful Hero components with the Bootstrap shortcodes and the Hugo built-in shortcodes and the extended shortcodes.

Primary button Secondary button

Example

 1{{< bs/container fluid "mb-5 px-4 py-5" >}}
 2
 3  {{< bs/row class="justify-content-center align-items-center" >}}
 4
 5    {{< bs/col size="12 lg:6" class="mb-3" >}}
 6      {{< bs/display level=4 class="fw-bold text-center" >}}{{< param title >}}{{< /bs/display >}}
 7      {{< bs/lead class="mb-4" >}}{{< param description >}}{{< /bs/lead >}}
 8      {{< html/div class="d-grid gap-3 d-sm-flex justify-content-sm-center flex-wrap" >}}
 9        {{< bs/btn-link url="#" size=lg class="p-3" >}}Primary button{{< /bs/btn-link >}}
10        {{< bs/btn-link url="#" size=lg style=secondary class="p-3" >}}Secondary button{{< /bs/btn-link >}}
11      {{< /html/div >}}
12    {{< /bs/col >}}
13
14  {{% bs/col size="lg:6" %}}
15  ![Example](/images/example.jpg)
16  {{% /bs/col %}}
17
18  {{< /bs/row >}}
19
20{{< /bs/container >}}