Score:-1

Where is the look of the Search button in Bootsrap5 defined?

kz flag

I have a Drupal 9.5.1 website with Bootstrap5 2.0.6 as its base theme. The theme by default places a search form by means of a block named "Search" in the "Additional navigation region".

This block "Search" is provided by core, but how its looks seems to be determined by the theme. If I change the theme to Bartik, the same block by default appears in the "Sidebar first" region, but the button to press to search is an icon (I believe it is fa-search from FontAwesome), not the text "Search".

I have enabled Twig debugging, and found that in Bootstrap5 the search form is themed by:

themes/contrib/bootstrap5/templates/form/input.html.twig

In Bartik, the search form is themed by:

core/modules/system/templates/input.html.twig

In my subtheme, I want to do replace the text "Search" on the button with a an icon, just like you get by default if you set Bartik as the default.

But I am unable to locate where the look of of the Search button is defined and how to change it from text to the fa-search icon that is used by Bartik.

So far I've looked for it in the templates that comes with Bootstrap5 and from core (used by Bartik), including the input.html.twig that comes with both. There are subtle differences, but I am not able to pinpoint where the icon used by default by Bartik comes from.

I have tried to swap the one from core into my Bootstrap5 subtheme. This just removes the background colour on the button, but has no other effect.

cn flag
You’ll need to provide some more info to get a definitive answer - how is the search from provided to the site? Is it core search or search API? Is it a block? Is it an exposed filter from a View? There’s probably not a special template that already exists for the search form (it’s just a form), so you’ll need to work out how it came into existence to find out how to alter it. To clarify, Bootstrap is just a theme, it wouldn’t provide that form and its functionality, that comes from a module
Free Radical avatar
kz flag
@Clive It is a block named "Search" that is provided by core, and that is placed in a specific region by the theme. I *believe* its look & feel is determined by the theme, because if you set the **Bartik** theme as default, it still on the page, but with a different look. I have added this information to the question.
id flag
@FreeRadical Have you enabled Twig debugging to determine which theme file renders it?
leymannx avatar
ne flag
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/modules/search/src/Form/SearchBlockForm.php
leymannx avatar
ne flag
In the linked theme there are preprocess hooks and templates for single form elements. That's all. ‍♂️
Free Radical avatar
kz flag
@cilefen I have now enabled twig debugging and found and examined the theme file rendering the Search field, but I am not wiser.
Score:0
br flag

The twig template is, probably:

core/modules/system/templates/input.html.twig

So, I think there are not many options other than something like copy core/modules/system/templates/input.html.twig to your subtheme and edit it to something like:

{% if (attributes.id == 'the-id-of-the-submit') %}
  {%
    set classes = [
      'some-class',
      'some-other-class',
    ]
  %}
  <button{{ attributes.addClass(classes) }}></button>
{% else %}
  <input{{ attributes }} />{{ children }}
{% endif %}
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.