Bootstrap Theme

Bootstrap theme using the Cyborg colour schemeTogether with the Modern theme, this Bootstrap theme is the most recent addition to dotCommunity, and we recommend it for all sites that want to be accessible from mobiles and iPads as well as desktops.

In the example on the right, the theme is using the Cyborg colour scheme, which is one of many different colour schemes available.

Note that the theme requires a relatively recent browser. If you particularly need to support old browsers then we recommend you use the Playtime or DarkTones themes instead. Bootstrap and Modern are tested in recent versions of Internet Explorer (version 8 onwards), Firefox, Chrome, and Safari, as well as on Android mobiles and tablets, iPhone and iPad.

Overview

The Bootstrap theme has a responsive layout that changes depending on the size of the screen it is being viewed on. For example, when using this theme the Photo Album will show three columns of pictures on a wide screen, two columns on a medium screen, and one column on narrow screens. When using a layout with several columns, on narrower screens the columns are shown stacked on top of each other rather than side by side.

The theme has lots of configuration options allowing you to customise the layout to suit your tastes.

The theme is built on the Bootstrap CSS framework, so you can use any CSS styles defined by Bootstrap in your pages. It uses colour schemes provided by Bootswatch. Have a look on the Bootswatch site to see all the different colour schemes available. You can select the colour scheme you want to use from the Theme Options. Advanced users can override the bootstrap.css used by the theme to allow more control of the look and feel of the site.

This theme supports the Slider includelet, which you can place anywhere on your site to create a scrolling carousel of images and text.

Description

The theme has a top navbar always present, which contains the search box, login/logout/register links and, if your site's Membership Policy allows members, a link for visitors to join your site.

Immediately under this is a banner area containing your site's name and logo. You can set a background image in the banner which will resize itself appropriately based on the screen size. If you don't upload a logo then a Voice "trumpeting man" will be superimposed on the left side of the banner area. You can also choose whether to have the current page title in the banner, or to have it below the breadcrumb in the page content.

You can configure the theme to have a horizontal navbar for your main menu items, which will appear below the banner and have popup menus for sub-items. Or you can configure it to have a vertical menu in the left column. Note that on small screens the theme always uses a collapsible menu with a "hamburger" button to expand the menu options.

Options

The Bootstrap theme has lots of configuration options which are accessed by clicking the Options button next to the theme on the Look & Feel page.

Colour Scheme - Selects the overall scheme for the site. Default is the standard colour scheme used by Bootstrap. Default 3D adds graduated fills to buttons and navbars rather than having flat colours. The other colour schemes are provided by Bootswatch, and you can see a preview of them on that site.

Navigation Style - You can choose from a navbar in one of two colours (which depend on the colour scheme in use). Tabs will show a horizontal tabset of links with popdown menus for sub links. Pills shows a horizontal bar with buttons in it, Pills in a Well uses smaller buttons and wraps them all in a darker coloured box. These horizontal styles work best when you don't have too many links in your navigation. If you want lots of links then you will be better off with one of the vertical menus - Left Column List or Left Column List in a Well.

Page Title Position - You can choose to have the page title in the banner (below your site name) or in the content (more inkeeping with other themes).

Show Social Sharing Buttons - When enabled, a toolbar will appear on the right of the page to allow your visitors to easily share the page on social media. On mobile devices this appears at the bottom instead of the side.

Banner Image - Select an image from your Assets Library as the background for the banner area. If none is selected then a solid block of colour is used. Any shape/size of image is OK here, as the system will resize it to make it fit.

Banner Image Positioning - Stretch to Fit is usually the best here as it'll resize your image dynamically to fit the space in the best way. Though you might prefer to Centre or Tile the image.

Alter Banner Image - This will lighten or darken the image if you wish, to increase contrast between it and the text overlaid upon it.

Fonts - If desired, you can override the font used for headers and body text.

Use Custom Bootstrap - You can create your own bootstrap.css (e.g., with a different colour scheme) using one of several tools on the web. For example Lavish Bootstrap, PaintStrap, and the main Bootstrap site. You can then upload this into your Assets library and use it in place of the theme's standard bootstrap.css.

Extra CSS File - Advanced users can add a CSS file of extra tweaks for the layout of their site. Any CSS file selected is added after all the standard theme CSS files allowing you to override the layout of any part of the site. You can upload your custom CSS file into the Assets Library then select it from here.

Extra Footer HTML - You can use this to add extra text or links into the page footer. Or use it for embeddable scripts that you want to appear on every page, such as that for Google Analytics.

Layouts

The theme works well with a standard single column layout, or you can get more adventurous by choosing to have more columns. You can select the layout individually for each page, or if you set it for the site's homepage it will be used for all pages of your site unless you specify otherwise. The available layouts are:

One column - a single large content area

Two column left - a second column is shown on the left side of the page. If you're in a subsection of a site which has more content pages then this left column is also used to show a secondary navigation menu.

Two column right - a second column is shown on the right of the page.

Three column - both left and right columns are visible as well as a wider central column.

Five area - as well as the three columns also makes available an area above and below these columns which you can use to place an includelet which fills the full page width.

Regardless of which layout you choose, if you leave an area empty then it will not be shown on the page. Thus you are safe to select Five area and then pick and choose on a per-page basis which columns have content.