Bootstrap 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

javascript

css

/* custom google plus style theme */
@import url(http://fonts.googleapis.com/css?family=Roboto:400);
body {
  background-color:#e0e0e0;
  -webkit-font-smoothing: antialiased;
  font: normal 14px Roboto,arial,sans-serif;
}
.navbar-default {background-color:#f4f4f4;margin-top:50px;border-width:0;z-index:5;}
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > li:hover > a {border:0 solid #4285f4;border-bottom-width:2px;font-weight:800;background-color:transparent;}
.navbar-default .dropdown-menu {background-color:#ffffff;}
.navbar-default .dropdown-menu li > a {padding-left:30px;}

.header {background-color:#ffffff;border-width:0;}
.header .navbar-collapse {background-color:#ffffff;}
.btn,.form-control,.panel,.list-group,.well {border-radius:1px;box-shadow:0 0 0;}
.form-control {border-color:#d7d7d7;}
.btn-primary {border-color:transparent;}
.btn-primary,.label-primary,.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {background-color:#4285f4;}
.btn-plus {background-color:#ffffff;border-width:1px;border-color:#dddddd;box-shadow:1px 1px 0 #999999;border-radius:3px;color:#666666;text-shadow:0 0 1px #bbbbbb;}
.well,.panel {border-color:#d2d2d2;box-shadow:0 1px 0 #cfcfcf;border-radius:3px;}
.btn-success,.label-success,.progress-bar-success{background-color:#65b045;}
.btn-info,.label-info,.progress-bar-info{background-color:#a0c3ff,border-color:#a0c3ff;}
.btn-danger,.label-danger,.progress-bar-danger{background-color:#dd4b39;}
.btn-warning,.label-warning,.progress-bar-warning{background-color:#f4b400;color:#444444;}

hr {border-color:#ececec;}
button {
	outline: 0;
}
textarea {
  resize: none;
  outline: 0;
  
}
.panel .btn i,.btn span{
  color:#666666;
}
.panel .panel-heading {
  background-color:#ffffff;
  font-weight:700;
  font-size:16px;
  color:#262626;
  border-color:#ffffff;
}
.panel .panel-heading a {
  font-weight:400;
  font-size:11px;
}
.panel .panel-default {
  border-color:#cccccc;
}
.panel .panel-thumbnail {
  padding:0;
}
.panel .img-circle {
  width:50px;
  height:50px;
}
.list-group-item:first-child,.list-group-item:last-child {
	border-radius:0;
}
h3,h4,h5 { 
  border:0 solid #efefef; 
  border-bottom-width:1px;
  padding-bottom:10px;
}

.modal-dialog {
 width: 450px;
}

.modal-footer {
 border-width:0;
}

.dropdown-menu {
   background-color:#f4f4f4;
   border-color:#f0f0f0;
   border-radius:0;
   margin-top:-1px;
}
/* end theme */

/* template layout*/
#subnav {
	position:fixed;
    width:100%;
}

@media (max-width: 768px) {
	#subnav {
	padding-top: 6px;
	}
}

#main {
	padding-top:120px;
}

html

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.."

View all

Bootstrap Examples

Modal / Dialog Datetime Examples Data Grids

View all

More Templates

Free @Bootply

There a load of new free Bootstrap 3 ready templates at Bootply. All of these templates are free and don't require extensive customization to the Bootstrap baseline.

View all

Bootply Editor & Code Library

The Bootstrap Playground

Design, build, test, and prototype using Bootstrap in real-time from your Web browser. Bootply combines the power of hand-coded HTML, CSS and JavaScript with the benefits of responsive design using Bootstrap. Find and showcase Bootstrap-ready snippets in the 100% free Bootply.com code repository.

View all

Portlet Heading

Modals
Sliders / Carousel
Thumbnails

View all

Portlet Heading

Bootply Playground
Bootstrap Editor
Bootstrap Templates

View all

Stackoverflow

Keyword: Bootstrap

If you're looking for help with Bootstrap code, the twitter-bootstrap tag at Stackoverflow is a good place to find answers.

View all

Top Items

Bootstrap 3 Snippets Examples

Posts

View all

Upgrade to Bootstrap 3

Guidance and Tools

Migrating from Bootstrap 2.x to 3 is not a simple matter of swapping out the JS and CSS files. Bootstrap 3 is a major overhaul, and there are a lot of changes from Bootstrap 2.x. This guidance is intended to help 2.x developers transition to 3.

More on Upgrading from +Bootply

View all

Profiles

Check out some of our member profiles..

John Doe

10 photos 89 followers

Message Favorite

View all

Inspiration

Articles

The more powerful (and 100% fluid) Bootstrap 3 grid now comes in 4 sizes (or "breakpoints"). Tiny (for smartphones), Small (for tablets), Medium (for laptops) and Large (for laptops/desktops).

Mobile first" is a responsive Web design practice that prioritizes consideration of smart phones and mobile devices when creating Web pages.

Hacker News

120k Followers, 900 Posts

Bootstrap Templates

902 Followers, 88 Posts

Social Media

19k Followers, 789 Posts

Playground

Heads up! This alert needs your attention, but it's not super important.

View all

Buttons & Labels

Button

Primary

Danger

Warning

Info

Success

Label Success

Warning Info

Danger Primary

View all

Progress Bars

View all

Tabs

I'm in Section A.

Howdy, I'm in Section B.

I've decided that I like wells.

Download Google Plus Style Template
More Bootstrap Templates by @Bootply

Bootstrap Google Plus Theme A "Google+" inspired Bootstrap 3 template design
2	2661 Bootstrap v3.0.2 Related snippets
template starter google
Created by: jeffreymealo

Bootply

Bootstrap Google Plus Theme

A "Google+" inspired Bootstrap 3 template design

Bootply v1.2.1
An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2