{"id":4712,"date":"2025-08-21T11:13:35","date_gmt":"2025-08-21T11:13:35","guid":{"rendered":"https:\/\/uplatz.com\/blog\/?p=4712"},"modified":"2025-08-30T11:47:05","modified_gmt":"2025-08-30T11:47:05","slug":"bootstrap-pocket-book","status":"publish","type":"post","link":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/","title":{"rendered":"Bootstrap Pocket Book"},"content":{"rendered":"<p><!-- ############################################################ --><br \/>\n<!-- Bootstrap Pocket Book \u2014 Uplatz (Single Column, 60 Cards, Colored Sections) --><\/p>\n<div style=\"margin: 16px 0;\">\n<style>\n  \/* Scope *\/<br \/>\n  .wp-bs-pb{font-family:Arial,Helvetica,sans-serif;max-width:980px;margin:0 auto;}<\/p>\n<p>  \/* Gradient header *\/<br \/>\n  .wp-bs-pb .heading{<br \/>\n    background:linear-gradient(135deg,#0ea5e9,#ec4899);<br \/>\n    color:#ffffff;padding:22px;border-radius:18px;text-align:center;<br \/>\n    margin-bottom:26px;box-shadow:0 10px 24px rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.22)<br \/>\n  }<br \/>\n  .wp-bs-pb .heading h2{margin:0;font-size:1.82rem;font-weight:800;letter-spacing:.2px;line-height:1.15}<br \/>\n  .wp-bs-pb .heading p{margin:8px 0 0;font-size:.96rem;opacity:.95}<\/p>\n<p>  \/* Section titles (base) *\/<br \/>\n  .wp-bs-pb .section-title{<br \/>\n    margin:26px 0 14px;padding:12px 16px;border-left:8px solid #2563eb;<br \/>\n    border-radius:12px;font-weight:800;color:#0f172a;font-size:1.02rem;<br \/>\n    box-shadow:0 2px 8px rgba(0,0,0,.05);border:1px solid #e2e8f0<br \/>\n  }<\/p>\n<p>  \/* Colored section bars *\/<br \/>\n  .wp-bs-pb .color-1{background:linear-gradient(135deg,#dcfce7,#e0f2fe);border-left-color:#22c55e}<br \/>\n  .wp-bs-pb .color-2{background:linear-gradient(135deg,#fffbeb,#e9d5ff);border-left-color:#f59e0b}<br \/>\n  .wp-bs-pb .color-3{background:linear-gradient(135deg,#fee2e2,#dbeafe);border-left-color:#ef4444}<br \/>\n  .wp-bs-pb .color-4{background:linear-gradient(135deg,#ecfeff,#f5f3ff);border-left-color:#06b6d4}<br \/>\n  .wp-bs-pb .color-5{background:linear-gradient(135deg,#f1f5f9,#ede9fe);border-left-color:#475569}<br \/>\n  .wp-bs-pb .color-6{background:linear-gradient(135deg,#f0fdf4,#fef3c7);border-left-color:#10b981}<br \/>\n  .wp-bs-pb .color-7{background:linear-gradient(135deg,#fff7ed,#e2e8f0);border-left-color:#fb923c}<\/p>\n<p>  \/* Cards (single column) *\/<br \/>\n  .wp-bs-pb .card{<br \/>\n    background:#fff;border-left:6px solid #2563eb;padding:16px;border-radius:14px;<br \/>\n    box-shadow:0 6px 14px rgba(0,0,0,.06);border:1px solid #e5e7eb;margin-bottom:16px;<br \/>\n    transition:transform .12s ease,box-shadow .12s ease<br \/>\n  }<br \/>\n  .wp-bs-pb .card:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,0,0,.08)}<br \/>\n  .wp-bs-pb .card h3{margin:0 0 10px;font-size:1.08rem;color:#0f172a}<br \/>\n  .wp-bs-pb .card p{margin:0;font-size:.96rem;color:#334155;line-height:1.62}<\/p>\n<p>  \/* Helpers *\/<br \/>\n  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}<br \/>\n  .wp-bs-pb code{background:#f1f5f9;padding:0 4px;border-radius:4px;border:1px solid #e2e8f0}<br \/>\n  .wp-bs-pb pre{background:#f5f5f5;color:#111827;border:1px solid #e5e7eb;padding:12px;border-radius:10px;overflow:auto;font-size:.92rem;line-height:1.55}<br \/>\n  .muted{color:#64748b}<br \/>\n  .tight ul{margin:0;padding-left:18px}<br \/>\n  .tight li{margin:4px 0}<br \/>\n  .q{font-weight:700}<br \/>\n<\/style>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-5068\" src=\"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap-1024x576.jpg\" alt=\"\" width=\"840\" height=\"473\" srcset=\"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap-1024x576.jpg 1024w, https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap-300x169.jpg 300w, https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap-768x432.jpg 768w, https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap.jpg 1280w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/p>\n<div class=\"wp-bs-pb\">\n<div class=\"heading\">\n<h2>Bootstrap Pocket Book \u2014 Uplatz<\/h2>\n<p>60 deep-dive flashcards \u2022 Single column \u2022 Grid &amp; Layout \u2022 Components \u2022 Forms \u2022 Utilities \u2022 Theming &amp; Sass \u2022 JS Plugins \u2022 A11y &amp; Patterns<\/p>\n<p class=\"muted\">Cheat-friendly explanations \u2022 Readable HTML\/JS snippets \u2022 Production-oriented tips<\/p>\n<\/div>\n<p><!-- ===================== SECTION 1 ===================== --><\/p>\n<div class=\"section-title color-1\">Section 1 \u2014 Fundamentals<\/div>\n<div class=\"card\">\n<h3>1) What is Bootstrap?<\/h3>\n<p>A CSS framework with responsive grid, prebuilt components, utilities, and JavaScript plugins. Great for fast, consistent UIs.<\/p>\n<pre><code class=\"mono\">&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>2) Containers<\/h3>\n<p>Wrap page content. <code>.container<\/code> (fixed breakpoints), <code>.container-fluid<\/code> (100% width), or responsive variants.<\/p>\n<pre><code class=\"mono\">&lt;div class=\"container\"&gt;...&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>3) Breakpoints<\/h3>\n<p>xs (&lt;576), sm (\u2265576), md (\u2265768), lg (\u2265992), xl (\u22651200), xxl (\u22651400). Utilities and grid accept responsive suffixes (e.g., <code>mt-md-3<\/code>).<\/p>\n<\/div>\n<div class=\"card\">\n<h3>4) Mobile-first<\/h3>\n<p>Start with base styles for phones; add overrides at larger breakpoints.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>5) Reboot &amp; Normalize<\/h3>\n<p>Bootstrap \u201cReboot\u201d provides sensible defaults for typography, forms, and elements for consistency across browsers.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>6) Icons<\/h3>\n<p>Use Bootstrap Icons or any SVG set.<\/p>\n<pre><code class=\"mono\">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons\/font\/bootstrap-icons.css\"&gt;\r\n&lt;i class=\"bi bi-alarm\"&gt;&lt;\/i&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>7) Color System<\/h3>\n<p>Theme palette: <code>primary<\/code>, <code>secondary<\/code>, <code>success<\/code>, <code>danger<\/code>, <code>warning<\/code>, <code>info<\/code>, <code>light<\/code>, <code>dark<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>8) Spacing Scale<\/h3>\n<p><code>0\u20135<\/code> (or <code>auto<\/code>) for margins\/padding: <code>mt-3<\/code>, <code>px-4<\/code>, <code>mx-auto<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>9) Color Modes<\/h3>\n<p>Toggle light\/dark via CSS variables: <code>data-bs-theme=\"dark\"<\/code> on <code>&lt;html&gt;<\/code> or containers.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>10) Utility-first Augmentation<\/h3>\n<p>Utilities cover display, flex, grid, spacing, sizing, position, colors\u2014compose layouts quickly without custom CSS.<\/p>\n<\/div>\n<p><!-- ===================== SECTION 2 ===================== --><\/p>\n<div class=\"section-title color-2\">Section 2 \u2014 Grid &amp; Layout<\/div>\n<div class=\"card\">\n<h3>11) Rows &amp; Columns<\/h3>\n<p>Grid is flexbox-based; 12 columns; nest rows inside columns.<\/p>\n<pre><code class=\"mono\">&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col-12 col-md-6\"&gt;A&lt;\/div&gt;\r\n  &lt;div class=\"col-12 col-md-6\"&gt;B&lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>12) Column Sizes<\/h3>\n<p><code>.col<\/code> auto-sizes; explicit sizes like <code>.col-4<\/code>; responsive variants: <code>.col-lg-3<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>13) Gutters<\/h3>\n<p>Control with <code>g-0<\/code>\u2026<code>g-5<\/code> or per-axis: <code>gx-2 gy-4<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>14) Offsetting &amp; Ordering<\/h3>\n<p><code>.offset-md-2<\/code>, <code>.order-1<\/code>, <code>.order-md-0<\/code> to reorder columns responsively.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>15) Alignment<\/h3>\n<p>Use flex utils: <code>.align-items-center<\/code>, <code>.justify-content-between<\/code>, <code>.text-center<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>16) Auto Layout<\/h3>\n<p>Without defined widths, columns share space equally; add one numeric size to control the rest.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>17) Vertical Stacks<\/h3>\n<p>Use <code>.vstack<\/code> \/ <code>.hstack<\/code> helpers for simple stacked layouts with gaps.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>18) Responsive Display<\/h3>\n<p><code>.d-none .d-md-block<\/code> hides on small screens, shows on \u2265md.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>19) Containers by Breakpoint<\/h3>\n<p><code>.container-sm<\/code>, <code>.container-lg<\/code> etc. Choose based on content width you want at each breakpoint.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>20) CSS Grid Utilities<\/h3>\n<p>For advanced layouts, Bootstrap also exposes CSS Grid helpers (when included) alongside Flexbox grid.<\/p>\n<\/div>\n<p><!-- ===================== SECTION 3 ===================== --><\/p>\n<div class=\"section-title color-3\">Section 3 \u2014 Components I (Navigation)<\/div>\n<div class=\"card\">\n<h3>21) Nav<\/h3>\n<p>Horizontal\/vertical navs with pills\/tabs styles.<\/p>\n<pre><code class=\"mono\">&lt;ul class=\"nav nav-pills\"&gt;\r\n  &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link active\" href=\"#\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\r\n  &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#\"&gt;Docs&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>22) Navbar<\/h3>\n<p>Responsive navbar with toggler and collapse.<\/p>\n<pre><code class=\"mono\">&lt;nav class=\"navbar navbar-expand-lg bg-body-tertiary\"&gt;\r\n  &lt;div class=\"container\"&gt;\r\n    &lt;a class=\"navbar-brand\" href=\"#\"&gt;Brand&lt;\/a&gt;\r\n    &lt;button class=\"navbar-toggler\" data-bs-toggle=\"collapse\" data-bs-target=\"#nav\"&gt;\r\n      &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\r\n    &lt;\/button&gt;\r\n    &lt;div id=\"nav\" class=\"collapse navbar-collapse\"&gt;...&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/nav&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>23) Breadcrumb<\/h3>\n<p>Show location within a hierarchy with <code>.breadcrumb<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>24) Dropdowns<\/h3>\n<p>Pop menus via JS; support alignment and dark mode.<\/p>\n<pre><code class=\"mono\">&lt;div class=\"dropdown\"&gt;\r\n  &lt;button class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;Menu&lt;\/button&gt;\r\n  &lt;ul class=\"dropdown-menu\"&gt;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Action&lt;\/a&gt;&lt;\/li&gt;&lt;\/ul&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>25) Pagination<\/h3>\n<p>Provide page navigation with <code>.pagination<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>26) Tabs<\/h3>\n<p>Tabbed content via data API.<\/p>\n<pre><code class=\"mono\">&lt;ul class=\"nav nav-tabs\" id=\"t\"&gt;...&lt;\/ul&gt;\r\n&lt;div class=\"tab-content\"&gt;...&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>27) Offcanvas<\/h3>\n<p>Sidebar drawer that slides in.<\/p>\n<pre><code class=\"mono\">&lt;button class=\"btn btn-primary\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#oc\"&gt;Open&lt;\/button&gt;\r\n&lt;div id=\"oc\" class=\"offcanvas offcanvas-start\"&gt;...&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>28) Collapse<\/h3>\n<p>Toggle visibility of content.<\/p>\n<pre><code class=\"mono\">&lt;a data-bs-toggle=\"collapse\" href=\"#c\"&gt;Toggle&lt;\/a&gt;\r\n&lt;div id=\"c\" class=\"collapse\"&gt;...&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>29) Scrollspy<\/h3>\n<p>Auto-highlight nav links based on scroll position.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>30) Sticky<\/h3>\n<p>Use <code>.sticky-top<\/code> for headers\/toolbars that stick when scrolled.<\/p>\n<\/div>\n<p><!-- ===================== SECTION 4 ===================== --><\/p>\n<div class=\"section-title color-4\">Section 4 \u2014 Components II (Feedback &amp; Media)<\/div>\n<div class=\"card\">\n<h3>31) Modal<\/h3>\n<p>Dialog overlay with focus trap.<\/p>\n<pre><code class=\"mono\">&lt;button class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#m\"&gt;Open&lt;\/button&gt;\r\n&lt;div id=\"m\" class=\"modal fade\"&gt;&lt;div class=\"modal-dialog\"&gt;&lt;div class=\"modal-content\"&gt;...&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>32) Toasts<\/h3>\n<p>Lightweight notifications; place with utilities.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>33) Alerts<\/h3>\n<p>Contextual banners: <code>.alert-primary<\/code>, <code>.alert-danger<\/code> etc.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>34) Progress<\/h3>\n<p>Determinate\/indeterminate bars; stacked segments.<\/p>\n<pre><code class=\"mono\">&lt;div class=\"progress\"&gt;&lt;div class=\"progress-bar w-50\"&gt;50%&lt;\/div&gt;&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>35) Cards<\/h3>\n<p>Flexible content container with header, body, footer, and images.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>36) List Group<\/h3>\n<p>Lists with active\/disabled states and badges.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>37) Carousel<\/h3>\n<p>Slideshow for images\/content; swipe support on touch devices.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>38) Accordion<\/h3>\n<p>Collapsible content with one-open-at-a-time behavior.<\/p>\n<\/div>\n<p><!-- ===================== SECTION 5 ===================== --><\/p>\n<div class=\"section-title color-5\">Section 5 \u2014 Forms &amp; Validation<\/div>\n<div class=\"card\">\n<h3>39) Form Controls<\/h3>\n<p>Inputs, selects, checks\/radios, range sliders; use <code>.form-control<\/code> and <code>.form-select<\/code>.<\/p>\n<pre><code class=\"mono\">&lt;input class=\"form-control\" placeholder=\"Email\"&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>40) Grid-based Forms<\/h3>\n<p>Use rows\/cols for complex forms with aligned labels.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>41) Floating Labels<\/h3>\n<p>Compact forms where labels float above inputs.<\/p>\n<pre><code class=\"mono\">&lt;div class=\"form-floating\"&gt;\r\n  &lt;input class=\"form-control\" id=\"x\" placeholder=\" \"&gt;\r\n  &lt;label for=\"x\"&gt;Email&lt;\/label&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>42) Input Group<\/h3>\n<p>Combine inputs with buttons or text add-ons.<\/p>\n<pre><code class=\"mono\">&lt;div class=\"input-group\"&gt;\r\n  &lt;span class=\"input-group-text\"&gt;@&lt;\/span&gt;\r\n  &lt;input class=\"form-control\" placeholder=\"username\"&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>43) Validation Styles<\/h3>\n<p>Use <code>.is-valid<\/code>\/<code>.is-invalid<\/code> and feedback elements; pair with custom JS or native constraint validation.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>44) Disabled &amp; Readonly<\/h3>\n<p><code>disabled<\/code> blocks interaction; <code>readonly<\/code> prevents editing but allows focus\/select.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>45) File Inputs &amp; Range<\/h3>\n<p>Styled with <code>.form-control<\/code> and <code>.form-range<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>46) Form Layout Patterns<\/h3>\n<p>Inline forms (<code>.row row-cols-lg-auto<\/code>), stacked on mobile; place actions right with <code>.ms-auto<\/code>.<\/p>\n<\/div>\n<p><!-- ===================== SECTION 6 ===================== --><\/p>\n<div class=\"section-title color-6\">Section 6 \u2014 Utilities &amp; Helpers<\/div>\n<div class=\"card\">\n<h3>47) Typography<\/h3>\n<p>Use display headings, <code>.lead<\/code>, <code>.small<\/code>, <code>.fw-bold<\/code>, <code>.text-muted<\/code> for emphasis.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>48) Colors &amp; Backgrounds<\/h3>\n<p><code>.text-primary<\/code>, <code>.bg-light<\/code>, <code>.border-danger<\/code>, <code>.link-info<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>49) Spacing<\/h3>\n<p>Margin\/padding utilities: <code>m<\/code>\/<code>p<\/code> + side + size (e.g., <code>mt-3<\/code>, <code>px-4<\/code>).<\/p>\n<\/div>\n<div class=\"card\">\n<h3>50) Display &amp; Visibility<\/h3>\n<p><code>.d-flex<\/code>, <code>.d-grid<\/code>, <code>.d-none<\/code>, <code>.visible<\/code>\/<code>.invisible<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>51) Flexbox<\/h3>\n<p><code>.justify-content-center<\/code>, <code>.align-items-end<\/code>, <code>.flex-wrap<\/code>, <code>.gap-3<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>52) Position &amp; Z-Index<\/h3>\n<p><code>.position-relative<\/code>, <code>.top-0<\/code>, <code>.start-50<\/code>, <code>.translate-middle<\/code>, <code>.z-3<\/code>.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>53) Images &amp; Ratios<\/h3>\n<p><code>.img-fluid<\/code> for responsive images; <code>.ratio<\/code> for videos (e.g., <code>.ratio-16x9<\/code>).<\/p>\n<\/div>\n<div class=\"card\">\n<h3>54) Shadows &amp; Rounding<\/h3>\n<p><code>.shadow<\/code>, <code>.shadow-lg<\/code>, <code>.rounded<\/code>, <code>.rounded-4<\/code>, <code>.rounded-circle<\/code>.<\/p>\n<\/div>\n<p><!-- ===================== SECTION 7 ===================== --><\/p>\n<div class=\"section-title color-7\">Section 7 \u2014 Theming, JS Plugins, A11y &amp; Patterns<\/div>\n<div class=\"card\">\n<h3>55) Customize with Sass<\/h3>\n<p>Override variables before importing Bootstrap.<\/p>\n<pre><code class=\"mono\">\/\/ _custom.scss\r\n$primary: #6d28d9;\r\n$border-radius: 0.75rem;\r\n@import \"bootstrap\/scss\/bootstrap\";<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>56) CSS Variables &amp; Color Modes<\/h3>\n<p>Many options exposed as CSS vars. Toggle dark mode via <code>data-bs-theme<\/code>.<\/p>\n<pre><code class=\"mono\">&lt;html data-bs-theme=\"dark\"&gt;...&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>57) JavaScript: Bundle &amp; Data API<\/h3>\n<p>Use the bundle (includes Popper) or import per-plugin; initialize with data attributes or JS.<\/p>\n<pre><code class=\"mono\">import { Modal } from \"bootstrap\";\r\nnew Modal(document.getElementById(\"m\")).show();<\/code><\/pre>\n<\/div>\n<div class=\"card\">\n<h3>58) Accessibility<\/h3>\n<p>Components include ARIA roles and keyboard support; ensure contrast, focus styles, and semantic HTML.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>59) Performance Tips<\/h3>\n<p>Only import needed SCSS; purge unused CSS with your bundler; minify and defer non-critical JS; lazy-load images.<\/p>\n<\/div>\n<div class=\"card\">\n<h3>60) Production Checklist<\/h3>\n<p>Consistent spacing &amp; typography, responsive checks at all breakpoints, nav keyboard support, color-mode test, forms validated, minified CSS\/JS, and cache headers set.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap Pocket Book \u2014 Uplatz 60 deep-dive flashcards \u2022 Single column \u2022 Grid &amp; Layout \u2022 Components \u2022 Forms \u2022 Utilities \u2022 Theming &amp; Sass \u2022 JS Plugins \u2022 A11y <span class=\"readmore\"><a href=\"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/\">Read More &#8230;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2533,2462],"tags":[],"class_list":["post-4712","post","type-post","status-publish","format-standard","hentry","category-bootstrap","category-pocket-book"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bootstrap Pocket Book | Uplatz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Pocket Book | Uplatz Blog\" \/>\n<meta property=\"og:description\" content=\"Bootstrap Pocket Book \u2014 Uplatz 60 deep-dive flashcards \u2022 Single column \u2022 Grid &amp; Layout \u2022 Components \u2022 Forms \u2022 Utilities \u2022 Theming &amp; Sass \u2022 JS Plugins \u2022 A11y Read More ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/\" \/>\n<meta property=\"og:site_name\" content=\"Uplatz Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Uplatz-1077816825610769\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-21T11:13:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-30T11:47:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"uplatzblog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uplatz_global\" \/>\n<meta name=\"twitter:site\" content=\"@uplatz_global\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"uplatzblog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/\"},\"author\":{\"name\":\"uplatzblog\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#\\\/schema\\\/person\\\/8ecae69a21d0757bdb2f776e67d2645e\"},\"headline\":\"Bootstrap Pocket Book\",\"datePublished\":\"2025-08-21T11:13:35+00:00\",\"dateModified\":\"2025-08-30T11:47:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/\"},\"wordCount\":638,\"publisher\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Bootstrap-1024x576.jpg\",\"articleSection\":[\"Bootstrap\",\"Pocket Book\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/\",\"url\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/\",\"name\":\"Bootstrap Pocket Book | Uplatz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Bootstrap-1024x576.jpg\",\"datePublished\":\"2025-08-21T11:13:35+00:00\",\"dateModified\":\"2025-08-30T11:47:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/#primaryimage\",\"url\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Bootstrap.jpg\",\"contentUrl\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Bootstrap.jpg\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/bootstrap-pocket-book\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap Pocket Book\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/\",\"name\":\"Uplatz Blog\",\"description\":\"Uplatz is a global IT Training &amp; Consulting company\",\"publisher\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#organization\",\"name\":\"uplatz.com\",\"url\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/Uplatz-Logo-Copy-2.png\",\"contentUrl\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/Uplatz-Logo-Copy-2.png\",\"width\":1280,\"height\":800,\"caption\":\"uplatz.com\"},\"image\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Uplatz-1077816825610769\\\/\",\"https:\\\/\\\/x.com\\\/uplatz_global\",\"https:\\\/\\\/www.instagram.com\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/7956715?trk=tyah&amp;amp;amp;amp;trkInfo=clickedVertical:company,clickedEntityId:7956715,idx:1-1-1,tarId:1464353969447,tas:uplatz\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#\\\/schema\\\/person\\\/8ecae69a21d0757bdb2f776e67d2645e\",\"name\":\"uplatzblog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g\",\"caption\":\"uplatzblog\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Pocket Book | Uplatz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Pocket Book | Uplatz Blog","og_description":"Bootstrap Pocket Book \u2014 Uplatz 60 deep-dive flashcards \u2022 Single column \u2022 Grid &amp; Layout \u2022 Components \u2022 Forms \u2022 Utilities \u2022 Theming &amp; Sass \u2022 JS Plugins \u2022 A11y Read More ...","og_url":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/","og_site_name":"Uplatz Blog","article_publisher":"https:\/\/www.facebook.com\/Uplatz-1077816825610769\/","article_published_time":"2025-08-21T11:13:35+00:00","article_modified_time":"2025-08-30T11:47:05+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap.jpg","type":"image\/jpeg"}],"author":"uplatzblog","twitter_card":"summary_large_image","twitter_creator":"@uplatz_global","twitter_site":"@uplatz_global","twitter_misc":{"Written by":"uplatzblog","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/#article","isPartOf":{"@id":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/"},"author":{"name":"uplatzblog","@id":"https:\/\/uplatz.com\/blog\/#\/schema\/person\/8ecae69a21d0757bdb2f776e67d2645e"},"headline":"Bootstrap Pocket Book","datePublished":"2025-08-21T11:13:35+00:00","dateModified":"2025-08-30T11:47:05+00:00","mainEntityOfPage":{"@id":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/"},"wordCount":638,"publisher":{"@id":"https:\/\/uplatz.com\/blog\/#organization"},"image":{"@id":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/#primaryimage"},"thumbnailUrl":"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap-1024x576.jpg","articleSection":["Bootstrap","Pocket Book"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/","url":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/","name":"Bootstrap Pocket Book | Uplatz Blog","isPartOf":{"@id":"https:\/\/uplatz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/#primaryimage"},"image":{"@id":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/#primaryimage"},"thumbnailUrl":"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap-1024x576.jpg","datePublished":"2025-08-21T11:13:35+00:00","dateModified":"2025-08-30T11:47:05+00:00","breadcrumb":{"@id":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/#primaryimage","url":"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap.jpg","contentUrl":"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2025\/08\/Bootstrap.jpg","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/uplatz.com\/blog\/bootstrap-pocket-book\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/uplatz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Pocket Book"}]},{"@type":"WebSite","@id":"https:\/\/uplatz.com\/blog\/#website","url":"https:\/\/uplatz.com\/blog\/","name":"Uplatz Blog","description":"Uplatz is a global IT Training &amp; Consulting company","publisher":{"@id":"https:\/\/uplatz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uplatz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/uplatz.com\/blog\/#organization","name":"uplatz.com","url":"https:\/\/uplatz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uplatz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2016\/11\/Uplatz-Logo-Copy-2.png","contentUrl":"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2016\/11\/Uplatz-Logo-Copy-2.png","width":1280,"height":800,"caption":"uplatz.com"},"image":{"@id":"https:\/\/uplatz.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Uplatz-1077816825610769\/","https:\/\/x.com\/uplatz_global","https:\/\/www.instagram.com\/","https:\/\/www.linkedin.com\/company\/7956715?trk=tyah&amp;amp;amp;amp;trkInfo=clickedVertical:company,clickedEntityId:7956715,idx:1-1-1,tarId:1464353969447,tas:uplatz"]},{"@type":"Person","@id":"https:\/\/uplatz.com\/blog\/#\/schema\/person\/8ecae69a21d0757bdb2f776e67d2645e","name":"uplatzblog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g","caption":"uplatzblog"}}]}},"_links":{"self":[{"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/posts\/4712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/comments?post=4712"}],"version-history":[{"count":2,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/posts\/4712\/revisions"}],"predecessor-version":[{"id":5069,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/posts\/4712\/revisions\/5069"}],"wp:attachment":[{"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/media?parent=4712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/categories?post=4712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/tags?post=4712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}