\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{LiezelN} \pdfinfo{ /Title (bootstrap-5-3-2023.pdf) /Creator (Cheatography) /Author (LiezelN) /Subject (Bootstrap 5.3 (2023) 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}{2C7FA3} \definecolor{LightBackground}{HTML}{F1F7F9} \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{Bootstrap 5.3 (2023) Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{LiezelN} via \textcolor{DarkBackground}{\uline{cheatography.com/69317/cs/17476/}}} \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}LiezelN \\ \uline{cheatography.com/liezeln} \\ \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}} \\ \vspace{-2pt}Published 16th October, 2018.\\ Updated 2nd October, 2023.\\ 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*}{4} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Alert messages}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{alert} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{alert-* (primary, secondary, success, info, warning, dark, light, link)} \tn % Row Count 3 (+ 2) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{alert-dismissible} \tn % Row Count 4 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{alert-link} \tn % Row Count 5 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{btn-close} \tn % Row Count 6 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Breadcrumbs}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{breadcrumb} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{breadcrumb-item} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{active} \tn % Row Count 3 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Buttons}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{btn} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{btn-* \{\{nl\}\}(primary, secondary, success, info, warning, dark, light, link)} \tn % Row Count 3 (+ 2) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{btn-outline-* \{\{nl\}\}(primary, secondary, success, info, warning, danger, dark, light)} \tn % Row Count 5 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Button Modifiers}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{btn-lg} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{btn-sm} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{btn-group} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{btn-toolbar} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{btn-group-* (lg, sm)} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{btn-group-vertical} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{d-grid} \tn % Row Count 7 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Cards}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{card} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{card-img-top} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{card-body} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{card-title} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{card-subtitle} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{card-text} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{card-link} \tn % Row Count 7 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Carousel}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{carousel} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{slide} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{carousel-fade} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{carousel-inner} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{carousel-item} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{carousel-item active} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{carousel-caption} \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{carousel-control-prev} \tn % Row Count 8 (+ 1) % Row 8 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{\seqsplit{carousel-control-prev-icon}} \tn % Row Count 9 (+ 1) % Row 9 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{carousel-control-next} \tn % Row Count 10 (+ 1) % Row 10 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{\seqsplit{carousel-control-next-icon}} \tn % Row Count 11 (+ 1) % Row 11 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{carousel-indicators} \tn % Row Count 12 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Colour/Context}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{text-* \{\{nl\}\}(primary, secondary, success, danger, warning, info, light, dark, body, muted, white)} \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{bg-* OR text-bg-* \{\{nl\}\}(primary, secondary, success, danger, warning, info, light, dark, white, transparent)} \tn % Row Count 5 (+ 3) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{border OR \{\{nl\}\}border-* (top, end, bottom, start)} \tn % Row Count 6 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{border-* \{\{nl\}\}(primary, secondary, success, danger, warning, info, light, dark, white)} \tn % Row Count 8 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Display/Position}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{float-start} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{float-end} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{d-block} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{d-inline} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{d-none} \tn % Row Count 5 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Dropdowns}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{dropdown} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{dropdown-toggle} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{dropdown-menu} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{dropdown-item} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{dropdown-item disabled} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{dropdown-header} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{dropdown-divider} \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{dropup} \tn % Row Count 8 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Forms}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{form-label} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{form-control} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{form-check} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{form-check-label} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{form-check-input} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{form-control-sm} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{form-control-lg} \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{form-select} \tn % Row Count 8 (+ 1) % Row 8 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{col-form-label} \tn % Row Count 9 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Grid}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{container} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{container-fluid} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{row} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{col} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{col-\# (\textless{} 576px)} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{col-sm-\# (\textgreater{}= 576px)} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{col-md-\# (\textgreater{}= 768px)} \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{col-lg-\# (\textgreater{}= 992px)} \tn % Row Count 8 (+ 1) % Row 8 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{col-xl-\# (\textgreater{}= 1200px)} \tn % Row Count 9 (+ 1) % Row 9 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{col-xxl-\# (\textgreater{}= 1400px} \tn % Row Count 10 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Images}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{img-fluid} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{rounded} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{rounded-* (top, end, bottom, start, circle)} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{img-thumbnail} \tn % Row Count 4 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{List groups}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{list-group} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{list-group-numbered} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{list-group-item} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{active} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{disabled} \tn % Row Count 5 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Navs}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{nav} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{nav-item} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{nav-link} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{nav-link active} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{nav-link disabled} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{nav-pills} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{nav-tabs} \tn % Row Count 7 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Nav alignment}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{nav-fill} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{justify-content-center} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{justify-content-end} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{flex-column} \tn % Row Count 4 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Navbar}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{navbar} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{navbar-expand-*\{\{nl\}\} (sm, md, lg, xl,xxl)} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{navbar-nav} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{navbar-brand} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{navbar-text} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{collapse} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{navbar-collapse} \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{navbar-toggler} \tn % Row Count 8 (+ 1) % Row 8 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{navbar-toggler-icon} \tn % Row Count 9 (+ 1) % Row 9 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{fixed-top} \tn % Row Count 10 (+ 1) % Row 10 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{fixed-bottom} \tn % Row Count 11 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Navbar (attributes for JavaScript plugins)}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{\seqsplit{data-bs-toggle="collapse"}} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{data-bs-target="\#*" (* - ID of collapsable content)} \tn % Row Count 3 (+ 2) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{data-bs-theme="dark"} \tn % Row Count 4 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Shadows}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{shadow-none} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{shadow-sm} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{shadow} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{shadow-lg} \tn % Row Count 4 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Spacing}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{\{property\}\{sides\}-\{breakpoint\}-\{size\}} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{property: m, p} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{sides: t, b, s, e, x, y, blank} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{breakpoint: sm, md, lg, xl, xxl} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{size: 0, 1, 2, 3, 4, 5, auto} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{size for negative margins: n1, n2, n3, n4, n5} \tn % Row Count 6 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Tables}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{table} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{table-striped} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{table-bordered} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{table-hover} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{table-responsive} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{table-(*) (primary, secondary, success, danger, warning, info, light, dark) \{\{nl\}\}*Can be applied to table, tr, td, \& th} \tn % Row Count 8 (+ 3) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{w-* (* Indicate size in rems)} \tn % Row Count 9 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Typography}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{h1, h2, h3, h4, h5, h6} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{display-\# (1-6)} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{lead} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{blockquote} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{blockquote-footer} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{list-unstyled} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{list-inline} \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{list-inline-item} \tn % Row Count 8 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Utility Classes}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{text-* (start, end, center)} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{text-lowercase} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{text-uppercase} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{text-capitalize} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{fw-bold} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{fw-normal} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{fst-italic} \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{fst-normal} \tn % Row Count 8 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}