Features

This template has everything that you need to build a learning management system with Moodle. Check out some of features that we have in this template. To know more about features of Alluri, continue reading our documentation and check our available components.

Installation

You can install the theme in two ways: through Moodle, or via FTP. The theme_alluri.zip file is the Installable Moodle Theme and what you need to use to get the theme installed. Please see the following sections for each method. But first, you need to download the Alluri files from your LMSACE account. Navigate to your downloads page on LMSACE and find Alluri theme with version. Click the download button to get Alluri installable theme file. See below.

For Moodle version 3.2.X please download Alluri version 1.3

Install Theme via FTP client

1.   Log into your server installation via FTP. You can use software such as Filezilla for this.
2.   Unzip the theme_alluri.zip file and ONLY use the extracted Alluri theme folder.
3.   Upload the extracted Alluri folder to the to the /theme folder of your Moodle installation.
4.   Now login to your Moodle site as an admin and go to Site administration > Notifications, you will see a Notification for theme to be installed. Click "Upgrade Moodle Database now" button to continue for the installation procedure.

Install Theme via Moodle

1.   Login to your Moodle site as an admin and go to Site administration → Plugins → Install plugins
2.   Upload the theme_alluri.zip file. You could be prompted to add extra details (in the ‘Show more‘ section), if your plugin is not automatically detected.
3.   If your target directory is not writeable, you will see a warning message.
4.   Check the plugin validation report to find if the theme has been successfully installed.

Activating The Theme

1.   Log in as admin and go to  Site administration → Appearance → Themes → Theme Selector
2.   Click on "Clear theme caches" button
3.   Click on the "Select theme" button on the right of the current theme being
4.   Scroll down to find Alluri
5.   Click the "Use theme"  button next to Alluri
6.   Moodle will tell you that the theme has been set as the default theme
7.   Check your Moodle site by going to the Moodle site’s home page

Import Alluri Demo

1.   Login to your Moodle site as an admin and go to Site administration → Appearance → Themes → Alluri
2.   Select General tab → "Miscellaneous Items" section
3.   Please check the import demo content checkbox to import the demo data that will make your installation look like our demo site.
4.   It can take a few minutes to import everything. Please be patient and wait for it to complete. Once it loads, you will see a success message.

Update Theme

Download the latest theme version and install the theme plugin in your moodle. Same process as the theme installation.

1.   Login to your Moodle site as an admin and go to Site administration → Plugins → Install plugins
2.   Upload the theme_alluri.zip file. You could be prompted to add extra details (in the ‘Show more‘ section), if your plugin is not automatically detected.
3.   If your target directory is not writeable, you will see a warning message.
4.   Check the plugin validation report to find if the theme has been successfully installed.

Validation Failure

If the validation error message appears during installation or upgrading the theme, its because the theme is trying to install on the lower moodle version.

Upgradation Failure

If the upgradation error message appears during upgrading the theme, its because the theme new version is incorrect from the current installed version.

Multi Language

The multi-language content filter enables resources to be created in multiple languages. When turned on, it looks for tags which indicate that a text contains multiple languages. Then it selects and outputs the text in the user's language

Enabling the multi-language content filter

An admin can enable the multi-language content filter as follows:

1. Go to Site administration > Plugins > Filters > Manage filters and in the dropdown menu for multi-language content select 'On'.
2. If headings are to be shown in multiple languages too, select 'Content and headings' in the 'Apply to' column. Note that this may affect site performance.

How to use

Common problems

The multi-lang filter is not enabled. It can be enabled in 'Manage filters' in the Site administration'.

1. Headings aren't displaying correctly - the multi-lang filter should be set to apply to content and headings in 'Manage filters' in the Site administration'.
2. Extra characters between language span tags - editor might add or other tags, please review the html in source view.
3. If the course setting is "force" some language, you won't be able to change the displayed language.
4. Extra spaces in language span tag.
5. The multi-lang filter does not work with the course short name! A course's short name is meant as a unique course identifier, so it does not use the multi-lang filter.

General

Color Schemes

Select the color scheme from the color pattern to change your site color.

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "General" tab → "COLOR SCHEMES, HEADER STYLES, LOGO & MENUS" section
3.   You can select your theme color from the color scheme in the Predefined color scheme option,
4.   Click the ‘Save changes’ button at the bottom.

Header Styles

Alluri includes different Header styles to better fit the needs of your website(s).

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "General" tab → "COLOR SCHEMES, HEADER STYLES, LOGO & MENUS" section
3.   Locate the "Header Style" option and select your header style
4.   Click the "Save changes" buttton to save the customized option.

Style1

The header style 1 has the logo on the left and the navigation menu on the right. The "style1" option has the Blue background for the header main.

Style2

The header style 2 has the logo on the left and the navigation menu on the right. The "style2" option has the White background for the header main.

Style3

The header style 3 has the logo on the left, search box in the right side and the navigation menu appears below the header menu. The "style3" option has the White background for the header main.

Style4

The header style 4 has the logo on the center and the navigation menu appears below the header menu. The "style4" option has the White background for the header main.

Style5

The header style 5 has the navigation menu in the center and the logo between the header menu. The "style5" option has the White background for the header main.

Transparent Header

Select the transparent option in the transparent header

The transparent header has the logo on the center and the navigation menu appears below the header menu. The "transparent" option has the transparent background for the header.

Semi transparent Header

Select the Semi-transparent option in the Semi transparent header

The semi transparent header has the logo on the center and the navigation menu appears below the header menu. The "semi-transparent" option has the overlay in the background for the header.

Header Style settings

Top header background stlye

Enable to display top header style as theme colored background.If disabled the background will be white

Disable: Header top

Enable: Header top

Logo

You can upload your custom logo and sticky logo here.

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "General" tab → "COLOR SCHEMES, HEADER STYLES, LOGO & MENUS" section
3.   Locate the "Logo" option and upload your custom logo
4.   Click the "Save changes" buttton to save the customized option.

Menus

Manage Primary Menus

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "General" tab → "COLOR SCHEMES, HEADER STYLES, LOGO & MENUS" section
3.   Locate the "Primary menu items" option and configure the primary menus

Courses mega menu

1.   Navigate to Site administration → Appearance → Themes → Theme Settings
2.   Locate the "Enable courses mega menu" option and check the "Enable" option to display in the header menu
3.   Locate the "Courses mega menu position" option and you can change the position of the mega menu within the primary menu.
4.   Click the "Save changes" buttton to save the customized option.

Enable Courses mega menu & Courses mega menu Position

Enable courses mega menu: You can enable or disable the Course mega menu option on the header menu

Manage front page items

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "General" tab → "Manage front page items" section

You can change the style of the frontpage setting by customization of the "Manage front page items".

1.   Popular courses:-   Enable or Disable to display or hide by selecting the "Popular courses" options.
2.   Generate popular courses based on:-
3.   Number of enrolled courses displays all the courses enrolled by the user.
4.   Custom courses:- select the custom courses and enter the course id in the next option "Popular courses id's" text box.
5.   Enter the "Popular courses ID's" to display the courses on the "Popular Courses" block.



6.   Available courses display style: Choose the block style to view as moodle default or Carousel for the "Available courses" style.
7.   Course categories display style: Choose the block style to view as moodle default or Carousel for the "Course categories" style.
8.   My courses display style: Choose the block style to view as moodle default or Carousel for the "My courses" style.
9.   Site news display style: Choose the block style to view as moodle default or alluri theme custom style for the "Site news" style.
10.   Combo list display style: Choose the block style to view as Collapsed or Expanded style for the "Combo list" style.
11.   Click the "Save changes" buttton to save the customized option.

MANAGE BACKGROUND IMAGES & COLOURS

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "General" tab → "MANAGE BACKGROUND IMAGES & COLOURS" section

In "MANAGE BACKGROUND IMAGES & COLOURS"

1.   Background image for popular courses block: To add the background image for the "Popular courses" block.
2.   Background color options for popular courses block: You can select only color option or the color & background image option for the "popular courses" background
3.   Background image for available courses block: To add the background image for the "Available courses" block.
4.   Background color options for available courses block: You have "white" background , "default theme color background" and "theme color with background image" option to select background style for the "available courses" background
5.   Background image for course categories block: To add the background image for the "Course categories" block.
6.   Background color options for course categories block: You have "white" background , "default theme color background" and "theme color with background image" option to select background style for the "course categories block" background
7.   Background image for enrolled courses block: To add the background image for the "Enrolled courses" block.
8.   Background color options for enrolled courses block: You have "white" background , "default theme color background" and "theme color with background image" option to select background style for the "enrolled courses block" background
9.   Background image for testimonial block: To add the background image for the "Testimonial" block.
10.   Background color options for testimonial block: You have "default theme color background" and "theme color with background image" option to select background style for the "Testimonial block" background
11.   Footer slider image for footer section: You can add the images for the slider on the "Footer" section.
12.   Click the "Save changes" buttton to save the customized option.

Miscellaneous items

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "General" tab → "Miscellaneous items" section

In "Miscellaneous items"

1.   Course category layout: To change the display format of the courses listing page choose the default or the custom layouts from the option.

Course Layout-1



Course Layout-2




2.   Login page layout: Select the "default" style or the "enligth theme" style for the login page style.

Login Page Style




3.   Enable preloader: This option allow you to show/hide preloader animation when the site pages are loading.
4.   Preloader image: Use this option to change the pre-loader animation image (GIF)
5.   Preloader background color:"Select your prefered color for the pre-loader background color.
6.   Add back to top button: This option controls to enable a back to top button on your pages.
7.   Custom SCSS: Use this field to provide SCSS or CSS code which will be injected at the end of the style sheet
8.   Import demo content: To import the content for your theme as the demo site.
9.   Click the "Save changes" buttton to save the customized option.

Homepage Slider

The homepage slider will allow you to promote important elements of your site; you have to upload at least one slide image to make the slideshow appear. Slide title, description and button are optional. Use larger images for best results, the slider will crop your images to fit the height and width of the slideshow. If you use too small images it won’t work correctly.

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "Homepage slider" tab → "Slider options" section
3.   The Homepage slider contains number of slider, Autoplay, pagination, pause time and Height options.
4.   Number of slides: Use this option to select the number of slides. You can add upto maximum of 12 slides for the Homepage slider.
5.   Show homepage slider: You can show/hide the Homepage slider by the Yes/No option.
6.   Autoplay: Use this option to scroll slides automatically after page load by selecting yes in the autoplay option.
7.   Show progress bar: The progress bar is the loading status of the each slider. You can show/hide the progress bar which appears on the top of the slider.
8.   Pagination: You can set the pagination style with Dots, Thumbnails image, Dots with Thumbnail images, none for the slider.
9.   Pause time: Use this option to set the pause or wait time between each slide change in the slideshow.
10.   Slideshow height: You can set value for the slider height in the slideshow option.
11.   Overlay opacity: Use this option to set value for the background overlay for the content in the slider.
12.   Click the "Save changes" buttton to save the customized option.

Slideshow option:

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "Homepage slider" tab → "Slide 1 options" section
3.   Status: The slide has the option to show or hide the respective slideshow.
4.   Image: Upload the image for the respective slide, add the recommended image size.
5.   Title: Add the title and also you can set the title with the multi-lang using "" for the slide. eg: using "Slideshow Title" "عرض الشرائح العنوان "
6.   Description: Add the description and also you can set the description with the multi-lang using "" for the slide. eg: using "Slideshow Description" "وصف عرض الشرائح "
7.   Button 1 Text: Add the text to display in the link button for the slider
8.   Button 1 URL: Add the URL link for the button in the slider.
9.   Button 1 Target: Select the target whether the link should be open in the "Same/New" window.
10.   Button 2 Text: Add the text to display in the link button for the slider
11.   Button 2 URL: Add the URL link for the button in the slider.
12.   Button 2 Target: Select the target whether the link should be open in the "Same/New" window.
13.   Content width: Use this option to set the width for the content. This width will be calculated as a percentage of main grid width. Default value for this option is 50%.
14.   Content style: You can choose the "Content overlay", "Full slide overlay", "Double Title", "Plain theme colored" from the content style option.
15.   Content position: Use this option to set the positon of the slide content and button in the slide.
16.   Content animation: Use this option to set the animation style for the slide content and button in the slide.
17.   Slide animation: Use this option for the transition animation type of the slide, move to the next slide.
18.   Click the "Save changes" button to save the customized option to apply for the slide.

Homepage slider:

Marketing Spots

News & Events block

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "Marketing spot" tab → "MARKETING SPOT 1 (ABOUT US)" section
3.   Acitvate block: Select the checkbox to enable the "MARKETING SPOT 1 (ABOUT US)"
4.   Title: Add a new title for the "MARKETING SPOT 1 (ABOUT US)" block.
5.   Description: Add a description for the "MARKETING SPOT 1 (ABOUT US)" block.
6.   Media: Add a youtube iframe to display the video for the "MARKETING SPOT 1 (ABOUT US)" block.
7.   Navigate to Site administration → Appearance → Themes → Alluri
8.   Select "Marketing spot" tab → "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" section
9.   Acitvate block: Select the checkbox to enable the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )"
10.   Title: Add a new title for the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" block.
11.   Description: Add a description for the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" block.
12.   Button Text: Add a text for the link button in the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" block.
13.   Button Link: Add a URL link for the button in the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" block.
14.   Button Target: Select the option to open the link in the same window or new window for the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" block.
15.   Click the "Save changes" buttton to save the customized option.

After finishing Marketing spot block customization will be like this:

Category Images

You can represent the categories by adding the images for the category in the back-end setting. Follow the instruction to add the images for the categories.

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Locate the "Category images" option and upload the image for the each categorie

Category block with images on the frontpage:

Our Team

You can show the team member in the our team block.

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Locate the "Our team" option and "Our team general settings".
3.   Activate this block Click the check box to enable the Our team block on the frontpage.
4.   Title Add the Title for the Our team block.
5.   Auto Play Select the Yes/No option to enable the auto play option for the Our team block.
6.   Number of members Use this option to select the number of members to display for the Our team block.



7.   Navigate to Site administration → Appearance → Themes → Alluri
8.   Locate the "Our team" option and "MEMBER 1 DETAILS".
9.   Name Add the name to display the member name in the member block.
10.   Job Title Add the job title to display in the member block.
11.   Profile URL Add the URL in the option to view member's profile.
12.   Social Media Icon 1 Add the social icon in the option to follow the member in the social network. Usse font awesome icon eg: fa fa-facebook
13.   Social Media Icon 1 URl Add the social network URl with the member's id. eg: https://www.facebook.com/yourfacebookid
14.   Social Media Icon 2 Add the social icon in the option to follow the member in the social network. Usse font awesome icon eg: fa fa-twitter
15.   Social Media Icon 2 URl Add the social network URl with the member's id. eg: https://www.twitter.com/yourtwitterid
16.   Social Media Icon 3 Add the social icon in the option to follow the member in the social network. Usse font awesome icon eg: fa fa-google-plus
17.   Social Media Icon 3 URl Add the social network URl with the member's id. eg: https://www.facebook.com/yourgoogle-plusid
18.   Social Media Icon 4 Add the social icon in the option to follow the member in the social network. Usse font awesome icon eg: fa fa-pinterest
19.   Social Media Icon 4 URl Add the social network URl with the member's id. eg: https://www.facebook.com/yourpinterestid
20.   Description Add the description about the member in the our team block.
21.   Upload member image Add the image to display the member of the image in the Our team block.

Our team block on the frontpage:

Testimonials

Getting a message to your target audience that is exactly what you want to say, exactly how you want to say it!

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Locate the "Testimonials" option and "Testimonials general settings".
3.   Testimonials displayYou have to Activate the testimonial block by enabling the checkbox, to display the testimonials on the frontpage.
4.   Show pagination: Select the Yes/No option to enable the pagination for the testimonial block.
5.   AutoplaySelect Yes/No option to enable the autoplay the textimonial block.
6.   Number of testimonial: You can add upto 16 testimonials by selecting the value on the "Number of testimonials" select box.
7.   Click the "Save changes" buttton to save the customized option.

Add the User name, User role, image and content for the testimonial blocks.

After adding the content on the testimonial block setting, you will get the result in the front page as the below image

Counter block

You can view the number of the counters in the Counter section block.

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Locate the "Counters block" option and "Counters general settings".
3.   You have to Activate the Counters block by enabling the checkbox, to display the Counters block on the frontpage.
4.   You can add title for the "Counters block" in the text box.
5.   You can add description for the "Counters block" in the text box area.
6.   Also add the background image and paralax effect for the Counters block.
7.   Click the "Save changes" buttton to save the customized option.

1.   Locate the "Counters block" option and "Counter 1".
2.   You can add the value for the "Counter value" in the Counter section".
3.   You can add title as text or the multi lang key in the "Counters title".
4.   Click the "Save changes" buttton to save the customized option.

After adding the content on the Counters block setting, you will get the result in the front page as the below image

Our Partners

You can view the users review by the Partner block.

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Locate the "Partners" option and "Partners general settings".
3.   You have to Activate the Partners block by enabling the checkbox, to display the testimonials on the frontpage.
4.   You can add unlimited number of partners by adding the value on the "Number of Partners to show" text box.
5.   Select whether the Partners should autoplay by selecting the "Autoplay" option.
6.   Also Add the Auto play time interval, Title and Description for the Partners block.

Parenters Block

Add the Title, logo, URL for the Partners blocks.

After adding the content on the Partners block setting, you will get the result in the front page as the below image

Footer Blocks

1.   Navigate to Site administration → Appearance → Themes → Alluri
2.   Select "Footer" tab → "Footer Block 1" section
3.   Activate block: Select the checkbox to activate the respective footer block.
4.   Title: Enter a title for the respective block as plain text or lang:language_key for multi-lingual support. You can find the theme language keys here: /theme/alluri/lang/en/theme_alluri.php
5.   Description: Enter the any text or html content inisde the Text editor block for the footer description or multi-lingual support enter lang:language_key.
6.   Add image or the icon in the File picker, Title, Description in the textbox and the URL to refer to another page
7.   Follow the same process to activate the other site featured block and Click "Save Changes"

Different appearance when the footer blocks are disable:

All blocks are Enabled:

Three blocks:

Two blocks:

Single block:

Mobile app

Mobile APP URL - Android

Add your Android mobile app link in the "Mobile APP URL - Android", to view the app link in the footer block.

Mobile APP URL - IOS

Add your IOS mobile app link in the "Mobile APP URL - IOS", to view the app link in the footer block.

<div class="typo-block">
<h1>h1. theDocs heading</h1>
<h2>h2. theDocs heading</h2>
<h2 class="title-headings"><b>Docs</b> heading<span><i class="fa fa-star"></i></span></h2>
<h3>h3. theDocs heading</h3>
<h4>h4. theDocs heading</h4>
<h5>h5. theDocs heading</h5>
<h6>h6. theDocs heading</h6>
<p> Integer egestas ante id justo mollis feugiat ac vel metus. Nunc pulvinar scelerisque faucibus. Aenean at libero hendrerit, feugiat felis suscipit, facilisis justo. Praesent laoreet rutrum velit vitae facilisis. </p>
</div>

<div class="button-block">
<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-secondary">Secondary</button>
<button type="button" class="btn btn-xs btn-success">Success</button>
<button type="button" class="btn btn-xs btn-info">Info</button>
<button type="button" class="btn btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-danger">Danger</button>
<button type="button" class="btn btn-xs btn-dark">Dark</button>
<button type="button" class="btn btn-xs btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-secondary">Secondary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-info">Info</button>
<button type="button" class="btn btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-dark">Dark</button>
<button type="button" class="btn btn-sm btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-lg btn-default">Default</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-dark">Dark</button>
<button type="button" class="btn btn-lg btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-xl btn-default">Default</button>
<button type="button" class="btn btn-xl btn-primary">Primary</button>
<button type="button" class="btn btn-xl btn-secondary">Secondary</button>
<button type="button" class="btn btn-xl btn-success">Success</button>
<button type="button" class="btn btn-xl btn-info">Info</button>
<button type="button" class="btn btn-xl btn-warning">Warning</button>
<button type="button" class="btn btn-xl btn-danger">Danger</button>
<button type="button" class="btn btn-xl btn-dark">Dark</button>
<button type="button" class="btn btn-xl btn-link">Link</button>
</div>

<div class="iconic-button-block">
<button type="button" class="btn btn-xs btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-xs btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-xs btn-secondary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-xs btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-xs btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-xs btn-dark"><i class="fa fa-git"></i></button>


<br><br>

<button type="button" class="btn btn-sm btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-sm btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-sm btn-secondary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-sm btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-sm btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-sm btn-dark"><i class="fa fa-git"></i></button>


<br><br>

<button type="button" class="btn btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-secondary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-dark"><i class="fa fa-git"></i></button>


<br><br>

<button type="button" class="btn btn-lg btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-lg btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-lg btn-secondary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-lg btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-lg btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-lg btn-dark"><i class="fa fa-git"></i></button>
</div>

<div class="iconic-text-block">
<button type="button" class="btn btn-xs btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-xs btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-xs btn-secondary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-xs btn-success"><i class="fa fa-check-square-o"></i> Checked</button>


<br><br>

<button type="button" class="btn btn-sm btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-sm btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-sm btn-secondary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-sm btn-success"><i class="fa fa-check-square-o"></i> Checked</button>


<br><br>

<button type="button" class="btn btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-secondary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Checked</button>


<br><br>

<button type="button" class="btn btn-lg btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-lg btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-lg btn-secondary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-lg btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
</div>

<div class="label-block">
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-dark">Dark</span>
</div>

<div class="label-block">
<h1>Example heading <span class="label label-primary">New</span></h1>
<h2>Example heading <span class="label label-primary">New</span></h2>
<h3>Example heading <span class="label label-primary">New</span></h3>
<h4>Example heading <span class="label label-primary">New</span></h4>
<h5>Example heading <span class="label label-primary">New</span></h5>
<h6>Example heading <span class="label label-primary">New</span></h6>
</div>

<div class="label-block">
<span class="label label-default">a delicious coffee <i class="fa fa-coffee"></i></span>
<span class="label label-primary"><i class="fa fa-cloud"></i> Float in clouds</span>
<span class="label label-danger"><i class="fa fa-exclamation-circle"></i> Danger <i class="fa fa-exclamation-circle"></i></span>
</div>

<div class="table-block">
<table class="table">
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>