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

@import url('http://fonts.googleapis.com/css?family=Open+Sans:200,300');

body {
	background: url('/assets/64531/green_suburb.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	color:#fff;
  	background-color:#333;
  	font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
}

a:link, a:visited {
	color:#eee;
}

.block {
	background-color:rgba(0,0,0,0.2);
    height:370px;
  	padding-left:12px;
  	padding-right:12px;
}

.block-sm {
    height:180px;
}

.btn-flat {
  	font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
	border-radius:0px;
  	border-width:0;
  	background-image:none;
  	padding:16px;
  	margin:0 auto;
  	margin-top:15px;
  	width:70%;
    font-size:20pt;
}

/* mini carousel */
.carousel-inner img {
	width:100%;
  	height:100%;
}

#myCarousel {
	font-size:90%;
}

.carousel-controls-mini {
	margin-left:42%;
}

.carousel-controls-mini > a {
	border:1px solid #eee;
  	margin:1px;
  	width:20px;
    display:block;
  	float:left;
    text-align:center;
}

#carousel-bounding-box {
  margin:0 auto;
  width:300px;
}

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

BOOTSTRAP FIXED BACKGROUND

A scrolling one page example layout

Responsive Design

Take a look at what we mixed up in our Bootstrap test labs. Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor.

2013 Trends

With all of the front-end frameworks at hand, why does Bootstrap lead? Aliquam mauris arcu, tristique a, condimentum feugiat justo.

Featuring

Build

Bootply is a playground for Twitter Bootstrap.

Design

Use Bootply to design, prototype, extend the Bootstrap framework.

Test

Use Bootply to test and debud Bootstrap designs.

A Mini Carousel

‹ ›

Play with this on Bootply

Bootstrap Full Screen Background Theme Layout / theme with full fixed background image
0	793 Bootstrap v2.3.2 Related snippets
background image parallax opacity theme themes full layout
Created by: thingamawebs

Bootply

Bootstrap Full Screen Background Theme

Layout / theme with full fixed background image

Bootply v1.2.1
An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2

h3

h4

BOOTSTRAP FIXED BACKGROUND

Responsive Design

2013 Trends

Featuring

Build

Design

Test

A Mini Carousel

Slide One

Slide Two

Slider Three

Slider Four

Slider Five

Slider Six

id
style
class

Bootply

Bootstrap Full Screen Background Theme

Layout / theme with full fixed background image

Bootply v1.2.1 An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2

h3

h4

Starter Template

Details

BOOTSTRAP FIXED BACKGROUND

Responsive Design

2013 Trends

Featuring

Build

Design

Test

A Mini Carousel

Slide One

Slide Two

Slider Three

Slider Four

Slider Five

Slider Six

Do you want to proceed?

Password Lookup

Would you like to upgrade?

$9/mo

Contact Us

Bootply v1.2.1
An unofficial Bootstrap playground.