Components

Get started with FlexPack's components and options for laying out your own project. All the components are based on Bootstrap 4 standard components that can be used and stylized for FlexPack template.

Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Avatar

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Use .rounded-circle class to create round avatar.

Blockquote

The blockquote component has been extended with a footer image to add an author's photo.

Breadcrumb

Component that indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Can be used with other elements, such as images, text, maps, etc.

Buttons

Use FlexPack's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

FlexPack has two styles of the buttons:

• .btn-default - class to make the button with gray border and transparent background.
• .btn-primary - class to make the button with primary colored borders and colored background when hovered.

For more buttons styles and sizes please see official Bootstrap documentation.

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. The following cards styles are available:

• .card-blog - class to add card for blog posts.
• .card-video - class to add card for video presentation.
• .card-price - class to add card for different price plans.
• .card-testimonial - class to add card for testimonials (works with JS carousel plugin).
• .card-product - class to add card for product or project presentation (works with JS carousel plugin). Use .dark-hover class for dark overlay background.

Card: Blog

Card: Price

For more cards styles and options you can read in official Bootstrap documentation.

Carousel

A CSS/JS component for creating draggable sliders. Based on Flickity plugin and works equally good with image and text content.

Countdown item

A CSS/JS component for creating cards with data indicators and description. Based on Waypoints and CountTo plugins. The following options are available:

• data-from="" - starting number.
• data-to="" - finish number.
• data-speed="" - speed of number counting.
• data-refresh-interval="" - specifies the interval between the number changes.

Data

Component for creating short information items with icon, title and text description.

FAQ item

Component for creating accordion items.

Icons

FlexPack template use Font Awesome icon pack and Feather Icons. Check official documentation for more information.

To create icon with Fontawesome pack insert tag i with specific class, e.g.

To create icon with Feather icons pack insert tag i with specific data attribute and add sizes and other styles for it (width, height, color etc), e.g.

Links

Different styles of link design for better presentation of content are available.

• .link-img-overlay - adds overlay background and icon under the image.
• .link-underline - adds underline to the link on hover.
• link-social.link-social-circle - works perfect for circle icons.

Link underline

Lists

A CSS component for creating different stylized lists. The component accepts the following options:

.list-col-2 - adds the list with two columns and transforms to one column list on mobile devices.

• Live time controlling
• Cloud data saving
• Full synchronization
• Live time controlling
• Cloud data saving
• Full synchronization

.list-footer - adds the list with the links and stylized with colored indicators when hovering.

• About App
• Features
• Technology
• Help and Support

.list-fixed - adds the list with fixed positon relative to the parent element. Used to add icons on the main screen in the lower right corner.

Map

A JS/CSS component for including a Google map iframe into your page. The component accepts the following options:

• data-markers - an array of lat/lng pairs for each location.
• data-zoom - initial map zooming level. Ignore if you want to allow the map scale automatically to show all markers specified in the data-marker attribute.
• data-icon - path to your map marker icon.

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. The modal component has been extended to support video content. The local video file will start ones the modal is opened, and pause ones it is closed. More info how Modal works on Bootstrap website.

Partners

A CSS component for creating styled links containing brand images or icons.

Progress bar

Example for using Bootstrap custom progress bar featuring support for stacked bars, animated backgrounds, and text labels. More info about progress bar styles on Bootstrap website.

Section

A CSS component for creating sections to visually separate your website content. The component accepts the following options:

• .section-top - adds an additonal padding to the top of the section for Flexper content alignment in combination with the fixed navbar. Use this class for the first section on a page only if you don't have the breadcrumb included.
• .section-full - makes the section height equal to that of the viewport (fullscreen).

Service item

A CSS component for creating separated cards with your content. You can use this component as an independent or add it inside the Bootstrap .container and .row and add .service-row class to use borders. See the example below.

Sidebar menu

A CSS/JS component made via Bootstrap nav component for creating sidebar menu with navigation links, social icons, text, images etc. See this page with the example of sidebar menu.

Steps

A CSS component that perfect for creating sections about features or your application work's process. Also it can used for any other description of the work of your project.

Subtitle

A CSS component for creating subtitles. Usually used with headings of the sections.

# Another subtitle

Table

Example for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap. More info on Bootstrap website.

Dates	Position	Company	Details
2012-2014	Junior Developer	envato.com	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid natus, officia quaerat ratione nobis sapient.
2014-2016	Senior Developer	adobe.com	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid natus, officia quaerat ratione nobis sapient.
2016-2018	Android Developer	google.com	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid natus, officia quaerat ratione nobis sapient.
2018-Now	Freelancer	flexpack.app	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid natus, officia quaerat ratione nobis sapient.

Team card

A CSS component for creating team card.

Jessica Doe

Designer

Testimonial

A CSS/JS component for creating testimonial sliders. Testimonial slider build via Flickity plugin and works in combination with the testimonial-card component.

Utilities

FlexPack template comes with multiple utilities and helper classes for creating visual interest and fine-graining the look of your pages.

Backgrounds

Easily stack background utilities to get exactly what you need.

• .bg-video - sets a background video that covers the whole area. Add loop to the video tag to loop the video. Make sure the video is muted, otherwise it may not autoplay on some of the mobile devices.

  <div class="bg-video">
  <video src="assets/video/1.mp4" class="bg-video-media" autoplay muted playsinline loop></video>
</div>

• .bg-slider - stretches a slider to fit the whole area.

  <!-- Background slider -->
<div class="bg-slider">
  <!-- slider item -->
  <div class="bg-slider-item">
    ...
  </div> <!-- .bg-slider-item -->
</div> <!-- .bg-slider -->


• .bg-cover - sets a background image that covers the whole area.

  <section class="section">
  <!-- background image -->
  <div class="bg-cover">
    <img src="assets/img/home_bg.svg"></img>
  </div>
</section> <!-- .section -->

• .bg-overlay - adds a dark background overlay. Typically required to make the text more readable against.

  <div class="section">
  <div class="bg-overlay"></div>
</div>

• .bg-overlay-light - adds a light background overlay. Typically required to make the dark text more readable.

  <div class="section">
  <div class="bg-overlay-light"></div>
</div>

• .bg-primary-gradient - sets a background color gradient for the section with colours you like.

  <section class="section section_gradient bg-primary-gradient">
  ...
</section> <!-- .section_gradient -->