problems

Bootstrap search results

In this task we want you to build result pages for a site search. In this problem we expect you to use your Bootstrap skills, more specifically the HTML part.

What to do

We’ve created some wireframes for a search UI that we’d like to have implemented in HTML and CSS. The goal is to recreate the wireframes utilizing Bootstrap v4.0 code and best practices.

Result listing

This page shows search results filtered by location. In the top of the page is a navbar followed by a summary of the search terms followed by a tab UI where the user can navigate to other search views. Results are listed in the center-right columns and the user can further refine his filters in the left column. Each result has two call to action buttons - “apply now” and “shortlist”.

The media object is a good way of grouping search results.

Article listing

This page shows matched articles. Each article has a banner image and a summary that should be shown.

Card layout is a great way of grouping cards.

How to start

Guidelines