Four

Four is a live preview of building a blog tutorial using Hugo Static Site Generator that employs Bootstrap 5. Four by Heksagon .btn-dark { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #212529; border-color: #212529; } .btn-dark:hover { color: #fff !important; background-color: #383838 !important; border-color: #1a1e21; } .btn-check:focus + .btn-dark, .btn-dark:focus { color: #fff; background-color: #1c1f23 !important; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-check:active + .btn-dark, .btn-check:checked + .btn-dark, .btn-dark.active, .btn-dark:active, .show .btn-dark.dropdown-toggle { color: #fff; background-color: #1a1e21 !important; border-color: #191c1f; } .btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-dark.disabled, .btn-dark:disabled { color: #fff; background-color: #212529; border-color: #212529; } Code .btn-white { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #212832 !important; background-color: #f6f9ff !important; border-color: #fff; } .btn-white.focus, .btn-white:focus, .btn-white:hover { color: #212832; background-color: #ceefff7a !important; border-color: #ceefff; } .btn-white.focus, .btn-white:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-white.disabled, .btn-white:disabled { color: #212832; background-color: #fff; border-color: #fff; } .btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show .btn-white.dropdown-toggle { color: #212832; background-color: #e6e6e6; border-color: #dfdfdf; } .btn-white:not(:disabled):not(.disabled).active:focus, .btn-white:not(:disabled):not(.disabled):active:focus, .show .btn-white.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-green { color: #fff; background-color: #00ac69; border-color: #00ac69; } .btn-green.focus, .btn-green:focus, .btn-green:hover { color: #fff; background-color: #008652; border-color: #00794a; } Preview .btn-danger { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: #bb2d3b; border-color: #b02a37; } .btn-check:focus + .btn-danger, .btn-danger:focus { color: #fff; background-color: #bb2d3b; border-color: #b02a37; box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-check:active + .btn-danger, .btn-check:checked + .btn-danger, .btn-danger.active, .btn-danger:active, .show .btn-danger.dropdown-toggle { color: #fff; background-color: #b02a37; border-color: #a52834; } .btn-check:active + .btn-danger:focus, .btn-check:checked + .btn-danger:focus, .btn-danger.active:focus, .btn-danger:active:focus, .show .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } Download Information Detail License MIT License Version of Product v1.0 Date of Release 20-6-2021 Bootstrap v5.0.1 Hugo 0.83.1 🔧 Easy-Installation ⚡️ Fast 📱 Responsive 🎨 Customizable Preview Desktop Preview Mobile Preview .btn-dark { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #212529; border-color: #212529; } .btn-dark:hover { color: #fff !important; background-color: #383838 !important; border-color: #1a1e21; } .btn-check:focus + .btn-dark, .btn-dark:focus { color: #fff; background-color: #1c1f23 !important; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-check:active + .btn-dark, .btn-check:checked + .btn-dark, .btn-dark.active, .btn-dark:active, .show .btn-dark.dropdown-toggle { color: #fff; background-color: #1a1e21 !important; border-color: #191c1f; } .btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-dark.disabled, .btn-dark:disabled { color: #fff; background-color: #212529; border-color: #212529; } Code .btn-white { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #212832 !important; background-color: #f6f9ff !important; border-color: #fff; } .btn-white.focus, .btn-white:focus, .btn-white:hover { color: #212832; background-color: #ceefff7a !important; border-color: #ceefff; } .btn-white.focus, .btn-white:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-white.disabled, .btn-white:disabled { color: #212832; background-color: #fff; border-color: #fff; } .btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show .btn-white.dropdown-toggle { color: #212832; background-color: #e6e6e6; border-color: #dfdfdf; } .btn-white:not(:disabled):not(.disabled).active:focus, .btn-white:not(:disabled):not(.disabled):active:focus, .show .btn-white.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-green { color: #fff; background-color: #00ac69; border-color: #00ac69; } .btn-green.focus, .btn-green:focus, .btn-green:hover { color: #fff; background-color: #008652; border-color: #00794a; } Preview .btn-danger { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: #bb2d3b; border-color: #b02a37; } .btn-check:focus + .btn-danger, .btn-danger:focus { color: #fff; background-color: #bb2d3b; border-color: #b02a37; box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-check:active + .btn-danger, .btn-check:checked + .btn-danger, .btn-danger.active, .btn-danger:active, .show .btn-danger.dropdown-toggle { color: #fff; background-color: #b02a37; border-color: #a52834; } .btn-check:active + .btn-danger:focus, .btn-check:checked + .btn-danger:focus, .btn-danger.active:focus, .btn-danger:active:focus, .show .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } Download Support If you like this template, please give a star at its GitHub Page, and consider supporting me at: Import an existing project" Your support is greatly appreciated 😊 Installation 📥 This repository is a live demo. To use the theme in your Hugo site, download the zip folder from the link in GitHub or direct dowload by clicking here. Copy the myblog/themes/four folder into your Hugo themes folder: .(Your Hugo Project) ├── archetypes ├── content ├── data ├── layouts ├── resources ├── static ├── themes │ └── four └── config.toml Check out the full tutorial here. If you encounter any issues or have any questions with the template, please contact us directly and let us know about it. Custom Installation If you’d like to have a custom installation and further customization, feel free to contact us to request for a quotation. .btn-dark { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #212529; border-color: #212529; } .btn-dark:hover { color: #fff !important; background-color: #383838 !important; border-color: #1a1e21; } .btn-check:focus + .btn-dark, .btn-dark:focus { color: #fff; background-color: #1c1f23 !important; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-check:active + .btn-dark, .btn-check:checked + .btn-dark, .btn-dark.active, .btn-dark:active, .show .btn-dark.dropdown-toggle { color: #fff; background-color: #1a1e21 !important; border-color: #191c1f; } .btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-dark.disabled, .btn-dark:disabled { color: #fff; background-color: #212529; border-color: #212529; } Code .btn-white { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #212832 !important; background-color: #f6f9ff !important; border-color: #fff; } .btn-white.focus, .btn-white:focus, .btn-white:hover { color: #212832; background-color: #ceefff7a !important; border-color: #ceefff; } .btn-white.focus, .btn-white:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-white.disabled, .btn-white:disabled { color: #212832; background-color: #fff; border-color: #fff; } .btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show .btn-white.dropdown-toggle { color: #212832; background-color: #e6e6e6; border-color: #dfdfdf; } .btn-white:not(:disabled):not(.disabled).active:focus, .btn-white:not(:disabled):not(.disabled):active:focus, .show .btn-white.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-green { color: #fff; background-color: #00ac69; border-color: #00ac69; } .btn-green.focus, .btn-green:focus, .btn-green:hover { color: #fff; background-color: #008652; border-color: #00794a; } Preview .btn-danger { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: #bb2d3b; border-color: #b02a37; } .btn-check:focus + .btn-danger, .btn-danger:focus { color: #fff; background-color: #bb2d3b; border-color: #b02a37; box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-check:active + .btn-danger, .btn-check:checked + .btn-danger, .btn-danger.active, .btn-danger:active, .show .btn-danger.dropdown-toggle { color: #fff; background-color: #b02a37; border-color: #a52834; } .btn-check:active + .btn-danger:focus, .btn-check:checked + .btn-danger:focus, .btn-danger.active:focus, .btn-danger:active:focus, .show .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } Download

Information	Detail
License	MIT License
Version of Product	v1.0
Date of Release	20-6-2021
Bootstrap	v5.0.1
Hugo	0.83.1

Four

Four by Heksagon#

Preview#

Support#

Installation 📥#

Custom Installation#

Four `by Heksagon`

Preview

Support

Installation 📥

Custom Installation