You can’t go back and change the beginning, but you can start where you are and change the ending. – C.S. Lewis
The moral of the quote speaks to the power of personal agency and the capacity for change at any point in one's life. It acknowledges that while the past is immutable, the future is not predetermined and remains within our control to shape. This perspective emphasizes the importance of living in the present and taking proactive steps towards the future we desire. It encourages letting go of past regrets or mistakes, as they cannot be altered, and instead focusing on the present moment where one has the power to make decisions that influence the outcome of their story. The quote serves as a reminder that our current actions and choices are the tools with which we can sculpt a different, perhaps more fulfilling, ending. It's a call to embrace the possibility of transformation and to recognize that no matter where we are in our journey, we always have the opportunity to redirect our path and redefine our destiny.
| Container Classes |
|---|
| Class | Defines |
|---|
| w3-container | HTML container with 16px left and right padding |
| | Used as header |
| | Used as footer |
| w3-panel | HTML container with 16px left and right padding and 16px top and bottom margin |
| | Used to display a note |
| | Used to display a quote |
| w3-badge | Circular badge |
| w3-tag | Rectangular tag |
| w3-ul | Unordered list |
| w3-display-container | Container for w3-display-classes (enables positioning of elements inside the container) |
| w3-code | Code container |
| w3-codespan | Inline code container (for code snippets) |
| w3-example | Deprecated (Use w3-panel instead) |
| w3-progress-container | Deprecated (Use <div> instead) |
| w3-progressbar | Deprecated (Use <div> instead) |
| Card Classes |
|---|
| Class | Defines |
|---|
| w3-card | Same as w3-card-2 |
| w3-card-2 | Container for any HTML content (2px bordered shadow) |
| w3-card-4 | Container for any HTML content (4px bordered shadow) |
| w3-card-8 | Deprecated (Use another card class instead) |
| w3-card-12 | Deprecated (Use another card class instead) |
| w3-card-16 | Deprecated (Use another card class instead) |
| w3-card-24 | Deprecated (Use another card class instead) |
| Responsive Classes |
|---|
| Class | Defines |
|---|
| w3-row | Container for one row of fluid responsive content |
| w3-row-padding | Row where all columns have a default padding |
| w3-content | Container for fixed size centered content |
| w3-half | Half (1/2) screen column container |
| w3-third | Third (1/3) screen column container |
| w3-twothird | Two third (2/3) screen column container |
| w3-quarter | Quarter (1/4) screen column container |
| w3-threequarter | Three quarters (3/4) screen column container |
| w3-col | Column container for any HTML content |
| w3-rest | Occupies the rest of the column width |
| | |
| l1 - l12 | Responsive sizes for large screens |
| m1 - m12 | Responsive sizes for medium screens |
| s1 - s12 | Responsive sizes for small screens |
| | |
| w3-hide-small | Hide content on small screens (less than 601px) |
| w3-hide-medium | Hide content on medium screens |
| w3-hide-large | Hide content on large screens (larger than 992px) |
| | |
| w3-image | Responsive image |
| | |
| w3-mobile | Adds mobile-first responsiveness to any element.
Displays elements as block elements on mobile devices. |
| Layout Classes |
|---|
| Class | Defines |
|---|
| w3-cell-row | Container for layout columns (cells). |
| w3-cell | Layout column (cell). |
| w3-cell-top | Aligns content at the top of a column (cell). |
| w3-cell-middle | Aligns content at the vertical middle of a column (cell). |
| w3-cell-bottom | Aligns content at the bottom of a column (cell). |
| Deprecated Layout Classes |
|---|
| Class | Defines |
|---|
| w3-layout-container | Deprecated (Use w3-cell-row instead) |
| w3-layout-cell | Deprecated (Use w3-cell instead) |
| w3-layout-col | Deprecated (Use w3-mobile instead) |
| w3-layout-top | Deprecated (Use w3-cell-top instead) |
| w3-layout-middle | Deprecated (Use w3-cell-middle instead) |
| w3-layout-bottom | Deprecated (Use w3-cell-bottom instead) |
| Bar - Navigation Classes |
|---|
| Class | Defines |
|---|
| w3-bar | Horizontal bar |
| w3-bar-block | Vertical bar |
| w3-bar-item | Provides common style for bar items |
| w3-sidebar | Side bar |
| | A side bar can contain all types of content |
| | A side bar overlaying main content |
| | A side bar overlaying all main content |
| | A side bar shifting main content to the right |
| | A side bar with an overlay background |
| | A Side bar on the right side |
| w3-collapse | Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class |
| w3-main | Container for page content when using the w3-collapse class for responsive side navigations |
| | Fully automatic right-sided responsive side navigation |
| w3-sidenav | Deprecated (Use w3-sidebar instead) |
| w3-navbar | Deprecated (Use w3-bar instead) |
| w3-navitem | Deprecated (Use w3-bar-item instead) |
| w3-topnav | Deprecated (Use w3-bar instead) |
| w3-navblock | Deprecated (Use w3-bar-block instead) |
| w3-accordion | Deprecated (Use w3-show and w3-hide instead) |
| w3-accordion-content | Deprecated (Use w3-show and w3-hide instead) |
| w3-pagination | Deprecated (Use w3-bar instead) |
| w3-dropnav | Deprecated (Use w3-bar-block instead) |
| Dropdown Classes |
|---|
| Class | Defines |
|---|
| w3-dropdown-hover | Hoverable dropdown element |
| | Hoverable dropdown element (used in w3-bar) |
| | Hoverable dropdown element (used in w3-bar-block) |
| | Hoverable dropdown element (used in w3-sidebar) |
| Button Classes |
|---|
| Class | Defines |
|---|
| w3-button | Grey rectangular button |
| w3-btn | Black rectangular button |
| w3-ripple | Rectangular button with ripple effect |
| | Circular floating button with ripple effect |
| w3-bar | Can be used to group elements (like buttons) in an horizontal bar |
| w3-btn-block | Deprecated (Use w3-button w3-block instead) |
| w3-btn-floating | Deprecated (Use w3-button w3-circle instead) |
| w3-btn-floating-large | Deprecated (Use w3-circle instead) |
| w3-btn-group | Deprecated (Use w3-bar instead) |
| w3-btn-bar | Deprecated (Use w3-bar instead) |
| w3-opennav | Deprecated (Use w3-button instead) |
| w3-closenav | Deprecated (Use w3-button instead) |
| w3-closebtn | Deprecated (Use w3-button instead) |
| Input Classes |
|---|
| Class | Defines |
|---|
| | Input form as a card |
| w3-input | Input elements |
| | Input elements (top labels) |
| | Input elements (bottom labels) |
| w3-check | Checkbox input type |
| w3-radio | Radio input type |
| w3-select | Input select element |
| w3-animate-input | Animates the width of an input to 100% |
| w3-form | Deprecated (Use w3-container or w3-panel instead) |
| w3-group | Deprecated (use w3-section instead) |
| w3-label | Deprecated (Use <label> instead) |
| w3-validate | Deprecated (Use programmed validation instead) |
| Modal Classes |
|---|
| Class | Defines |
|---|
| w3-modal | Modal container |
| w3-modal-content | Modal pop-up element |
| w3-tooltip | Tooltip element |
| w3-text | Tooltip text |
| Animation Classes |
|---|
| Class | Defines |
|---|
| w3-animate-top | Animates an element from the top -300px to 0px |
| w3-animate-left | Animates an element from left -300px to 0px |
| w3-animate-bottom | Animates an element from the bottom -300px to 0px |
| w3-animate-right | Animates an element from right -300px to 0px |
| w3-animate-opacity | Animates an element's opacity from 0 to 1 |
| w3-animate-zoom | Animates an element from 0 to 100% in size |
| w3-animate-fading | Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) |
| w3-spin | Spin an icon 360 degrees |
| | Spin any element 360 degrees |
| w3-animate-input | Animates the width of an input field to 100% |
| Font & Text Classes |
|---|
| Class | Defines |
|---|
| w3-tiny | Specifies a font size of 10 pixels |
| w3-small | Specifies a font size of 12 pixels |
| w3-large | Specifies a font size of 20 pixels |
| w3-xlarge | Specifies a font size of 24 pixels |
| w3-xxlarge | Specifies a font size of 32 pixels |
| w3-xxxlarge | Specifies a font size of 48 pixels |
| w3-jumbo | Specifies a font size of 64 pixels |
| w3-wide | Specifies a wider text |
| w3-serif | Changes the font to serif |
| w3-text-shadow | Deprecated (Use CSS3 instead) |
| w3-slim | Deprecated (Use letter-spacing instead) |
| w3-vertical | Deprecated (Use w3-container or w3-panel instead) |
| Display Classes |
|---|
| Class | Defines |
|---|
| w3-center | Centered content |
| w3-left | Floats an element to the left (float: left) |
| w3-right | Floats an element to the right (float: right) |
| w3-left-align | Left aligned text |
| w3-right-align | Right aligned text |
| w3-justify | Right and left aligned text |
| w3-circle | Circled content |
| w3-hide | Hidden content (display:none) |
| w3-show | Show content (display:block) |
| w3-show-block | Alias of w3-show (display:block) |
| w3-show-inline-block | Show content as inline-block (display:inline-block) |
| w3-top | Fixed content at the top of a page |
| w3-bottom | Fixed content at the bottom of a page |
| w3-display-container | Container for w3-display-classes (position: relative) |
| w3-display-topleft | Displays content at the top left corner of the w3-display-container |
| w3-display-topright | Displays content at the top right corner of the w3-display-container |
| w3-display-bottomleft | Displays content at the bottom left corner of the w3-display-container |
| w3-display-bottomright | Displays content at the bottom right corner of the w3-display-container |
| w3-display-left | Displays content to the left (middle left) of the w3-display-container |
| w3-display-right | Displays content to the right (middle right) of the w3-display-container |
| w3-display-middle | Displays content in the middle (center) of the w3-display-container |
| w3-display-topmiddle | Displays content at the top middle of the w3-display-container |
| w3-display-bottommiddle | Displays content at the bottom middle of the w3-display-container |
| w3-display-position | Displays content at a specified position in the w3-display-container |
| w3-display-hover | Displays content on hover inside the w3-display-container |
| Effect Classes |
|---|
| Class | Defines |
|---|
| w3-opacity | Adds opacity/transparency to an element (opacity: 0.6) |
| | Add opacity/transparency to text |
| w3-opacity-off | Turns off opacity/transparency (opacity: 1) |
| w3-opacity-min | Adds opacity/transparency to an element (opacity: 0.75) |
| w3-opacity-max | Adds opacity/transparency to an element (opacity: 0.25) |
| w3-grayscale-min | Adds a grayscale effect to an element (grayscale: 50%) |
| w3-grayscale | Adds a grayscale effect to an element (grayscale: 75%) |
| w3-grayscale-max | Adds a grayscale effect to an element (grayscale: 100%) |
| w3-sepia-min | Adds a sepia effect to an element (sepia: 50%) |
| w3-sepia | Adds a sepia effect to an element (sepia: 75%) |
| w3-sepia-max | Adds a sepia effect to an element (sepia: 100%) |
| w3-overlay | Creates an overlay effect |
| Background Color Classes |
|---|
| Class | Defines |
|---|
| w3-red | Background color red |
| w3-pink | Background color pink |
| w3-purple | Background color purple |
| w3-deep-purple | Background color deep purple |
| w3-indigo | Background color indigo |
| w3-blue | Background color blue |
| w3-light-blue | Background color light blue |
| w3-cyan | Background color cyan |
| w3-aqua | Background color aqua |
| w3-teal | Background color teal |
| w3-green | Background color green |
| w3-light-green | Background color light green |
| w3-lime | Background color lime |
| w3-sand | Background color sand |
| w3-khaki | Background color khaki |
| w3-yellow | Background color yellow |
| w3-amber | Background color amber |
| w3-orange | Background color orange |
| w3-deep-orange | Background color deep orange |
| w3-blue-grey | Background color blue grey |
| w3-brown | Background color brown |
| w3-light-grey | Background color light grey |
| w3-grey | Background color grey |
| w3-dark-grey | Background color dark grey |
| w3-black | Background color black |
| w3-pale-red | Background color pale red |
| w3-pale-yellow | Background color pale yellow |
| w3-pale-green | Background color pale green |
| w3-pale-blue | Background color pale blue |
| w3-transparent | Transparent background-color |
| Text Color Classes |
|---|
| Class | Defines |
|---|
| w3-text-red | Text color red |
| w3-text-pink | Text color pink |
| w3-text-purple | Text color purple |
| w3-text-deep-purple | Text color deep purple |
| w3-text-indigo | Text color indigo |
| w3-text-blue | Text color blue |
| w3-text-light-blue | Text color light blue |
| w3-text-cyan | Text color cyan |
| w3-text-aqua | Text color aqua |
| w3-text-teal | Text color teal |
| w3-text-green | Text color green |
| w3-text-light-green | Text color light green |
| w3-text-lime | Text color lime |
| w3-text-sand | Text color sand |
| w3-text-khaki | Text color khaki |
| w3-text-yellow | Text color yellow |
| w3-text-amber | Text color amber |
| w3-text-orange | Text color orange |
| w3-text-deep-orange | Text color deep orange |
| w3-text-blue-grey | Text color blue grey |
| w3-text-brown | Text color brown |
| w3-text-light-grey | Text color light grey |
| w3-text-grey | Text color grey |
| w3-text-dark-grey | Text color dark grey |
| w3-text-black | Text color black |
| w3-text-white | Text color white |
| Hover Classes |
|---|
| Class | Defines |
|---|
| w3-hover-white | Hover color white |
| w3-hover-black | Hover color black |
| w3-hover-red | Hover color red |
| w3-hover-blue | Hover color blue |
| w3-hover-green | Hover color green |
| w3-hover-aqua | Hover color aqua |
| w3-hover-orange | Hover color orange |
| w3-hover-grey | Hover color grey |
| w3-hover-pale-green | Hover color pale green |
| | |
| w3-hover-text-red | Hover text color red |
| w3-hover-text-blue | Hover text color blue |
| w3-hover-text-green | Hover text color green |
| w3-hover-text-purple | Hover text color purple |
| | |
| w3-hover-border-color | Hover border color |
| | |
| w3-hover-opacity | Adds transparency to an element on hover (opacity: 0.6) |
| w3-hover-opacity-off | Removes transparency from an element on hover (100% opacity) |
| w3-hover-shadow | Adds shadow to an element on hover |
| w3-hover-grayscale | Adds a black and white (100% grayscale) effect to an element |
| w3-hover-sepia | Adds a sepia effect to an element on hover |
| w3-hover-none | Removes hover effects from an element |
| Round Classes |
|---|
| Class | Defines |
|---|
| w3-round | Element rounded (border-radius) 4px |
| w3-round-small | Element rounded (border-radius) 2px |
| w3-round-medium | Element rounded (border-radius) 4px |
| w3-round-large | Element rounded (border-radius) 8px |
| w3-round-xlarge | Element rounded (border-radius) 16px |
| w3-round-xxlarge | Element rounded (border-radius) 32px |
| w3-round-jumbo | Deprecated (Use w3-round-xxlarge instead) |
| Padding Classes |
|---|
| Class | Defines |
|---|
| w3-padding-small | Padding 4px top and bottom, and 8px left and right. |
| w3-padding | Padding 8px top and bottom, and 16px left and right. |
| w3-padding-large | Padding 12px top and bottom, and 24px left and right. |
| w3-padding-16 | Padding 16px top and bottom |
| w3-padding-24 | Padding 24px top and bottom |
| w3-padding-32 | Padding 32px top and bottom |
| w3-padding-48 | Padding 48px top and bottom |
| w3-padding-64 | Padding 64px top and bottom |
| w3-padding-tiny | Deprecated (Use CSS padding instead) |
| w3-padding-medium | Deprecated (Use w3-padding instead). |
| w3-padding-xlarge | Deprecated (Use CSS padding instead) |
| w3-padding-xxlarge | Deprecated (Use CSS padding instead) |
| w3-padding-jumbo | Deprecated (Use CSS padding instead) |
| w3-padding-4 | Deprecated (Use CSS padding instead) |
| w3-padding-8 | Deprecated (Use CSS padding instead) |
| w3-padding-12 | Deprecated (Use CSS padding instead) |
| w3-padding-128 | Deprecated (Use CSS padding instead) |
| w3-padding-0 | Deprecated (Use CSS padding:0 instead) |
| w3-padding-left | Deprecated (Use CSS padding-left instead) |
| w3-padding-right | Deprecated (Use CSS padding-right instead) |
| w3-padding-top | Deprecated (Use CSS padding-top instead) |
| w3-padding-bottom | Deprecated (Use CSS padding-bottom instead) |
| Margin Classes |
|---|
| Class | Defines |
|---|
| w3-margin | Adds an 16px margin to an element |
| w3-margin-top | Adds an 16px top margin to an element |
| w3-margin-right | Adds an 16px right margin to an element |
| w3-margin-bottom | Adds an 16px bottom margin to an element |
| w3-margin-left | Adds an 16px left margin to an element |
| w3-section | Adds an 16px top and bottom margin to an element |
| w3-margin-0 | Deprecated (Use CSS margin:0 instead) |
| Border Classes |
|---|
| Class | Defines |
|---|
| w3-border | Borders (top, right, bottom, left) |
| w3-border-top | Border top |
| w3-border-right | Border right |
| w3-border-bottom | Border bottom |
| w3-border-left | Border left |
| w3-border-0 | Removes all borders |
| w3-border-color | Displays any defined borders in a specified color (like red, etc) |
| w3-bottombar | Adds a thick bottom border (bar) to an element |
| w3-leftbar | Adds a thick left border (bar) to an element |
| w3-rightbar | Adds a thick right border (bar) to an element |
| w3-topbar | Adds a thick top border (bar) to an element |
| w3-hover-border-color | Hoverable border color |
