27/9/2016

GettingstartedBootstrap

Awwyeah,Bootstrap4iscoming!

Gettingstarted
AnoverviewofBootstrap,howtodownloadanduse,basictemplatesand
examples,andmore.
Speedupyourdesign
workflowwithover175
templatesand500
polishedUIelements
adsviaCarbon

Download
Bootstrap(currentlyv3.3.7)hasafeweasywaystoquicklygetstarted,eachoneappealingtoa
differentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.

Bootstrap
CompiledandminifiedCSS,JavaScript,andfonts.Nodocsororiginalsourcefilesareincluded.

DownloadBootstrap

Sourcecode
SourceLess,JavaScript,andfontfiles,alongwithourdocs.RequiresaLesscompilerandsomesetup.

Downloadsource

Sass
BootstrapportedfromLesstoSassforeasyinclusioninRails,Compass,orSassonlyprojects.

http://getbootstrap.com/gettingstarted/#download

1/22

27/9/2016

GettingstartedBootstrap

DownloadSass

BootstrapCDN
ThefolksoveratMaxCDNgraciouslyprovideCDNsupportforBootstrap'sCSSandJavaScript.Justusethese
BootstrapCDNlinks.
<!LatestcompiledandminifiedCSS>
<linkrel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!Optionaltheme>
<linkrel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstraptheme.min.css"
integrity="sha384rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!LatestcompiledandminifiedJavaScript>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>

InstallwithBower
YoucanalsoinstallandmanageBootstrap'sLess,CSS,JavaScript,andfontsusingBower:
$bowerinstallbootstrap

Installwithnpm
YoucanalsoinstallBootstrapusingnpm:
$npminstallbootstrap@3
require('bootstrap') willloadallofBootstrap'sjQuerypluginsontothejQueryobject.The bootstrap module

itselfdoesnotexportanything.YoucanmanuallyloadBootstrap'sjQuerypluginsindividuallybyloadingthe
/js/*.js filesunderthepackage'stopleveldirectory.
Bootstrap's package.json containssomeadditionalmetadataunderthefollowingkeys:
less pathtoBootstrap'smainLesssourcefile
style pathtoBootstrap'snonminifiedCSSthat'sbeenprecompiledusingthedefaultsettings(no

customization)

InstallwithComposer
http://getbootstrap.com/gettingstarted/#download

2/22

27/9/2016

GettingstartedBootstrap

YoucanalsoinstallandmanageBootstrap'sLess,CSS,JavaScript,andfontsusingComposer:
$composerrequiretwbs/bootstrap

AutoprefixerrequiredforLess/Sass
BootstrapusesAutoprefixertodealwithCSSvendorprefixes.Ifyou'recompilingBootstrapfromitsLess/Sass
sourceandnotusingourGruntfile,you'llneedtointegrateAutoprefixerintoyourbuildprocessyourself.Ifyou're
usingprecompiledBootstraporusingourGruntfile,youdon'tneedtoworryaboutthisbecauseAutoprefixeris
alreadyintegratedintoourGruntfile.

What'sincluded
Bootstrapisdownloadableintwoforms,withinwhichyou'llfindthefollowingdirectoriesandfiles,
logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.

jQueryrequired
PleasenotethatallJavaScriptpluginsrequirejQuerytobeincluded,asshowninthestarter
template.Consultour bower.json toseewhichversionsofjQueryaresupported.

PrecompiledBootstrap
Oncedownloaded,unzipthecompressedfoldertoseethestructureof(thecompiled)Bootstrap.You'llsee
somethinglikethis:

http://getbootstrap.com/gettingstarted/#download

3/22

27/9/2016

GettingstartedBootstrap

bootstrap/
css/
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap.min.css.map
bootstraptheme.css
bootstraptheme.css.map
bootstraptheme.min.css
bootstraptheme.min.css.map
js/
bootstrap.js
bootstrap.min.js
fonts/
glyphiconshalflingsregular.eot
glyphiconshalflingsregular.svg
glyphiconshalflingsregular.ttf
glyphiconshalflingsregular.woff
glyphiconshalflingsregular.woff2

ThisisthemostbasicformofBootstrap:precompiledfilesforquickdropinusageinnearlyanywebproject.We
providecompiledCSSandJS( bootstrap.* ),aswellascompiledandminifiedCSSandJS( bootstrap.min.* ).
CSSsourcemaps( bootstrap.*.map )areavailableforusewithcertainbrowsers'developertools.Fontsfrom
Glyphiconsareincluded,asistheoptionalBootstraptheme.

Bootstrapsourcecode
TheBootstrapsourcecodedownloadincludestheprecompiledCSS,JavaScript,andfontassets,alongwith
sourceLess,JavaScript,anddocumentation.Morespecifically,itincludesthefollowingandmore:
bootstrap/
less/
js/
fonts/
dist/
css/
js/
fonts/
docs/
examples/

The less/ , js/ ,and fonts/ arethesourcecodeforourCSS,JS,andiconfonts(respectively).The dist/

folderincludeseverythinglistedintheprecompileddownloadsectionabove.The docs/ folderincludesthe
sourcecodeforourdocumentation,and examples/ ofBootstrapusage.Beyondthat,anyotherincludedfile
providessupportforpackages,licenseinformation,anddevelopment.

http://getbootstrap.com/gettingstarted/#download

4/22

27/9/2016

GettingstartedBootstrap

CompilingCSSandJavaScript
BootstrapusesGruntforitsbuildsystem,withconvenientmethodsforworkingwiththeframework.
It'showwecompileourcode,runtests,andmore.

InstallingGrunt
ToinstallGrunt,youmustfirstdownloadandinstallnode.js(whichincludesnpm).npmstandsfornode
packagedmodulesandisawaytomanagedevelopmentdependenciesthroughnode.js.
Then,fromthecommandline:
1.Install gruntcli globallywith npminstallggruntcli .
2.Navigatetotheroot /bootstrap/ directory,thenrun npminstall .npmwilllookatthe package.json file
andautomaticallyinstallthenecessarylocaldependencieslistedthere.
Whencompleted,you'llbeabletorunthevariousGruntcommandsprovidedfromthecommandline.

AvailableGruntcommands
gruntdist (JustcompileCSSandJavaScript)
Regeneratesthe /dist/ directorywithcompiledandminifiedCSSandJavaScriptfiles.AsaBootstrapuser,
thisisnormallythecommandyouwant.

gruntwatch (Watch)
WatchestheLesssourcefilesandautomaticallyrecompilesthemtoCSSwheneveryousaveachange.

grunttest (Runtests)
RunsJSHintandrunstheQUnittestsheadlesslyinPhantomJS.

gruntdocs (Build&testthedocsassets)
BuildsandtestsCSS,JavaScript,andotherassetswhichareusedwhenrunningthedocumentationlocallyvia
bundleexecjekyllserve .

grunt (Buildabsolutelyeverythingandruntests)
CompilesandminifiesCSSandJavaScript,buildsthedocumentationwebsite,runstheHTML5validatoragainst
thedocs,regeneratestheCustomizerassets,andmore.RequiresJekyll.Usuallyonlynecessaryifyou're
hackingonBootstrapitself.

Troubleshooting
ShouldyouencounterproblemswithinstallingdependenciesorrunningGruntcommands,firstdeletethe
/node_modules/ directorygeneratedbynpm.Then,rerun npminstall .
http://getbootstrap.com/gettingstarted/#download

5/22

27/9/2016

GettingstartedBootstrap

Basictemplate
StartwiththisbasicHTMLtemplate,ormodifytheseexamples.Wehopeyou'llcustomizeour
templatesandexamples,adaptingthemtosuityourneeds.
CopytheHTMLbelowtobeginworkingwithaminimalBootstrapdocument.
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf8">
<metahttpequiv="XUACompatible"content="IE=edge">
<metaname="viewport"content="width=devicewidth,initialscale=1">
<!Theabove3metatags*must*comefirstinthehead;anyotherheadcontent
mustcome*after*thesetags>
<title>Bootstrap101Template</title>
<!Bootstrap>
<linkhref="css/bootstrap.min.css"rel="stylesheet">
<!HTML5shimandRespond.jsforIE8supportofHTML5elementsandmediaqueries
>
<!WARNING:Respond.jsdoesn'tworkifyouviewthepageviafile://>
<![ifltIE9]>
<scriptsrc="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]>
</head>
<body>
<h1>Hello,world!</h1>
<!jQuery(necessaryforBootstrap'sJavaScriptplugins)>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!Includeallcompiledplugins(below),orincludeindividualfilesasneeded>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

Examples
BuildonthebasictemplateabovewithBootstrap'smanycomponents.Weencourageyouto
customizeandadaptBootstraptosuityourindividualproject'sneeds.
http://getbootstrap.com/gettingstarted/#download

6/22

27/9/2016

GettingstartedBootstrap

GetthesourcecodeforeveryexamplebelowbydownloadingtheBootstraprepository.Examplescanbefound
inthe docs/examples/ directory.

Usingtheframework

Startertemplate

Bootstraptheme

Nothingbutthebasics:compiledCSSandJavaScript
alongwithacontainer.

LoadtheoptionalBootstrapthemeforavisually
enhancedexperience.

Grids

Jumbotron

Multipleexamplesofgridlayoutswithallfourtiers,
nesting,andmore.

Buildaroundthejumbotronwithanavbarandsome
basicgridcolumns.

http://getbootstrap.com/gettingstarted/#download

7/22

27/9/2016

GettingstartedBootstrap

Narrowjumbotron
Buildamorecustompagebynarrowingthedefault
containerandjumbotron.

Navbarsinaction

Navbar

Statictopnavbar

Superbasictemplatethatincludesthenavbaralong
withsomeadditionalcontent.

Superbasictemplatewithastatictopnavbaralong
withsomeadditionalcontent.

http://getbootstrap.com/gettingstarted/#download

8/22

27/9/2016

GettingstartedBootstrap

Fixednavbar
Superbasictemplatewithafixedtopnavbaralong
withsomeadditionalcontent.

Customcomponents

Cover

Carousel

Aonepagetemplateforbuildingsimpleandbeautiful
homepages.

Customizethenavbarandcarousel,thenaddsome
newcomponents.

http://getbootstrap.com/gettingstarted/#download

9/22

27/9/2016

GettingstartedBootstrap

Blog

Dashboard

Simpletwocolumnbloglayoutwithcustom
navigation,header,andtype.

Basicstructureforanadmindashboardwithfixed
sidebarandnavbar.

Signinpage

Justifiednav

Customformlayoutanddesignforasimplesignin
form.

Createacustomnavbarwithjustifiedlinks.Headsup!
NottooSafarifriendly.

http://getbootstrap.com/gettingstarted/#download

10/22

27/9/2016

GettingstartedBootstrap

Stickyfooter

Stickyfooterwithnavbar

Attachafootertothebottomoftheviewportwhen
thecontentisshorterthanit.

Attachafootertothebottomoftheviewportwitha
fixednavbaratthetop.

Experiments

NonresponsiveBootstrap

Offcanvas

EasilydisabletheresponsivenessofBootstrapper
ourdocs.

Buildatoggleableoffcanvasnavigationmenufor
usewithBootstrap.

Tools
http://getbootstrap.com/gettingstarted/#download

11/22

27/9/2016

GettingstartedBootstrap

Bootlint
BootlintistheofficialBootstrapHTMLlintertool.ItautomaticallychecksforseveralcommonHTMLmistakesin
webpagesthatareusingBootstrapinafairly"vanilla"way.VanillaBootstrap'scomponents/widgetsrequiretheir
partsoftheDOMtoconformtocertainstructures.BootlintchecksthatinstancesofBootstrapcomponentshave
correctlystructuredHTML.ConsideraddingBootlinttoyourBootstrapwebdevelopmenttoolchainsothatnone
ofthecommonmistakesslowdownyourproject'sdevelopment.

Community
StayuptodateonthedevelopmentofBootstrapandreachouttothecommunitywiththesehelpful
resources.
ReadandsubscribetoTheOfficialBootstrapBlog.
ChatwithfellowBootstrappersusingIRCinthe irc.freenode.net server,inthe##bootstrapchannel.
ForhelpusingBootstrap,askonStackOverflowusingthetag twitterbootstrap3 .
Developersshouldusethekeyword bootstrap onpackageswhichmodifyoraddtothefunctionalityof
Bootstrapwhendistributingthroughnpmorsimilardeliverymechanismsformaximumdiscoverability.
FindinspiringexamplesofpeoplebuildingwithBootstrapattheBootstrapExpo.
Youcanalsofollow@getbootstraponTwitterforthelatestgossipandawesomemusicvideos.

Disablingresponsiveness
Bootstrapautomaticallyadaptsyourpagesforvariousscreensizes.Here'showtodisablethis
featuresoyourpageworkslikethisnonresponsiveexample.

Stepstodisablepageresponsiveness
1.Omittheviewport <meta> mentionedintheCSSdocs
2.Overridethe width onthe .container foreachgridtierwithasinglewidth,forexample width:970px
!important; BesurethatthiscomesafterthedefaultBootstrapCSS.Youcanoptionallyavoidthe
!important withmediaqueriesorsomeselectorfu.
3.Ifusingnavbars,removeallnavbarcollapsingandexpandingbehavior.
4.Forgridlayouts,use .colxs* classesinadditionto,orinplaceof,themedium/largeones.Don'tworry,
theextrasmalldevicegridscalestoallresolutions.
You'llstillneedRespond.jsforIE8(sinceourmediaqueriesarestillthereandneedtobeprocessed).This
disablesthe"mobilesite"aspectsofBootstrap.
http://getbootstrap.com/gettingstarted/#download

12/22

27/9/2016

GettingstartedBootstrap

ChromeChrome Firefox
InternetExplorer
Firefox
Opera Safari Safari
Bootstraptemplatewithresponsivenessdisabled
We'veappliedthesestepstoanexample.Readitssourcecodetoseethespecificchangesimplemented.
Viewnonresponsiveexample

Migratingfromv2.xtov3.x
LookingtomigratefromanolderversionofBootstraptov3.x?Checkoutourmigrationguide.

Browseranddevicesupport
Bootstrapisbuilttoworkbestinthelatestdesktopandmobilebrowsers,meaningolderbrowsers
mightdisplaydifferentlystyled,thoughfullyfunctional,renderingsofcertaincomponents.

Supportedbrowsers
Specifically,wesupportthelatestversionsofthefollowingbrowsersandplatforms.
AlternativebrowserswhichusethelatestversionofWebKit,Blink,orGecko,whetherdirectlyorviathe
platform'swebviewAPI,arenotexplicitlysupported.However,Bootstrapshould(inmostcases)displayand
functioncorrectlyinthesebrowsersaswell.Morespecificsupportinformationisprovidedbelow.

Mobiledevices
Generallyspeaking,Bootstrapsupportsthelatestversionsofeachmajorplatform'sdefaultbrowsers.Notethat
proxybrowsers(suchasOperaMini,OperaMobile'sTurbomode,UCBrowserMini,AmazonSilk)arenot
supported.
Chrome

Firefox

Safari

Android

Supported

Supported

N/A

iOS

Supported

Supported

Supported

Desktopbrowsers
Similarly,thelatestversionsofmostdesktopbrowsersaresupported.

Mac

Chrome

Firefox

InternetExplorer

Opera

Safari

Supported

Supported

N/A

Supported

Supported

http://getbootstrap.com/gettingstarted/#download

13/22

27/9/2016

GettingstartedBootstrap

Feature

Chrome

Firefox
InternetExplorer8
InternetExplorer

Opera
InternetExplorer9
Safari

Windows

Supported

Supported

Supported

Supported

Notsupported

OnWindows,wesupportInternetExplorer811.
ForFirefox,inadditiontothelatestnormalstablerelease,wealsosupportthelatestExtendedSupportRelease
(ESR)versionofFirefox.
Unofficially,BootstrapshouldlookandbehavewellenoughinChromiumandChromeforLinux,Firefoxfor
Linux,andInternetExplorer7,aswellasMicrosoftEdge,thoughtheyarenotofficiallysupported.
ForalistofsomeofthebrowserbugsthatBootstraphastograpplewith,seeourWallofbrowserbugs.

InternetExplorer8and9
InternetExplorer8and9arealsosupported,however,pleasebeawarethatsomeCSS3propertiesand
HTML5elementsarenotfullysupportedbythesebrowsers.Inaddition,InternetExplorer8requirestheuse
ofRespond.jstoenablemediaquerysupport.
Feature

InternetExplorer8

InternetExplorer9

borderradius

Notsupported

Supported

boxshadow

Notsupported

Supported

transform

Notsupported

Supported,with ms prefix

transition

Notsupported

placeholder

Notsupported

VisitCanIuse...fordetailsonbrowsersupportofCSS3andHTML5features.

InternetExplorer8andRespond.js
BewareofthefollowingcaveatswhenusingRespond.jsinyourdevelopmentandproductionenvironmentsfor
InternetExplorer8.

Respond.jsandcrossdomainCSS
UsingRespond.jswithCSShostedonadifferent(sub)domain(forexample,onaCDN)requiressome
additionalsetup.SeetheRespond.jsdocsfordetails.

Respond.jsand file://
Duetobrowsersecurityrules,Respond.jsdoesn'tworkwithpagesviewedviathe file:// protocol(likewhen
openingalocalHTMLfile).TotestresponsivefeaturesinIE8,viewyourpagesoverHTTP(S).Seethe
Respond.jsdocsfordetails.

Respond.jsand @import

http://getbootstrap.com/gettingstarted/#download

14/22

27/9/2016

GettingstartedBootstrap

Respond.jsand @import
Respond.jsdoesn'tworkwithCSSthat'sreferencedvia @import .Inparticular,someDrupalconfigurationsare
knowntouse @import .SeetheRespond.jsdocsfordetails.

InternetExplorer8andboxsizing
IE8doesnotfullysupport boxsizing:borderbox; whencombinedwith minwidth , maxwidth , minheight ,
or maxheight .Forthatreason,asofv3.0.1,wenolongeruse maxwidth on .container s.

InternetExplorer8and@fontface
IE8hassomeissueswith @fontface whencombinedwith :before .Bootstrapusesthatcombinationwithits
Glyphicons.Ifapageiscached,andloadedwithoutthemouseoverthewindow(i.e.hittherefreshbuttonor
loadsomethinginaniframe)thenthepagegetsrenderedbeforethefontloads.Hoveringoverthepage(body)
willshowsomeoftheiconsandhoveringovertheremainingiconswillshowthoseaswell.Seeissue#13863for
details.

IECompatibilitymodes
BootstrapisnotsupportedintheoldInternetExplorercompatibilitymodes.Tobesureyou'reusingthelatest
renderingmodeforIE,considerincludingtheappropriate <meta> taginyourpages:
<metahttpequiv="XUACompatible"content="IE=edge">

Confirmthedocumentmodebyopeningthedebuggingtools:press F12 andcheckthe"DocumentMode".

ThistagisincludedinallofBootstrap'sdocumentationandexamplestoensurethebestrenderingpossiblein
eachsupportedversionofInternetExplorer.
SeethisStackOverflowquestionformoreinformation.

InternetExplorer10inWindows8andWindows
Phone8
InternetExplorer10doesn'tdifferentiatedevicewidthfromviewportwidth,andthusdoesn'tproperlyapply
themediaqueriesinBootstrap'sCSS.Normallyyou'djustaddaquicksnippetofCSStofixthis:
@msviewport{width:devicewidth;}

However,thisdoesn'tworkfordevicesrunningWindowsPhone8versionsolderthanUpdate3(a.k.a.GDR3),
asitcausessuchdevicestoshowamostlydesktopviewinsteadofnarrow"phone"view.Toaddressthis,you'll
needtoincludethefollowingCSSandJavaScripttoworkaroundthebug.
@msviewport{width:devicewidth;}
@oviewport{width:devicewidth;}
@viewport{width:devicewidth;}

http://getbootstrap.com/gettingstarted/#download

15/22

27/9/2016

GettingstartedBootstrap

//Copyright20142015Twitter,Inc.
//LicensedunderMIT(https://github.com/twbs/bootstrap/blob/master/LICENSE)
if(navigator.userAgent.match(/IEMobile\/10\.0/)){
varmsViewportStyle=document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@msviewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}

Formoreinformationandusageguidelines,readWindowsPhone8andDeviceWidth.
Asaheadsup,weincludethisinallofBootstrap'sdocumentationandexamplesasademonstration.

Safaripercentrounding
TherenderingengineofversionsofSafaripriortov7.1forOSXandSafariforiOSv8.0hadsometroublewith
thenumberofdecimalplacesusedinour .col*1 gridclasses.Soifyouhad12individualgridcolumns,
you'dnoticethattheycameupshortcomparedtootherrowsofcolumns.BesidesupgradingSafari/iOS,you
havesomeoptionsforworkarounds:
Add .pullright toyourlastgridcolumntogetthehardrightalignment
TweakyourpercentagesmanuallytogettheperfectroundingforSafari(moredifficultthanthefirst
option)

Modals,navbars,andvirtualkeyboards
Overflowandscrolling
Supportfor overflow:hidden onthe <body> elementisquitelimitediniOSandAndroid.Tothatend,when
youscrollpastthetoporbottomofamodalineitherofthosedevices'browsers,the <body> contentwillbegin
toscroll.SeeChromebug#175502(fixedinChromev40)andWebKitbug#153852.

iOStextfieldsandscrolling
AsofiOS9.3,whileamodalisopen,iftheinitialtouchofascrollgestureiswithintheboundaryofatextual
<input> ora <textarea> ,the <body> contentunderneaththemodalwillbescrolledinsteadofthemodal
itself.SeeWebKitbug#153856.

Virtualkeyboards
Also,notethatifyou'reusingafixednavbarorusinginputswithinamodal,iOShasarenderingbugthat
doesn'tupdatethepositionoffixedelementswhenthevirtualkeyboardistriggered.Afewworkaroundsforthis
includetransformingyourelementsto position:absolute orinvokingatimeronfocustotrytocorrectthe
positioningmanually.ThisisnothandledbyBootstrap,soitisuptoyoutodecidewhichsolutionisbestforyour
application.

NavbarDropdowns

http://getbootstrap.com/gettingstarted/#download

16/22

27/9/2016

GettingstartedBootstrap

NavbarDropdowns
The .dropdownbackdrop elementisn'tusedoniOSinthenavbecauseofthecomplexityofzindexing.Thus,to
closedropdownsinnavbars,youmustdirectlyclickthedropdownelement(oranyotherelementwhichwillfirea
clickeventiniOS).

Browserzooming
Pagezoominginevitablypresentsrenderingartifactsinsomecomponents,bothinBootstrapandtherestofthe
web.Dependingontheissue,wemaybeabletofixit(searchfirstandthenopenanissueifneedbe).However,
wetendtoignoretheseastheyoftenhavenodirectsolutionotherthanhackyworkarounds.

Sticky :hover / :focus onmobile

Eventhoughrealhoveringisn'tpossibleonmosttouchscreens,mostmobilebrowsersemulatehoveringsupport
andmake :hover "sticky".Inotherwords, :hover stylesstartapplyingaftertappinganelementandonlystop
applyingaftertheusertapssomeotherelement.ThiscancauseBootstrap's :hover statestobecome
undesirably"stuck"onsuchbrowsers.Somemobilebrowsersalsomake :focus similarlysticky.Thereis
currentlynosimpleworkaroundfortheseissuesotherthanremovingsuchstylesentirely.

Printing
Eveninsomemodernbrowsers,printingcanbequirky.
Inparticular,asofChromev32andregardlessofmarginsettings,Chromeusesaviewportwidthsignificantly
narrowerthanthephysicalpapersizewhenresolvingmediaquerieswhileprintingawebpage.Thiscanresultin
Bootstrap'sextrasmallgridbeingunexpectedlyactivatedwhenprinting.Seeissue#12078andChromebug
#273306forsomedetails.Suggestedworkarounds:
Embracetheextrasmallgridandmakesureyourpagelooksacceptableunderit.
Customizethevaluesofthe @screen* Lessvariablessothatyourprinterpaperisconsideredlarger
thanextrasmall.
Addcustommediaqueriestochangethegridsizebreakpointsforprintmediaonly.
Also,asofSafariv8.0,fixedwidth .container scancauseSafaritouseanunusuallysmallfontsizewhen
printing.See#14868andWebKitbug#138192formoredetails.Onepotentialworkaroundforthisisaddingthe
followingCSS:
@mediaprint{
.container{
width:auto;
}
}

Androidstockbrowser
Outofthebox,Android4.1(andevensomenewerreleasesapparently)shipwiththeBrowserappasthe
defaultwebbrowserofchoice(asopposedtoChrome).Unfortunately,theBrowserapphaslotsofbugsand
inconsistencieswithCSSingeneral.

Selectmenus

http://getbootstrap.com/gettingstarted/#download

17/22

27/9/2016

GettingstartedBootstrap

Selectmenus
On <select> elements,theAndroidstockbrowserwillnotdisplaythesidecontrolsifthereisa borderradius
and/or border applied.(SeethisStackOverflowquestionfordetails.)Usethesnippetofcodebelowtoremove
theoffendingCSSandrenderthe <select> asanunstyledelementontheAndroidstockbrowser.Theuser
agentsniffingavoidsinterferencewithChrome,Safari,andMozillabrowsers.
<script>
$(function(){
varnua=navigator.userAgent
varisAndroid=(nua.indexOf('Mozilla/5.0')>1&&nua.indexOf('Android')>1&&
nua.indexOf('AppleWebKit')>1&&nua.indexOf('Chrome')===1)
if(isAndroid){
$('select.formcontrol').removeClass('formcontrol').css('width','100%')
}
})
</script>

Wanttoseeanexample?CheckoutthisJSBindemo.

Validators
Inordertoprovidethebestpossibleexperiencetooldandbuggybrowsers,BootstrapusesCSSbrowserhacks
inseveralplacestotargetspecialCSStocertainbrowserversionsinordertoworkaroundbugsinthebrowsers
themselves.ThesehacksunderstandablycauseCSSvalidatorstocomplainthattheyareinvalid.Inacouple
places,wealsousebleedingedgeCSSfeaturesthataren'tyetfullystandardized,buttheseareusedpurelyfor
progressiveenhancement.
Thesevalidationwarningsdon'tmatterinpracticesincethenonhackyportionofourCSSdoesfullyvalidate
andthehackyportionsdon'tinterferewiththeproperfunctioningofthenonhackyportion,hencewhywe
deliberatelyignoretheseparticularwarnings.
OurHTMLdocslikewisehavesometrivialandinconsequentialHTMLvalidationwarningsduetoourinclusionof
aworkaroundforacertainFirefoxbug.

Thirdpartysupport
Whilewedon'tofficiallysupportanythirdpartypluginsoraddons,wedooffersomeusefuladvice
tohelpavoidpotentialissuesinyourprojects.

Boxsizing
Somethirdpartysoftware,includingGoogleMapsandGoogleCustomSearchEngine,conflictwithBootstrap
dueto *{boxsizing:borderbox;} ,arulewhichmakesitso padding doesnotaffectthefinalcomputed
widthofanelement.LearnmoreaboutboxmodelandsizingatCSSTricks.
http://getbootstrap.com/gettingstarted/#download

18/22

27/9/2016

GettingstartedBootstrap

Dependingonthecontext,youmayoverrideasneeded(Option1)orresettheboxsizingforentireregions
(Option2).
/*Boxsizingresets
*
*Resetindividualelementsoroverrideregionstoavoidconflictsdueto
*globalboxmodelsettingsofBootstrap.Twooptions,individualoverridesand
*regionresets,areavailableasplainCSSanduncompiledLessformats.
*/
/*Option1A:Overrideasingleelement'sboxmodelviaCSS*/
.element{
webkitboxsizing:contentbox;
mozboxsizing:contentbox;
boxsizing:contentbox;
}
/*Option1B:Overrideasingleelement'sboxmodelbyusingaBootstrapLessmixin*/
.element{
.boxsizing(contentbox);
}
/*Option2A:ResetanentireregionviaCSS*/
.resetboxsizing,
.resetboxsizing*,
.resetboxsizing*:before,
.resetboxsizing*:after{
webkitboxsizing:contentbox;
mozboxsizing:contentbox;
boxsizing:contentbox;
}
/*Option2B:ResetanentireregionwithacustomLessmixin*/
.resetboxsizing{
&,
*,
*:before,
*:after{
.boxsizing(contentbox);
}
}
.element{
.resetboxsizing();
}

Accessibility
http://getbootstrap.com/gettingstarted/#download

19/22

27/9/2016

GettingstartedBootstrap

Bootstrapfollowscommonwebstandardsandwithminimalextraeffortcanbeusedtocreate
sitesthatareaccessibletothoseusingAT(ASSISTIVETECHNOLOGY).

Skipnavigation
IfyournavigationcontainsmanylinksandcomesbeforethemaincontentintheDOM,adda Skiptomain
content linkbeforethenavigation(forasimpleexplanation,seethisA11YProjectarticleonskipnavigation
links).Usingthe .sronly classwillvisuallyhidetheskiplink,andthe .sronlyfocusable classwillensure
thatthelinkbecomesvisibleoncefocused(forsightedkeyboardusers).

Duetolongstandingshortcomings/bugsinChrome(seeissue262171intheChromiumbugtracker)
andInternetExplorer(seethisarticleoninpagelinksandfocusorder),youwillneedtomakesurethat
thetargetofyourskiplinkisatleastprogrammaticallyfocusablebyadding tabindex="1" .
Inaddition,youmaywanttoexplicitlysuppressavisiblefocusindicationonthetarget(particularlyas
Chromecurrentlyalsosetsfocusonelementswith tabindex="1" whentheyareclickedwiththe
mouse)with #content:focus{outline:none;} .
Notethatthisbugwillalsoaffectanyotherinpagelinksyoursitemaybeusing,renderingthemuseless
forkeyboardusers.Youmayconsideraddingasimilarstopgapfixtoallothernamedanchors/
fragmentidentifiersthatactaslinktargets.

<body>
<ahref="#content"class="sronlysronlyfocusable">Skiptomaincontent</a>
...
<divclass="container"id="content"tabindex="1">
<!Themainpagecontent>
</div>
</body>

Nestedheadings
Whennestingheadings( <h1> <h6> ),yourprimarydocumentheadershouldbean <h1> .Subsequent
headingsshouldmakelogicaluseof <h2> <h6> suchthatscreenreaderscanconstructatableofcontents
foryourpages.
LearnmoreatHTMLCodeSnifferandPennState'sAccessAbility.

Colorcontrast
Currently,someofthedefaultcolorcombinationsavailableinBootstrap(suchasthevariousstyledbutton
classes,someofthecodehighlightingcolorsusedforbasiccodeblocks,the .bgprimary contextual
backgroundhelperclass,andthedefaultlinkcolorwhenusedonawhitebackground)havealowcontrastratio
(belowtherecommendedratioof4.5:1).Thiscancauseproblemstouserswithlowvisionorwhoarecolor
blind.Thesedefaultcolorsmayneedtobemodifiedtoincreasetheircontrastandlegibility.

http://getbootstrap.com/gettingstarted/#download

20/22

27/9/2016

GettingstartedBootstrap

Additionalresources
"HTMLCodesniffer"bookmarkletforidentifyingaccessibilityissues
Chrome'sAccessibilityDeveloperToolsextension
ColourContrastAnalyser
TheA11YProject
MDNaccessibilitydocumentation

LicenseFAQs
BootstrapisreleasedundertheMITlicenseandiscopyright2016Twitter.Boileddowntosmaller
chunks,itcanbedescribedwiththefollowingconditions.

Itrequiresyouto:
KeepthelicenseandcopyrightnoticeincludedinBootstrap'sCSSandJavaScriptfileswhenyouuse
theminyourworks

Itpermitsyouto:
FreelydownloadanduseBootstrap,inwholeorinpart,forpersonal,private,companyinternal,or
commercialpurposes
UseBootstrapinpackagesordistributionsthatyoucreate
Modifythesourcecode
GrantasublicensetomodifyanddistributeBootstraptothirdpartiesnotincludedinthelicense

Itforbidsyouto:
HoldtheauthorsandlicenseownersliablefordamagesasBootstrapisprovidedwithoutwarranty
HoldthecreatorsorcopyrightholdersofBootstrapliable
RedistributeanypieceofBootstrapwithoutproperattribution
UseanymarksownedbyTwitterinanywaythatmightstateorimplythatTwitterendorsesyour
distribution
UseanymarksownedbyTwitterinanywaythatmightstateorimplythatyoucreatedtheTwittersoftware
inquestion

Itdoesnotrequireyouto:
IncludethesourceofBootstrapitself,orofanymodificationsyoumayhavemadetoit,inany
redistributionyoumayassemblethatincludesit
SubmitchangesthatyoumaketoBootstrapbacktotheBootstrapproject(thoughsuchfeedbackis
encouraged)
ThefullBootstraplicenseislocatedintheprojectrepositoryformoreinformation.
http://getbootstrap.com/gettingstarted/#download

21/22

27/9/2016

GettingstartedBootstrap

Translations
CommunitymembershavetranslatedBootstrap'sdocumentationintovariouslanguages.Noneare
officiallysupportedandtheymaynotalwaysbeuptodate.
Bootstrap(Chinese)
Bootstrap3(Chinese(Traditional))
BootstrappDansk(Danish)
BootstrapenFranais(French)
BootstrapaufDeutsch(German)
BootstrapinItaliano(Italian)
Bootstrap(Korean)
BootstrapemPortugusdoBrasil(BrazilianPortuguese)
Bootstrap(Russian)
BootstrapenEspaol(Spanish)
TrkeBootstrap(Turkish)
Bootstrap(Ukrainian)
BootstrapbngtingVit(Vietnamese)
Wedon'thelporganizeorhosttranslations,wejustlinktothem.
Finishedaneworbettertranslation?Openapullrequesttoaddittoourlist.

GitHub

Twitter

Examples

About

Designedandbuiltwithalltheloveintheworldby@[email protected]
ofourcontributors.
CodelicensedMIT,docsCCBY3.0.

http://getbootstrap.com/gettingstarted/#download

22/22