FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

TheBestTutorials.css References


The Container Classes

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

Table Classes

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

Card Classes

Class Defines
TheBestTutorials-card Container for any HTML content (With border) Try it
TheBestTutorials-card-2 Container for any HTML content (2px bordered shadow) Try it
TheBestTutorials-card-4 Container for any HTML content (4px bordered shadow) Try it
TheBestTutorials-card-8 Container for any HTML content (8px bordered shadow) Try it
TheBestTutorials-card-12 Container for any HTML content (12px bordered shadow) Try it
TheBestTutorials-card-16 Container for any HTML content (16px bordered shadow) Try it
TheBestTutorials-card-24 Container for any HTML content (24px bordered shadow) Try it

Responsive Classes

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

Navigation Classes

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

Button Classes

Class Defines
TheBestTutorials-btn Rectangular HTML button Try it
  Rectangular HTML button with ripple effect Try it
TheBestTutorials-btn-floating Circular floating button Try it
  Circular floating button with ripple effect Try it
TheBestTutorials-btn-group Grouped buttons Try it
TheBestTutorials-btn-bar Button bars (similar to grouped buttons, except for different background-color and hover effects) Try it
TheBestTutorials-btn-block Full-width buttons (100%) Try it

Input Classes

Class Defines
TheBestTutorials-form Same as TheBestTutorials-padding Try it
  Input form as a card Try it
TheBestTutorials-input Input elements Try it
  Input elements (top labels) Try it
  Input elements (bottom labels) Try it
TheBestTutorials-group Group of HTML elements Try it
TheBestTutorials-label Input label Try it
TheBestTutorials-validate Validates input (Changes color when invalid input) Try it
TheBestTutorials-check Checkbox input type Try it
TheBestTutorials-radio Radio input type Try it
TheBestTutorials-select Input select element Try it
TheBestTutorials-animate-input Animates the width of an input to 100% Try it

Modal Classes

Class Defines
TheBestTutorials-modal Modal container Try it
TheBestTutorials-modal-content Modal pop-up element Try it
TheBestTutorials-tooltip Tooltip element Try it
TheBestTutorials-text Tooltip text Try it

Animation Classes

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

Utility Classes

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

Color Classes

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  

Hover Classes

All the colors above can also be used as hover classes:

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

Round Classes

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

Padding Classes

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

Margin Classes

Class Defines
TheBestTutorials-margin-0 Removes all margins from an element Try it
TheBestTutorials-margin Margin 16px Try it
TheBestTutorials-margin-top Margin top 16px Try it
TheBestTutorials-margin-right Margin right 16px Try it
TheBestTutorials-margin-bottom Margin bottom 16px Try it
TheBestTutorials-margin-left Margin left 16px Try it

Border Classes

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