ChellyAhmed
commented
1 year ago Hello, Thank you for your suggestion. I want to point out that there is already a pricing example on the Examples page. (link: https://getbootstrap.com/docs/5.2/examples/pricing/ ). The only difference you're suggesting is the switch at the top. However, the toggle switch is already supported by Bootstrap, so it is pretty straightforward for anyone to add the toggle button to the pricing example. Link for switches in Bootstrap docs: https://getbootstrap.com/docs/5.2/forms/checks-radios/#switches
Prerequisites
Proposal
The pricing component with toggle switch would be built with default Bootstrap components and utilities with little customization. It would consist of a row of cards that show the name, price, and features of each plan. The cards would have a border and background color that match the primary color of Bootstrap. The most popular or recommended plan could have a badge or a different color to stand out from the rest. Above the cards, there would be a toggle switch that changes the prices from monthly to yearly or vice versa. The prices would be updated dynamically using JavaScript. Some examples of websites that use pricing components with toggle switch are:
[Spotify] [Netflix] [Dropbox]
`
Choose your plan
$0 / mo
Motivation and context
The motivation for adding a pricing component with toggle switch to Bootstrap is to provide a simple and effective way for users to display different pricing plans for their products or services and let customers choose between monthly and yearly billing options. This feature would enhance the usability and functionality of Bootstrap as a framework for building responsive websites that offer subscription-based services or products with different tiers of features or benefits. The context for adding this feature is that many websites nowadays use pricing components with toggle switch to show their customers the different options and prices they have for their services or products. This feature is especially useful for websites that offer subscription-based services or products with different tiers of features or benefits, such as music streaming, video streaming, cloud storage, etc. By using a pricing component with toggle switch, users can easily compare the different plans and choose the one that suits their needs and budget. Moreover, by allowing customers to switch between monthly and yearly billing options, users can also increase their conversion rate and customer loyalty by offering discounts or incentives for longer-term subscriptions.