Wingman Bootstrap Theme

Components

Help

Accordion

Formats default Bootstrap 4 Collapse as an accordion

Pane 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.

Pane 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.

Pane 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.

Markup

<div class="accordion" id="accordion-1" data-children=".accordion-item">
  <div class="accordion-item">
    <a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-1" aria-expanded="true" aria-controls="accordion-1">
      <h5>Pane 1</h5>
      <i class="h5 icon-chevron-small-right"></i>
    </a>
    <div id="accordion-panel-1" class="collapse show" role="tabpanel">
      <p>
        Pane 1 content
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-2" aria-expanded="false" aria-controls="accordion-1">
      <h5>Pane 2</h5>
      <i class="h5 icon-chevron-small-right"></i>
    </a>
    <div id="accordion-panel-2" class="collapse" role="tabpanel">
      <p>
        Pane 2 Content
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-3" aria-expanded="false" aria-controls="accordion-1">
      <h5>Pane 3</h5>
      <i class="h5 icon-chevron-small-right"></i>
    </a>
    <div id="accordion-panel-3" class="collapse" role="tabpanel">
      <p>
        Pane 3 Content
      </p>
    </div>
  </div>
</div>

Avatar
A set of CSS classes to easily format avatar images.

.avatar-xlg

.avatar-lg

.avatar

.avatar-square

.avatar-sm

.avatar-xs

Class Reference

.avatar

Apply to <img> to format as a round avatar

.avatar-square

Apply to .avatar to format avatar with squared edges instead of rounded

.avatar-xs

Apply to .avatar to decrease default size considerably

.avatar-sm

Apply to .avatar to decrease default size

.avatar-lg

Apply to .avatar to increase default size

.avatar-xlg

Apply to .avatar to increase default size considerably
Background Images
A CSS class that turns any <img> into a background for the parent element

This element has an img.bg-image
Class Reference

.bg-image

Apply to <img> to set image as the background for the parent element

Caveats
- Ensure the parent element has the position:relative; property set, as the Background Images feature uses absolute positioning.
Feature List
A CSS and HTML component for formatting grid lists
- Feature List Item
- Feature List Item
- Feature List Item
- Feature List Item
- Feature List Item
- Feature List Item
Class Reference

.feature-list

Apply to <ul> to format child <li> items with space below

.feature-list-sm

Apply to .feature-list to decrease default space below each <li> item

.feature-list-lg

Apply to .feature-list to increase default space below each <li> item

.feature-list-xlg

Apply to .feature-list to increase default space below each <li> item considerably

Flickity Plugin

Slider jQuery plugin with robust options, optimised for touch devices View the Flickity Plugin site

Slide item

Markup

<div class="main-carousel" data-flickity='{ "cellAlign": "center", "contain": true, "prevNextButtons": true, "pageDots":true, "wrapAround":true, "autoPlay":5000, "imagesLoaded":true }'>
  <div class="carousel-cell">
    ...
  </div>
  <div class="carousel-cell">
    ...
  </div>
  <div class="carousel-cell">
    ...
  </div>
</div>

Icons Entypo
A suite of 411 carefully crafted premium pictograms by Daniel Bruce View the Icons Entypo Plugin site

Class Reference

.icon-*

Apply to <i> element with relevant class name

Please see here for a full class name reference to all available icons
Icons Socicon
A suite of popular social media service icons View the Icons Socicon Plugin site

Class Reference

.socicon-*

Apply to <i> element with relevant class name

Please see here for a full class name reference to all available icons

jQuery Smart Wizard 4 Plugin

Wizard jQuery plugin for creating stepped interfaces. Useful for onboarding, signups etc. View the jQuery Smart Wizard 4 Plugin site

Step One Content

Step Two Content

Step Three Content

Step Four Content

Markup

<div class="wizard">
  <ul class="nav nav-tabs text-center row mb-5">
    <li class="col-3"><a href="#first" class="step-circle step-circle-sm">1</a></li>
    <li class="col-3"><a href="#second" class="step-circle step-circle-sm">2</a></li>
    <li class="col-3"><a href="#third" class="step-circle step-circle-sm">3</a></li>
    <li class="col-3"><a href="#fourth" class="step-circle step-circle-sm">4</a></li>
  </ul><!--end of col-->
  <div class="tab-content">
    <div id="first">
      ...
    </div>
    <div id="second">
      ...
    </div>
    <div id="third">
      ...
    </div>
    <div id="fourth">
      ...
    </div>
  </div>
</div>

Class Reference

.wizard: A wrapper element to contain .nav and .tab-content
.sw-btn-next: Apply to and element inside .tab-content to progress the wizard forward
.sw-btn-prev: Apply to and element inside .tab-content to progress the wizard backward

Logo
A set of CSS classes to easily format logo images.

.logo-sm

.logo

.logo-lg

Class Reference

.logo

Apply to <img> to restrict size of image to the theme's global line height

.logo-sm

Apply to .logo to decrease default logo size

.logo-lg

Apply to .logo to increase default logo size
Steps
A CSS component for creating rounded 'step' elements

1
.step-circle

2
.step-circle-sm

3
.step-circle.bg-primary

Class Reference

.step-circle

Apply to an element to format it as circular with centered text

.step-circle-sm

Apply to .step-circle to decrease the default size

.bg-primary,danger,warning,success,info

Apply to .step-circle to change background color
Scroll Monitor Plugin
A simple and fast Javascript API to monitor elements as you scroll View the Scroll Monitor Plugin site

Class Reference

.modal-header-borderless

Apply to .modal-header to remove border and padding from bottom
Utilities - Height
A set of CSS classes to set an element's height as a proportion of the viewport

This element has a minimum height of 10vh

.height-10

This element has a minimum height of 20vh

.height-20

Class Reference

.height-10,20,30,40,50,60,70,80,90,100

Apply to an element to set it's min-height value to in vh (viewport height) units.
Utilities - Opacity
A set of CSS classes to set an element's opacity

.opacity-0

.opacity-10

.opacity-20

.opacity-30

.opacity-40

.opacity-50

.opacity-60

.opacity-70

.opacity-80

.opacity-90

.opacity-100

Class Reference

.opacity-0,10,20,30,40,50,60,70,80,90,100

Apply to an element to set it's opacity value to in the corresponding value.
Utilities - Text Color
A set of CSS classes to set an element's text color

blue .text-blue

indigo .text-indigo

purple .text-purple

pink .text-pink

red .text-red

orange .text-orange

yellow .text-yellow

green .text-green

teal .text-teal

cyan .text-cyan

Class Reference

.text-blue,indigo,purple,pink,red,orange,yellow,green,teal,cyan

Apply to an element to set it's color property to the corresponding value. The color values correspond to the default colors found in the variable.scss file
Utilities - Other
Other utility classes used in Wingman

This card has the .shadow class

Class Reference

.shadow

Apply to any element to add a box shadow effect

.overflow-hidden

Apply to any element to set overflow: hidden;

.overflow-visible

Apply to any element to set overflow: visible;

Video Cover

A CSS and Javascript component to play videos with aesthetically pleasing image posters

Markup

<div class="video-cover">
  <img alt="Image" src="..." class="bg-image" />
  <div class="video-play-icon">
    <i class="icon-controller-play"></i>
  </div>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" data-src="..." allowfullscreen></iframe>
  </div>
</div>

Zoom Plugin
A simple, vanilla JS library for image zooming; as seen on Medium. View the Zoom Plugin site

Class Reference

[data-action="zoom"]

Apply to an <img> to enable the Zoom lightbox feature

Wingman Components

Pages

Components

Help

Accordion

Pane 1

Pane 2

Pane 3

Markup

Avatar

Class Reference

Background Images

Class Reference

Caveats

Feature List

Class Reference

Flickity Plugin

Markup

Icons Entypo

Class Reference

Icons Socicon

Class Reference

jQuery Smart Wizard 4 Plugin

Markup

Class Reference

Logo

Class Reference

Steps

Class Reference

Scroll Monitor Plugin

Class Reference

Utilities - Height

Class Reference

Utilities - Opacity

Class Reference

Utilities - Text Color

Class Reference

Utilities - Other

Class Reference

Video Cover

Markup

Zoom Plugin

Class Reference

Start building feature-rich websites