Bootstrap(./index.

html)

Scaffolding
Bootstrapisbuiltonresponsive12columngrids,layouts,and
components.

Headsup!Thesedocsareforv2.3.2,whichisnolongerofficiallysupported.Checkoutthelatest
versionofBootstrap!(http://getbootstrap.com)

Globalstyles
Gridsystem
Fluidgridsystem
Layouts
Responsivedesign

Globalsettings
RequiresHTML5doctype
BootstrapmakesuseofcertainHTMLelementsandCSSpropertiesthatrequiretheuseoftheHTML5
doctype.Includeitatthebeginningofallyourprojects.
1. <!DOCTYPEhtml>
2. <htmllang="en">
3. ...
4. </html>

Typographyandlinks
Bootstrapsetsbasicglobaldisplay,typography,andlinkstyles.Specifically,we:
Remove marginonthebody
Set backgroundcolor:whiteonthe body
Usethe @baseFontFamily, @baseFontSize,and @baseLineHeightattributesasourtypographic
base
Setthegloballinkcolorvia @linkColorandapplylinkunderlinesonlyon :hover
Thesestylescanbefoundwithinscaffolding.less.

ResetviaNormalize
WithBootstrap2,theoldresetblockhasbeendroppedinfavorofNormalize.css
(http://necolas.github.com/normalize.css/),aprojectbyNicolasGallagher(http://twitter.com/necolas)and
JonathanNeal(http://twitter.com/jon_neal)thatalsopowerstheHTML5Boilerplate
(http://html5boilerplate.com).WhileweusemuchofNormalizewithinourreset.less,wehaveremoved
someelementsspecificallyforBootstrap.

Defaultgridsystem
Livegridexample
ThedefaultBootstrapgridsystemutilizes12columns,makingfora940pxwidecontainerwithout
responsivefeatures(./scaffolding.html#responsive)enabled.WiththeresponsiveCSSfileadded,thegrid
adaptstobe724pxand1170pxwidedependingonyourviewport.Below767pxviewports,thecolumns
becomefluidandstackvertically.
1
1
1
1
1
1
1

1
1

2
3
4

4
5

BasicgridHTML
Forasimpletwocolumnlayout,createa .rowandaddtheappropriatenumberof .span*columns.As
thisisa12columngrid,each .span*spansanumberofthose12columns,andshouldalwaysaddupto
12foreachrow(orthenumberofcolumnsintheparent).
1. <divclass="row">
2. <divclass="span4">...</div>
3. <divclass="span8">...</div>
4. </div>

Giventhisexample,wehave .span4and .span8,makingfor12totalcolumnsandacompleterow.

Offsettingcolumns
Movecolumnstotherightusing .offset*classes.Eachclassincreasestheleftmarginofacolumnbya
wholecolumn.Forexample, .offset4moves .span4overfourcolumns.
4
3offset2

3offset1
3offset2

6offset3

1. <divclass="row">
2. <divclass="span4">...</div>
3. <divclass="span3offset2">...</div>
4. </div>

Nestingcolumns
Tonestyourcontentwiththedefaultgrid,addanew .rowandsetof .span*columnswithinanexisting
.span*column.Nestedrowsshouldincludeasetofcolumnsthatadduptothenumberofcolumnsofits

parent.
Level1column
Level2
Level2

1. <divclass="row">
2. <divclass="span9">
3. Level1column
4. <divclass="row">
5. <divclass="span6">Level2</div>
6. <divclass="span3">Level2</div>
7. </div>
8. </div>
9. </div>

Fluidgridsystem
Livefluidgridexample
Thefluidgridsystemusespercentsinsteadofpixelsforcolumnwidths.Ithasthesameresponsive
capabilitiesasourfixedgridsystem,ensuringproperproportionsforkeyscreenresolutionsanddevices.
1

1
1
1
1
1
1
1
1
1
1
1

4
4
4

4
8

6
6

12

BasicfluidgridHTML

Makeanyrow"fluid"bychanging .rowto .rowfluid.Thecolumnclassesstaytheexactsame,making

iteasytoflipbetweenfixedandfluidgrids.
1. <divclass="rowfluid">
2. <divclass="span4">...</div>
3. <divclass="span8">...</div>
4. </div>

Fluidoffsetting
Operatesthesamewayasthefixedgridsystemoffsetting:add .offset*toanycolumntooffsetbythat
manycolumns.
4
4offset4

3offset3
3offset3

6offset6

1. <divclass="rowfluid">
2. <divclass="span4">...</div>
3. <divclass="span4offset2">...</div>
4. </div>

Fluidnesting
Fluidgridsutilizenestingdifferently:eachnestedlevelofcolumnsshouldaddupto12columns.Thisis
becausethefluidgridusespercentages,notpixels,forsettingwidths.
Fluid12
Fluid6
Fluid6
Fluid6
Fluid6

1. <divclass="rowfluid">
2. <divclass="span12">
3. Fluid12
4. <divclass="rowfluid">
5. <divclass="span6">
6. Fluid6
7. <divclass="rowfluid">
8. <divclass="span6">Fluid6</div>
9. <divclass="span6">Fluid6</div>
10. </div>
11. </div>
12. <divclass="span6">Fluid6</div>
13. </div>
14. </div>
15. </div>

Layouts
Fixedlayout
Providesacommonfixedwidth(andoptionallyresponsive)layoutwithonly <divclass="container">
required.

1. <body>
2. <divclass="container">
3. ...
4. </div>
5. </body>

Fluidlayout
Createafluid,twocolumnpagewith <divclass="containerfluid">greatforapplicationsanddocs.

1. <divclass="containerfluid">
2. <divclass="rowfluid">
3. <divclass="span2">
4. <!Sidebarcontent>
5. </div>
6. <divclass="span10">
7. <!Bodycontent>
8. </div>
9. </div>
10. </div>

Responsivedesign
Enablingresponsivefeatures

TurnonresponsiveCSSinyourprojectbyincludingthepropermetatagandadditionalstylesheetwithin
the <head>ofyourdocument.Ifyou'vecompiledBootstrapfromtheCustomizepage,youneedonly
includethemetatag.
1. <metaname="viewport"content="width=devicewidth,initialscale=1.0">
2. <linkhref="assets/css/bootstrapresponsive.css"rel="stylesheet">

Headsup! Bootstrapdoesn'tincluderesponsivefeaturesbydefaultatthistimeasnoteverythingneedsto

beresponsive.Insteadofencouragingdeveloperstoremovethisfeature,wefigureitbesttoenableitas
needed.

AboutresponsiveBootstrap
MediaqueriesallowforcustomCSSbasedona
numberofconditionsratios,widths,displaytype,etc
butusuallyfocusesaround minwidthand
maxwidth.

Modifythewidthofcolumninourgrid
Stackelementsinsteadoffloatwherevernecessary
Resizeheadingsandtexttobemoreappropriate
fordevices
Usemediaqueriesresponsiblyandonlyasastarttoyourmobileaudiences.Forlargerprojects,do
considerdedicatedcodebasesandnotlayersofmediaqueries.

Supporteddevices
Bootstrapsupportsahandfulofmediaqueriesinasinglefiletohelpmakeyourprojectsmoreappropriate
ondifferentdevicesandscreenresolutions.Here'swhat'sincluded:
Label

Layoutwidth

Columnwidth

Gutterwidth

Largedisplay

1200pxandup

70px

30px

Default

980pxandup

60px

20px

Portraittablets

768pxandabove

42px

20px

Phonestotablets

767pxandbelow

Fluidcolumns,nofixedwidths

Phones

480pxandbelow

Fluidcolumns,nofixedwidths

1. /*Largedesktop*/
2. @media(minwidth:1200px){...}
3.
4. /*Portraittablettolandscapeanddesktop*/
5. @media(minwidth:768px)and(maxwidth:979px){...}
6.
7. /*Landscapephonetoportraittablet*/
8. @media(maxwidth:767px){...}
9.
10. /*Landscapephonesanddown*/
11. @media(maxwidth:480px){...}

Responsiveutilityclasses
Forfastermobilefriendlydevelopment,usetheseutilityclassesforshowingandhidingcontentbydevice.
Belowisatableoftheavailableclassesandtheireffectonagivenmediaquerylayout(labeledby
device).Theycanbefoundin responsive.less.

Class

Phones

Tablets

Desktops

767pxandbelow

979pxto768px

Default

.visiblephone

Visible

Hidden

Hidden

.visibletablet

Hidden

Visible

Hidden

.visibledesktop

Hidden

Hidden

Visible

.hiddenphone

Hidden

Visible

Visible

.hiddentablet

Visible

Hidden

Visible

.hiddendesktop

Visible

Visible

Hidden

Whentouse
Useonalimitedbasisandavoidcreatingentirelydifferentversionsofthesamesite.Instead,usethemto
complementeachdevice'spresentation.Responsiveutilitiesshouldnotbeusedwithtables,andassuch
arenotsupported.

Responsiveutilitiestestcase
Resizeyourbrowserorloadondifferentdevicestotesttheaboveclasses.

Visibleon...
Greencheckmarksindicatethatclassisvisibleinyourcurrentviewport.
Phone
Phone

Tablet

Desktop

Hiddenon...
Here,greencheckmarksindicatethatclassishiddeninyourcurrentviewport.
Phone

Tablet
Tablet

Desktop
Desktop

Designedandbuiltwithalltheloveintheworldby@mdo(http://twitter.com/mdo)and@fat
(http://twitter.com/fat).
CodelicensedunderApacheLicensev2.0(http://www.apache.org/licenses/LICENSE2.0),documentation
underCCBY3.0(http://creativecommons.org/licenses/by/3.0/).
GlyphiconsFree(http://glyphicons.com)licensedunderCCBY3.0
(http://creativecommons.org/licenses/by/3.0/).
Blog(http://blog.getbootstrap.com) Issues(https://github.com/twbs/bootstrap/issues?state=open)
Changelog(https://github.com/twbs/bootstrap/releases)