Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line.
<div class="container text-center">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
You can also apply this break at specific breakpoints with our responsive display utilities.
<div class="container text-center">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Lightbi is a modern, elegant Hugo theme focused on readability, performance, and content-first design. It offers a clean, minimal experience for personal blogs, digital gardens, and long form writing, with two homepage modes, Profile for personal introductions and Blog for content driven sites, plus responsive layouts and light/dark mode support.
Built with a mobile-first approach for seamless viewing on any device.
Card-Based Theme:
Flexible image placement options:
Image at the top of the card
Image in the middle of the card
Image at the bottom of the card
No image option
Image Gallery You can add multiple images to your post and display them beautifully as a gallery.
Menu Location Indicator: Clear visual cues for active menu items.
Multilingual Support: Includes a language selector for easy switching between languages.
Taxonomies: Organize content effectively with customizable tags and categories.
Search Functionality: Integrated search option for quick content access.
Light/Dark Theme:
Automatic theme switching based on browser preferences.
Includes a manual theme-switch button for user control.
Google Analytics Integration: Track user activity with built-in support for Google Analytics.
SEO-Friendly: Optimized for search engines to improve visibility.
Commit SHA in Footer: Display the current commit SHA for version tracking.
Self-Hosted Assets: Compliant with GDPR / EU-DSGVO regulations by hosting all assets locally.
Bootstrap Icons: Beautiful, lightweight icons integrated with Bootstrap Icons.
Page
Other Posts suggestion below a post.
Social-Media Share buttons on posts.
Syntax highlighting.
Cover image for each post (with Responsive image support).
Configurations
Select theme mode
To configure the theme for either profile or blog mode, add the following under the params section in your hugo.toml file:
Set homepageLayout = "profile" for profile mode
Set homepageLayout = "blog" for blog mode
Card based theme.
To customize the image placement within a card, the Lightbi theme offers four flexible options.
To configure this, use the previewCardImagePlacement parameter in the hugo.toml file. Set it as follows:
For the image at the top: previewCardImagePlacement = "top"
For the image in the middle: previewCardImagePlacement = "middle"
For the image at the bottom: previewCardImagePlacement = "bottom"
For no image: previewCardImagePlacement = "none"
For more details about parameters you can check here.
