🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 92 (from laksa024)

2. Crawled Status Check

Query:

Response:

{"found_url":"https:\/\/getbootstrap.com\/","crawl_time":1775556245,"first_indexed_time":1407402624,"http_code":200,"src_unparsed":"com,getbootstrap!\/ s443","src_root_hash":"4088328555173515292","history_drop_reason":null,"meta_title":"Bootstrap · The most popular HTML, CSS, and JS library in the world.","meta_descriptions":["Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."],"attrs_boilerpipe_text":"Get started any way you want\nJump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.\nRead installation docs\nInstall via package manager\nInstall Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed\n      installs don’t include documentation or our full build scripts. You can also\nuse any demo from our Examples repo\nto quickly jumpstart Bootstrap projects.\nnpm\ninstall\nbootstrap@5.3.8\ngem\ninstall\nbootstrap\n-v\n5.3\n.8\nRead our installation docs\nfor more info and additional\n      package managers.\nInclude via CDN\nWhen you only need to include Bootstrap’s compiled CSS or JS, you can use\njsDelivr\n. See it in action with our simple\nquick start\n, or\nbrowse the examples\nto jumpstart your next project. You can also\n      choose to include Popper and our JS\nseparately\n.\n<\nlink\nhref\n=\n\"\nhttps:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.8\/dist\/css\/bootstrap.min.css\n\"\nrel\n=\n\"\nstylesheet\n\"\nintegrity\n=\n\"\nsha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\n\"\ncrossorigin\n=\n\"\nanonymous\n\"\n>\n<\nscript\nsrc\n=\n\"\nhttps:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.8\/dist\/js\/bootstrap.bundle.min.js\n\"\nintegrity\n=\n\"\nsha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK\/BmnVDxM+D2scQbITxI\n\"\ncrossorigin\n=\n\"\nanonymous\n\"\n>\n<\/\nscript\n>\nRead our getting started guides\nGet a jump on including Bootstrap's source files in a new project with our official guides.\nWebpack\nParcel\nVite\nCustomize everything with Sass\nBootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable\n    global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.\nLearn more about customizing\nInclude all of Bootstrap’s Sass\nImport one stylesheet and you're off to the races with every feature of our CSS.\n\/\/ Variable overrides first\n$primary\n:\n#900\n;\n$enable-shadows\n:\ntrue\n;\n$prefix\n:\n\"mo-\"\n;\n\/\/ Then import Bootstrap\n@import\n\"..\/node_modules\/bootstrap\/scss\/bootstrap\"\n;\nLearn more about our\nglobal Sass options\n.\nInclude what you need\nThe easiest way to customize Bootstrap—include only the CSS you need.\n\/\/ Functions first\n@import\n\"..\/node_modules\/bootstrap\/scss\/functions\"\n;\n\/\/ Variable overrides second\n$primary\n:\n#900\n;\n$enable-shadows\n:\ntrue\n;\n$prefix\n:\n\"mo-\"\n;\n\/\/ Required Bootstrap imports\n@import\n\"..\/node_modules\/bootstrap\/scss\/variables\"\n;\n@import\n\"..\/node_modules\/bootstrap\/scss\/variables-dark\"\n;\n@import\n\"..\/node_modules\/bootstrap\/scss\/maps\"\n;\n@import\n\"..\/node_modules\/bootstrap\/scss\/mixins\"\n;\n@import\n\"..\/node_modules\/bootstrap\/scss\/root\"\n;\n\/\/ Optional components\n@import\n\"..\/node_modules\/bootstrap\/scss\/utilities\"\n;\n@import\n\"..\/node_modules\/bootstrap\/scss\/reboot\"\n;\n@import\n\"..\/node_modules\/bootstrap\/scss\/containers\"\n;\n@import\n\"..\/node_modules\/bootstrap\/scss\/grid\"\n;\n@import\n\"..\/node_modules\/bootstrap\/scss\/helpers\"\n;\n@import\n\"..\/node_modules\/bootstrap\/scss\/utilities\/api\"\n;\nLearn more about\nusing Bootstrap with Sass\n.\nBuild and extend in real-time with CSS variables\nBootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual\n      components, and even utilities. We provide dozens of variables for colors, font styles, and more at a\n:root\nlevel for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily\n      be modified.\nLearn more about CSS variables\nUsing CSS variables\nUse any of our\nglobal\n:root\nvariables\nto write new styles. CSS variables use the\nvar(--bs-variableName)\nsyntax and can be inherited by children\n        elements.\n.component\n{\ncolor\n:\nvar\n(\n--bs-gray-800\n)\n;\nbackground-color\n:\nvar\n(\n--bs-gray-100\n)\n;\nborder\n:\n1px solid\nvar\n(\n--bs-gray-200\n)\n;\nborder-radius\n:\n.25rem\n;\n}\n.component-header\n{\ncolor\n:\nvar\n(\n--bs-purple\n)\n;\n}\nCustomizing via CSS variables\nOverride global, component, or utility class variables to customize Bootstrap just how you like. No need to\n        redeclare each rule, just a new variable value.\nbody\n{\n--bs-body-font-family\n:\nvar\n(\n--bs-font-monospace\n)\n;\n--bs-body-line-height\n:\n1.4\n;\n--bs-body-bg\n:\nvar\n(\n--bs-gray-100\n)\n;\n}\n.table\n{\n--bs-table-color\n:\nvar\n(\n--bs-gray-600\n)\n;\n--bs-table-bg\n:\nvar\n(\n--bs-gray-100\n)\n;\n--bs-table-border-color\n:\ntransparent\n;\n}\nComponents, meet the Utility API\nNew in Bootstrap 5, our utilities are now generated by our\nUtility API\n. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to\n      add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them\n      custom names.\nQuickly customize components\nApply any of our included utility classes to our components to customize their appearance, like the navigation\n        example below. There are hundreds of classes available—from\npositioning\nand\nsizing\nto\ncolors\nand\neffects\n. Mix them with CSS variable overrides for\n        even more control.\n<\nul\nclass\n=\n\"\nnav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm\n\"\nid\n=\n\"\npillNav2\n\"\nrole\n=\n\"\ntablist\n\"\nstyle\n=\n\"\n--bs-nav-link-color\n:\nvar\n(\n--bs-white\n)\n;\n--bs-nav-pills-link-active-color\n:\nvar\n(\n--bs-primary\n)\n;\n--bs-nav-pills-link-active-bg\n:\nvar\n(\n--bs-white\n)\n;\n\"\n>\n<\nli\nclass\n=\n\"\nnav-item\n\"\nrole\n=\n\"\npresentation\n\"\n>\n<\nbutton\nclass\n=\n\"\nnav-link active rounded-5\n\"\nid\n=\n\"\nhome-tab2\n\"\ndata-bs-toggle\n=\n\"\ntab\n\"\ntype\n=\n\"\nbutton\n\"\nrole\n=\n\"\ntab\n\"\naria-selected\n=\n\"\ntrue\n\"\n>\nHome\n<\/\nbutton\n>\n<\/\nli\n>\n<\nli\nclass\n=\n\"\nnav-item\n\"\nrole\n=\n\"\npresentation\n\"\n>\n<\nbutton\nclass\n=\n\"\nnav-link rounded-5\n\"\nid\n=\n\"\nprofile-tab2\n\"\ndata-bs-toggle\n=\n\"\ntab\n\"\ntype\n=\n\"\nbutton\n\"\nrole\n=\n\"\ntab\n\"\naria-selected\n=\n\"\nfalse\n\"\n>\nProfile\n<\/\nbutton\n>\n<\/\nli\n>\n<\nli\nclass\n=\n\"\nnav-item\n\"\nrole\n=\n\"\npresentation\n\"\n>\n<\nbutton\nclass\n=\n\"\nnav-link rounded-5\n\"\nid\n=\n\"\ncontact-tab2\n\"\ndata-bs-toggle\n=\n\"\ntab\n\"\ntype\n=\n\"\nbutton\n\"\nrole\n=\n\"\ntab\n\"\naria-selected\n=\n\"\nfalse\n\"\n>\nContact\n<\/\nbutton\n>\n<\/\nli\n>\n<\/\nul\n>\nExplore customized components\nCreate and extend utilities\nUse Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any\n        project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.\n@import\n\"bootstrap\/scss\/bootstrap\"\n;\n$utilities\n:\nmap-merge\n(\n$utilities\n,\n(\n\"cursor\"\n:\n(\nproperty\n:\ncursor\n,\nclass\n:\ncursor\n,\nresponsive\n:\ntrue\n,\nvalues\n:\nauto pointer grab\n,\n)\n)\n)\n;\nExplore the utility API\nPowerful JavaScript plugins without jQuery\nAdd toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without\n      jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with\ndata\nattributes in your\n      HTML. Need more control? Include individual plugins programmatically.\nLearn more about Bootstrap JavaScript\nData attribute API\nWhy write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a\n        first-class data API, allowing you to use JavaScript just by adding\ndata\nattributes.\n<\ndiv\nclass\n=\n\"\ndropdown\n\"\n>\n<\nbutton\nclass\n=\n\"\nbtn btn-primary dropdown-toggle\n\"\ntype\n=\n\"\nbutton\n\"\ndata-bs-toggle\n=\n\"\ndropdown\n\"\naria-expanded\n=\n\"\nfalse\n\"\n>\nDropdown\n<\/\nbutton\n>\n<\nul\nclass\n=\n\"\ndropdown-menu\n\"\n>\n<\nli\n>\n<\nbutton\nclass\n=\n\"\ndropdown-item\n\"\ntype\n=\n\"\nbutton\n\"\n>\nDropdown item\n<\/\nbutton\n>\n<\/\nli\n>\n<\nli\n>\n<\nbutton\nclass\n=\n\"\ndropdown-item\n\"\ntype\n=\n\"\nbutton\n\"\n>\nDropdown item\n<\/\nbutton\n>\n<\/\nli\n>\n<\nli\n>\n<\nbutton\nclass\n=\n\"\ndropdown-item\n\"\ntype\n=\n\"\nbutton\n\"\n>\nDropdown item\n<\/\nbutton\n>\n<\/\nli\n>\n<\/\nul\n>\n<\/\ndiv\n>\nLearn more about\nour JavaScript as modules\nand\nusing the programmatic API\n.\nComprehensive set of plugins\nBootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just\n        the ones you need.\nAlert\nShow and hide alert messages to your users.\nButton\nProgrammatically control the active state for buttons.\nCarousel\nAdd slideshows to any page, including support for crossfade.\nCollapse\nExpand and collapse areas of content, or create accordions.\nDropdown\nCreate menus of links, actions, forms, and more.\nModal\nAdd flexible and responsive dialogs to your project.\nOffcanvas\nBuild and toggle hidden sidebars into any page.\nPopover\nCreate custom overlays. Built on Popper.\nScrollspy\nAutomatically update active nav links based on page scroll.\nTab\nAllow Bootstrap nav components to toggle contents.\nToast\nShow and hide notifications to your visitors.\nTooltip\nReplace browser tooltips with custom ones. Built on Popper.\nPersonalize it with Bootstrap Icons\nBootstrap Icons\nis an open source SVG icon library featuring over 1,800 glyphs, with\n      more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them\n      as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.\nGet Bootstrap Icons","attrs_markdown":"[Skip to main content](https:\/\/getbootstrap.com\/#content)\n\nSearch\n\n```K`\n\n##### Bootstrap\n***\n- [Docs](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/)\n- [Examples](https:\/\/getbootstrap.com\/docs\/5.3\/examples\/)\n- [Icons](https:\/\/icons.getbootstrap.com\/)\n- [Blog](https:\/\/blog.getbootstrap.com\/)\n***\n- [GitHub](https:\/\/github.com\/twbs)\n- [X](https:\/\/x.com\/getbootstrap)\n- [Open Collective](https:\/\/opencollective.com\/bootstrap)\n- ***\n- BootstrapBootstrap  v5.3 (switch to other versions)\n  - ###### v5 releases\n  - [Latest (5.3.x)](https:\/\/getbootstrap.com\/)\n  - [v5.2.3](https:\/\/getbootstrap.com\/docs\/5.2\/)\n  - [v5.1.3](https:\/\/getbootstrap.com\/docs\/5.1\/)\n  - [v5.0.2](https:\/\/getbootstrap.com\/docs\/5.0\/)\n  - ***\n  - ###### Previous releases\n  - [v4.6.x](https:\/\/getbootstrap.com\/docs\/4.6\/)\n  - [v3.4.1](https:\/\/getbootstrap.com\/docs\/3.4\/)\n  - [v2.3.2](https:\/\/getbootstrap.com\/2.3.2\/)\n  - ***\n  - [All versions](https:\/\/getbootstrap.com\/docs\/versions\/)\n- ***\n- Toggle theme\n  - Light\n  - Dark\n  - Auto\n\n[Get Security Updates for Bootstrap 3 & 4](https:\/\/www.herodevs.com\/support\/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol)\n\n![Bootstrap](https:\/\/getbootstrap.com\/docs\/5.3\/assets\/brand\/bootstrap-logo-shadow.png)\n\n# Build fast, responsive sites with Bootstrap\nPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.\n\n```\nnpm i bootstrap@5.3.8\n```\n[Read the docs](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction)\n\nCurrently **v5.3.8** · [Download](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/download) · [All releases](https:\/\/getbootstrap.com\/docs\/versions\/)\n\n## Get started any way you want\nJump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.\n\n[Read installation docs](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/download\/)\n\n### Install via package manager\nInstall Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our full build scripts. You can also [use any demo from our Examples repo](https:\/\/github.com\/twbs\/examples\/) to quickly jumpstart Bootstrap projects.\n```\nnpm install bootstrap@5.3.8\n```\n```\ngem install bootstrap -v 5.3.8\n```\n[Read our installation docs](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/download) for more info and additional package managers.\n\n### Include via CDN\nWhen you only need to include Bootstrap’s compiled CSS or JS, you can use [jsDelivr](https:\/\/www.jsdelivr.com\/package\/npm\/bootstrap). See it in action with our simple [quick start](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/#quick-start), or [browse the examples](https:\/\/getbootstrap.com\/docs\/5.3\/examples) to jumpstart your next project. You can also choose to include Popper and our JS [separately](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/#separate).\n```\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.8\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\" crossorigin=\"anonymous\">\n```\n```\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.8\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK\/BmnVDxM+D2scQbITxI\" crossorigin=\"anonymous\"><\/script>\n```\n\n#### Read our getting started guides\nGet a jump on including Bootstrap's source files in a new project with our official guides.\n\n[![](https:\/\/getbootstrap.com\/docs\/5.3\/assets\/img\/webpack.svg) Webpack](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/webpack\/)   [![](https:\/\/getbootstrap.com\/docs\/5.3\/assets\/img\/parcel.png) Parcel](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/parcel\/)   [![](https:\/\/getbootstrap.com\/docs\/5.3\/assets\/img\/vite.svg) Vite](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/vite\/)\n\n## Customize everything with Sass\nBootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.\n\n[Learn more about customizing](https:\/\/getbootstrap.com\/docs\/5.3\/customize\/overview\/)\n\n### Include all of Bootstrap’s Sass\nImport one stylesheet and you're off to the races with every feature of our CSS.\n```\n\/\/ Variable overrides first\n$primary: #900;\n$enable-shadows: true;\n$prefix: \"mo-\";\n\n\/\/ Then import Bootstrap\n@import \"..\/node_modules\/bootstrap\/scss\/bootstrap\";\n```\nLearn more about our [global Sass options](https:\/\/getbootstrap.com\/docs\/5.3\/customize\/options).\n\n### Include what you need\nThe easiest way to customize Bootstrap—include only the CSS you need.\n```\n\/\/ Functions first\n@import \"..\/node_modules\/bootstrap\/scss\/functions\";\n\n\/\/ Variable overrides second\n$primary: #900;\n$enable-shadows: true;\n$prefix: \"mo-\";\n\n\/\/ Required Bootstrap imports\n@import \"..\/node_modules\/bootstrap\/scss\/variables\";\n@import \"..\/node_modules\/bootstrap\/scss\/variables-dark\";\n@import \"..\/node_modules\/bootstrap\/scss\/maps\";\n@import \"..\/node_modules\/bootstrap\/scss\/mixins\";\n@import \"..\/node_modules\/bootstrap\/scss\/root\";\n\n\/\/ Optional components\n@import \"..\/node_modules\/bootstrap\/scss\/utilities\";\n@import \"..\/node_modules\/bootstrap\/scss\/reboot\";\n@import \"..\/node_modules\/bootstrap\/scss\/containers\";\n@import \"..\/node_modules\/bootstrap\/scss\/grid\";\n@import \"..\/node_modules\/bootstrap\/scss\/helpers\";\n@import \"..\/node_modules\/bootstrap\/scss\/utilities\/api\";\n```\nLearn more about [using Bootstrap with Sass](https:\/\/getbootstrap.com\/docs\/5.3\/customize\/sass).\n\n## Build and extend in real-time with CSS variables\nBootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a `:root` level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.\n\n[Learn more about CSS variables](https:\/\/getbootstrap.com\/docs\/5.3\/customize\/css-variables)\n\n### Using CSS variables\nUse any of our [global `:root` variables](https:\/\/getbootstrap.com\/docs\/5.3\/customize\/css-variables\/#root-variables) to write new styles. CSS variables use the `var(--bs-variableName)` syntax and can be inherited by children elements.\n```\n.component {\n  color: var(--bs-gray-800);\n  background-color: var(--bs-gray-100);\n  border: 1px solid var(--bs-gray-200);\n  border-radius: .25rem;\n}\n\n.component-header {\n  color: var(--bs-purple);\n}\n```\n\n### Customizing via CSS variables\nOverride global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value.\n```\nbody {\n  --bs-body-font-family: var(--bs-font-monospace);\n  --bs-body-line-height: 1.4;\n  --bs-body-bg: var(--bs-gray-100);\n}\n\n.table {\n  --bs-table-color: var(--bs-gray-600);\n  --bs-table-bg: var(--bs-gray-100);\n  --bs-table-border-color: transparent;\n}\n```\n\n## Components, meet the Utility API\nNew in Bootstrap 5, our utilities are now generated by our [Utility API](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/api). We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.\n\n### Quickly customize components\nApply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from [positioning](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/position) and [sizing](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/sizing) to [colors](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/colors) and [effects](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/shadows). Mix them with CSS variable overrides for even more control.\n\n- Home\n- Profile\n- Contact\n\n- Home\n- Profile\n- Contact\n```\n<ul class=\"nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm\" id=\"pillNav2\" role=\"tablist\" style=\"--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);\">\n  <li class=\"nav-item\" role=\"presentation\">\n    <button class=\"nav-link active rounded-5\" id=\"home-tab2\" data-bs-toggle=\"tab\" type=\"button\" role=\"tab\" aria-selected=\"true\">Home<\/button>\n  <\/li>\n  <li class=\"nav-item\" role=\"presentation\">\n    <button class=\"nav-link rounded-5\" id=\"profile-tab2\" data-bs-toggle=\"tab\" type=\"button\" role=\"tab\" aria-selected=\"false\">Profile<\/button>\n  <\/li>\n  <li class=\"nav-item\" role=\"presentation\">\n    <button class=\"nav-link rounded-5\" id=\"contact-tab2\" data-bs-toggle=\"tab\" type=\"button\" role=\"tab\" aria-selected=\"false\">Contact<\/button>\n  <\/li>\n<\/ul>\n```\n[Explore customized components](https:\/\/getbootstrap.com\/docs\/5.3\/examples\/#snippets)\n\n### Create and extend utilities\nUse Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.\n```\n@import \"bootstrap\/scss\/bootstrap\";\n\n$utilities: map-merge(\n  $utilities,\n  (\n    \"cursor\": (\n      property: cursor,\n      class: cursor,\n      responsive: true,\n      values: auto pointer grab,\n    )\n  )\n);\n```\n[Explore the utility API](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/api\/)\n\n## Powerful JavaScript plugins without jQuery\nAdd toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with `data` attributes in your HTML. Need more control? Include individual plugins programmatically.\n\n[Learn more about Bootstrap JavaScript](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/javascript)\n\n### Data attribute API\nWhy write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding `data` attributes.\n\nDropdown\n\n- Dropdown item\n- Dropdown item\n- Dropdown item\n```\n<div class=\"dropdown\">\n  <button class=\"btn btn-primary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n    Dropdown\n  <\/button>\n  <ul class=\"dropdown-menu\">\n    <li><button class=\"dropdown-item\" type=\"button\">Dropdown item<\/button><\/li>\n    <li><button class=\"dropdown-item\" type=\"button\">Dropdown item<\/button><\/li>\n    <li><button class=\"dropdown-item\" type=\"button\">Dropdown item<\/button><\/li>\n  <\/ul>\n<\/div>\n```\nLearn more about [our JavaScript as modules](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/javascript\/#using-bootstrap-as-a-module) and [using the programmatic API](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/javascript\/#programmatic-api).\n\n### Comprehensive set of plugins\nBootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need.\n***\n[Alert Show and hide alert messages to your users.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/alerts\/#javascript-behavior)\n\n[Button Programmatically control the active state for buttons.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/buttons\/#button-plugin)\n\n[Carousel Add slideshows to any page, including support for crossfade.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/carousel\/)\n\n[Collapse Expand and collapse areas of content, or create accordions.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/collapse\/)\n\n[Dropdown Create menus of links, actions, forms, and more.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/dropdowns\/)\n\n[Modal Add flexible and responsive dialogs to your project.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/modal\/)\n\n[Offcanvas Build and toggle hidden sidebars into any page.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/)\n\n[Popover Create custom overlays. Built on Popper.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/popovers\/)\n\n[Scrollspy Automatically update active nav links based on page scroll.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/scrollspy\/)\n\n[Tab Allow Bootstrap nav components to toggle contents.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/navs-tabs\/)\n\n[Toast Show and hide notifications to your visitors.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/toasts\/)\n\n[Tooltip Replace browser tooltips with custom ones. Built on Popper.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/tooltips\/)\n\n## Personalize it with Bootstrap Icons\n[Bootstrap Icons](https:\/\/icons.getbootstrap.com\/) is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.\n\n[Get Bootstrap Icons](https:\/\/icons.getbootstrap.com\/)\n\n![Bootstrap Icons](https:\/\/getbootstrap.com\/docs\/5.3\/assets\/img\/bootstrap-icons.png)\n\n[Bootstrap](https:\/\/getbootstrap.com\/)\n\n- Designed and built with all the love in the world by the [Bootstrap team](https:\/\/getbootstrap.com\/docs\/5.3\/about\/team) with the help of [our contributors](https:\/\/github.com\/twbs\/bootstrap\/graphs\/contributors).\n- Code licensed [MIT](https:\/\/github.com\/twbs\/bootstrap\/blob\/main\/LICENSE), docs [CC BY 3.0](https:\/\/creativecommons.org\/licenses\/by\/3.0\/).\n- Currently v5.3.8.\n\n##### Links\n- [Home](https:\/\/getbootstrap.com\/)\n- [Docs](https:\/\/getbootstrap.com\/docs\/5.3\/)\n- [Examples](https:\/\/getbootstrap.com\/docs\/5.3\/examples)\n- [Icons](https:\/\/icons.getbootstrap.com\/)\n- [Blog](https:\/\/blog.getbootstrap.com\/)\n- [Swag Store](https:\/\/cottonbureau.com\/people\/bootstrap)\n\n##### Guides\n- [Getting started](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started)\n- [Starter template](https:\/\/getbootstrap.com\/docs\/5.3\/examples\/starter-template)\n- [Webpack](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/webpack)\n- [Parcel](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/parcel)\n- [Vite](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/vite)\n\n##### Projects\n- [Bootstrap 5](https:\/\/github.com\/twbs\/bootstrap)\n- [Bootstrap 4](https:\/\/github.com\/twbs\/bootstrap\/tree\/v4-dev)\n- [Icons](https:\/\/github.com\/twbs\/icons)\n- [RFS](https:\/\/github.com\/twbs\/rfs)\n- [Examples repo](https:\/\/github.com\/twbs\/examples)\n\n##### Community\n- [Issues](https:\/\/github.com\/twbs\/bootstrap\/issues)\n- [Discussions](https:\/\/github.com\/twbs\/bootstrap\/discussions)\n- [Corporate sponsors](https:\/\/github.com\/sponsors\/twbs)\n- [Open Collective](https:\/\/opencollective.com\/bootstrap)\n- [Stack Overflow](https:\/\/stackoverflow.com\/questions\/tagged\/bootstrap-5)","attrs_readable_markdown":"## Get started any way you want\nJump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.\n\n[Read installation docs](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/download\/)\n\n### Install via package manager\nInstall Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our full build scripts. You can also [use any demo from our Examples repo](https:\/\/github.com\/twbs\/examples\/) to quickly jumpstart Bootstrap projects.\n```\nnpm install bootstrap@5.3.8\n```\n```\ngem install bootstrap -v 5.3.8\n```\n[Read our installation docs](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/download) for more info and additional package managers.\n\n### Include via CDN\nWhen you only need to include Bootstrap’s compiled CSS or JS, you can use [jsDelivr](https:\/\/www.jsdelivr.com\/package\/npm\/bootstrap). See it in action with our simple [quick start](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/#quick-start), or [browse the examples](https:\/\/getbootstrap.com\/docs\/5.3\/examples) to jumpstart your next project. You can also choose to include Popper and our JS [separately](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/#separate).\n```\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.8\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\" crossorigin=\"anonymous\">\n```\n```\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.8\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK\/BmnVDxM+D2scQbITxI\" crossorigin=\"anonymous\"><\/script>\n```\n\n#### Read our getting started guides\nGet a jump on including Bootstrap's source files in a new project with our official guides.\n\n[![](https:\/\/getbootstrap.com\/docs\/5.3\/assets\/img\/webpack.svg) Webpack](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/webpack\/)   [![](https:\/\/getbootstrap.com\/docs\/5.3\/assets\/img\/parcel.png) Parcel](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/parcel\/)   [![](https:\/\/getbootstrap.com\/docs\/5.3\/assets\/img\/vite.svg) Vite](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/vite\/)\n\n## Customize everything with Sass\nBootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.\n\n[Learn more about customizing](https:\/\/getbootstrap.com\/docs\/5.3\/customize\/overview\/)\n\n### Include all of Bootstrap’s Sass\nImport one stylesheet and you're off to the races with every feature of our CSS.\n```\n\/\/ Variable overrides first\n$primary: #900;\n$enable-shadows: true;\n$prefix: \"mo-\";\n\n\/\/ Then import Bootstrap\n@import \"..\/node_modules\/bootstrap\/scss\/bootstrap\";\n```\nLearn more about our [global Sass options](https:\/\/getbootstrap.com\/docs\/5.3\/customize\/options).\n\n### Include what you need\nThe easiest way to customize Bootstrap—include only the CSS you need.\n```\n\/\/ Functions first\n@import \"..\/node_modules\/bootstrap\/scss\/functions\";\n\n\/\/ Variable overrides second\n$primary: #900;\n$enable-shadows: true;\n$prefix: \"mo-\";\n\n\/\/ Required Bootstrap imports\n@import \"..\/node_modules\/bootstrap\/scss\/variables\";\n@import \"..\/node_modules\/bootstrap\/scss\/variables-dark\";\n@import \"..\/node_modules\/bootstrap\/scss\/maps\";\n@import \"..\/node_modules\/bootstrap\/scss\/mixins\";\n@import \"..\/node_modules\/bootstrap\/scss\/root\";\n\n\/\/ Optional components\n@import \"..\/node_modules\/bootstrap\/scss\/utilities\";\n@import \"..\/node_modules\/bootstrap\/scss\/reboot\";\n@import \"..\/node_modules\/bootstrap\/scss\/containers\";\n@import \"..\/node_modules\/bootstrap\/scss\/grid\";\n@import \"..\/node_modules\/bootstrap\/scss\/helpers\";\n@import \"..\/node_modules\/bootstrap\/scss\/utilities\/api\";\n```\nLearn more about [using Bootstrap with Sass](https:\/\/getbootstrap.com\/docs\/5.3\/customize\/sass).\n\n## Build and extend in real-time with CSS variables\nBootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a `:root` level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.\n\n[Learn more about CSS variables](https:\/\/getbootstrap.com\/docs\/5.3\/customize\/css-variables)\n\n### Using CSS variables\nUse any of our [global `:root` variables](https:\/\/getbootstrap.com\/docs\/5.3\/customize\/css-variables\/#root-variables) to write new styles. CSS variables use the `var(--bs-variableName)` syntax and can be inherited by children elements.\n```\n.component {\n  color: var(--bs-gray-800);\n  background-color: var(--bs-gray-100);\n  border: 1px solid var(--bs-gray-200);\n  border-radius: .25rem;\n}\n\n.component-header {\n  color: var(--bs-purple);\n}\n```\n\n### Customizing via CSS variables\nOverride global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value.\n```\nbody {\n  --bs-body-font-family: var(--bs-font-monospace);\n  --bs-body-line-height: 1.4;\n  --bs-body-bg: var(--bs-gray-100);\n}\n\n.table {\n  --bs-table-color: var(--bs-gray-600);\n  --bs-table-bg: var(--bs-gray-100);\n  --bs-table-border-color: transparent;\n}\n```\n\n## Components, meet the Utility API\nNew in Bootstrap 5, our utilities are now generated by our [Utility API](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/api). We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.\n\n### Quickly customize components\nApply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from [positioning](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/position) and [sizing](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/sizing) to [colors](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/colors) and [effects](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/shadows). Mix them with CSS variable overrides for even more control.\n```\n<ul class=\"nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm\" id=\"pillNav2\" role=\"tablist\" style=\"--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);\">\n  <li class=\"nav-item\" role=\"presentation\">\n    <button class=\"nav-link active rounded-5\" id=\"home-tab2\" data-bs-toggle=\"tab\" type=\"button\" role=\"tab\" aria-selected=\"true\">Home<\/button>\n  <\/li>\n  <li class=\"nav-item\" role=\"presentation\">\n    <button class=\"nav-link rounded-5\" id=\"profile-tab2\" data-bs-toggle=\"tab\" type=\"button\" role=\"tab\" aria-selected=\"false\">Profile<\/button>\n  <\/li>\n  <li class=\"nav-item\" role=\"presentation\">\n    <button class=\"nav-link rounded-5\" id=\"contact-tab2\" data-bs-toggle=\"tab\" type=\"button\" role=\"tab\" aria-selected=\"false\">Contact<\/button>\n  <\/li>\n<\/ul>\n```\n[Explore customized components](https:\/\/getbootstrap.com\/docs\/5.3\/examples\/#snippets)\n\n### Create and extend utilities\nUse Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.\n```\n@import \"bootstrap\/scss\/bootstrap\";\n\n$utilities: map-merge(\n  $utilities,\n  (\n    \"cursor\": (\n      property: cursor,\n      class: cursor,\n      responsive: true,\n      values: auto pointer grab,\n    )\n  )\n);\n```\n[Explore the utility API](https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/api\/)\n\n## Powerful JavaScript plugins without jQuery\nAdd toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with `data` attributes in your HTML. Need more control? Include individual plugins programmatically.\n\n[Learn more about Bootstrap JavaScript](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/javascript)\n\n### Data attribute API\nWhy write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding `data` attributes.\n```\n<div class=\"dropdown\">\n  <button class=\"btn btn-primary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n    Dropdown\n  <\/button>\n  <ul class=\"dropdown-menu\">\n    <li><button class=\"dropdown-item\" type=\"button\">Dropdown item<\/button><\/li>\n    <li><button class=\"dropdown-item\" type=\"button\">Dropdown item<\/button><\/li>\n    <li><button class=\"dropdown-item\" type=\"button\">Dropdown item<\/button><\/li>\n  <\/ul>\n<\/div>\n```\nLearn more about [our JavaScript as modules](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/javascript\/#using-bootstrap-as-a-module) and [using the programmatic API](https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/javascript\/#programmatic-api).\n\n### Comprehensive set of plugins\nBootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need.\n***\n[Alert Show and hide alert messages to your users.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/alerts\/#javascript-behavior)\n\n[Button Programmatically control the active state for buttons.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/buttons\/#button-plugin)\n\n[Carousel Add slideshows to any page, including support for crossfade.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/carousel\/)\n\n[Collapse Expand and collapse areas of content, or create accordions.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/collapse\/)\n\n[Dropdown Create menus of links, actions, forms, and more.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/dropdowns\/)\n\n[Modal Add flexible and responsive dialogs to your project.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/modal\/)\n\n[Offcanvas Build and toggle hidden sidebars into any page.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/)\n\n[Popover Create custom overlays. Built on Popper.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/popovers\/)\n\n[Scrollspy Automatically update active nav links based on page scroll.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/scrollspy\/)\n\n[Tab Allow Bootstrap nav components to toggle contents.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/navs-tabs\/)\n\n[Toast Show and hide notifications to your visitors.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/toasts\/)\n\n[Tooltip Replace browser tooltips with custom ones. Built on Popper.](https:\/\/getbootstrap.com\/docs\/5.3\/components\/tooltips\/)\n\n## Personalize it with Bootstrap Icons\n[Bootstrap Icons](https:\/\/icons.getbootstrap.com\/) is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.\n\n[Get Bootstrap Icons](https:\/\/icons.getbootstrap.com\/)\n\n![Bootstrap Icons](https:\/\/getbootstrap.com\/docs\/5.3\/assets\/img\/bootstrap-icons.png)","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

1 hour ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://getbootstrap.com/
Last Crawled	2026-04-07 10:04:05 (1 hour ago)
First Indexed	2014-08-07 09:10:24 (11 years ago)
HTTP Status Code	200
Meta Title	Bootstrap · The most popular HTML, CSS, and JS library in the world.
Meta Description	Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
Meta Canonical	null
Boilerpipe Text	Get started any way you want Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. Read installation docs Install via package manager Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our full build scripts. You can also use any demo from our Examples repo to quickly jumpstart Bootstrap projects. npm install bootstrap@5.3.8 gem install bootstrap -v 5.3 .8 Read our installation docs for more info and additional package managers. Include via CDN When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr . See it in action with our simple quick start , or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately . < link href = " https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css " rel = " stylesheet " integrity = " sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB " crossorigin = " anonymous " > < script src = " https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js " integrity = " sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI " crossorigin = " anonymous " > </ script > Read our getting started guides Get a jump on including Bootstrap's source files in a new project with our official guides. Webpack Parcel Vite Customize everything with Sass Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins. Learn more about customizing Include all of Bootstrap’s Sass Import one stylesheet and you're off to the races with every feature of our CSS. // Variable overrides first $primary : #900 ; $enable-shadows : true ; $prefix : "mo-" ; // Then import Bootstrap @import "../node_modules/bootstrap/scss/bootstrap" ; Learn more about our global Sass options . Include what you need The easiest way to customize Bootstrap—include only the CSS you need. // Functions first @import "../node_modules/bootstrap/scss/functions" ; // Variable overrides second $primary : #900 ; $enable-shadows : true ; $prefix : "mo-" ; // Required Bootstrap imports @import "../node_modules/bootstrap/scss/variables" ; @import "../node_modules/bootstrap/scss/variables-dark" ; @import "../node_modules/bootstrap/scss/maps" ; @import "../node_modules/bootstrap/scss/mixins" ; @import "../node_modules/bootstrap/scss/root" ; // Optional components @import "../node_modules/bootstrap/scss/utilities" ; @import "../node_modules/bootstrap/scss/reboot" ; @import "../node_modules/bootstrap/scss/containers" ; @import "../node_modules/bootstrap/scss/grid" ; @import "../node_modules/bootstrap/scss/helpers" ; @import "../node_modules/bootstrap/scss/utilities/api" ; Learn more about using Bootstrap with Sass . Build and extend in real-time with CSS variables Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified. Learn more about CSS variables Using CSS variables Use any of our global :root variables to write new styles. CSS variables use the var(--bs-variableName) syntax and can be inherited by children elements. .component { color : var ( --bs-gray-800 ) ; background-color : var ( --bs-gray-100 ) ; border : 1px solid var ( --bs-gray-200 ) ; border-radius : .25rem ; } .component-header { color : var ( --bs-purple ) ; } Customizing via CSS variables Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value. body { --bs-body-font-family : var ( --bs-font-monospace ) ; --bs-body-line-height : 1.4 ; --bs-body-bg : var ( --bs-gray-100 ) ; } .table { --bs-table-color : var ( --bs-gray-600 ) ; --bs-table-bg : var ( --bs-gray-100 ) ; --bs-table-border-color : transparent ; } Components, meet the Utility API New in Bootstrap 5, our utilities are now generated by our Utility API . We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names. Quickly customize components Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from positioning and sizing to colors and effects . Mix them with CSS variable overrides for even more control. < ul class = " nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm " id = " pillNav2 " role = " tablist " style = " --bs-nav-link-color : var ( --bs-white ) ; --bs-nav-pills-link-active-color : var ( --bs-primary ) ; --bs-nav-pills-link-active-bg : var ( --bs-white ) ; " > < li class = " nav-item " role = " presentation " > < button class = " nav-link active rounded-5 " id = " home-tab2 " data-bs-toggle = " tab " type = " button " role = " tab " aria-selected = " true " > Home </ button > </ li > < li class = " nav-item " role = " presentation " > < button class = " nav-link rounded-5 " id = " profile-tab2 " data-bs-toggle = " tab " type = " button " role = " tab " aria-selected = " false " > Profile </ button > </ li > < li class = " nav-item " role = " presentation " > < button class = " nav-link rounded-5 " id = " contact-tab2 " data-bs-toggle = " tab " type = " button " role = " tab " aria-selected = " false " > Contact </ button > </ li > </ ul > Explore customized components Create and extend utilities Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities. @import "bootstrap/scss/bootstrap" ; $utilities : map-merge ( $utilities , ( "cursor" : ( property : cursor , class : cursor , responsive : true , values : auto pointer grab , ) ) ) ; Explore the utility API Powerful JavaScript plugins without jQuery Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with data attributes in your HTML. Need more control? Include individual plugins programmatically. Learn more about Bootstrap JavaScript Data attribute API Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding data attributes. < div class = " dropdown " > < button class = " btn btn-primary dropdown-toggle " type = " button " data-bs-toggle = " dropdown " aria-expanded = " false " > Dropdown </ button > < ul class = " dropdown-menu " > < li > < button class = " dropdown-item " type = " button " > Dropdown item </ button > </ li > < li > < button class = " dropdown-item " type = " button " > Dropdown item </ button > </ li > < li > < button class = " dropdown-item " type = " button " > Dropdown item </ button > </ li > </ ul > </ div > Learn more about our JavaScript as modules and using the programmatic API . Comprehensive set of plugins Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need. Alert Show and hide alert messages to your users. Button Programmatically control the active state for buttons. Carousel Add slideshows to any page, including support for crossfade. Collapse Expand and collapse areas of content, or create accordions. Dropdown Create menus of links, actions, forms, and more. Modal Add flexible and responsive dialogs to your project. Offcanvas Build and toggle hidden sidebars into any page. Popover Create custom overlays. Built on Popper. Scrollspy Automatically update active nav links based on page scroll. Tab Allow Bootstrap nav components to toggle contents. Toast Show and hide notifications to your visitors. Tooltip Replace browser tooltips with custom ones. Built on Popper. Personalize it with Bootstrap Icons Bootstrap Icons is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS. Get Bootstrap Icons
Markdown	[Skip to main content](https://getbootstrap.com/#content) Search ```K` ##### Bootstrap * - [Docs](https://getbootstrap.com/docs/5.3/getting-started/introduction/) - [Examples](https://getbootstrap.com/docs/5.3/examples/) - [Icons](https://icons.getbootstrap.com/) - [Blog](https://blog.getbootstrap.com/) * - [GitHub](https://github.com/twbs) - [X](https://x.com/getbootstrap) - [Open Collective](https://opencollective.com/bootstrap) - * - BootstrapBootstrap v5.3 (switch to other versions) - ###### v5 releases - [Latest (5.3.x)](https://getbootstrap.com/) - [v5.2.3](https://getbootstrap.com/docs/5.2/) - [v5.1.3](https://getbootstrap.com/docs/5.1/) - [v5.0.2](https://getbootstrap.com/docs/5.0/) - * - ###### Previous releases - [v4.6.x](https://getbootstrap.com/docs/4.6/) - [v3.4.1](https://getbootstrap.com/docs/3.4/) - [v2.3.2](https://getbootstrap.com/2.3.2/) - * - [All versions](https://getbootstrap.com/docs/versions/) - * - Toggle theme - Light - Dark - Auto [Get Security Updates for Bootstrap 3 & 4](https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol) ![Bootstrap](https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png) # Build fast, responsive sites with Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. ``` npm i bootstrap@5.3.8 ``` [Read the docs](https://getbootstrap.com/docs/5.3/getting-started/introduction) Currently v5.3.8 · [Download](https://getbootstrap.com/docs/5.3/getting-started/download) · [All releases](https://getbootstrap.com/docs/versions/) ## Get started any way you want Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. [Read installation docs](https://getbootstrap.com/docs/5.3/getting-started/download/) ### Install via package manager Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our full build scripts. You can also [use any demo from our Examples repo](https://github.com/twbs/examples/) to quickly jumpstart Bootstrap projects. ``` npm install bootstrap@5.3.8 ``` ``` gem install bootstrap -v 5.3.8 ``` [Read our installation docs](https://getbootstrap.com/docs/5.3/getting-started/download) for more info and additional package managers. ### Include via CDN When you only need to include Bootstrap’s compiled CSS or JS, you can use [jsDelivr](https://www.jsdelivr.com/package/npm/bootstrap). See it in action with our simple [quick start](https://getbootstrap.com/docs/5.3/getting-started/introduction/#quick-start), or [browse the examples](https://getbootstrap.com/docs/5.3/examples) to jumpstart your next project. You can also choose to include Popper and our JS [separately](https://getbootstrap.com/docs/5.3/getting-started/introduction/#separate). ``` <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> ``` ``` <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script> ``` #### Read our getting started guides Get a jump on including Bootstrap's source files in a new project with our official guides. [![](https://getbootstrap.com/docs/5.3/assets/img/webpack.svg) Webpack](https://getbootstrap.com/docs/5.3/getting-started/webpack/) [![](https://getbootstrap.com/docs/5.3/assets/img/parcel.png) Parcel](https://getbootstrap.com/docs/5.3/getting-started/parcel/) [![](https://getbootstrap.com/docs/5.3/assets/img/vite.svg) Vite](https://getbootstrap.com/docs/5.3/getting-started/vite/) ## Customize everything with Sass Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins. [Learn more about customizing](https://getbootstrap.com/docs/5.3/customize/overview/) ### Include all of Bootstrap’s Sass Import one stylesheet and you're off to the races with every feature of our CSS. ``` // Variable overrides first $primary: #900; $enable-shadows: true; $prefix: "mo-"; // Then import Bootstrap @import "../node_modules/bootstrap/scss/bootstrap"; ``` Learn more about our [global Sass options](https://getbootstrap.com/docs/5.3/customize/options). ### Include what you need The easiest way to customize Bootstrap—include only the CSS you need. ``` // Functions first @import "../node_modules/bootstrap/scss/functions"; // Variable overrides second $primary: #900; $enable-shadows: true; $prefix: "mo-"; // Required Bootstrap imports @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/variables-dark"; @import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; // Optional components @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; @import "../node_modules/bootstrap/scss/utilities/api"; ``` Learn more about [using Bootstrap with Sass](https://getbootstrap.com/docs/5.3/customize/sass). ## Build and extend in real-time with CSS variables Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a `:root` level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified. [Learn more about CSS variables](https://getbootstrap.com/docs/5.3/customize/css-variables) ### Using CSS variables Use any of our [global `:root` variables](https://getbootstrap.com/docs/5.3/customize/css-variables/#root-variables) to write new styles. CSS variables use the `var(--bs-variableName)` syntax and can be inherited by children elements. ``` .component { color: var(--bs-gray-800); background-color: var(--bs-gray-100); border: 1px solid var(--bs-gray-200); border-radius: .25rem; } .component-header { color: var(--bs-purple); } ``` ### Customizing via CSS variables Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value. ``` body { --bs-body-font-family: var(--bs-font-monospace); --bs-body-line-height: 1.4; --bs-body-bg: var(--bs-gray-100); } .table { --bs-table-color: var(--bs-gray-600); --bs-table-bg: var(--bs-gray-100); --bs-table-border-color: transparent; } ``` ## Components, meet the Utility API New in Bootstrap 5, our utilities are now generated by our [Utility API](https://getbootstrap.com/docs/5.3/utilities/api). We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names. ### Quickly customize components Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from [positioning](https://getbootstrap.com/docs/5.3/utilities/position) and [sizing](https://getbootstrap.com/docs/5.3/utilities/sizing) to [colors](https://getbootstrap.com/docs/5.3/utilities/colors) and [effects](https://getbootstrap.com/docs/5.3/utilities/shadows). Mix them with CSS variable overrides for even more control. - Home - Profile - Contact - Home - Profile - Contact ``` <ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);"> <li class="nav-item" role="presentation"> <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button> </li> </ul> ``` [Explore customized components](https://getbootstrap.com/docs/5.3/examples/#snippets) ### Create and extend utilities Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities. ``` @import "bootstrap/scss/bootstrap"; $utilities: map-merge( $utilities, ( "cursor": ( property: cursor, class: cursor, responsive: true, values: auto pointer grab, ) ) ); ``` [Explore the utility API](https://getbootstrap.com/docs/5.3/utilities/api/) ## Powerful JavaScript plugins without jQuery Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with `data` attributes in your HTML. Need more control? Include individual plugins programmatically. [Learn more about Bootstrap JavaScript](https://getbootstrap.com/docs/5.3/getting-started/javascript) ### Data attribute API Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding `data` attributes. Dropdown - Dropdown item - Dropdown item - Dropdown item ``` <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu"> <li><button class="dropdown-item" type="button">Dropdown item</button></li> <li><button class="dropdown-item" type="button">Dropdown item</button></li> <li><button class="dropdown-item" type="button">Dropdown item</button></li> </ul> </div> ``` Learn more about [our JavaScript as modules](https://getbootstrap.com/docs/5.3/getting-started/javascript/#using-bootstrap-as-a-module) and [using the programmatic API](https://getbootstrap.com/docs/5.3/getting-started/javascript/#programmatic-api). ### Comprehensive set of plugins Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need. *** [Alert Show and hide alert messages to your users.](https://getbootstrap.com/docs/5.3/components/alerts/#javascript-behavior) [Button Programmatically control the active state for buttons.](https://getbootstrap.com/docs/5.3/components/buttons/#button-plugin) [Carousel Add slideshows to any page, including support for crossfade.](https://getbootstrap.com/docs/5.3/components/carousel/) [Collapse Expand and collapse areas of content, or create accordions.](https://getbootstrap.com/docs/5.3/components/collapse/) [Dropdown Create menus of links, actions, forms, and more.](https://getbootstrap.com/docs/5.3/components/dropdowns/) [Modal Add flexible and responsive dialogs to your project.](https://getbootstrap.com/docs/5.3/components/modal/) [Offcanvas Build and toggle hidden sidebars into any page.](https://getbootstrap.com/docs/5.3/components/offcanvas/) [Popover Create custom overlays. Built on Popper.](https://getbootstrap.com/docs/5.3/components/popovers/) [Scrollspy Automatically update active nav links based on page scroll.](https://getbootstrap.com/docs/5.3/components/scrollspy/) [Tab Allow Bootstrap nav components to toggle contents.](https://getbootstrap.com/docs/5.3/components/navs-tabs/) [Toast Show and hide notifications to your visitors.](https://getbootstrap.com/docs/5.3/components/toasts/) [Tooltip Replace browser tooltips with custom ones. Built on Popper.](https://getbootstrap.com/docs/5.3/components/tooltips/) ## Personalize it with Bootstrap Icons [Bootstrap Icons](https://icons.getbootstrap.com/) is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS. [Get Bootstrap Icons](https://icons.getbootstrap.com/) ![Bootstrap Icons](https://getbootstrap.com/docs/5.3/assets/img/bootstrap-icons.png) [Bootstrap](https://getbootstrap.com/) - Designed and built with all the love in the world by the [Bootstrap team](https://getbootstrap.com/docs/5.3/about/team) with the help of [our contributors](https://github.com/twbs/bootstrap/graphs/contributors). - Code licensed [MIT](https://github.com/twbs/bootstrap/blob/main/LICENSE), docs [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/). - Currently v5.3.8. ##### Links - [Home](https://getbootstrap.com/) - [Docs](https://getbootstrap.com/docs/5.3/) - [Examples](https://getbootstrap.com/docs/5.3/examples) - [Icons](https://icons.getbootstrap.com/) - [Blog](https://blog.getbootstrap.com/) - [Swag Store](https://cottonbureau.com/people/bootstrap) ##### Guides - [Getting started](https://getbootstrap.com/docs/5.3/getting-started) - [Starter template](https://getbootstrap.com/docs/5.3/examples/starter-template) - [Webpack](https://getbootstrap.com/docs/5.3/getting-started/webpack) - [Parcel](https://getbootstrap.com/docs/5.3/getting-started/parcel) - [Vite](https://getbootstrap.com/docs/5.3/getting-started/vite) ##### Projects - [Bootstrap 5](https://github.com/twbs/bootstrap) - [Bootstrap 4](https://github.com/twbs/bootstrap/tree/v4-dev) - [Icons](https://github.com/twbs/icons) - [RFS](https://github.com/twbs/rfs) - [Examples repo](https://github.com/twbs/examples) ##### Community - [Issues](https://github.com/twbs/bootstrap/issues) - [Discussions](https://github.com/twbs/bootstrap/discussions) - [Corporate sponsors](https://github.com/sponsors/twbs) - [Open Collective](https://opencollective.com/bootstrap) - [Stack Overflow](https://stackoverflow.com/questions/tagged/bootstrap-5)
Readable Markdown	## Get started any way you want Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. [Read installation docs](https://getbootstrap.com/docs/5.3/getting-started/download/) ### Install via package manager Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our full build scripts. You can also [use any demo from our Examples repo](https://github.com/twbs/examples/) to quickly jumpstart Bootstrap projects. ``` npm install bootstrap@5.3.8 ``` ``` gem install bootstrap -v 5.3.8 ``` [Read our installation docs](https://getbootstrap.com/docs/5.3/getting-started/download) for more info and additional package managers. ### Include via CDN When you only need to include Bootstrap’s compiled CSS or JS, you can use [jsDelivr](https://www.jsdelivr.com/package/npm/bootstrap). See it in action with our simple [quick start](https://getbootstrap.com/docs/5.3/getting-started/introduction/#quick-start), or [browse the examples](https://getbootstrap.com/docs/5.3/examples) to jumpstart your next project. You can also choose to include Popper and our JS [separately](https://getbootstrap.com/docs/5.3/getting-started/introduction/#separate). ``` <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> ``` ``` <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script> ``` #### Read our getting started guides Get a jump on including Bootstrap's source files in a new project with our official guides. [![](https://getbootstrap.com/docs/5.3/assets/img/webpack.svg) Webpack](https://getbootstrap.com/docs/5.3/getting-started/webpack/) [![](https://getbootstrap.com/docs/5.3/assets/img/parcel.png) Parcel](https://getbootstrap.com/docs/5.3/getting-started/parcel/) [![](https://getbootstrap.com/docs/5.3/assets/img/vite.svg) Vite](https://getbootstrap.com/docs/5.3/getting-started/vite/) ## Customize everything with Sass Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins. [Learn more about customizing](https://getbootstrap.com/docs/5.3/customize/overview/) ### Include all of Bootstrap’s Sass Import one stylesheet and you're off to the races with every feature of our CSS. ``` // Variable overrides first $primary: #900; $enable-shadows: true; $prefix: "mo-"; // Then import Bootstrap @import "../node_modules/bootstrap/scss/bootstrap"; ``` Learn more about our [global Sass options](https://getbootstrap.com/docs/5.3/customize/options). ### Include what you need The easiest way to customize Bootstrap—include only the CSS you need. ``` // Functions first @import "../node_modules/bootstrap/scss/functions"; // Variable overrides second $primary: #900; $enable-shadows: true; $prefix: "mo-"; // Required Bootstrap imports @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/variables-dark"; @import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; // Optional components @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; @import "../node_modules/bootstrap/scss/utilities/api"; ``` Learn more about [using Bootstrap with Sass](https://getbootstrap.com/docs/5.3/customize/sass). ## Build and extend in real-time with CSS variables Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a `:root` level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified. [Learn more about CSS variables](https://getbootstrap.com/docs/5.3/customize/css-variables) ### Using CSS variables Use any of our [global `:root` variables](https://getbootstrap.com/docs/5.3/customize/css-variables/#root-variables) to write new styles. CSS variables use the `var(--bs-variableName)` syntax and can be inherited by children elements. ``` .component { color: var(--bs-gray-800); background-color: var(--bs-gray-100); border: 1px solid var(--bs-gray-200); border-radius: .25rem; } .component-header { color: var(--bs-purple); } ``` ### Customizing via CSS variables Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value. ``` body { --bs-body-font-family: var(--bs-font-monospace); --bs-body-line-height: 1.4; --bs-body-bg: var(--bs-gray-100); } .table { --bs-table-color: var(--bs-gray-600); --bs-table-bg: var(--bs-gray-100); --bs-table-border-color: transparent; } ``` ## Components, meet the Utility API New in Bootstrap 5, our utilities are now generated by our [Utility API](https://getbootstrap.com/docs/5.3/utilities/api). We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names. ### Quickly customize components Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from [positioning](https://getbootstrap.com/docs/5.3/utilities/position) and [sizing](https://getbootstrap.com/docs/5.3/utilities/sizing) to [colors](https://getbootstrap.com/docs/5.3/utilities/colors) and [effects](https://getbootstrap.com/docs/5.3/utilities/shadows). Mix them with CSS variable overrides for even more control. ``` <ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);"> <li class="nav-item" role="presentation"> <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button> </li> </ul> ``` [Explore customized components](https://getbootstrap.com/docs/5.3/examples/#snippets) ### Create and extend utilities Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities. ``` @import "bootstrap/scss/bootstrap"; $utilities: map-merge( $utilities, ( "cursor": ( property: cursor, class: cursor, responsive: true, values: auto pointer grab, ) ) ); ``` [Explore the utility API](https://getbootstrap.com/docs/5.3/utilities/api/) ## Powerful JavaScript plugins without jQuery Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with `data` attributes in your HTML. Need more control? Include individual plugins programmatically. [Learn more about Bootstrap JavaScript](https://getbootstrap.com/docs/5.3/getting-started/javascript) ### Data attribute API Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding `data` attributes. ``` <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu"> <li><button class="dropdown-item" type="button">Dropdown item</button></li> <li><button class="dropdown-item" type="button">Dropdown item</button></li> <li><button class="dropdown-item" type="button">Dropdown item</button></li> </ul> </div> ``` Learn more about [our JavaScript as modules](https://getbootstrap.com/docs/5.3/getting-started/javascript/#using-bootstrap-as-a-module) and [using the programmatic API](https://getbootstrap.com/docs/5.3/getting-started/javascript/#programmatic-api). ### Comprehensive set of plugins Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need. *** [Alert Show and hide alert messages to your users.](https://getbootstrap.com/docs/5.3/components/alerts/#javascript-behavior) [Button Programmatically control the active state for buttons.](https://getbootstrap.com/docs/5.3/components/buttons/#button-plugin) [Carousel Add slideshows to any page, including support for crossfade.](https://getbootstrap.com/docs/5.3/components/carousel/) [Collapse Expand and collapse areas of content, or create accordions.](https://getbootstrap.com/docs/5.3/components/collapse/) [Dropdown Create menus of links, actions, forms, and more.](https://getbootstrap.com/docs/5.3/components/dropdowns/) [Modal Add flexible and responsive dialogs to your project.](https://getbootstrap.com/docs/5.3/components/modal/) [Offcanvas Build and toggle hidden sidebars into any page.](https://getbootstrap.com/docs/5.3/components/offcanvas/) [Popover Create custom overlays. Built on Popper.](https://getbootstrap.com/docs/5.3/components/popovers/) [Scrollspy Automatically update active nav links based on page scroll.](https://getbootstrap.com/docs/5.3/components/scrollspy/) [Tab Allow Bootstrap nav components to toggle contents.](https://getbootstrap.com/docs/5.3/components/navs-tabs/) [Toast Show and hide notifications to your visitors.](https://getbootstrap.com/docs/5.3/components/toasts/) [Tooltip Replace browser tooltips with custom ones. Built on Popper.](https://getbootstrap.com/docs/5.3/components/tooltips/) ## Personalize it with Bootstrap Icons [Bootstrap Icons](https://icons.getbootstrap.com/) is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS. [Get Bootstrap Icons](https://icons.getbootstrap.com/) ![Bootstrap Icons](https://getbootstrap.com/docs/5.3/assets/img/bootstrap-icons.png)
Shard	92 (laksa)
Root Hash	4088328555173515292
Unparsed URL	com,getbootstrap!/ s443