[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5":671,"blog-author-\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5":1259,"i-material-symbols:arrow-back-rounded":1271},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1245,"date":1246,"description":1247,"draft":1248,"editorsPick":1248,"extension":1249,"featured":1248,"image":1250,"imageAlt":1251,"meta":1252,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1253,"seo":1254,"stem":1255,"tags":1256,"__hash__":1258},"blog\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5.md","Bootstrap by Twitter: Impact of working with V5","Emeka Henry Nnamani","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fauthor.png",null,"emeka-henry-nnamani",{"type":679,"value":680,"toc":1227},"minimark",[681,692,697,730,734,770,774,777,804,814,820,826,835,839,842,851,858,864,867,874,881,917,920,926,929,934,942,945,982,989,1028,1034,1037,1043,1051,1054,1060,1063,1069,1077,1103,1109,1112,1118,1126,1129,1135,1138,1144,1152,1155,1161,1163,1169,1177,1180,1186,1189,1195,1203,1206,1212,1214,1220,1224],[682,683,684,691],"p",{},[685,686,690],"a",{"href":687,"rel":688},"https:\u002F\u002Fgetbootstrap.com\u002Fdocs\u002F5.0\u002Fgetting-started\u002Fintroduction\u002F",[689],"nofollow","Bootstrap by Twitter"," is undoubtedly the world's most popular framework for building accurate, responsive sites and mobile-first front-end websites. As time passed, Twitter made Bootstrap accessible, free, and open for all to use. It comes with HTML, CSS, and JavaScript-based design templates, forms, buttons, navigation, grids, and other interface components. Twitter Bootstrap makes it easy for us all to build outstanding-looking websites.",[693,694,696],"h2",{"id":695},"what-is-twitter-bootstrap","What is Twitter Bootstrap?",[682,698,699,700,704,705,708,709,704,712,715,716,704,719,722,723,704,726,729],{},"There have been more than twenty different versions of Twitter Bootstrap, but the current major version is Bootstrap V5, released in May 2021. Many utilities changed in Twitter Bootstrap V5; for example, ",[701,702,703],"code",{},"Left-*"," and ",[701,706,707],{},"Right-*",", changed to ",[701,710,711],{},"start-*",[701,713,714],{},"end-*;"," ",[701,717,718],{},"float-left",[701,720,721],{},"float-right"," were renamed to ",[701,724,725],{},"float-start",[701,727,728],{},"float-end",", among other modifications. Bootstrap makes it easy for us to build great websites and does excellent work behind the scenes. If you search for Twitter Bootstrap on GitHub, you will find that over 159k people have starred it because it is so essential to them.",[693,731,733],{"id":732},"the-impacts-of-working-with-twitter-bootstrap-v5","The Impacts Of Working With Twitter Bootstrap V5",[735,736,737,741,749,752,755,758,761,764,767],"ul",{},[738,739,740],"li",{},"Easy to use:Tech enthusiasts who don’t have much knowledge of coding can design a classic landing page due to the ease of working with Bootstrap from Twitter.",[738,742,743,748],{},[685,744,747],{"href":745,"rel":746},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FProgressive_web_apps\u002FResponsive\u002Fresponsive_design_building_blocks",[689],"Responsiveness",":Responsive means that the site responds to the viewport. Assuming you look at the same website with an iPad or on a laptop or a mobile device, it will have a different layout so you can view the size of the screen. Most people in the world use mobile devices to access the internet; hence, programmers must build mobile-responsive websites. Bootstrap makes it possible to design for the smaller screen before the larger screen. With the help of Bootstrap, you can now create a website that will adjust to various screen sizes and viewports, thereby making it easy for anyone to browse your website with any device.",[738,750,751],{},"Faster Development:Working withBootstrap makes coding faster due to its classic ready-made code blocks, responsiveness, and components. You don’t have to start coding from scratch; instead, you can use ready-made code blocks. Plus, the pre-made Bootstrap themes and templates are easily editable to suit what you want.",[738,753,754],{},"Professional support:Bootstrap has qualified professionals willing to help you with any issues. Its vast support community makes it possible for people to get the correct answers to their queries.",[738,756,757],{},"Extremely Customizable:To customize Bootstrap, all you have to do is tick off the aspects you do not need in your project. This Twitter CSS framework allows you to create your design in the way you wish.",[738,759,760],{},"Frequent Updates:The developers of Bootstrap update it often, ensuring it supports the most cutting-edge technology.",[738,762,763],{},"JavaScript Plugins:Bootstrap supports JavaScript components like alerts, modal windows, tooltips, etc., which help us to bring our projects to life. These make pages more interactive, and adding these functionalities is very easy.",[738,765,766],{},"AddConsistency: Building our websites\u002Fmobile applications with Bootstrap combines developers and designers to ensure consistency.",[738,768,769],{},"Pre-styled components:Twitter Bootstrap comes with pre-styled features for nav bars, dropdowns, alerts, etc., thereby helping us create outstanding web designs for our sites.",[693,771,773],{"id":772},"installationset-up","Installation\u002FSet Up",[682,775,776],{},"There are several ways to install and set up Bootstrap:",[778,779,780,793],"ol",{},[738,781,782,786,787,792],{},[783,784,785],"strong",{},"Download the source Files (CSS\u002FJS) Manually:"," Visit ",[685,788,791],{"href":789,"rel":790},"https:\u002F\u002Fgetbootstrap.com\u002Fdocs\u002F5.2\u002Fgetting-started\u002Fdownload\u002F",[689],"getbootstrap.com"," and download the latest version of Bootstrap. From there, unzip it to the destination of your choice and start coding.",[738,794,795,798,799,803],{},[783,796,797],{},"Content Delivery Network (Twitter Bootstrap CDN):"," This is the easiest way to install Bootstrap. Visit ",[685,800,791],{"href":801,"rel":802},"https:\u002F\u002Fgetbootstrap.com\u002F",[689],", scroll down to the \"Include via CDN\" link, copy the \"CSS ONLY\" link, and paste it into the required destination in your VS Code IDE. You also need to copy the \"JavaScript Bundle with Popper\" link and paste it into your VS Code IDE. Check out the example below:",[805,806,811],"pre",{"className":807,"code":809,"language":810},[808],"language-text","\u003C!doctype html>\u003Chtml lang=\"en\">\u003Chead>\u003Cmeta charset=\"UTF-8\">\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\u003Ctitle>Bootstrap Installation\u003C\u002Ftitle>\u003C!-- CSS only -->\u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.2.0\u002Fdist\u002Fcss\u002Fbootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa\u002FHGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl\u002FvI1Bx\" crossorigin=\"anonymous\">\u003C\u002Fhead>\u003Cbody>\u003Ch1>Hello Bootstrap world\u003C\u002Fh1>\u003C!-- JavaScript Bundle with Popper -->\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.2.0\u002Fdist\u002Fjs\u002Fbootstrap.bundle.min.js\" integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\">\u003C\u002Fscript>\u003C\u002Fbody>\u003C\u002Fhtml>\n","text",[701,812,809],{"__ignoreMap":813},"",[778,815,817],{"start":816},3,[738,818,819],{},"NPM: You can also install Bootstrap in your Node.js-powered apps via:",[805,821,824],{"className":822,"code":823,"language":810},[808],"npm install bootstrap@5.2.0\n",[701,825,823],{"__ignoreMap":813},[682,827,828,829,834],{},"NB: In order to know that you have appropriately installed Bootstrap, all you need to do is to copy the full path to your browser. When you open your browser, right-click and select Inspect; then, click on \"Network\" and reload the page to see the Bootstrap Bundle and bootstrap.min.css indicating that Bootstrap is installed. For more information, visit the ",[685,830,833],{"href":831,"rel":832},"https:\u002F\u002Fgetbootstrap.com\u002Fdocs\u002F5.2\u002Fgetting-started\u002Fintroduction\u002F",[689],"Getting Started"," page.",[693,836,838],{"id":837},"creating-a-project-using-bootstrap-v5","Creating A Project Using Bootstrap V5",[682,840,841],{},"Once we’ve installed Bootstrap, we can go straight to building a project.",[843,844,846],"h3",{"id":845},"heading-element",[685,847,850],{"href":848,"rel":849},"https:\u002F\u002Fwww.w3schools.com\u002Fbootstrap\u002Fbootstrap_typography.asp",[689],"Heading Element",[682,852,853,857],{},[685,854,856],{"href":848,"rel":855},[689],"To center our"," content, we can use a Bootstrap by Twitter container. Once you add the \"Container\" class and save it, reload the browser to see it in the middle of the page. You’ll also notice the changes when the window is adjusted, which means it responds to the viewport. We have a class called the \"Page Header\" for the heading and a subheading \"With faded secondary text.\" Again, you will notice that it is responsive when you adjust the browser window. An example of a Heading Element is in the code below:",[805,859,862],{"className":860,"code":861,"language":810},[808],"\u003C!DOCTYPE html>\u003Chtml lang=\"en\">\u003Chead>\u003Cmeta charset=\"UTF-8\">\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\u003Ctitle>Creating a Project Using Twitter Bootstrap\u003C\u002Ftitle>\u003C!-- CSS only -->\u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.2.1\u002Fdist\u002Fcss\u002Fbootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-iYQeCzEYFbKjA\u002FT2uDLTpkwGzCiq6soy8tYaI1GyVh\u002FUjpbCx\u002FTYkiZhlZB6+fzT\" crossorigin=\"anonymous\">\u003C\u002Fhead>\u003Cbody>\u003Cdiv class=\"container\">\u003Ch1 class=\"page-header\">Hello Bootstrap World \u003Csmall class=\"text-muted\">With faded secondary text\u003C\u002Fsmall>\u003C\u002Fh1>\u003C\u002Fdiv>\u003C!-- JavaScript Bundle with Popper -->\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.2.1\u002Fdist\u002Fjs\u002Fbootstrap.bundle.min.js\" integrity=\"sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8\" crossorigin=\"anonymous\">\u003C\u002Fscript>\u003C\u002Fbody>\u003C\u002Fhtml>\n",[701,863,861],{"__ignoreMap":813},[682,865,866],{},"The above code is the Heading Element; it will look like this in your browser:",[682,868,869],{},[870,871],"img",{"alt":872,"src":873},"Text that reads 'hello bootstrap world with faded secondary text' shown in browser","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fimg-001.png",[843,875,877],{"id":876},"paragraph-strong-mark-lead-elements",[685,878,880],{"href":848,"rel":879},[689],"Paragraph, strong, mark, lead elements",[778,882,883,890,893,896,899,905],{},[738,884,885,886,889],{},"The paragraph element,",[887,888],"br",{},", is a block of text content on the webpage and is used to start a new paragraph. We will make one of the paragraphs the \"Lead class\" to mark it the most significant.",[738,891,892],{},"We use the tag to highlight text.",[738,894,895],{},"We use the tag to cross out text.",[738,897,898],{},"We use the tag to underline text.",[738,900,901,902],{},"We use the  ",[783,903,904],{},"tag to bold text.",[738,906,907,910,911],{},[783,908,909],{},"We use the","  ",[912,913,914],"em",{},[783,915,916],{},"tag to italicize text.",[682,918,919],{},"A code example of the elements is below:",[805,921,924],{"className":922,"code":923,"language":810},[808],"\u003Cp class=\"lead\">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem eaque perspiciatis,      repellendus autem ipsa eius! Nesciunt natus, modi doloribus a eaque sit ea facilis\u003C\u002Fp>\u003Cp>\u003Cmark>ipsum dolor, sit amet consectetur adipisicing elit\u003C\u002Fmark>. Exercitationem eaque perspiciatis,\u003Cdel>repellendus autem ipsa eius!\u003C\u002Fdel> Nesciunt natus, eaque sit ea facilis  eligendi quo atque laborum incidunt ipsam. \u003Cstrong>Lorem ipsum dolor sit amet consectetur\u003C\u002Fstrong>  adipisicing elit. \u003Cem>non nobis velit. Illo voluptatem itaque eveniet et,\u003C\u002Fem>  impedit consequuntur \u003Cu>nihil ipsam necessitatibus\u003C\u002Fu>, fugiat praesentium velit  amet a mollitia quibusdam voluptatibus?\u003C\u002Fp>\u003C\u002Fdiv>\n",[701,925,923],{"__ignoreMap":813},[682,927,928],{},"The above code will give you this outcome in the browser:",[682,930,931],{},[870,932],{"alt":813,"src":933},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fimg-002.png",[843,935,937],{"id":936},"alignment-and-float",[685,938,941],{"href":939,"rel":940},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ffloat",[689],"Alignment and Float",[682,943,944],{},"Alignment and Float help us to position text. We can align text to the center, left, or right of the page. Twitter Bootstrap V5 made many changes to Alignment and Float because several utilities changed names.",[735,946,947,958,968],{},[738,948,949,704,951,722,953,704,955],{},[701,950,703],{},[701,952,707],{},[701,954,711],{},[701,956,957],{},"end-*",[738,959,960,704,962,722,964,704,966],{},[701,961,718],{},[701,963,721],{},[701,965,725],{},[701,967,728],{},[738,969,970,704,973,722,976,704,979],{},[701,971,972],{},"text-left-*",[701,974,975],{},"text-right-*",[701,977,978],{},"text-start*",[701,980,981],{},"text-end*",[682,983,984,985,988],{},"The ",[701,986,987],{},"\u003Chr>"," tag, called the Horizontal rule, breaks the paragraph-level element.",[682,990,991,992,995,996,995,999,995,1002,1005,1006,1009,1010,1012,1013,1015,1016,1018,1019,704,1021,1023,1024,1027],{},"For alignment, we will use different classes: ",[701,993,994],{},"text-start",", ",[701,997,998],{},"text-center",[701,1000,1001],{},"text-end",[701,1003,1004],{},"text-justify",", and ",[701,1007,1008],{},"text-nowrap",". We also have some transformation classes. For example, let's say that we want all of the ",[701,1011,994],{}," to be upper case, the ",[701,1014,998],{}," to be capitalized, and the ",[701,1017,1001],{}," to be lowercase. We’ll add it to the Transformation classes. In Float, we have ",[701,1020,725],{},[701,1022,728],{},". Note that when you float something, you have to clear it in order for the code to go back to normal. In Twitter Bootstrap, a special utility called ",[701,1025,1026],{},"Clearfix"," will do this quickly.",[805,1029,1032],{"className":1030,"code":1031,"language":810},[808],"\u003Chr>\u003C!-- ALIGNMENT & TRANSFORMATION -->\u003Cp class=\"text-start text-uppercase\">start aligned text.\u003C\u002Fp>\u003Cp class=\"text-center text-capitalize\">Center aligned text.\u003C\u002Fp>\u003Cp class=\"text-end text-lowercase\">end aligned text.\u003C\u002Fp>\u003Cp class=\"text-justify\">Justified text.\u003C\u002Fp>\u003Cp class=\"text-nowrap\">No Wrap text.\u003C\u002Fp>\u003C!-- QUICK FLOATS -->\u003Cdiv class=\"float-start\">Float start on all viewport sizes\u003C\u002Fdiv>\u003Cdiv class=\"float-end\">Float end on all viewport sizes\u003C\u002Fdiv>\u003C!-- CLEAR FLOATS -->\u003Cdiv class=\"clearfix\">\u003C\u002Fdiv>\u003Chr>\n",[701,1033,1031],{"__ignoreMap":813},[682,1035,1036],{},"The code above will show the outcome below in a Chrome browser:",[682,1038,1039],{},[870,1040],{"alt":1041,"src":1042},"text floating in different areas of the screen with different alignments shown in the browser ","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fimg-003.png",[843,1044,1046],{"id":1045},"block-quotes",[685,1047,1050],{"href":1048,"rel":1049},"https:\u002F\u002Fwww.w3schools.com\u002Ftags\u002Ftag_blockquote.asp",[689],"Block Quotes",[682,1052,1053],{},"We use block quotes to style the blocks of contents from other sources that appear within our document. Block quotes make a project look excellent and well-organized. When we use block quotes, we are quoting from another source; hence we should link the URL in the cited example.",[805,1055,1058],{"className":1056,"code":1057,"language":810},[808],"\u003C!-- BLOCKQUOTE -->\u003Cblockquote class=\"blockquote\">\u003Cp>A typical example of Blockquote.\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cfigcaption class=\"blockquote-footer\">Quote by \u003Ccite title=\"Emeka Henry\">Emeka Henry\u003C\u002Fcite>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n",[701,1059,1057],{"__ignoreMap":813},[682,1061,1062],{},"The above code will give us the outcome below in the Chrome browser:",[682,1064,1065],{},[870,1066],{"alt":1067,"src":1068},"an example of a block quote in the browser that results from the code above","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fimg-004.png",[843,1070,1072],{"id":1071},"list-item-element",[685,1073,1076],{"href":1074,"rel":1075},"https:\u002F\u002Fwww.w3schools.com\u002Fbootstrap\u002Fbootstrap_list_groups.asp",[689],"List Item Element",[682,1078,984,1079,1082,1083,1086,1087,1090,1091,1094,1095,1098,1099,1102],{},[701,1080,1081],{},"\u003Cli>"," tag represent the items we have in a list which are always contained in a parent element; for example, an ordered list ",[701,1084,1085],{},"\u003Col>",", an unordered list ",[701,1088,1089],{},"\u003Cul>",", or a menu list ",[701,1092,1093],{},"\u003Cmenu>",". The list item naturally comes with a bullet, but the bullets will disappear once we add a class like ",[701,1096,1097],{},"list-unstyled",". We also have a ",[701,1100,1101],{},"list-inline"," which is very good for a menu. Here’s an example of the code of the list item below:",[805,1104,1107],{"className":1105,"code":1106,"language":810},[808],"\u003C!-- LISTS -->\u003Cul class=\"list-unstyled\">\u003Cli>first item.\u003C\u002Fli>\u003Cli>second item.\u003C\u002Fli>\u003Cli>third item.\u003C\u002Fli>\u003Cli>fourth item.\u003C\u002Fli>\u003Cli>fifth item.\u003C\u002Fli>\u003C\u002Ful>\u003Cul class=\"list-inline\">\u003Cli class=\"list-inline-item\">first item.\u003C\u002Fli>\u003Cli class=\"list-inline-item\">second item.\u003C\u002Fli>\u003Cli class=\"list-inline-item\">third item.\u003C\u002Fli>\u003Cli class=\"list-inline-item\">fourth item.\u003C\u002Fli>\u003Cli class=\"list-inline-item\">fifth item.\u003C\u002Fli>\u003C\u002Ful>\n",[701,1108,1106],{"__ignoreMap":813},[682,1110,1111],{},"The code above will give us the outcome below in the browser:",[682,1113,1114],{},[870,1115],{"alt":1116,"src":1117},"an example of a list element in the browser that results from the code above","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fimg-005.png",[843,1119,1121],{"id":1120},"contextual-colors-element",[685,1122,1125],{"href":1123,"rel":1124},"https:\u002F\u002Fwww.w3schools.com\u002Fbootstrap4\u002Fbootstrap_colors.asp",[689],"Contextual Colors Element",[682,1127,1128],{},"The contextual color will help us to add color to our text in order to alert people on things like danger, warning, success, etc. Twitter Bootstrap’s contextual colors help us with flexible alert messages and adequate styling.",[805,1130,1133],{"className":1131,"code":1132,"language":810},[808],"\u003C!-- CONTEXTUAL COLORS -->\u003Cdiv class=\"alert alert-default\" role=\"alert\">A Default alert\u003Cdiv class=\"alert alert-primary\" role=\"alert\">A primary alert\u003C\u002Fdiv>\u003Cdiv class=\"alert alert-secondary\" role=\"alert\">A secondary alert\u003C\u002Fdiv>\u003Cdiv class=\"alert alert-success\" role=\"alert\">A success alert\u003C\u002Fdiv>\u003Cdiv class=\"alert alert-danger\" role=\"alert\">Danger alert\u003C\u002Fdiv>\u003Cdiv class=\"alert alert-warning\" role=\"alert\">A warning alert\u003C\u002Fdiv>\n",[701,1134,1132],{"__ignoreMap":813},[682,1136,1137],{},"The above code will give us the outcome below on the Chrome browser:",[682,1139,1140],{},[870,1141],{"alt":1142,"src":1143},"an example of contextual color elements being shown in the browser that results from the code above","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fimg-006.png",[843,1145,1147],{"id":1146},"buttons",[685,1148,1151],{"href":1149,"rel":1150},"https:\u002F\u002Fgetbootstrap.com\u002Fdocs\u002F4.0\u002Fcomponents\u002Fbuttons\u002F",[689],"Buttons",[682,1153,1154],{},"Bootstrap V5 has many buttons, each programmed to support multiple sizes. I will start from the default buttons to other buttons like primary, secondary, success, etc. The code for the complete button and the code for button sizes is below:",[805,1156,1159],{"className":1157,"code":1158,"language":810},[808],"\u003C!-- BUTTONS -->\u003Cbutton type=\"button\" class=\"btn btn-default\">Default\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"btn btn-primary\">Primary\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"btn btn-secondary\">Secondary\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"btn btn-success\">Success\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"btn btn-danger\">Danger\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"btn btn-warning\">Warning\u003C\u002Fbutton>\u003Cbr>\u003C!-- BUTTONS SIZES -->\u003Cbutton type=\"button\" class=\"btn btn-default btn-sm\">Small button\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"btn btn-primary btn-sm\">Small button\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"btn btn-secondary btn-sm\">Small button\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"btn btn-primary\" disabled>Primary button\u003C\u002Fbutton>\u003Cbutton type=\"button\" class=\"btn btn-secondary\" disabled>Button\u003C\u002Fbutton>\n",[701,1160,1158],{"__ignoreMap":813},[682,1162,1137],{},[682,1164,1165],{},[870,1166],{"alt":1167,"src":1168},"an example of colorful buttons in the browser that result from the code above","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fimg-007.png",[843,1170,1172],{"id":1171},"forms",[685,1173,1176],{"href":1174,"rel":1175},"https:\u002F\u002Fwww.w3schools.com\u002FBootstrap\u002Fbootstrap_forms.asp",[689],"Forms",[682,1178,1179],{},"With Bootstrap by Twitter, you can easily create a well-styled form that has up to four inputs like your name, your email, your messages, and your password, along with the form-check and the submit button. I will drop the code for the form below:",[805,1181,1184],{"className":1182,"code":1183,"language":810},[808],"\u003C!-- FORMS -->\u003Cform>\u003Cdiv class=\"mb-3\">\u003Clabel for=\"InputName\" class=\"form-label\">Name\u003C\u002Flabel>\u003Cinput type=\"Name\" class=\"form-control\" id=\"InputName\">\u003C\u002Fdiv>\u003Cdiv class=\"mb-3\">\u003Clabel for=\"InputEmail\" class=\"form-label\">Email address\u003C\u002Flabel>\u003Cinput type=\"email\" class=\"form-control\" id=\"InputEmail\" aria-describedby=\"emailHelp\">\u003Cdiv id=\"emailHelp\" class=\"form-text\">We won't share your email with anybody.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"mb-3\">\u003Clabel for=\"yourmessage\" class=\"form-label\">Message\u003C\u002Flabel>\u003Cinput type=\"password\" class=\"form-control\" id=\"yourmessage\">\u003C\u002Fdiv>\u003Cdiv class=\"mb-3\">\u003Clabel for=\"InputPassword\" class=\"form-label\">Password\u003C\u002Flabel>\u003Cinput type=\"password\" class=\"form-control\" id=\"InputPassword\">\u003C\u002Fdiv>\u003Cdiv class=\"mb-3 form-check\">\u003Cinput type=\"checkbox\" class=\"form-check-input\" id=\"Check\">\u003Clabel class=\"form-check-label\" for=\"Check\">Check me out\u003C\u002Flabel>\u003C\u002Fdiv>\u003Cbutton type=\"submit\" class=\"btn btn-primary\">Submit\u003C\u002Fbutton>\u003C\u002Fform>\u003C\u002Fform>\n",[701,1185,1183],{"__ignoreMap":813},[682,1187,1188],{},"The code above will give us the output below on the Chrome browser:",[682,1190,1191],{},[870,1192],{"alt":1193,"src":1194},"an example of an input form in the browser that results from the code above","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fimg-008.png",[843,1196,1198],{"id":1197},"tables",[685,1199,1202],{"href":1200,"rel":1201},"https:\u002F\u002Fwww.w3schools.com\u002Fbootstrap5\u002Fbootstrap_tables.php",[689],"Tables",[682,1204,1205],{},"Bootstrap tables are responsive. You can modify the table by adding buttons, checkboxes, and so on.",[805,1207,1210],{"className":1208,"code":1209,"language":810},[808],"\u003C!-- TABLE -->\u003Ctable class=\"table\">\u003Cthead>\u003Ctr>\u003Cth scope=\"col\">Serial Number\u003C\u002Fth>\u003Cth scope=\"col\">First-name\u003C\u002Fth>\u003Cth scope=\"col\">Last-name\u003C\u002Fth>\u003Cth scope=\"col\">Handle\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Cth scope=\"row\">1\u003C\u002Fth>\u003Ctd>Emeka\u003C\u002Ftd>\u003Ctd>Henry\u003C\u002Ftd>\u003Ctd>@emekahenry\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Cth scope=\"row\">2\u003C\u002Fth>\u003Ctd>Cynthia\u003C\u002Ftd>\u003Ctd>Eboh\u003C\u002Ftd>\u003Ctd>@cynthiaeboh\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Cth scope=\"row\">3\u003C\u002Fth>\u003Ctd colspan=\"2\">Jessy the Sparkles\u003C\u002Ftd>\u003Ctd>@jesysparkles\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\n",[701,1211,1209],{"__ignoreMap":813},[682,1213,1137],{},[682,1215,1216],{},[870,1217],{"alt":1218,"src":1219},"an example of a table shown in the browser that results from the code above","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fimg-009.png",[693,1221,1223],{"id":1222},"conclusion","Conclusion",[682,1225,1226],{},"Twitter’s Bootstrap V5 will help a programmer work faster and create responsive pages. Tested by professionals and used by millions of developers, Bootstrap is easily customizable and compatible with all web browsers.",{"title":813,"searchDepth":1228,"depth":1228,"links":1229},2,[1230,1231,1232,1233,1244],{"id":695,"depth":1228,"text":696},{"id":732,"depth":1228,"text":733},{"id":772,"depth":1228,"text":773},{"id":837,"depth":1228,"text":838,"children":1234},[1235,1236,1237,1238,1239,1240,1241,1242,1243],{"id":845,"depth":816,"text":850},{"id":876,"depth":816,"text":880},{"id":936,"depth":816,"text":941},{"id":1045,"depth":816,"text":1050},{"id":1071,"depth":816,"text":1076},{"id":1120,"depth":816,"text":1125},{"id":1146,"depth":816,"text":1151},{"id":1171,"depth":816,"text":1176},{"id":1197,"depth":816,"text":1202},{"id":1222,"depth":1228,"text":1223},"Software Development","2022-12-01T00:00:00.000Z","Bootstrap by Twitter makes it easy for us all to build outstanding-looking websites. Learn how to utilize the framework in this article.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5\u002Fhero.jpeg","decorative cover image showing code on a screen",{},"\u002Fblog\u002Fimpact-of-working-with-twitter-bootstrap-v5",{"title":673,"description":1247},"blog\u002Fimpact-of-working-with-twitter-bootstrap-v5",[1257],"bootstrap; twitter","IvsV4Gc7pUPh6V-ImiDdw3IrZWD4ekjwvf90fOr043I",{"id":1260,"title":674,"body":1261,"description":813,"draft":1248,"extension":1249,"meta":1265,"navigation":32,"path":1266,"photo":1267,"photoAlt":676,"seo":1268,"stem":1269,"__hash__":1270},"authors\u002Fauthors\u002Femeka-henry-nnamani.md",{"type":679,"value":1262,"toc":1263},[],{"title":813,"searchDepth":1228,"depth":1228,"links":1264},[],{},"\u002Fauthors\u002Femeka-henry-nnamani","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Femeka-henry-nnamani.png",{"title":674,"description":813},"authors\u002Femeka-henry-nnamani","ZgrYn3_GSjneVYiXrU_4PqAyHWUFTfzyzanahyrUAFc",{"left":1272,"top":1272,"width":1273,"height":1273,"rotate":1272,"vFlip":1248,"hFlip":1248,"body":1274},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]