Skip navigation

Layout and Feature Examples for Websites

The following are some examples of Bootstrap and non-Bootstrap features we've applied on NIU websites. If you are interested in using one of these features, contact us at webcommunications@niu.edu to discuss what you have in mind.

Wells

A basic well adds a gray background, rounded border and some padding to your content to set it apart from the rest of your page. We commonly use these for contact blocks and related link boxes. Wells can also be customized using custom CSS.

Buttons

Buttons are better and more accessible alternative to changing the formatting of links in order to make them stand out. There are multiple ways buttons can be used.

Modals

Modals create a pop-up dialog for embedded content, such as images, videos or chunks of text.

Alerts

Like wells, alerts help small chunks of important text to stand out. Default Bootstrap alerts can be green, blue, yellow or red.

Check Boxes

Check boxes make sense for content that contains a list of requirements a visitor may need to complete. If printed, the checked boxes will maintain their formatting on the printed document.

Pagination

Pagination is great for large amounts of content that spans multiple pages. Pagination can be customized by size, location and to use active or disabled states.

Glyphicons

Glyphicons are icons embedded to the CSS via a font. Using them is preferred over using images (JPGs, PNGs, GIFs, etc.) as icons.

Basic panels

Similar to wells, panels make chunks of text stand out by placing them in a box. Unlike the well, however, the background fill is the same as the rest of the page and only the panel heading, if used, will have a gray background.

Expand/collapse panels (Accordion)

The accordion combines the basic panel (and panel heading) with the Bootstrap collapse function so that the panel body expands or collapses when clicked. When the next panel heading is expanded, the previous panel body will collapse.

FAQ with Search

The FAQ with search is a suitable alternative to using Bootstraps collapse component. It uses articles consisting of a question and answer, where the answer is collapsed by default. Chevron glyphicons rotate to indicate which the article answer is expanded. Each article also contains an anchor, allowing users to link to specific questions.

Basic search

This basic search component filters the content so that only content matching the typed search term is displayed. This is useful for large amounts of information.

Dropdown select

The dropdown select component uses anchor points to allow the user to quickly navigate to a specific section of a page or to another page in a folder.

Tab Panes

Tab panes allow the user to toggle through multiple tabs of related content.

Open/Close All

Like the basic collapse component or accordion, the open/close all feature uses hidden content that can be made visible on click. However, this feature adds the ability to open all panels/collapsed section at once.

Thumbnails

Thumbnails are pre-formatted boxes that can be used with captions to organize media and related text in a sematic way.