- W3CSS Tutorial – Introduction to W3CSS
- W3CSS Colors Basics
- W3CSS Hover Colors
- W3CSS Containers
- W3CSS Borders
- W3CSS Borders Advanced
- W3CSS Panels
- W3CSS Closing and Opening Panels
- W3CSS Card
- W3CSS Text
- W3CSS Fonts
- W3CSS Round
- W3CSS Padding
- W3CSS Margins
- W3CSS Display
- W3CSS Buttons
- W3CSS Notes
- W3CSS Quotes
- W3CSS Alerts
- W3CSS Tables
- W3CSS Tables Advanced
- W3CSS Lists
- More About W3CSS Lists
- W3CSS List Sizes
- W3CSS Images
- W3CSS Image Effects
- W3CSS Inputs
- W3CSS Input Types
- W3CSS Badges
- W3CSS Tags
- W3CSS Tag Types
- W3CSS Icons
- W3CSS Responsive
- W3CSS Responsive Classes
- W3CSS Nested Rows
- W3CSS Layout Classes
- W3CSS Animations
- W3CSS Bars
- W3CSS Dropdown
- W3CSS Navigation
- W3CSS Sidebar
- W3CSS Tabs
- W3CSS Pagination
- W3CSS Advanced Pagination
- W3CSS Progressbar
- W3CSS Modal
- W3CSS Modal Advanced
- W3CSS Tooltip
- W3CSS Grid
- W3CSS Grid Advanced
- W3CSS Mixed Grid layouts
- W3CSS Rest, Percentage and Row Padding
- W3CSS Code
- W3CSS Accordion
- W3CSS Effects
- W3CSS Slideshow
W3CSS Responsive
Now a days, people use internet on devices of varying sizes and resolutions. With the advent of tablets and phones of different sizes, web developers have to pay particular attention to how website looks on all of these devices. This is where concept of responsiveness comes to play. A responsive website is the one which adjusts itself to changing size of the screen. For instance a website may display its full menu on large screen, where on small screen it displays a menu button which when clicked displays menu. W3CSS Responsive classes help create responsive website. In this article and some of the next articles we shall study W3CSS Reponsive classes
W3CSS Responsive Classes
Following is the list of W3CSS responsive classes:
- w3-half: Used to cover half width of the window
- w3-third: Used to cover 1/3 of the window
- w3-twothird: Covers 2/3 of the window
- w3-quarter: Covers 1/4 of the window
- w3-threequarter: Covers 3/4 of the widrth window
- w3-rest: Covers rest of the width of the window
- w3-col: Defines the number of columns occupied in the 12 column system.
- w3-mobile: Converts the element to block level on mobile devices.
All of the above classes must be placed in some container class in order to create responsive layouts. The container classes are as follows:
- w3-row: Container for responsive classes with no padding
- w3-row-padding: Container for responsive classes with 8 pixel padding on left and right
- w3-content: This class is used to contain fixed centered content.
- w3-hide-small: Used to hide the element on small screen
- w3-hide-medium: Used to hide the element on medium screen
- w3-hide-large: Used to hide the element on large screens
- l1-l12: Responsive column size for large screens
- m1-m12: Responsive column sizes for medium screens
- s1-s12: Responsive column sizes for small screens
Now we know what are the classes that are used to create responsive layouts in W3CSS. From the next article onwards, we shall see these classes put to practical use. We shall create some amazing responsive layouts in the next article. Stay tuned!