Class |
Defines |
|
TheBestTutorials-container |
Container for HTML content (adds 16px padding left and right) |
Try it |
|
Used with color classes |
Try it |
|
Used as header |
Try it |
|
Used as footer |
Try it |
|
Used With TheBestTutorials-leftbar |
Try it |
|
Used With TheBestTutorials-bottombar |
Try it |
TheBestTutorials-section |
Container for HTML content (adds 16px margin top and bottom) |
Try it |
TheBestTutorials-badge |
Circular badge 8 |
Try it |
TheBestTutorials-tag |
Rectangular tag More Later ! |
Try it |
TheBestTutorials-ul |
Unordered list |
Try it |
TheBestTutorials-display-container |
Container for TheBestTutorials-display-classes (position an element in the top left, top right, bottom left or the bottom right corner, or in the middle of the container) |
Try it |
TheBestTutorials-blockquote |
Removed in 2.0 (use TheBestTutorials-leftbar instead) |
Try it |
TheBestTutorials-example |
Example container |
Try it |
TheBestTutorials-code |
Code container |
Try it |
TheBestTutorials-progress-container |
Progress bar container |
Try it |
Class |
Defines |
|
TheBestTutorials-table |
Container for an HTML table |
Try it |
TheBestTutorials-striped |
Striped table |
Try it |
TheBestTutorials-border |
Bordered table |
Try it |
TheBestTutorials-bordered |
Bordered lines |
Try it |
TheBestTutorials-centered |
Centered table |
Try it |
TheBestTutorials-hoverable |
Hoverable table |
Try it |
TheBestTutorials-table-all |
All properties set |
Try it |
|
With TheBestTutorials-striped, TheBestTutorials-border, and TheBestTutorials-bordered |
Try it |
|
With colored head |
Try it |
|
With TheBestTutorials-responsible |
Try it |
|
With TheBestTutorials-tiny |
Try it |
|
With TheBestTutorials-small |
Try it |
|
With TheBestTutorials-large |
Try it |
|
With TheBestTutorials-xlarge |
Try it |
|
With TheBestTutorials-xxlarge |
Try it |
|
With TheBestTutorials-xxxlarge |
Try it |
|
With color |
Try it |
|
With TheBestTutorials-jumbo |
Try it |
Class |
Defines |
|
TheBestTutorials-row |
Container for one row of fluid responsive content |
Try it |
TheBestTutorials-row-padding |
Row where all columns have a default padding |
Try it |
TheBestTutorials-content |
Container for fixed size centered content |
Try it |
TheBestTutorials-half |
Half (1/2) screen column container |
Try it |
TheBestTutorials-third |
Third (1/3) screen column container |
Try it |
TheBestTutorials-twothird |
Two third (2/3) screen column container |
Try it |
TheBestTutorials-quarter |
Quarter (1/4) screen column container |
Try it |
TheBestTutorials-threequarter |
Three quarters (3/4) screen column container |
Try it |
TheBestTutorials-col |
Column container for any HTML content |
Try it |
|
|
|
l1 - l12 |
Responsive sizes for large screens |
Try it |
m1 - m12 |
Responsive sizes for medium screens |
Try it |
s1 - s12 |
Responsive sizes for small screens |
Try it |
|
|
|
TheBestTutorials-hide-small |
Hide content on small screens (less than 601px) |
Try it |
TheBestTutorials-hide-medium |
Hide content on medium screens |
Try it |
TheBestTutorials-hide-large |
Hide content on large screens (larger than 992px) |
Try it |
Class |
Defines |
|
TheBestTutorials-navbar |
Navigation bar |
Try it |
|
Collapsible navigation bar |
Try it |
TheBestTutorials-dropnav |
Full-width dropdown navigation |
Try it |
TheBestTutorials-topnav |
Top navigation bar |
Try it |
TheBestTutorials-sidenav |
Side navigation bar |
Try it |
|
Side navigation bar overlaying main content |
Try it |
|
Side navigation bar overlaying all main content |
Try it |
|
Side navigation bar shifting main content to the right |
Try it |
|
Side navigation bar with an overlay background |
Try it |
|
Right-sided side navigation |
Try it |
TheBestTutorials-collapse |
Fully automatic responsive side navigation |
Try it |
|
Fully automatic right-sided responsive side navigation |
Try it |
TheBestTutorials-dropdown-click |
Clickable dropdown element |
Try it |
TheBestTutorials-dropdown-hover |
Hoverable dropdown element |
Try it |
|
Hoverable dropdown element (used in TheBestTutorials-navbar) |
Try it |
|
Hoverable dropdown element (used in TheBestTutorials-sidenav) |
Try it |
|
Hoverable dropdown element (used in TheBestTutorials-topnav) |
Try it |
TheBestTutorials-accordion |
Hide and show collapsible content |
Try it |
|
Clickable accordion and dropdown used in TheBestTutorials-sidenav |
Try it |
TheBestTutorials-pagination |
Pagination links |
Try it |
Class |
Defines |
|
TheBestTutorials-animate-top |
Animates an element from the top -300px to 0px |
Try it |
TheBestTutorials-animate-left |
Animates an element from left -300px to 0px |
Try it |
TheBestTutorials-animate-bottom |
Animates an element from the bottom -300px to 0px |
Try it |
TheBestTutorials-animate-right |
Animates an element from right -300px to 0px |
Try it |
TheBestTutorials-animate-opacity |
Animates an element's opacity from 0 to 1 |
Try it |
TheBestTutorials-animate-zoom |
Animates an element from 0 to 100% in size |
Try it |
TheBestTutorials-animate-fading |
Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) |
Try it |
TheBestTutorials-spin |
Spin an icon 360 degrees |
Try it |
|
Spin any element 360 degrees |
Try it |
TheBestTutorials-animate-input |
Animates the width of an input field to 100% |
Try it |
Class |
Defines |
|
TheBestTutorials-tiny |
Specifies a font size of 10 pixels |
Try it |
TheBestTutorials-small |
Specifies a font size of 12 pixels |
Try it |
TheBestTutorials-large |
Specifies a font size of 20 pixels |
Try it |
TheBestTutorials-xlarge |
Specifies a font size of 24 pixels |
Try it |
TheBestTutorials-xxlarge |
Specifies a font size of 32 pixels |
Try it |
TheBestTutorials-xxxlarge |
Specifies a font size of 48 pixels |
Try it |
TheBestTutorials-jumbo |
Specifies a font size of 64 pixels |
Try it |
TheBestTutorials-slim |
Specifies a slimmer text |
Try it |
TheBestTutorials-wide |
Specifies a wider text |
Try it |
TheBestTutorials-vertical |
Specifies vertical text |
Try it |
TheBestTutorials-top |
Fixed content on top of page |
Try it |
TheBestTutorials-center |
Centered content |
Try it |
TheBestTutorials-circle |
Circled content |
Try it |
TheBestTutorials-hide |
Hidden content (display:none) |
Try it |
TheBestTutorials-show |
Show content (display:block) |
Try it |
TheBestTutorials-show-block |
Alias of TheBestTutorials-show (display:block) |
Try it |
TheBestTutorials-show-inline-block |
Show content as inline-block (display:inline-block) |
Try it |
TheBestTutorials-hide-small |
Hide content on small screens (less than 601px) |
Try it |
TheBestTutorials-hide-medium |
Hide content on medium screens |
Try it |
TheBestTutorials-hide-large |
Hide content on large screens (larger than 992px) |
Try it |
TheBestTutorials-left |
Left adjusted content |
Try it |
TheBestTutorials-right |
Right adjusted content |
Try it |
TheBestTutorials-left-align |
Left aligned text |
Try it |
TheBestTutorials-right-align |
Right aligned text |
Try it |
TheBestTutorials-justify |
Right and left aligned text |
Try it |
TheBestTutorials-display-container |
Container for TheBestTutorials-display-classes (position: relative) |
Try it |
TheBestTutorials-display-topleft |
Position content in the top left corner |
Try it |
TheBestTutorials-display-topright |
Position content in the top right corner |
Try it |
TheBestTutorials-display-bottomleft |
Position content in the bottom left corner |
Try it |
TheBestTutorials-display-bottomright |
Position content in the bottom right corner |
Try it |
TheBestTutorials-display-middle |
Position content in the middle (horizontally and vertically) |
Try it |
TheBestTutorials-display-topmiddle |
Position content in the middle at the top of the element |
Try it |
TheBestTutorials-display-bottommiddle |
Position content in the middle at the bottom of the element |
Try it |
TheBestTutorials-serif |
Changes the font to serif |
Try it |
TheBestTutorials-opacity |
Adds opacity to text |
Try it |
|
Adds opacity to any element |
Try it |
TheBestTutorials-overlay |
Creates an overlay effect |
Try it |
TheBestTutorials-text-shadow |
Adds shadows to text |
Try it |
Class |
Defines |
|
TheBestTutorials-red |
Background color red |
Try it |
TheBestTutorials-pink |
Background color pink |
Try it |
TheBestTutorials-purple |
Background color purple |
Try it |
TheBestTutorials-deep-purple |
Background color deep purple |
Try it |
TheBestTutorials-indigo |
Background color indigo |
Try it |
TheBestTutorials-blue |
Background color blue |
Try it |
TheBestTutorials-light-blue |
Background color light blue |
Try it |
TheBestTutorials-cyan |
Background color cyan |
Try it |
TheBestTutorials-aqua |
Background color aqua |
Try it |
TheBestTutorials-teal |
Background color teal |
Try it |
TheBestTutorials-green |
Background color green |
Try it |
TheBestTutorials-light-green |
Background color light green |
Try it |
TheBestTutorials-lime |
Background color lime |
Try it |
TheBestTutorials-sand |
Background color sand |
Try it |
TheBestTutorials-khaki |
Background color khaki |
Try it |
TheBestTutorials-yellow |
Background color yellow |
Try it |
TheBestTutorials-amber |
Background color amber |
Try it |
TheBestTutorials-orange |
Background color orange |
Try it |
TheBestTutorials-deep-orange |
Background color deep orange |
Try it |
TheBestTutorials-blue-grey |
Background color blue grey |
Try it |
TheBestTutorials-brown |
Background color brown |
Try it |
TheBestTutorials-light-grey |
Background color light grey |
Try it |
TheBestTutorials-grey |
Background color grey |
Try it |
TheBestTutorials-dark-grey |
Background color dark grey |
Try it |
TheBestTutorials-black |
Background color black |
Try it |
TheBestTutorials-pale-red |
Background color pale red |
Try it |
TheBestTutorials-pale-yellow |
Background color pale yellow |
Try it |
TheBestTutorials-pale-green |
Background color pale green |
Try it |
TheBestTutorials-pale-blue |
Background color pale blue |
Try it |
TheBestTutorials-transparent |
Transparent background-color |
|
Class |
Defines |
|
TheBestTutorials-hover-white |
Hover color white |
Try it |
TheBestTutorials-hover-black |
Hover color black |
Try it |
TheBestTutorials-hover-red |
Hover color red |
Try it |
TheBestTutorials-hover-blue |
Hover color blue |
Try it |
TheBestTutorials-hover-green |
Hover color green |
Try it |
TheBestTutorials-hover-aqua |
Hover color aqua |
Try it |
TheBestTutorials-hover-orange |
Hover color orange |
Try it |
TheBestTutorials-hover-grey |
Hover color grey |
Try it |
TheBestTutorials-hover-pale-green |
Hover color pale green |
Try it |
|
|
|
TheBestTutorials-hover-text-red |
Hover text color red |
Try it |
TheBestTutorials-hover-text-blue |
Hover text color blue |
Try it |
TheBestTutorials-hover-text-green |
Hover text color green |
Try it |
TheBestTutorials-hover-text-purple |
Hover text color purple |
Try it |
|
|
|
TheBestTutorials-hover-border-color |
Hover border color |
Try it |
|
|
|
TheBestTutorials-hover-opacity |
Adds transparency to an element on hover (60% opacity) |
Try it |
TheBestTutorials-hover-shadow |
Adds shadow to an element on hover |
Try it |
TheBestTutorials-hover-none |
Removes hover effects from an element |
Try it |
Class |
Defines |
|
TheBestTutorials-round |
Element rounded (border-radius) 4px |
Try it |
TheBestTutorials-round-small |
Element rounded (border-radius) 2px |
Try it |
TheBestTutorials-round-medium |
Element rounded (border-radius) 4px |
Try it |
TheBestTutorials-round-large |
Element rounded (border-radius) 8px |
Try it |
TheBestTutorials-round-xlarge |
Element rounded (border-radius) 16px |
Try it |
TheBestTutorials-round-xxlarge |
Element rounded (border-radius) 32px |
Try it |
TheBestTutorials-round-jumbo |
Element rounded (border-radius) 64px |
Try it |
Class |
Defines |
|
TheBestTutorials-padding-0 |
Removes all padding from an element |
Try it |
TheBestTutorials-padding |
Padding 8px top and bottom, and 16px left and right. |
Try it |
TheBestTutorials-padding-tiny |
Padding 2px top and bottom, and 4px left and right. |
Try it |
TheBestTutorials-padding-small |
Padding 4px top and bottom, and 8px left and right. |
Try it |
TheBestTutorials-padding-medium |
Padding 8px top and bottom, and 16px left and right. |
Try it |
TheBestTutorials-padding-large |
Padding 12px top and bottom, and 24px left and right. |
Try it |
TheBestTutorials-padding-xlarge |
Padding 16px top and bottom, and 32px left and right. |
Try it |
TheBestTutorials-padding-xxlarge |
Padding 24px top and bottom, and 48px left and right. |
Try it |
TheBestTutorials-padding-jumbo |
Padding 32px top and bottom, and 64px left and right. |
Try it |
TheBestTutorials-padding-top |
Padding top 8px |
Try it |
TheBestTutorials-padding-right |
Padding right 16px |
Try it |
TheBestTutorials-padding-bottom |
Padding bottom 8px |
Try it |
TheBestTutorials-padding-left |
Padding left 16px |
Try it |
TheBestTutorials-padding-4 |
Padding 4px top and bottom |
Try it |
TheBestTutorials-padding-8 |
Padding 8px top and bottom |
Try it |
TheBestTutorials-padding-12 |
Padding 12px top and bottom |
Try it |
TheBestTutorials-padding-16 |
Padding 16px top and bottom |
Try it |
TheBestTutorials-padding-24 |
Padding 24px top and bottom |
Try it |
TheBestTutorials-padding-32 |
Padding 32px top and bottom |
Try it |
TheBestTutorials-padding-48 |
Padding 48px top and bottom |
Try it |
TheBestTutorials-padding-64 |
Padding 64px top and bottom |
Try it |
TheBestTutorials-padding-128 |
Padding 128px top and bottom |
Try it |
Class |
Defines |
|
TheBestTutorials-border |
Borders (top, right, bottom, left) |
Try it |
TheBestTutorials-border-top |
Border top |
Try it |
TheBestTutorials-border-right |
Border right |
Try it |
TheBestTutorials-border-bottom |
Border bottom |
Try it |
TheBestTutorials-border-left |
Border left |
Try it |
TheBestTutorials-border-0 |
Removes all borders |
Try it |
TheBestTutorials-border-color |
Displays any defined borders in a specified color (like red, etc) |
Try it |
TheBestTutorials-bottombar |
Adds a thick bottom border (bar) to an element |
Try it |
TheBestTutorials-leftbar |
Adds a thick left border (bar) to an element |
Try it |
TheBestTutorials-rightbar |
Adds a thick right border (bar) to an element |
Try it |
TheBestTutorials-topbar |
Adds a thick top border (bar) to an element |
Try it |
TheBestTutorials-hover-border-color |
Hoverable border color |
Try it |