Bootply

v 1.2.1

Bootply is a playground for 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 snippets.

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 with of the HEAD document, that is between <body> and </body>. Code used here will override the CSS defined in the bootstrap.css and bootstrap-responsive.css files.

Rendering Template

When you 'Run' your code, the 'preview' pane is rendered using this standard HTML template:
        <!DOCTYPE html> 
        <html lang="en"> 
            <head> 
                <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
                <meta charset="utf-8"> 
                <title>Bootstrap Preview</title> 
                 
                <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/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"> 
                
                <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">  
                 
                <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}
                </style> 
                 
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
                <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
                 
                <script id="bsJs"> 
                $(document).ready(function() { 
                	{your JavaScript code goes here}
                }); 
                </script> 
            </head> 
            <body> 
            	{your HTML code goes here}
            </body> 
        </html>


		
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; bootply.com/12345). 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:
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


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 a dashboard that enables them to manage 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'.

Community

The idea behind Bootply is to provide a web-based editor for Bootstrap that also facilites 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.

Thanks,
Carol Skelly
@Bootply