\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Bikathi Martin}
\pdfinfo{
  /Title (w3-css.pdf)
  /Creator (Cheatography)
  /Author (Bikathi Martin)
  /Subject (W3.CSS Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{926E99}
\definecolor{LightBackground}{HTML}{F8F5F8}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{W3.CSS Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Bikathi Martin} via \textcolor{DarkBackground}{\uline{cheatography.com/146580/cs/31733/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Bikathi Martin \\
  \uline{cheatography.com/bikathi-martin} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 3rd June, 2022.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{x{2.96 cm} x{5.04 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3-Colors}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-\{color\}` & Background for any HTML element \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
`w3-text-\{color\}` & Text (foreground color) for a HTML element \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
`w3-hover-\{color\}` & {\bf{Background}} color on-hover for any element \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
`w3-hover-text-\{color\}` & {\bf{Text}} (foreground) color on-hover for an element \tn 
% Row Count 10 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{By default, W3 uses {\bf{Material UI}} colors for its color scheme. This can be changed to use other schemes like Windows colors, Fashion colors, Highway colors etc.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3-Borders}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-border` & Add a border on all sides of an element \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
`w3-border-\{side\}` (`top`, `right`, `bottom`, `left`) & Add a border to a specific side of an element \tn 
% Row Count 6 (+ 3)
% Row 3
\SetRowColor{white}
`w3-border-\{color\}` & Give border a specific color \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
`w3-hover-border-\{color\}` & Border display color on mouse hover \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
`w3-\{side\}bar` (`left` `bottom`, `right`, `top`) & Give the border a thick bar on the specified side \tn 
% Row Count 13 (+ 3)
% Row 6
\SetRowColor{LightBackground}
`w3-round-\{size\}` (`small`, `no-size`, `medium`, `large`, `xlarge`, `xxlarge`) & Round corners of a border \tn 
% Row Count 17 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{For a border to be more visible, add a contrasting background color to the element.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3-Cards}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-card-\{shadow size\}` (`no-size`, `2` (2px shadow size), `4` (4px shadow size)) & Make a card with the specified shadow size \tn 
% Row Count 6 (+ 5)
% Row 2
\SetRowColor{LightBackground}
`w3-hover-shadow` & Add a shadow effect (4px exact) when you hover over a card \tn 
% Row Count 9 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{To color the background of a card, use the `w3-\{color\}` class.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3-Round}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-round` & Adds a `border-radius` of 4 around an element. \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
`w3-round-\{size\}` (`small`, `medium`, `large`, `xlarge`, `xxlarge`) & Adds `border-radius` of 2, 4, 8, 16 and 32 respectively around an element. \tn 
% Row Count 8 (+ 4)
% Row 3
\SetRowColor{white}
`w3-circle` & Displays any content inside a circle. \tn 
% Row Count 10 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{This property simply adds rounded corners to any HTML element. You can use the `w3-circle` class along with `w3-padding` to provide some padding around the element from the circle borders.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3-Margin}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-margin` & Adds a 16px margin to all sides of an element. \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
`w3-margin-\{side\}` (`top`, `right`, `bottom`, `left`) & Adds a 16px margin to the specified side of an element. \tn 
% Row Count 7 (+ 3)
% Row 3
\SetRowColor{white}
`w3-section` & Adds a 16px margin to the top and bottom of an element. \tn 
% Row Count 10 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The `w3-section` class exists because by default HTML elements do not have a top and bottom margin around them.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3 Buttons}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-btn` & Creates a rectangular, {\bf{black}} by default, button with {\emph{shadow on hover}}. \tn 
% Row Count 5 (+ 4)
% Row 2
\SetRowColor{LightBackground}
`w3-button` & Creates a rectangular button with a {\emph{grey hover}} effect. \tn 
% Row Count 8 (+ 3)
% Row 3
\SetRowColor{white}
`w3-bar` & A horizontal bar that can be used to group buttons together e.g in horizontal menus. Use it as a container for buttons. You can center the buttons using the `w3-center` class. \tn 
% Row Count 17 (+ 9)
% Row 4
\SetRowColor{LightBackground}
`w3-block` & A block defines a full width ({\bf{100\% container width}}) button. \tn 
% Row Count 21 (+ 4)
% Row 5
\SetRowColor{white}
`w3-circle` & Can be used to create a circular button. \tn 
% Row Count 23 (+ 2)
% Row 6
\SetRowColor{LightBackground}
`w3-ripple` & Can be used to create a ripple (blink) effect when a button is clicked. \tn 
% Row Count 27 (+ 4)
% Row 7
\SetRowColor{white}
`w3-\{color\}` & Used to color the background of the button. \tn 
% Row Count 30 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3 Buttons (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
`w3-hover-\{color\}` & Used to change the background color on hover. \tn 
% Row Count 3 (+ 3)
% Row 9
\SetRowColor{white}
`w3-round-\{size\}` (`{\emph{normal}} (w3-round)`,`large`, `xlarge`, `xxlarge`) & Used to add round borders to a button. \tn 
% Row Count 7 (+ 4)
% Row 10
\SetRowColor{LightBackground}
`w3-\{size\}` (`tiny`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge`, `jumbo`) & Used to define size of text in the button. \tn 
% Row Count 12 (+ 5)
% Row 11
\SetRowColor{white}
`w3-border` & Used to add borders to a button. \tn 
% Row Count 14 (+ 2)
% Row 12
\SetRowColor{LightBackground}
`w3-border-\{color\}` & Used to define the color of the border around a button. Can be used with `w3-round-\{size\}` to add rounding to the border. \tn 
% Row Count 21 (+ 7)
% Row 13
\SetRowColor{white}
`w3-wide` & Can be used to add {\bf{wide-text}} effect to text in the button. \tn 
% Row Count 25 (+ 4)
% Row 14
\SetRowColor{LightBackground}
`w3-padding-\{size\}` (`small`, `large`) & Can be used to add padding around the text in the button. \tn 
% Row Count 28 (+ 3)
% Row 15
\SetRowColor{white}
`w3-\{side\}-align` (`left`, `right`) & Can be used to align the text in the button. \tn 
% Row Count 31 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3 Buttons (cont)}}  \tn
% Row 16
\SetRowColor{LightBackground}
`w3-disabled` & Can be used to make a disabled button. The mouse changes to a  {\bf{no entry}} sign, and clicking does nothing. \tn 
% Row Count 6 (+ 6)
% Row 17
\SetRowColor{white}
`w3-\{side\}` (`left`, `right`) & Used to float the button to the left or right of the {\bf{bar}}. \tn 
% Row Count 10 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The `w3-button` {\bf{inherits}} its default color from the parent element in w3CSS V4, and is {\bf{light-gray}} by default in V3. To add italics or bolding to a text, you can wrap the text around the appropriate tag e.g `\textless{}button class="w3-button"\textgreater{}{\bf{\textless{}i\textgreater{}Italic\textless{}/i\textgreater{}}}\textless{}/button\textgreater{}`. You can use `style=width: 80\%` to change the width of the button in the parent container.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.44 cm} x{4.56 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3 Quotes}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.32 cm} x{5.68 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3-Containers}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\seqsplit{`w3-container`} & Add a container class to an element \tn 
% Row Count 3 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Containers}} (e.g `\textless{}div\textgreater{}`, `\textless{}article\textgreater{}`, `\textless{}section\textgreater{}`, `\textless{}header\textgreater{}`)provide equality i.e common margins, padding, alignments, font colors etc to all HTML container elements. \newline The {\bf{w3-container}} class specifically adds a {\bf{16px left and right padding}} to any HTML element, but {\bf{no top and bottom padding}}. Use it with containers. So paragraphs and headings provide margins that help with this.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3-Panels}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-panel` & Add a panel to an element \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
`w3-\{pale background color\}` & Use a panel as a note area \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
`w3-leftbar`, `w3-rightbar` & Use a panel for quotes \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
`w3-card-\{shadow size\}` (no-shadow, `2` (2px shadow), `4` (4px shadow)) & Use a panel as a card (like a flash card) \tn 
% Row Count 11 (+ 4)
% Row 5
\SetRowColor{white}
`w3-round-\{size\}` (`small`, `medium`, `large`, `xlarge`, `xxlarge`) & Round corners of a panel \tn 
% Row Count 15 (+ 4)
% Row 6
\SetRowColor{LightBackground}
`w3-\{size\}` (`tiny`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge`, `jumbo`) & Set size of the panel \tn 
% Row Count 20 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{A {\bf{panel}} is like a container, but it {\bf{adds a 16px top and bottom margin}} to the initial 16px left and right provided by a container. To use {\bf{panels for notes}}, add a pale background e.g `w3-pale-green`. \newline To use a {\bf{panel for quotes}}, give it a left bar or a right bar a size, and serif font. Panels can also be {\bf{used as cards}} by adding it to the `W3-Card(s)` classes. See that section for more details.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3-Fonts}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-\{font-family\}` (`serif`, `sans-serif`, `monospace`, `cursive`) & Make a text font same as the specified family font \tn 
% Row Count 5 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.76 cm} x{4.24 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3-Text}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-\{side\}-align` (`left`, `right`) & Align text to the left or right \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
`w3-center` & Center align elements (including text) \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
`w3-wide` & Specify wider text \tn 
% Row Count 6 (+ 1)
% Row 4
\SetRowColor{LightBackground}
`w3-opacity` & Give opacity to text. Intensity depends on the color used \tn 
% Row Count 9 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3-Padding}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-padding-\{number\}` (`16`, `24`, `32`, `48`, `64`) & Adds a top and bottom padding to any HTML element. \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
`w3-padding` & Adds an 8px top and bottom and 16px left and right padding. \tn 
% Row Count 7 (+ 3)
% Row 3
\SetRowColor{white}
`w3-padding-small` & Adds a 4px top and bottom and 8px left and right padding. \tn 
% Row Count 10 (+ 3)
% Row 4
\SetRowColor{LightBackground}
`w3-padding-large` & Adds a 12px top and bottom and 24px left and right padding. \tn 
% Row Count 13 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The number defines the intensity of the padding.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3 Display}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\seqsplit{`w3-display-container`} & Container for `w3-display-{\emph{classes}}` \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{`w3-display-topleft`} & Display elements in top left of display container. \tn 
% Row Count 6 (+ 3)
% Row 3
\SetRowColor{white}
\seqsplit{`w3-display-topright`} & Display elements in top right of display container. \tn 
% Row Count 9 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{`w3-display-bottomleft`} & Display elements in bottom left of display container. \tn 
% Row Count 12 (+ 3)
% Row 5
\SetRowColor{white}
\seqsplit{`w3-display-bottomright`} & Display elements in bottom right of display container. \tn 
% Row Count 15 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{`w3-display-left`} & Display elements in the left of display container. \tn 
% Row Count 18 (+ 3)
% Row 7
\SetRowColor{white}
\seqsplit{`w3-display-right`} & Display elements in the right of display container. \tn 
% Row Count 21 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{`w3-display-middle`} & Display elements in the middle of display container. \tn 
% Row Count 24 (+ 3)
% Row 9
\SetRowColor{white}
\seqsplit{`w3-display-topmiddle`} & Display elements in top middle of display container. \tn 
% Row Count 27 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\seqsplit{`w3-display-bottommiddle`} & Display elements in bottom middle of display container. \tn 
% Row Count 30 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3 Display (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
\seqsplit{`w3-display-position`} & Display elements in the specified position in the display container. \tn 
% Row Count 3 (+ 3)
% Row 12
\SetRowColor{white}
\seqsplit{`w3-display-hover`} & Display contents {\bf{on hover}} inside the display container. \tn 
% Row Count 6 (+ 3)
% Row 13
\SetRowColor{LightBackground}
`w3-left` & Float an element to the left (`float: left;`) \tn 
% Row Count 8 (+ 2)
% Row 14
\SetRowColor{white}
`w3-right` & Float an element to the left (`float: right;`) \tn 
% Row Count 10 (+ 2)
% Row 15
\SetRowColor{LightBackground}
`w3-show` & Shows an element (`display: block;`) \tn 
% Row Count 12 (+ 2)
% Row 16
\SetRowColor{white}
`w3-hide` & Hide an element (`display: none;`) \tn 
% Row Count 14 (+ 2)
% Row 17
\SetRowColor{LightBackground}
`w3-mobile` & Adds mobile-first responsiveness to any element. \tn 
% Row Count 16 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Display classes}} allow you to display HTML elements in specific positions inside other HTML elements. They however must be placed in the `w3-display-container` container. The `w3-mobile` class displays elements as {\bf{block elements}} on mobile devices (By adding `display:block` and `width:100\%;` to an element on screen sizes less than {\bf{600px}} wide).}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{W3 Notes}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Class}} & {\bf{Use Case}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`w3-panel` & The perfect class to display notes and information. The panel by default {\bf{has no border.}} \tn 
% Row Count 6 (+ 5)
% Row 2
\SetRowColor{LightBackground}
`w3-\{side\}-bar` (`left`, `right`, `w3-bottombar`, `w3-topbar`) & Used to add side bar to the note (panel), The bar becomes a border for the panel. \tn 
% Row Count 11 (+ 5)
% Row 3
\SetRowColor{white}
`w3-border-\{color\}` & You can use this to color the border (bar) from above. \tn 
% Row Count 14 (+ 3)
% Row 4
\SetRowColor{LightBackground}
`w3-pale-\{color\}` & Use a pale background color to make the note more catchy. \tn 
% Row Count 17 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Use `w3-border` to add a border around the note (panel) converse to using `w3-bar`.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}