\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{Rajab Natshah (Natshah)}
\pdfinfo{
  /Title (thinking-in-bootstrap-4-theming-with-vartheme-bs4.pdf)
  /Creator (Cheatography)
  /Author (Rajab Natshah (Natshah))
  /Subject (Thinking in Bootstrap 4, theming with Vartheme BS4 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}{008ECF}
\definecolor{LightBackground}{HTML}{EFF7FC}
\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{Thinking in Bootstrap 4, theming with Vartheme BS4 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Rajab Natshah (Natshah)} via \textcolor{DarkBackground}{\uline{cheatography.com/102761/cs/21236/}}}
\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}Rajab Natshah (Natshah) \\
  \uline{cheatography.com/natshah} \\
        \uline{\seqsplit{natshah}.com}
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 26th November, 2019.\\
   Updated 30th November, 2019.\\
   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*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Mapping Bootstrap 3 into Bootstrap 4}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/natshah_1574769551_Mapping-Bootstrap3-into-Bootstrap4.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.18988 cm} x{2.78712 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Varbase Media Mapping responsive images}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Bootstrap 3}} & {\bf{Bootstrap 4}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\bf{XS}} max ( \textless{} 768px ) & {\bf{SM}} max ( \textless{} {\bf{767.98px}} ) \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
{\bf{SM}} min ( \textgreater{}= 768px ) & {\bf{MD}} min ( \textgreater{}= 768px ) \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
{\bf{MD}} min ( \textgreater{}=992px ) & {\bf{LG}} min ( \textgreater{}= 992px ) \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
{\bf{LG}} min ( \textgreater{}=1200px ) & {\bf{XL}} min ( \textgreater{}= 1200px ) \tn 
% Row Count 9 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Bootstrap 3 Breakpoints}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/natshah_1574770080_Bootstrap3-Breakpoints.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Bootstrap 4 Breakpoints}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/natshah_1574770136_Bootstrap4-Breakpoints.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Shifted Bootstrap 4 Breakpoints}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/natshah_1574770165_Bootstrap-4-Breakpoints.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Image classes in Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Bootstrap 3}} & {\bf{Bootstrap 4}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
.img-responsive & .img-fluid \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
.img-circle & .rounded-circle \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
.img-rounded & .rounded \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.38896 cm} x{2.58804 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Directions in Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Bootstrap 3}} & {\bf{Bootstrap 4}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
.pull-right & .float-right \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
.pull-left & .float-left \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.74195 cm} x{3.23505 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Visibility classes in Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Bootstrap 3}} & {\bf{Bootstrap 4}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{.hidden-xs}} & {\bf{.d-none}} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
.hidden-sm & .d-sm-none \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
.hidden-md & .d-md-none \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
.hidden-lg & .d-lg-none \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
{\bf{.visible-xs}} & {\bf{.d-block.d-sm-none}} \tn 
% Row Count 8 (+ 2)
% Row 6
\SetRowColor{LightBackground}
.visible-sm & \seqsplit{.d-none.d-sm-block.d-md-none} \tn 
% Row Count 10 (+ 2)
% Row 7
\SetRowColor{white}
.visible-md & \seqsplit{.d-none.d-md-block.d-lg-none} \tn 
% Row Count 12 (+ 2)
% Row 8
\SetRowColor{LightBackground}
.visible-lg & \seqsplit{.d-none.d-lg-block.d-xl-none} \tn 
% Row Count 14 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.33919 cm} x{2.63781 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Form elements in Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Bootstrap 3}} & {\bf{Bootstrap 4}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\bf{.btn-default}} & {\bf{.btn-secondary}} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
.form-horizontal & \textasciitilde{}\textasciitilde{}(removed)\textasciitilde{}\textasciitilde{} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
{\bf{.radio}} & {\bf{.form-check}} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
{\bf{.checkbox}} & {\bf{.form-check}} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
.input-lg & .form-control-lg \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
.input-sm & .form-control-sm \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
.control-label & .col-form-label \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
.help-block & .form-text \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
.label & .badge \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
.tooltip & .bs-tooltip \tn 
% Row Count 11 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.93643 cm} x{2.04057 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Table and page in Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Bootstrap 3}} & {\bf{Bootstrap 4}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
.table-condensed & .table-sm \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
.pagination \textgreater{} li & .page-item \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
.pagination \textgreater{} li \textgreater{} a & .page-link \tn 
% Row Count 4 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.79172 cm} x{3.18528 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Panel to Card in Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Bootstrap 3}} & {\bf{Bootstrap 4}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{.panel}} & {\bf{.card}} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{.panel-heading} & .card-header \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
.panel-title & .card-title \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
.panel-body & .card-body \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
.panel-footer & .card-footer \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{.panel-primary} & \seqsplit{.card.bg-primary.text-white} \tn 
% Row Count 9 (+ 2)
% Row 7
\SetRowColor{white}
\seqsplit{.panel-success} & \seqsplit{.card.bg-success.text-white} \tn 
% Row Count 11 (+ 2)
% Row 8
\SetRowColor{LightBackground}
.panel-info & .card.text-white.bg-info \tn 
% Row Count 12 (+ 1)
% Row 9
\SetRowColor{white}
\seqsplit{.panel-warning} & .card.bg-warning \tn 
% Row Count 13 (+ 1)
% Row 10
\SetRowColor{LightBackground}
.panel-danger & \seqsplit{.card.bg-danger.text-white} \tn 
% Row Count 15 (+ 2)
% Row 11
\SetRowColor{white}
{\bf{.well}} & {\bf{.card.card-body}} \tn 
% Row Count 16 (+ 1)
% Row 12
\SetRowColor{LightBackground}
.thumbnail & .card.card-body \tn 
% Row Count 17 (+ 1)
% Row 13
\SetRowColor{white}
{\bf{.item}} & {\bf{.carousel-item}} \tn 
% Row Count 18 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{A tool to help convert to Bootstrap 4 \newline https://upgrade-bootstrap.bootply.com}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Created by Vardot}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/natshah_1574776504_vardot-logo.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{http://www.vardot.com}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{New CSS classes with Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.d-flex} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.no-gutter} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.toast} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.d-print-*} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.spinner-border} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.bg-*     with colors for background} \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.d-*   many variants to display} \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.embed-responsive-21by9} \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.embed-responsive-1by1} \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.justify-content-*   for start, end, center ... with flex} \tn 
% Row Count 11 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.shadow} \tn 
% Row Count 12 (+ 1)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{.row-cols}} classes for quickly specifying the number of columns across breakpoints. This one is huge for those of you who have asked for responsive card decks.} \tn 
% Row Count 16 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Text Display size in Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{display-1} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{display-2} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{display-3} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{display-4} \tn 
% Row Count 4 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Orders in Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.order-first} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.order-last} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.order-0} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.order-1} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.order-2} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.order-3} \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.order-4} \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.order-5} \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.order-6} \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.order-7} \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.order-8} \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.order-9} \tn 
% Row Count 12 (+ 1)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.order-10} \tn 
% Row Count 13 (+ 1)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.order-11} \tn 
% Row Count 14 (+ 1)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.order-12} \tn 
% Row Count 15 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Add sm, md, lg, xl to change order with responsive}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Printing}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.d-print-{\emph{ The class would overrule any other .d-}} class.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{They are the same as the screen display} \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Removed from Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Glyph icons Halflings ( No icon libraries )} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.74195 cm} x{3.23505 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Buttons in Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
Primary & btn btn-primary \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Secondary & btn btn-secondary \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
Success & btn btn-success \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
Danger & btn btn-danger \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
Warning & btn btn-warning \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
Info & btn btn-info \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
Light & btn btn-light \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
{\bf{Dark}} & {\bf{btn btn-dark}} \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
{\bf{Link}} & {\bf{btn btn-link}} \tn 
% Row Count 9 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{{\bf{Dark}} and {\bf{Light}} are new, they cascaded in all BS4 components CSS classes}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Border and Rounded in Bootstrap 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.border} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.border-left} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.border-right} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.border-top} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.border-bottom} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{.border-0}} reset borders} \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.border-top-0} \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.border-right-0} \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.border-bottom-0} \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.border-left-0} \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.rounded} \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.rounded-top} \tn 
% Row Count 12 (+ 1)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.rounded-right} \tn 
% Row Count 13 (+ 1)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.rounded-bottom} \tn 
% Row Count 14 (+ 1)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.rounded-left} \tn 
% Row Count 15 (+ 1)
% Row 15
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.rounded-sm} \tn 
% Row Count 16 (+ 1)
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.rounded-lg} \tn 
% Row Count 17 (+ 1)
% Row 17
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{.rounded-circle} \tn 
% Row Count 18 (+ 1)
% Row 18
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{.rounded-pill} \tn 
% Row Count 19 (+ 1)
% Row 19
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{.rounded-0}} reset rounding} \tn 
% Row Count 20 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Changed in Vartheme BS4}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Vartheme BS3}} & {\bf{Vartheme BS4}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
bootstrap-print & Bootstrap 4 Print classes d-print-* \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{bootstrap-no-spacing} & Bootstrap 4 Spacing classes m, p \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
Varbase Bootstrap Paragraphs colors & Varbase Bootstrap Paragraphs colors \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
.bg-edge2edge & .bg-edge2edge \tn 
% Row Count 8 (+ 1)
% Row 5
\SetRowColor{white}
.bs-callout & .bs-callout \tn 
% Row Count 9 (+ 1)
% Row 6
\SetRowColor{LightBackground}
.vb-tags & .vb-tags \tn 
% Row Count 10 (+ 1)
% Row 7
\SetRowColor{white}
.equal-height & .equal-height \tn 
% Row Count 11 (+ 1)
% Row 8
\SetRowColor{LightBackground}
Custom BS3 card component & Bootstrap 4 Card classes \tn 
% Row Count 13 (+ 2)
% Row 9
\SetRowColor{white}
Bootstrap-RTL & Minimal RTL with Bootstrap4 \tn 
% Row Count 15 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{New with Vartheme BS4}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Responsive Font Sizes (RFS)} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/rfs}} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Use the front-size() mixin} \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Do not use \newline {\bf{font-size: 18px;}} \newline use \newline {\bf{font-size(18px);}} \newline  \newline https://github.com/twbs/rfs/blob/v10/scss.scss}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Do not use with Vartheme BS4}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Not to use any old Bootstrap 3 classes \newline % Row Count 1 (+ 1)
Some of them will work, but they are for old sites only.% Row Count 3 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/Vardot/vartheme\_bs4/blob/8.x-6.x/scss/aliases.scss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Bootstrap 4 resource}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Default CSS build Bootstrap 4}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/dist/css/bootstrap.css}} \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Default SCSS variables}}} \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/\_variables.scss}} \tn 
% Row Count 6 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Default SCSS mixins}}} \tn 
% Row Count 7 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/\_mixins.scss}} \tn 
% Row Count 9 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Bootstrap 3 resources}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Default CSS build Bootstrap 3}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v3.4.1/dist/css/bootstrap.css}} \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Default LESS variables}}} \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v3.4.1/less/variables.less}} \tn 
% Row Count 6 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Default LESS mixins}}} \tn 
% Row Count 7 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v3.4.1/less/mixins.less}} \tn 
% Row Count 9 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Breakpoint sizes}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{breakpoint-next}} : Name of the next breakpoint, or null for the last breakpoint.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{breakpoint-min}} : Minimum breakpoint width. Null for the smallest (first) breakpoint.} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{breakpoint-max}} : Maximum breakpoint width. Null for the largest (last) breakpoint.} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{breakpoint-infix}} : Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. Useful for making responsive utilities.} \tn 
% Row Count 10 (+ 4)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{media-breakpoint-up}} : Media of at least the minimum breakpoint width. No query for the smallest breakpoint.} \tn 
% Row Count 13 (+ 3)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{media-breakpoint-down}} : Media of at most the maximum breakpoint width. No query for the largest breakpoint.} \tn 
% Row Count 16 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{media-breakpoint-between}} : Media that spans multiple breakpoint widths.} \tn 
% Row Count 18 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{media-breakpoint-only}} : Media between the breakpoint's minimum and maximum widths.} \tn 
% Row Count 20 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Breakpoint viewport sizes and media queries. \newline Breakpoints are defined as a map of (name: minimum width), order from small to large: \newline (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) \newline The map defined in the `\$grid-breakpoints` global variable is used as the `\$breakpoints` argument by default. \newline https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_breakpoints.scss}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Clearfix}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{clearfix} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Use this mixin, do not redo that in each needed calls, just call the mixin \newline https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_clearfix.scss}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Border radius}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{border-radius(\$radius: \$border-radius, \seqsplit{\$fallback-border-radius:} false)} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{border-top-radius(\$radius)}} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{border-right-radius(\$radius)}} \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{border-bottom-radius(\$radius)}} \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{border-left-radius(\$radius)}} \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{border-top-left-radius(\$radius)}} \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{border-top-right-radius(\$radius)}} \tn 
% Row Count 8 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{border-bottom-right-radius(\$radius)}} \tn 
% Row Count 9 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{border-bottom-left-radius(\$radius)}} \tn 
% Row Count 10 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_border-radius.scss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Gradients}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{gradient-bg(\$color)} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{gradient-x}} : Horizontal gradient, from left to right} \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Creates two color stops, start and end, by specifying a color and position for each color stop.} \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{gradient-y}} : Vertical gradient, from top to bottom} \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Creates two color stops, start and end, by specifying a color and position for each color stop.} \tn 
% Row Count 9 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{gradient-directional} \tn 
% Row Count 10 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{gradient-x-three-colors} \tn 
% Row Count 11 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{gradient-y-three-colors} \tn 
% Row Count 12 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{gradient-radial} \tn 
% Row Count 13 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{gradient-striped} \tn 
% Row Count 14 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_gradients.scss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Box Shadow}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{box-shadow(\$shadow...)} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_box-shadow.scss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Hover}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{hover} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{hover-focus} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{plain-hover-focus} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{hover-focus-active} \tn 
% Row Count 4 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_hover.scss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.78712 cm} x{2.18988 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Background variant}}  \tn
% Row 0
\SetRowColor{LightBackground}
bg-variant & \$parent, \$color \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
bg-gradient-variant & \$parent, \$color \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Contextual backgrounds \newline https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_background-variant.scss}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.59264 cm} x{3.38436 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Alert}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{alert-variant} & \$background, \$border, \$color \tn 
% Row Count 2 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_alert.scss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{4.03137 cm} p{0.94563 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Badge}}  \tn
% Row 0
\SetRowColor{LightBackground}
badge-variant & \$bg \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_badge.scss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Button variants}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{button-variant} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{button-outline-variant} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{button-size} \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_buttons.scss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Caret}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{caret(\$direction: down)} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{caret-down} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{caret-up} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{caret-right} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{caret-left} \tn 
% Row Count 5 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_caret.scss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Created by Vardot}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/natshah_1574776504_vardot-logo.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{http://www.vardot.com}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Form control state}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{form-control-focus} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{form-validation-state} \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_forms.scss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Deprecate}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{deprecate(\$name, \$deprecate-version, \$remove-version, \$ignore-warning: false)% Row Count 2 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{This mixin can be used to deprecate mixins or functions. \newline `\$enable-deprecation-messages` is a global variable, `\$ignore-warning` is a variable that can be passed to \newline some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) \newline https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_deprecate.scss}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.89126 cm} x{3.08574 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Image}}  \tn
% Row 0
\SetRowColor{LightBackground}
img-fluid & Responsive image \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
img-retina & Retina image \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.89126 cm} x{3.08574 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Utility Mixines : Resizable}}  \tn
% Row 0
\SetRowColor{LightBackground}
resizable & Resize anything \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/\_resize.scss\#L3}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}