[{"data":1,"prerenderedAt":224},["ShallowReactive",2],{"term-b\u002Fbootstrap":3,"related-b\u002Fbootstrap":209},{"id":4,"title":5,"acronym":6,"body":7,"category":190,"description":191,"difficulty":192,"extension":193,"letter":194,"meta":195,"navigation":196,"path":197,"related":198,"seo":203,"sitemap":204,"stem":207,"subcategory":6,"__hash__":208},"terms\u002Fterms\u002Fb\u002Fbootstrap.md","Bootstrap",null,{"type":8,"value":9,"toc":184},"minimark",[10,15,19,23,26,30,173,177,180],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Bootstrap is the OG CSS framework — add a class and get a pre-styled button, grid, modal, or navbar. It made responsive design accessible to everyone in 2011. The downside: everything built with it looks a little... the same. The Bootstrap look is very recognizable.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Bootstrap is a component-based CSS framework developed by Twitter. It provides a responsive 12-column grid system, pre-built UI components (modals, navbars, cards), utility classes, and JavaScript plugins. Version 5 dropped jQuery. While its design aesthetic is recognizable, it remains widely used in enterprise projects.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"container\">\n  \u003Cdiv class=\"row\">\n    \u003Cdiv class=\"col-md-6\">Left column\u003C\u002Fdiv>\n    \u003Cdiv class=\"col-md-6\">Right column\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[38,39,40,72,93,126,154,164],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,67,69],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sMK4o","\u003C",[41,50,52],{"class":51},"swJcz","div",[41,54,56],{"class":55},"spNyl"," class",[41,58,59],{"class":47},"=",[41,61,62],{"class":47},"\"",[41,64,66],{"class":65},"sfazB","container",[41,68,62],{"class":47},[41,70,71],{"class":47},">\n",[41,73,75,78,80,82,84,86,89,91],{"class":43,"line":74},2,[41,76,77],{"class":47},"  \u003C",[41,79,52],{"class":51},[41,81,56],{"class":55},[41,83,59],{"class":47},[41,85,62],{"class":47},[41,87,88],{"class":65},"row",[41,90,62],{"class":47},[41,92,71],{"class":47},[41,94,96,99,101,103,105,107,110,112,115,119,122,124],{"class":43,"line":95},3,[41,97,98],{"class":47},"    \u003C",[41,100,52],{"class":51},[41,102,56],{"class":55},[41,104,59],{"class":47},[41,106,62],{"class":47},[41,108,109],{"class":65},"col-md-6",[41,111,62],{"class":47},[41,113,114],{"class":47},">",[41,116,118],{"class":117},"sTEyZ","Left column",[41,120,121],{"class":47},"\u003C\u002F",[41,123,52],{"class":51},[41,125,71],{"class":47},[41,127,129,131,133,135,137,139,141,143,145,148,150,152],{"class":43,"line":128},4,[41,130,98],{"class":47},[41,132,52],{"class":51},[41,134,56],{"class":55},[41,136,59],{"class":47},[41,138,62],{"class":47},[41,140,109],{"class":65},[41,142,62],{"class":47},[41,144,114],{"class":47},[41,146,147],{"class":117},"Right column",[41,149,121],{"class":47},[41,151,52],{"class":51},[41,153,71],{"class":47},[41,155,157,160,162],{"class":43,"line":156},5,[41,158,159],{"class":47},"  \u003C\u002F",[41,161,52],{"class":51},[41,163,71],{"class":47},[41,165,167,169,171],{"class":43,"line":166},6,[41,168,121],{"class":47},[41,170,52],{"class":51},[41,172,71],{"class":47},[11,174,176],{"id":175},"when-youll-hear-this","When You'll Hear This",[16,178,179],{},"\"The client wants it fast — just use Bootstrap.\" \u002F \"You can always tell a Bootstrap site by the default button style.\"",[181,182,183],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":74,"depth":74,"links":185},[186,187,188,189],{"id":13,"depth":74,"text":14},{"id":21,"depth":74,"text":22},{"id":28,"depth":74,"text":29},{"id":175,"depth":74,"text":176},"frontend","Bootstrap is the OG CSS framework — add a class and get a pre-styled button, grid, modal, or navbar.","beginner","md","b",{},true,"\u002Fterms\u002Fb\u002Fbootstrap",[199,200,201,202],"Tailwind","CSS","Responsive Design","CSS Grid",{"title":5,"description":191},{"changefreq":205,"priority":206},"weekly",0.7,"terms\u002Fb\u002Fbootstrap","kCcBjhKxNh1_ww9HEW6DhOP6i5NSAty-tn1oPwIllaM",[210,214,218,221],{"title":200,"path":211,"acronym":212,"category":190,"difficulty":192,"description":213},"\u002Fterms\u002Fc\u002Fcss","Cascading Style Sheets","CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.",{"title":202,"path":215,"acronym":6,"category":190,"difficulty":216,"description":217},"\u002Fterms\u002Fc\u002Fcss-grid","intermediate","CSS Grid is the two-dimensional layout system — rows AND columns at the same time. Think of it like a spreadsheet you can put your whole website into.",{"title":201,"path":219,"acronym":6,"category":190,"difficulty":192,"description":220},"\u002Fterms\u002Fr\u002Fresponsive-design","Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.",{"title":199,"path":222,"acronym":6,"category":190,"difficulty":192,"description":223},"\u002Fterms\u002Ft\u002Ftailwind","Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.",1776518260867]