Style Kirby list with bootstrap

Kirby 4
1

Getting confused how best to handle using Bootstrap with Kirby. if I create a list in the panel and add it to the page template as shown in docs here
I get the output with ul and li tags included but I want to be able to add bootstrap classes to these such as:

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
</ul>

I have seen options suggested such as wrapping the list in a div and styling that but what if I want to achieve something more complicated such as:

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>

Should I be changing the way I work with bootstrap or should I be looking for a different way to add lists to output the raw content without html tags? I am migrating to Kirby from Perch so the different way of doing/thinking is confusing me. Any suggestions much appreciated.

2

Bootstrap has the same limitations as Tailwind when it comes to using output generating fields. Maybe there’s something similar to the Tailwind typography plugin for Bootstrap: Kirby meets Tailwind CSS | Kirby CMS

Can’t tell, because not using Bootstraps myself.

3

How flexible should the design of the lists be? Should each individual <li>element be customizable, or should all <li>elements within a <ul> be designed uniformly, as in the example below? The latter can be implemented with little effort and an adjustment to the core module.

<ul class="list-group">
	<li class="list-group-item d-flex justify-content-between align-items-center">
		A list item with badge <span class="badge text-bg-primary rounded-pill">7</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		A list item with badge <span class="badge text-bg-primary rounded-pill">14</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		A list item with badge <span class="badge text-bg-primary rounded-pill">21</span>
	</li>
</ul>

However, if your requirements are more complex, as in this example module, a different concept is needed to achieve the desired solution. For example, you could use a structure field instead of a list field. This would give you the option of setting additional options for each <li>element and customizing them individually. There will be different approaches to a solution, but these will depend on your requirements.

<ul class="list-group">
	<li class="list-group-item d-flex justify-content-between align-items-center">
		A list item with badge <span class="badge text-bg-primary rounded-pill">14</span>
	</li>
	<li class="list-group-item">
		A list item without badge
	</li>
	<li class="list-group-item text-primary">
		<i class="fa-solid fa-arrow-right"></i>
		A list item with font aweseome icon
	</li>
</ul>
4

In absence of such a plugin for Bootstrap, you can always do string replacements:

str_replace('<li>', '<li class="list-group-item d-flex justify-content-between align-items-center">', $page->myListField()->value());
1 Like
5

I don’t have any particular requirement but would be happy with being able to achieve the first example where allli elements are uniform.

I have been going through the videos and documents trying to build a test site that incorporates all the features that I have previously used in sites created with Bootstrap and Perch Runway. I was able to create a responsive nav fine by pulling out the URL and page Title separately and adding the Bootstrap classes.

Found the same for Images and various other things but then ran into the issue with lists and it has got me wondering if I should even continue trying to use Bootstrap, or if switching to a different CSS framework more suited to Kirby would be better? I create relatively small cheap websites so I need something quick and easy to give me responsive layout, navigation, forms, buttons, etc. Having used Perch and Bootstrap for many years I have plenty of reusable chunks I have been sticking together as needed. Having to change to Kirby and start this again so not against switching my styling as well.

6

That works great thanks. I have included str_replace for <ul> as well:

<?= str_replace(array('<ul>', '<li>'), array('<ul class="list-group">', '<li class="list-group-item">'), $page->ingredients()->value()); ?>