Bootply

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 css for Bootstrap 3.x --*/

/* move special fonts to HTML head for better performance */
@import url(http://fonts.googleapis.com/css?family=Voltaire);

html,
body {
  height: 100%;
  width: 100%;
  font-family:Arial,sans-serif;
}

/* fix bs3 horizontal scrollbar bug */
.row { margin: 0; padding: 0 }

/* use special fonts in certain elements */
h1,h2,h3,h4,.lead,.btn,.navbar a {
  text-transform:uppercase;
  font-family:'Voltaire',Arial,sans-serif;
  letter-spacing:2px;
}

h1 {
  font-size:50px;
}

/* make images gray */
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.icon-bar {
   background-color:#fff;
}

.scroll-down a, .scroll-top a {
   color:#ffffff;
}

.scroll-down {
   position:fixed;
   bottom:20%;
   right:0%;
   color:#f9f9f9;
}

.scroll-top {
  background-color:#dbdbdb;
}

.vert {
  vertical-align: middle;
  width:100%;
  padding-top:4%;
  text-align:center;
}

.header .btn-lg {
   font-size:28px;
   border-color:#eeeeee;
   padding:15px;
   background-color:transparent;
   color:#ffffff;
}

.header .btn-lg:hover {
   background-color:#eeeeee;
   color:#777777;
}

.navbar a {
  color:#fff;
  font-size:14px;
}

.navbar-bold.affix {
  background-color:#d46054;
}

.navbar-bold {
  background-color:#f68076;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.navbar-bold li a:hover, .navbar-bold li.active {
  background-color:#d46054;
}

.header h1 {
  font-size:80px;
  -webkit-text-stroke: 1px rgba(f,f,f,0.1);
  color:#431a6d;
  color:#fff;
  margin-left:-5px;
  margin-bottom:5px;
  text-transform:uppercase;
}

.header .lead {
  color:#d46054;
  font-size:25px;
}

.header {
  height: 80%;
  background: #f68076 url('http://www.bootply.com/assets/example/pt_topo_l.png') repeat center center fixed;
}

/* use alt in navbar and header for different color */

.alt {
  background-color: #6E28C9;
}

.alt .lead {
  color: #3B0496;
}

.alt.affix {
  background-color:#4C06AB;
}

.alt li a:hover, .alt li.active {
  background-color:#5D17BA;
}

.blurb {
  padding: 120px 0;
  background-color:#fefefe;
}

.blurb .panel {
  background-color:transparent;
}

.bright {
  background: #dbdbdb url('http://www.bootply.com/assets/example/pt_topo.png') repeat center center fixed; 
  color:#777;
}

.featurette {
  background: #222334;
  padding: 50px 0;
  color: #ffffff;
}

.featurette-item {
  margin-bottom: 15px;
}

.featurette-item > i {
  border: 3px solid #ffffff;
  border-radius: 50%;
  display: inline-block;
  font-size: 56px;
  width: 140px;
  height: 140px;
  line-height: 136px;
  vertical-align: middle; 
  text-align: center;
}

.featurette-item > i:hover {
  font-size: 68px;
}

.callout {
  color: #ffffff;
  padding-top:7%;
  height: 100%;
  width: 100%;
  background: url('http://www.bootply.com/assets/example/bg_suburb.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.gallery {
  padding: 50px 0;
}

.call-to-action {
  background: #eeeeee;
  padding: 50px 0;
}

.call-to-action .btn {
  margin: 10px;
}

footer {
  padding: 100px 0;
}

/* -- end custom css for Bootstrap 3.x --*/

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

The Simplicity of Bootstrap

The Most Popular Responsive Framework

Amazing Features

Rocket

Up-up-and-away with this starter template.

Magnet

For you are a magnet and I am steel.

Shield

Protect yourself. Don't design like it's 1999.

Scholar

Because lead pencils are pretty smart looking.

Random People With Smiles

Mobile-first

This Template is Responsive

Features Galore

Carousel

Tabs

Modal

Navigation

Mobile-first

Accordion

Panel

Form

Table

Icons

Responsive Grid

Typography

Launch Your Web Design

With this Responsive Bootstrap Template

Smashing Heading

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis si.

CapitalCity Template Single page style template with smooth scrolling, fixed background images, multiple left / right aligned sections.
7	31271 Bootstrap v3.2.0 Related snippets Forked from 85657
template starter example bootstrap-3
Created by: cskelly

Bootply

CapitalCity Template

Single page style template with smooth scrolling, fixed background images, multiple left / right aligned sections.

Bootply v1.2.1
An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2

h3

h4

CapitalCity

The Simplicity of Bootstrap