Browse Hugo Bootstrap Module

Bootstrap Hero Examples

HugoMods 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.

Donate

Become a backer or sponsor to support our work.

AFDIAN GitHub Sponsors PayPal
On this page
Sponsors

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 >}}