Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !37233

Docs: Add StackBlitz edit button for examples

  • Review changes

  • Download
  • Email patches
  • Plain diff
Open Julien Déramond requested to merge main-jd-stackblitz-for-examples into main Oct 01, 2022
  • Overview 5
  • Commits 4
  • Pipelines 0
  • Changes 2

Related issues

Closes #36857

Description

This PR suggests to add a StackBlitz edit button for each Bootstrap example.

TODO: add more details to explain the technical solution

Motivation & Context

TODO

Type of changes

  • New feature (non-breaking change which adds functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly

Live previews

  • Docs > Examples

Manual tests

For each example, try the StackBlitz edit button and then check if the rendering is the same as within our docs: CSS, JS, etc.

  • Album // Album RTL
  • Blog // Blog RTL
  • Carousel // Carousel RTL
  • Cheatsheet // Cheatsheet RTL
  • Checkout // Checkout RTL
  • Cover
    • ⚠️ Missing .h-100 for html.
  • Dashboard // Dashboard RTL
    • ⚠️ Doesn't seem to work because index.js in StackBlitz is executed before the scripts in <script> (index.html)
  • Dropdowns
  • Features
  • Footers
  • Grid
  • Headers
  • Heroes
  • Jumbotron
  • List groups
  • Modals
  • Navbar bottom
  • Navbar fixed
  • Navbar static
  • Navbars
  • Navbars offcanvas
  • Offcanvas navbar
  • Pricing
  • Product
  • Sidebars
  • Sign-in
  • Starter template
  • Sticky footer
    • ⚠️ Can't work because it needs class="h-100" on the html tag which is not possible in StackBlitz since this class is overriden. Do we remove the StackBlitz edit button?
  • Sticky footer navbar

Remaining things to do

  • Handle 404 errors when using fetch
  • Handle extra JS files
  • Handle RTL (CSS)
  • Handle RTL (JS)
  • Check how to handle relative URL like /docs/5.2/assets/brand/bootstrap-logo.svg in the body
  • Rebase this branch onto main when https://github.com/twbs/bootstrap/pull/37267 will be merged
  • If https://github.com/twbs/bootstrap/pull/37498 is merged, propagate the same modification in this PR
  • Remove the bootstrap-bundle.min.js in `
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: main-jd-stackblitz-for-examples