Free Responsive Business WordPress Theme

CSS classes cheat sheet

BizVektor CSS classes for special customization

BizVektor offers several special CSS classes you can use to format your content on pages or posts.
You can find a complete list of BizVektor CSS classes below so please refer to it when editing your content.

Content format

Class name Effects and use
class="leadTxt" Enables you to visually set a leading title for your content. Size of the text will be bigger than the default content size.
class="btn" Creates a button for your links. Use on a <a> tag.
class="btn btnS" Create a small size button. Use on a <a> tag.
class="btn btnL" Create a large size button. Use on a <a> tag.
class="flowBox" Enables you to signify a progression when you need it (for example to illustrate a workflow or an order process).
Please use this class on a block element (like <div>) then insert your item using the  description list tags (<dl><dt><dd>) in order to apply the special style.
You should repeat the above steps for each element you insert.
Tip: if you want to delete the arrow after the last box, just insert the whole above code inside a <div>
class="qaItem" Enables you to easily design a FAQ list thanks to question/answer icons. You can use it on your FAQ page.
Add class=”qaItem” to a <dl> tag then insert your Q/A using <dt> and <dd> tags.
class="sectionFrame" Adds a contour to your content.
blockquote Alse adds a contour to your content. This is NOT a CSS class but a HTML element. You might use it for quotation.

Special styles live demo

Responsive-friendly classes

Class name Effects and use
class="resImage-mobile" Enables you to switch a picture source for display on mobile devices. Add this class to a <img> tag.
The picture you want to display on small devices should have the same name than the normal picture WITH _mobile extension at the end.
For this you need to have 2 pictures: one for desktop/tablet use and one for mobile/smartphone use
sample.jpg for desktop/tablet
sample_mobile.jpg for mobile/smartphone
class="show-mobile-tab" If you put this class to a HTML tag, the other elements inside it would display only on mobile/smartphones and tablets.
class="show-tab-full" If you put this class to a HTML tag, the other elements inside it would display only on big tablets and desktop size resolution devices.
class="show-full-only" If you put this class to a HTML tag, the other elements inside it would display only on screen resolution above 967px.
class="resImgTxtChange-mobile-tab" Enables you to hide an image and display the text content of its alt attribute instead for tablet sized screens.
class="resImgTxtChange-mobile-only" Enables you to hide an image and display the text content of its alt attribute instead for mobile/smartphone small sized screens.
class="txtBr-full-only" Allows you to get a full text block for small resolution devices but to have new lines inside your content for desktop resolution devices. Use this if you need to control the way new lines are displayed on various screen sizes.
You should insert <span class=”txtBr-full-only”>Text that starts in a new line on desktop screens</span> where you need to insert a new line.
You should use this class on a inline element like <span>.
class="mobile-block" Add this class to a <table> if you want to display it vertically on small screens.
Works best with tables without <thead> and 2 columns max.
  • Facebook
  • Hatena
  • twitter
  • Google+
  • LINE
PAGETOP
Copyright © BizVektor Free WordPress Theme All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.