Angular Instant Search customize style css or use Bootstrap

Hi, I’m new to Algolia, I’ve implemented my first application with Angular 6 using Angular Instant Search and I’m pleasantly surprised by the search capability.

But now I’m stuck trying to modify CSS styles and I have not been able to change some things, for example I’m using:

components.html

<ais-highlight attribute="titulo" [hit]="aviso" class="titulo"></ais-highlight>

style.scss

@import "node_modules/angular-instantsearch/bundles/instantsearch.min.css";
@import "node_modules/angular-instantsearch/bundles/instantsearch-theme-algolia.min.css";

.titulo { line-height: 10px; }

But I do not get any results. What is the correct way to do it? If in any case you can not, how can I use the Bootstrap styles for example to implement my own inputs, selects, etc.

Hi @pacozevallos,

You cannot provide a class directly to the component, but you can customise the class provided by the library. They are not listed in the documentation (I’ve opened an issue about that), but you can still inspect the classes available in the DOM. Here the classes available for the Highlight component:

  • ais-Highlight: the root span of the widget
  • ais-Highlight-highlighted: the highlighted text

In case you want to have a full control on the styling but also on the DOM output (integration of an UI library for example). You can completely customise the widget, you can find more information about that in our documentation.