Hello, world! This is a toast message.
` tags for multi-line code examples. Ensure angle brackets are escaped for correct rendering. ```htmlSample text here...
And another line of sample text here...
``` -------------------------------- ### Install Additional Build Dependencies Source: https://getbootstrap.com/docs/5.3/getting-started/webpack Installs Sass, necessary loaders (css-loader, postcss-loader, sass-loader, style-loader), and Autoprefixer for CSS processing. ```bash npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader ``` -------------------------------- ### Bootstrap Shadow Utilities Examples Source: https://getbootstrap.com/docs/5.3/utilities/shadows Apply or remove box shadows using Bootstrap's utility classes. Includes examples for no shadow, small, regular, and larger shadows. ```htmlNo shadowSmall shadowRegular shadowLarger shadow``` -------------------------------- ### HTML sample output example Source: https://getbootstrap.com/docs/5.3/content/reboot Use the `` tag to indicate sample output from a computer program. ```html This text is meant to be treated as sample output from a computer program. ``` -------------------------------- ### Basic Progress Bar Examples Source: https://getbootstrap.com/docs/5.3/components/progress These examples demonstrate the basic structure of Bootstrap progress bars, showing different values from 0% to 100%. Ensure proper ARIA attributes for accessibility. ```html``` -------------------------------- ### Install Bootstrap CSS/Sass and JS with NuGet Source: https://getbootstrap.com/docs/5.3/getting-started/download Install Bootstrap's CSS or Sass and JavaScript assets using NuGet for .NET Framework projects. Note: Newer projects should use libman or other methods. ```powershell Install-Package bootstrap ``` -------------------------------- ### Live Demo Modal Source: https://getbootstrap.com/docs/5.3/components/modal This example demonstrates a working modal that can be toggled by a button. It slides down and fades in from the top. ```html ``` -------------------------------- ### Example Paragraph (HTML) Source: https://getbootstrap.com/docs/5.3/content/reboot Demonstrates the default styling for paragraph elements in Bootstrap, including margin adjustments. ```htmlThis is an example paragraph.
``` -------------------------------- ### Create Project Folder and Initialize npm Source: https://getbootstrap.com/docs/5.3/getting-started/parcel Sets up a new project directory and initializes npm for package management. ```bash mkdir my-project && cd my-project npm init -y ``` -------------------------------- ### Three Equal Columns with Row-Cols Source: https://getbootstrap.com/docs/5.3/examples/grid Uses `.row-cols-*` classes to easily create a grid with a specified number of equal-width columns. This example sets up three equal columns starting at the medium (md) breakpoint. ```html``` -------------------------------- ### Responsive Columns with CSS Grid Source: https://getbootstrap.com/docs/5.3/layout/css-grid Adjust the column layout across different viewports using responsive classes. This example starts with two columns on narrow viewports and transitions to three columns on medium viewports and above. ```html.col.col.col``` -------------------------------- ### Run Documentation Server Source: https://getbootstrap.com/docs/5.3/getting-started/contribute Use this npm script to build and serve the Bootstrap documentation locally. Ensure you have run 'npm install' first. ```bash npm run docs-serve ``` -------------------------------- ### Create Project Files and Folders Source: https://getbootstrap.com/docs/5.3/getting-started/vite Create the necessary directories and files for the project structure, including HTML, SCSS, and JavaScript files, as well as the Vite configuration file. ```bash mkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js ``` -------------------------------- ### Link Underline Hover Variants Source: https://getbootstrap.com/docs/5.3/utilities/link Combine underline offset and opacity utilities with hover variants to create dynamic link styles. This example shows an underline that starts at 0 opacity and transitions to 75% opacity on hover. ```html Underline opacity 0 ``` -------------------------------- ### Two Columns with Nested Columns Source: https://getbootstrap.com/docs/5.3/examples/grid Shows how to nest columns within an existing column. This example creates a two-column layout where the larger column contains two equal-width nested columns, all starting from the medium (md) breakpoint. ```html.g-col-6 .g-col-md-4.g-col-6 .g-col-md-4.g-col-6 .g-col-md-4``` -------------------------------- ### Create Project Structure Source: https://getbootstrap.com/docs/5.3/getting-started/parcel Creates the necessary directories and files for the project, including source files for HTML, JavaScript, and SCSS. ```bash mkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss ``` -------------------------------- ### Programmatic API - Initialization Source: https://getbootstrap.com/docs/5.3/getting-started/javascript Shows how to initialize Bootstrap components programmatically using their constructors, with or without configuration options. ```APIDOC ## Programmatic API All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior): ```javascript const myModalEl = document.querySelector('#myModal') const modal = new bootstrap.Modal(myModalEl) // initialized with defaults const configObject = { keyboard: false } const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard ``` ``` -------------------------------- ### Install Webpack Dependencies Source: https://getbootstrap.com/docs/5.3/getting-started/webpack Installs Webpack core, CLI, dev server, and html-webpack-plugin as development dependencies. ```bash npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin ``` -------------------------------- ### HTML Entry Point for Vite Source: https://getbootstrap.com/docs/5.3/getting-started/vite Create an `index.html` file in the `src` directory to serve as the entry point for Vite. Include a script tag to load your main JavaScript file. ```html.col-md-8.col-md-6.col-md-6.col-md-4Bootstrap w/ Vite ``` -------------------------------- ### RTL Starter Template Source: https://getbootstrap.com/docs/5.3/getting-started/rtl This starter template demonstrates the required HTML structure for RTL support, including `dir="rtl"` and a `lang` attribute on the `` element, along with the RTL CSS inclusion. ```htmlHello, Bootstrap and Vite!
مرحبًا بالعالم! مرحبًا بالعالم!
``` -------------------------------- ### Install Parcel as a Development Dependency Source: https://getbootstrap.com/docs/5.3/getting-started/parcel Installs Parcel, a zero-configuration web application bundler, as a development dependency. ```bash npm i --save-dev parcel ``` -------------------------------- ### HTML address element example Source: https://getbootstrap.com/docs/5.3/content/reboot Example of the `` element, used for contact information, with adjusted default styles. ```html **ACME Corporation** 1123 Fictional St, San Francisco, CA 94103 P: (123) 456-7890 **Full Name** first.last@example.com ``` -------------------------------- ### Install Sass Source: https://getbootstrap.com/docs/5.3/getting-started/vite Install Sass as a development dependency. Sass is required to import and bundle Bootstrap's CSS. ```bash npm i --save-dev sass ``` -------------------------------- ### Basic media object with flex utilities Source: https://getbootstrap.com/docs/5.3/utilities/flex Construct a media object using flex utilities. This example shows a basic layout with an image and accompanying text content. ```html``` -------------------------------- ### Install Bootstrap Gem with RubyGems Source: https://getbootstrap.com/docs/5.3/getting-started/download Alternative method to install the Bootstrap gem using RubyGems if you are not using Bundler. ```bash gem install bootstrap -v 5.3.8 ``` -------------------------------- ### Example Code Block Source: https://getbootstrap.com/docs/5.3/examples/blog A basic example of a code block. Ensure content is properly escaped if it contains special characters. ```plaintext Example code block ``` -------------------------------- ### Initializing a Dropdown with Popper.js Configuration Source: https://getbootstrap.com/docs/5.3/components/dropdowns Demonstrates how to initialize a dropdown instance and customize its Popper.js configuration. ```APIDOC ## Initialize Dropdown with popperConfig ### Description Initialize a new dropdown instance with custom Popper.js configuration. You can modify the default configuration or provide a completely new one. ### Method `new bootstrap.Dropdown(element, options)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **element** (HTMLElement) - The DOM element to initialize the dropdown on. - **options** (object) - An options object. - **popperConfig** (function) - A function that receives the default Popper.js configuration and returns a modified or new configuration. ### Request Example ```javascript const dropdown = new bootstrap.Dropdown(element, { popperConfig(defaultBsPopperConfig) { // const newPopperConfig = {...} // use defaultBsPopperConfig if needed... // return newPopperConfig } }) ``` ### Response None ``` -------------------------------- ### HTML form elements example Source: https://getbootstrap.com/docs/5.3/content/reboot Demonstrates various form elements with Reboot's base styles applied for consistency. ```html Non-button element button ``` -------------------------------- ### Popover Initialization with popperConfig Source: https://getbootstrap.com/docs/5.3/components/popovers Demonstrates how to initialize a popover and customize its Popper.js configuration using the `popperConfig` option. ```APIDOC ## Using function with `popperConfig` ```javascript const popover = new bootstrap.Popover(element, { popperConfig(defaultBsPopperConfig) { // const newPopperConfig = {...} // use defaultBsPopperConfig if needed... // return newPopperConfig } }) ``` ``` -------------------------------- ### File input examples Source: https://getbootstrap.com/docs/5.3/forms/form-control Bootstrap provides styles for default, multiple files, disabled, small, and large file inputs. Use the appropriate classes and attributes for each variant. ```html
This is some content from a media component. You can replace this with any content and adjust it as needed.``` -------------------------------- ### Tabs with Pills Example Source: https://getbootstrap.com/docs/5.3/components/navs-tabs Navigation using `nav-pills` for a different visual style. This example demonstrates the same tab functionality with pill-shaped navigation items. ```html``` -------------------------------- ### Vertical Alignment: Align items start Source: https://getbootstrap.com/docs/5.3/layout/columns Use responsive `align-items-start` classes to vertically align columns at the start. This applies to the entire row. ```html............``` -------------------------------- ### Project File Structure without npm Source: https://getbootstrap.com/docs/5.3/customize/sass This is an example of a project file structure when Bootstrap's source files are downloaded manually and not managed by a package manager. ```bash your-project/ ├── scss/ │ └── custom.scss ├── bootstrap/ │ ├── js/ │ └── scss/ └── index.html ``` -------------------------------- ### Bootstrap Card Examples Source: https://getbootstrap.com/docs/5.3/components/card Demonstrates various card styles with different border colors and text alignments. Use these to create visually distinct content blocks. ```htmlOne of three columnsOne of three columnsOne of three columnsHeaderPrimary card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
HeaderSecondary card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
HeaderSuccess card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
HeaderDanger card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
HeaderWarning card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
HeaderInfo card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
HeaderLight card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
``` -------------------------------- ### Responsive Offcanvas Example Source: https://getbootstrap.com/docs/5.3/components/offcanvas Demonstrates a responsive offcanvas that is hidden on small screens and visible on large screens and up. Use the `.offcanvas-lg` class for this behavior. ```htmlHeaderDark card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Resize your browser to show the responsive offcanvas toggle.``` -------------------------------- ### Add Parcel npm Start Script Source: https://getbootstrap.com/docs/5.3/getting-started/parcel Defines an npm script to start the Parcel development server, specifying the HTML entry point and output directory. ```json { // ... "scripts": { "start": "parcel serve src/index.html --public-url / --dist-dir dist", "test": "echo \"Error: no test specified\" && exit 1" }, // ... } ``` -------------------------------- ### Install Bootstrap via npm Source: https://getbootstrap.com/docs/5.3/getting-started/download Install Bootstrap version 5.3.8 into your Node.js project using npm. This command fetches the package and adds it to your project's dependencies. ```bash npm install bootstrap@5.3.8 ``` -------------------------------- ### Basic HTML structure for Bootstrap Source: https://getbootstrap.com/docs/5.3/getting-started/introduction Create a new index.html file in your project root. Include the tag for proper responsive behavior in mobile devices. ```htmlResponsive offcanvas
This is content within an
.offcanvas-lg.Bootstrap demo Hello, world!
``` -------------------------------- ### Tab Methods Source: https://getbootstrap.com/docs/5.3/components/list-group All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. ```APIDOC ## dispose ### Description Destroys an element’s tab. ### Method `dispose` ## getInstance ### Description Static method which allows you to get the tab instance associated with a DOM element. ### Method `getInstance(element)` ## getOrCreateInstance ### Description Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn’t initialized. ### Method `getOrCreateInstance(element)` ## show ### Description Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the `shown.bs.tab` event occurs). ### Method `show` ``` -------------------------------- ### Example Element with Color Utilities Source: https://getbootstrap.com/docs/5.3/customize/color Demonstrates using new color utility classes for background, text emphasis, and borders. These utilities adapt to color modes. ```htmlExample element with utilities``` -------------------------------- ### Project File Structure with npm Source: https://getbootstrap.com/docs/5.3/customize/sass This is an example of a typical project file structure when using npm to manage Bootstrap's source Sass files. ```bash your-project/ ├── scss/ │ └── custom.scss └── node_modules/ │ └── bootstrap/ │ ├── js/ │ └── scss/ └── index.html ``` -------------------------------- ### Small Button Dropdowns Source: https://getbootstrap.com/docs/5.3/components/dropdowns This example demonstrates how to create small default and split button dropdowns, utilizing the `.btn-sm` class. ```html``` -------------------------------- ### Vertical Pills Example Source: https://getbootstrap.com/docs/5.3/components/navs-tabs Example of vertical navigation pills. For optimal accessibility and layout, it's recommended to add `aria-orientation="vertical"` to the tab list container. ```html``` -------------------------------- ### Stacked Modals Example Source: https://getbootstrap.com/docs/5.3/components/modal Demonstrates how to create two modals that can be opened sequentially. Use `data-bs-target` and `data-bs-toggle` attributes to link them. ```html ``` -------------------------------- ### Install Bootstrap Sass with NuGet Source: https://getbootstrap.com/docs/5.3/getting-started/download Install only Bootstrap's Sass files using NuGet for .NET Framework projects. Note: Newer projects should use libman or other methods. ```powershell Install-Package bootstrap.sass ``` -------------------------------- ### Tooltip Initialization with Popper.js Configuration Source: https://getbootstrap.com/docs/5.3/components/tooltips Demonstrates how to initialize a tooltip and customize its behavior using the `popperConfig` option, allowing for advanced Popper.js configurations. ```APIDOC ## Initialize Tooltip with Popper.js Configuration ### Description Initialize a tooltip and provide a custom `popperConfig` function to modify the default Popper.js configuration. ### Method `new bootstrap.Tooltip(element, options)` ### Parameters #### Options - **`popperConfig`** (function) - Optional - A function that receives the default Popper.js configuration and returns a modified configuration. ### Request Example ```javascript const tooltip = new bootstrap.Tooltip(element, { popperConfig(defaultBsPopperConfig) { // Use defaultBsPopperConfig if needed... // const newPopperConfig = {...} // return newPopperConfig } }) ``` ``` -------------------------------- ### Carousel Starts on User Interaction Source: https://getbootstrap.com/docs/5.3/components/carousel Setting `data-bs-ride="true"` prevents the carousel from starting automatically on page load. It will only begin cycling after the first user interaction. ```html...............``` -------------------------------- ### Basic Form Example Source: https://getbootstrap.com/docs/5.3/forms/overview Demonstrates a standard form structure with email, password, and checkbox inputs, along with a submit button. Includes labels, helper text, and accessibility attributes. ```html ```