List of All the classes in W3.CSS

Are you using Bootstrap? Or W3.CSS? Bootstrap is doing really well past years, but if you have like a very simple website - a small website which needs very little styling, then you may use W3.css.

One advantage of w3.css is that its very small as compared to other CSS frameworks and also has some good classes in it. You can design just like bootstrap in it.

You can find official documentation and some templates of w3.css on w3schools website.

But what id there was a list to quickly have a look at all of its classes? Here it is! Optionally you can use Ctrl+F to find the class you want.

W3.CSS is a popular CSS framework developed by W3Schools, offering a variety of classes for creating responsive and modern web designs. Here’s a list of commonly used classes in the W3.CSS library:

1. Layout Classes

• w3-container: Adds padding around an element.
• w3-row: Defines a flex container for rows.
• w3-col: Defines columns inside a row (flex).
• w3-padding: Adds padding.
• w3-margin: Adds margin.
• w3-display: Used for setting display types.
• w3-center: Centers content horizontally.
• w3-left: Aligns content to the left.
• w3-right: Aligns content to the right.
• w3-auto: Applies automatic widths and heights.
• w3-hide-small: Hides elements on small screens.
• w3-show-small: Shows elements only on small screens.
• w3-full: Makes elements take full width or height.

2. Typography Classes

• w3-text: Text color classes (e.g., w3-text-blue).
• w3-large: Increases font size.
• w3-xlarge: Increases font size more.
• w3-xxlarge: Even larger font size.
• w3-bold: Makes text bold.
• w3-italic: Makes text italic.
• w3-underlined: Underlines text.
• w3-line-height: Adjusts line height.
• w3-font: Specifies font family.

3. Color Classes

• w3-black, w3-white, w3-grey, w3-blue, w3-green, w3-red, etc. — Define background or text colors.
• w3-light-blue, w3-dark-blue, etc. — Lighter or darker shades.
• w3-hover-*: Color changes on hover (e.g., w3-hover-green).

4. Borders and Shadows

• w3-border: Adds a border around an element.
• w3-border-*: Border color (e.g., w3-border-blue).
• w3-round: Rounds corners of an element.
• w3-shadow: Adds a shadow to elements (e.g., w3-shadow-small, w3-shadow-large).
• w3-border-top, w3-border-right, w3-border-bottom, w3-border-left: Apply borders on specific sides.

5. Button Classes

• w3-btn: Defines a button style.
• w3-btn-*: Button colors (e.g., w3-btn-blue).
• w3-hover-*: Hover effects on buttons.
• w3-btn-round: Rounded button.
• w3-block: Makes button take up full width.

6. Form Classes

• w3-input: Defines input field styles.
• w3-textarea: Defines textarea style.
• w3-select: Styles for dropdown select menus.
• w3-check: Styles checkboxes.
• w3-radio: Styles radio buttons.
• w3-label: Defines form label styles.

7. Images and Media

• w3-image: Makes images responsive.
• w3-round: Applies rounded corners to images.
• w3-responsive: Makes content responsive.
• w3-hover-opacity: Changes opacity on hover.

8. Tables

• w3-table: Basic table styling.
• w3-bordered: Adds borders to a table.
• w3-striped: Stripes rows of a table.
• w3-hoverable: Hover effect on table rows.

9. Cards and Panels

• w3-card: Defines a card layout.
• w3-card-2, w3-card-4: Different card styles.
• w3-panel: Defines panel (with optional background color).
• w3-panel-*.: Panel colors (e.g., w3-panel-red).

10. Navigation Classes

• w3-bar: Defines a navigation bar.
• w3-navbar: Defines a navbar with additional styling.
• w3-dropdown: Defines a dropdown menu.
• w3-dropdown-content: Dropdown content styling.
• w3-dropdown-click: Activates a dropdown on click.
• w3-side-nav: Sidebar navigation.

11. Modals and Popups

• w3-modal: Defines a modal.
• w3-modal-content: Defines content within the modal.
• w3-modal-close: Closes the modal.
• w3-overlay: Overlay for modals.

12. Grid System

• w3-col-*: Defines column sizes in grids (e.g., w3-col-4).
• w3-row-padding: Adds padding between rows.
• w3-margin-top, w3-margin-bottom, w3-margin-left, w3-margin-right: Margin classes.

13. Icons

• w3-xlarge, w3-large: Icon size.
• w3-left, w3-right: Align icons.
• w3-text-*: Icon colors (e.g., w3-text-blue).
• w3-icon-*: Defines icon style (e.g., w3-icon-home).

14. Utility Classes

• w3-opacity: Adjust opacity (e.g., w3-opacity-50 for 50% opacity).
• w3-hide-medium, w3-hide-large: Hide elements on certain screen sizes.
• w3-show-block: Makes an element block-level.
• w3-text-shadow: Adds text shadow.
• w3-hover-shadow: Adds shadow on hover.

15. Responsive Classes

• w3-small, w3-medium, w3-large: Defines font sizes based on screen width.
• w3-responsive: Makes elements responsive.
• w3-show-medium, w3-show-large: Show elements based on screen width.
• w3-hide-*: Hide elements based on screen size.

I hope by looking at all these classes you can quickly recall what and where you need to use this. For any help, you can comment below.

• Tweet
• Share
• Share
• Share
• Share