javascriptcssBootstrap Editor use requires a larger screen resolution. Resize your browser, or use a device with a larger screen (desktop or laptop). You can preview at smaller widths (phone / tablet), but the editing capability is disabled.
Switch to render view
preview container
row
|
8.3%
12.5%
25%
33%
41.6%
50%
58.3%
66%
75%
83.3%
91.6%
100%
|
Hero
well
|
|
<form>
|
h1
h2
h3
h4
small
|
icon
|
table
<hr>
label
badge
[media]
"Lorem ipsum.."
×
Starter Template
Click on one of the templates to begin
Simple
Slider
3 Columns
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>
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:
- 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 |
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
- Always name, describe and tag content that you post.
- Complete your user profile settings such as Website, Twitter handle, etc...
- 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
