About Bootply

The Bootstrap Playground

Bootply™ is a editor and visual builder for Twitter Bootstrap. Bootply helps you design, prototype, extend, build and test the Bootstrap framework.

Getting Started

You can use Bootply to edit HTML, JavaScript and CSS code that utilizes the Bootstrap and jQuery frameworks. To create a new project (known as a "ply"), simply type code in either the HTML, JavaScript or CSS code editors. Code in any of these is completely optional, but there must be code in a least one in order to save the ply. A ply is a collection of HTML, CSS and Javascript code.

HTML Editor

HTML code entered in this panel will be rendered inside body of the document, that is between <body> and </body>. The <!DOCTYPE html> and <html> tags are included outside the <body> tags so that you do not need to include these in your HTML code.

JavaScript Editor

JavaScript code entered in this panel will be rendered inside a <script> tag within the <head> of the document. JavaScript code can reference the jQuery framework here since the rendered code is placed inside the jQuery document ready function: $(document).ready(function() {});. However, if the $(document).ready(function() {}); is included in the JavaScript pane, it will not be included at runtime / preview. Please, do not use <script> tags inside this editor.

CSS Editor

CSS code entered in this panel will be rendered inside a STYLE tag inside the HEAD document, that is between <head> and </head>. Code used here will override the CSS defined in the bootstrap.min.css file. The Bootstrap CSS files are served up by the speedy BootstrapCDN servers.

Rendering Template

When you 'Run' your code, the 'preview' pane is rendered using this standard HTML template:
        <!DOCTYPE html> 
                <html lang="en"> 
                        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
                        <meta charset="utf-8"> 
                        <title>Bootstrap Preview</title> 
                        <link href="//{version}/css/bootstrap-combined.min.css" rel="stylesheet"> 
                        <link rel="shortcut icon" href="/bootstrap/img/favicon.ico"> 
                        <link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png"> 
                        <link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png"> 
                        <link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png"> 
                        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> 
                        <meta http-equiv="Pragma" content="no-cache" /> 
                        <meta http-equiv="Expires" content="0" /> 
                        <style id="bsCss">
        			  {your CSS code goes here}
                        <script src="//"></script> 
                        <script src="//{version}/js/bootstrap.min.js"></script> 
                        <script id="bsJs"> 
                        $(document).ready(function() { 
                        	{your JavaScript code goes here}
                    	{your HTML code goes here}
The entire combined Bootstrap CSS and JavaScript are included thanks to the servers at BootstrapCDN. jQuery is included from the Google API's CDN. You can control the Bootstrap and jQuery versions that are included in the results via the 'Settings' menu.

Saving, Updating and Forking

As you use Bootply, you may wish to save your work for later use. Anonymous users (not logged-in) can save plys for later use. Plys can be referenced later via their unique url (ie; However, anonymous plys that are inactive or un-tagged are subject to removal after 3 months. The best way to use Bootply is to create a user account and manage plys via the dashboard. The will also let you see the stats (views/votes) on plys that you've created.

Plys can also be 'forked' to create a copy of the ply. Here are the general rules:
  • Anon users can create and fork (copy).
  • Anon users cannot update existing plys.
  • Users can create and fork (copy).
  • Users can update plys that the own.
  • Users can take ownership of unowned (anonymous) plys.
User Activity Result
Anonymous Save new ply Ply saved without an owner
Anonymous Fork existing Ply copied without an owner
User Save new ply Ply saved and owned by user
User Fork existing Ply copied and owned by user
User Update non-owned Ply saved and owned by user


Plys can only be deleted by their owner. Plys can be removed (permanently) via the 'Dashboard' by clicking the trash can icon next to the title in the list of plys. If you created a ply anonymously that you wish to delete, you must first create a user account, login and take ownership of the anonymous ply using the update/save command. Once you own the ply it can be deleted via your 'Dashboard'. If an unwanted ply has been indexed by Google, please contact us to request removal.

Tagging and Metadata

To improve discoverability, plys can be tagged with metadata (name and description) and keywords (tags). When users search via keyword or tag, plys that have been appropriately tagged appear in the results and are indexed by Google for improved SEO.

Users and Login

Registered users have access to their own 'Dashboard' that enables them to manage (edit, delete, etc..) their own collection of plys. To register for a user account, simply click the 'Login' button. A page is displayed that enables you to "Login" or "Sign-up". You can register by completing the "Sign-up" form with a desired username and password that you use to login to the site on future visits.

Once logged in, your username will display in place of the 'Login' button in the upper right navigation menu. Click your 'username' to access the 'Dashboard', 'Create a New Ply', or 'Logout'.


The idea behind Bootply is to provide a web-based editor for Bootstrap that also facilitates collaboration and sharing. The Bootply community is an aggregation of the latest and greatest posts (plys) and users. The community is a good place to showcase your work and increase your visibility as a developer.
Tips for Increasing your Reputation & Rank
  1. Always name, describe and tag content that you post.
  2. Complete your user profile settings such as Website, Twitter handle, etc...
  3. Share your posts on Twitter (and other social media in the near future).

Help, Support and Feedback

The best way to get support and provide feed back is by following Bootply on GitHub. If you'd like to get involved, stay in touch via GitHub, or Twitter @Bootply. Also check out the Bootply tag at Stackoverflow.

The Team @Bootply


Bootply or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code. By using or saving the code/weave to the server you are automatically agreeing to these Terms & Conditions.

Privacy Policy

We collect the e-mail addresses of those who communicate with us via e-mail, aggregate information on what pages consumers access or visit, and information volunteered by the consumer (such as survey information and/or site registrations). The information we collect is used to improve the content of our Web pages and the quality of our service, and is not shared with or sold to other organizations for commercial purposes, except to provide products or services you've requested, when we have your permission, or under the following circumstances:

It is necessary to share information in order to investigate, prevent, or take action regarding illegal activities, suspected fraud, situations involving potential threats to the physical safety of any person, violations of Terms of Service, or as otherwise required by law.

We transfer information about you if Bootply is acquired by or merged with another entity. In this event, Bootply will notify you before information about you is transferred and becomes subject to a different privacy policy.