27/9/2016
GettingstartedBootstrap
Awwyeah,Bootstrap4iscoming!
Gettingstarted
AnoverviewofBootstrap,howtodownloadanduse,basictemplatesand
examples,andmore.
Speedupyourdesign
workflowwithover175
templatesand500
polishedUIelements
adsviaCarbon
Download
Bootstrap(currentlyv3.3.7)hasafeweasywaystoquicklygetstarted,eachoneappealingtoa
[Link].
Bootstrap
CompiledandminifiedCSS,JavaScript,[Link].
DownloadBootstrap
Sourcecode
SourceLess,JavaScript,andfontfiles,[Link].
Downloadsource
Sass
BootstrapportedfromLesstoSassforeasyinclusioninRails,Compass,orSassonlyprojects.
[Link]
1/22
27/9/2016
GettingstartedBootstrap
DownloadSass
BootstrapCDN
ThefolksoveratMaxCDNgraciouslyprovideCDNsupportforBootstrap'[Link]
BootstrapCDNlinks.
<!LatestcompiledandminifiedCSS>
<linkrel="stylesheet"
href="[Link]
integrity="sha384BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!Optionaltheme>
<linkrel="stylesheet"
href="[Link]
integrity="sha384rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!LatestcompiledandminifiedJavaScript>
<scriptsrc="[Link]
integrity="sha384Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
InstallwithBower
YoucanalsoinstallandmanageBootstrap'sLess,CSS,JavaScript,andfontsusingBower:
$bowerinstallbootstrap
Installwithnpm
YoucanalsoinstallBootstrapusingnpm:
$npminstallbootstrap@3
require('bootstrap') willloadallofBootstrap'[Link] bootstrap module
[Link]'sjQuerypluginsindividuallybyloadingthe
/js/*.js filesunderthepackage'stopleveldirectory.
Bootstrap's [Link] containssomeadditionalmetadataunderthefollowingkeys:
less pathtoBootstrap'smainLesssourcefile
style pathtoBootstrap'snonminifiedCSSthat'sbeenprecompiledusingthedefaultsettings(no
customization)
InstallwithComposer
[Link]
2/22
27/9/2016
GettingstartedBootstrap
YoucanalsoinstallandmanageBootstrap'sLess,CSS,JavaScript,andfontsusingComposer:
$composerrequiretwbs/bootstrap
AutoprefixerrequiredforLess/Sass
[Link]'recompilingBootstrapfromitsLess/Sass
sourceandnotusingourGruntfile,you'[Link]'re
usingprecompiledBootstraporusingourGruntfile,youdon'tneedtoworryaboutthisbecauseAutoprefixeris
alreadyintegratedintoourGruntfile.
What'sincluded
Bootstrapisdownloadableintwoforms,withinwhichyou'llfindthefollowingdirectoriesandfiles,
logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.
jQueryrequired
PleasenotethatallJavaScriptpluginsrequirejQuerytobeincluded,asshowninthestarter
[Link] [Link] toseewhichversionsofjQueryaresupported.
PrecompiledBootstrap
Oncedownloaded,unzipthecompressedfoldertoseethestructureof(thecompiled)[Link]'llsee
somethinglikethis:
[Link]
3/22
27/9/2016
GettingstartedBootstrap
bootstrap/
css/
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
js/
[Link]
[Link]
fonts/
[Link]
[Link]
[Link]
[Link]
glyphiconshalflingsregular.woff2
ThisisthemostbasicformofBootstrap:[Link]
providecompiledCSSandJS( bootstrap.* ),aswellascompiledandminifiedCSSandJS( [Link].* ).
CSSsourcemaps( bootstrap.*.map )areavailableforusewithcertainbrowsers'[Link]
Glyphiconsareincluded,asistheoptionalBootstraptheme.
Bootstrapsourcecode
TheBootstrapsourcecodedownloadincludestheprecompiledCSS,JavaScript,andfontassets,alongwith
sourceLess,JavaScript,[Link],itincludesthefollowingandmore:
bootstrap/
less/
js/
fonts/
dist/
css/
js/
fonts/
docs/
examples/
The less/ , js/ ,and fonts/ arethesourcecodeforourCSS,JS,andiconfonts(respectively).The dist/
[Link] docs/ folderincludesthe
sourcecodeforourdocumentation,and examples/ [Link],anyotherincludedfile
providessupportforpackages,licenseinformation,anddevelopment.
[Link]
4/22
27/9/2016
GettingstartedBootstrap
CompilingCSSandJavaScript
BootstrapusesGruntforitsbuildsystem,withconvenientmethodsforworkingwiththeframework.
It'showwecompileourcode,runtests,andmore.
InstallingGrunt
ToinstallGrunt,[Link](whichincludesnpm).npmstandsfornode
[Link].
Then,fromthecommandline:
[Link] gruntcli globallywith npminstallggruntcli .
[Link] /bootstrap/ directory,thenrun npminstall .npmwilllookatthe [Link] file
andautomaticallyinstallthenecessarylocaldependencieslistedthere.
Whencompleted,you'llbeabletorunthevariousGruntcommandsprovidedfromthecommandline.
AvailableGruntcommands
gruntdist (JustcompileCSSandJavaScript)
Regeneratesthe /dist/ [Link],
thisisnormallythecommandyouwant.
gruntwatch (Watch)
WatchestheLesssourcefilesandautomaticallyrecompilesthemtoCSSwheneveryousaveachange.
grunttest (Runtests)
RunsJSHintandrunstheQUnittestsheadlesslyinPhantomJS.
gruntdocs (Build&testthedocsassets)
BuildsandtestsCSS,JavaScript,andotherassetswhichareusedwhenrunningthedocumentationlocallyvia
bundleexecjekyllserve .
grunt (Buildabsolutelyeverythingandruntests)
CompilesandminifiesCSSandJavaScript,buildsthedocumentationwebsite,runstheHTML5validatoragainst
thedocs,regeneratestheCustomizerassets,[Link]'re
hackingonBootstrapitself.
Troubleshooting
ShouldyouencounterproblemswithinstallingdependenciesorrunningGruntcommands,firstdeletethe
/node_modules/ [Link],rerun npminstall .
[Link]
5/22
27/9/2016
GettingstartedBootstrap
Basictemplate
StartwiththisbasicHTMLtemplate,[Link]'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/[Link]"rel="stylesheet">
<!HTML5shimandRespond.jsforIE8supportofHTML5elementsandmediaqueries
>
<!WARNING:[Link]'tworkifyouviewthepagevia[Link]
<![ifltIE9]>
<scriptsrc="[Link]
<scriptsrc="[Link]
<![endif]>
</head>
<body>
<h1>Hello,world!</h1>
<!jQuery(necessaryforBootstrap'sJavaScriptplugins)>
<scriptsrc="[Link]
</script>
<!Includeallcompiledplugins(below),orincludeindividualfilesasneeded>
<scriptsrc="js/[Link]"></script>
</body>
</html>
Examples
BuildonthebasictemplateabovewithBootstrap'[Link]
customizeandadaptBootstraptosuityourindividualproject'sneeds.
[Link]
6/22
27/9/2016
GettingstartedBootstrap
[Link]
inthe docs/examples/ directory.
Usingtheframework
Startertemplate
Bootstraptheme
Nothingbutthebasics:compiledCSSandJavaScript
alongwithacontainer.
LoadtheoptionalBootstrapthemeforavisually
enhancedexperience.
Grids
Jumbotron
Multipleexamplesofgridlayoutswithallfourtiers,
nesting,andmore.
Buildaroundthejumbotronwithanavbarandsome
basicgridcolumns.
[Link]
7/22
27/9/2016
GettingstartedBootstrap
Narrowjumbotron
Buildamorecustompagebynarrowingthedefault
containerandjumbotron.
Navbarsinaction
Navbar
Statictopnavbar
Superbasictemplatethatincludesthenavbaralong
withsomeadditionalcontent.
Superbasictemplatewithastatictopnavbaralong
withsomeadditionalcontent.
[Link]
8/22
27/9/2016
GettingstartedBootstrap
Fixednavbar
Superbasictemplatewithafixedtopnavbaralong
withsomeadditionalcontent.
Customcomponents
Cover
Carousel
Aonepagetemplateforbuildingsimpleandbeautiful
homepages.
Customizethenavbarandcarousel,thenaddsome
newcomponents.
[Link]
9/22
27/9/2016
GettingstartedBootstrap
Blog
Dashboard
Simpletwocolumnbloglayoutwithcustom
navigation,header,andtype.
Basicstructureforanadmindashboardwithfixed
sidebarandnavbar.
Signinpage
Justifiednav
Customformlayoutanddesignforasimplesignin
form.
[Link]!
NottooSafarifriendly.
[Link]
10/22
27/9/2016
GettingstartedBootstrap
Stickyfooter
Stickyfooterwithnavbar
Attachafootertothebottomoftheviewportwhen
thecontentisshorterthanit.
Attachafootertothebottomoftheviewportwitha
fixednavbaratthetop.
Experiments
NonresponsiveBootstrap
Offcanvas
EasilydisabletheresponsivenessofBootstrapper
ourdocs.
Buildatoggleableoffcanvasnavigationmenufor
usewithBootstrap.
Tools
[Link]
11/22
27/9/2016
GettingstartedBootstrap
Bootlint
[Link]
webpagesthatareusingBootstrapinafairly"vanilla"[Link]'scomponents/widgetsrequiretheir
[Link]
[Link]
ofthecommonmistakesslowdownyourproject'sdevelopment.
Community
StayuptodateonthedevelopmentofBootstrapandreachouttothecommunitywiththesehelpful
resources.
ReadandsubscribetoTheOfficialBootstrapBlog.
ChatwithfellowBootstrappersusingIRCinthe [Link] server,inthe##bootstrapchannel.
ForhelpusingBootstrap,askonStackOverflowusingthetag twitterbootstrap3 .
Developersshouldusethekeyword bootstrap onpackageswhichmodifyoraddtothefunctionalityof
Bootstrapwhendistributingthroughnpmorsimilardeliverymechanismsformaximumdiscoverability.
FindinspiringexamplesofpeoplebuildingwithBootstrapattheBootstrapExpo.
Youcanalsofollow@getbootstraponTwitterforthelatestgossipandawesomemusicvideos.
Disablingresponsiveness
[Link]'showtodisablethis
featuresoyourpageworkslikethisnonresponsiveexample.
Stepstodisablepageresponsiveness
[Link] <meta> mentionedintheCSSdocs
[Link] width onthe .container foreachgridtierwithasinglewidth,forexample width:970px
!important; [Link]
!important withmediaqueriesorsomeselectorfu.
[Link],removeallnavbarcollapsingandexpandingbehavior.
[Link],use .colxs* classesinadditionto,orinplaceof,themedium/[Link]'tworry,
theextrasmalldevicegridscalestoallresolutions.
You'llstillneedRespond.jsforIE8(sinceourmediaqueriesarestillthereandneedtobeprocessed).This
disablesthe"mobilesite"aspectsofBootstrap.
[Link]
12/22
27/9/2016
GettingstartedBootstrap
ChromeChrome Firefox
InternetExplorer
Firefox
Opera Safari Safari
Bootstraptemplatewithresponsivenessdisabled
We'[Link].
Viewnonresponsiveexample
Migratingfromv2.xtov3.x
LookingtomigratefromanolderversionofBootstraptov3.x?Checkoutourmigrationguide.
Browseranddevicesupport
Bootstrapisbuilttoworkbestinthelatestdesktopandmobilebrowsers,meaningolderbrowsers
mightdisplaydifferentlystyled,thoughfullyfunctional,renderingsofcertaincomponents.
Supportedbrowsers
Specifically,wesupportthelatestversionsofthefollowingbrowsersandplatforms.
AlternativebrowserswhichusethelatestversionofWebKit,Blink,orGecko,whetherdirectlyorviathe
platform'swebviewAPI,[Link],Bootstrapshould(inmostcases)displayand
[Link].
Mobiledevices
Generallyspeaking,Bootstrapsupportsthelatestversionsofeachmajorplatform'[Link]
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
[Link]
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
[Link],InternetExplorer8requirestheuse
[Link].
Feature
InternetExplorer8
InternetExplorer9
borderradius
Notsupported
Supported
boxshadow
Notsupported
Supported
transform
Notsupported
Supported,with ms prefix
transition
Notsupported
placeholder
Notsupported
VisitCanIuse...fordetailsonbrowsersupportofCSS3andHTML5features.
[Link]
[Link]
InternetExplorer8.
[Link]
[Link](sub)domain(forexample,onaCDN)requiressome
[Link].
[Link] file://
Duetobrowsersecurityrules,[Link]'tworkwithpagesviewedviathe file:// protocol(likewhen
openingalocalHTMLfile).TotestresponsivefeaturesinIE8,viewyourpagesoverHTTP(S).Seethe
[Link].
[Link] @import
[Link]
14/22
27/9/2016
GettingstartedBootstrap
[Link] @import
[Link]'tworkwithCSSthat'sreferencedvia @import .Inparticular,someDrupalconfigurationsare
knowntouse @import .[Link].
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
[Link],andloadedwithoutthemouseoverthewindow([Link]
loadsomethinginaniframe)[Link](body)
[Link]#13863for
details.
IECompatibilitymodes
[Link]'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'[Link]'djustaddaquicksnippetofCSStofixthis:
@msviewport{width:devicewidth;}
However,thisdoesn'tworkfordevicesrunningWindowsPhone8versionsolderthanUpdate3(a.k.a.GDR3),
asitcausessuchdevicestoshowamostlydesktopviewinsteadofnarrow"phone"[Link],you'll
needtoincludethefollowingCSSandJavaScripttoworkaroundthebug.
@msviewport{width:devicewidth;}
@oviewport{width:devicewidth;}
@viewport{width:devicewidth;}
[Link]
15/22
27/9/2016
GettingstartedBootstrap
//Copyright20142015Twitter,Inc.
//LicensedunderMIT([Link]
if([Link](/IEMobile\/10\.0/)){
varmsViewportStyle=[Link]('style')
[Link](
[Link](
'@msviewport{width:auto!important}'
)
)
[Link]('head').appendChild(msViewportStyle)
}
Formoreinformationandusageguidelines,readWindowsPhone8andDeviceWidth.
Asaheadsup,weincludethisinallofBootstrap'sdocumentationandexamplesasademonstration.
Safaripercentrounding
TherenderingengineofversionsofSafaripriortov7.1forOSXandSafariforiOSv8.0hadsometroublewith
thenumberofdecimalplacesusedinour .col*1 gridclasses.Soifyouhad12individualgridcolumns,
you'[Link]/iOS,you
havesomeoptionsforworkarounds:
Add .pullright toyourlastgridcolumntogetthehardrightalignment
TweakyourpercentagesmanuallytogettheperfectroundingforSafari(moredifficultthanthefirst
option)
Modals,navbars,andvirtualkeyboards
Overflowandscrolling
Supportfor overflow:hidden onthe <body> [Link],when
youscrollpastthetoporbottomofamodalineitherofthosedevices'browsers,the <body> contentwillbegin
[Link]#175502(fixedinChromev40)andWebKitbug#153852.
iOStextfieldsandscrolling
AsofiOS9.3,whileamodalisopen,iftheinitialtouchofascrollgestureiswithintheboundaryofatextual
<input> ora <textarea> ,the <body> contentunderneaththemodalwillbescrolledinsteadofthemodal
[Link]#153856.
Virtualkeyboards
Also,notethatifyou'reusingafixednavbarorusinginputswithinamodal,iOShasarenderingbugthat
doesn'[Link]
includetransformingyourelementsto position:absolute orinvokingatimeronfocustotrytocorrectthe
[Link],soitisuptoyoutodecidewhichsolutionisbestforyour
application.
NavbarDropdowns
[Link]
16/22
27/9/2016
GettingstartedBootstrap
NavbarDropdowns
The .dropdownbackdrop elementisn'[Link],to
closedropdownsinnavbars,youmustdirectlyclickthedropdownelement(oranyotherelementwhichwillfirea
clickeventiniOS).
Browserzooming
Pagezoominginevitablypresentsrenderingartifactsinsomecomponents,bothinBootstrapandtherestofthe
[Link],wemaybeabletofixit(searchfirstandthenopenanissueifneedbe).However,
wetendtoignoretheseastheyoftenhavenodirectsolutionotherthanhackyworkarounds.
Sticky :hover / :focus onmobile
Eventhoughrealhoveringisn'tpossibleonmosttouchscreens,mostmobilebrowsersemulatehoveringsupport
andmake :hover "sticky".Inotherwords, :hover stylesstartapplyingaftertappinganelementandonlystop
[Link]'s :hover statestobecome
undesirably"stuck"[Link] :focus [Link]
currentlynosimpleworkaroundfortheseissuesotherthanremovingsuchstylesentirely.
Printing
Eveninsomemodernbrowsers,printingcanbequirky.
Inparticular,asofChromev32andregardlessofmarginsettings,Chromeusesaviewportwidthsignificantly
[Link]
Bootstrap'[Link]#12078andChromebug
#[Link]:
Embracetheextrasmallgridandmakesureyourpagelooksacceptableunderit.
Customizethevaluesofthe @screen* Lessvariablessothatyourprinterpaperisconsideredlarger
thanextrasmall.
Addcustommediaqueriestochangethegridsizebreakpointsforprintmediaonly.
Also,asofSafariv8.0,fixedwidth .container scancauseSafaritouseanunusuallysmallfontsizewhen
[Link]#14868andWebKitbug#[Link]
followingCSS:
@mediaprint{
.container{
width:auto;
}
}
Androidstockbrowser
Outofthebox,Android4.1(andevensomenewerreleasesapparently)shipwiththeBrowserappasthe
defaultwebbrowserofchoice(asopposedtoChrome).Unfortunately,theBrowserapphaslotsofbugsand
inconsistencieswithCSSingeneral.
Selectmenus
[Link]
17/22
27/9/2016
GettingstartedBootstrap
Selectmenus
On <select> elements,theAndroidstockbrowserwillnotdisplaythesidecontrolsifthereisa borderradius
and/or border applied.(SeethisStackOverflowquestionfordetails.)Usethesnippetofcodebelowtoremove
theoffendingCSSandrenderthe <select> [Link]
agentsniffingavoidsinterferencewithChrome,Safari,andMozillabrowsers.
<script>
$(function(){
varnua=[Link]
varisAndroid=([Link]('Mozilla/5.0')>1&&[Link]('Android')>1&&
[Link]('AppleWebKit')>1&&[Link]('Chrome')===1)
if(isAndroid){
$('[Link]').removeClass('formcontrol').css('width','100%')
}
})
</script>
Wanttoseeanexample?CheckoutthisJSBindemo.
Validators
Inordertoprovidethebestpossibleexperiencetooldandbuggybrowsers,BootstrapusesCSSbrowserhacks
inseveralplacestotargetspecialCSStocertainbrowserversionsinordertoworkaroundbugsinthebrowsers
[Link]
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
[Link].
[Link]
18/22
27/9/2016
GettingstartedBootstrap
Dependingonthecontext,youmayoverrideasneeded(Option1)orresettheboxsizingforentireregions
(Option2).
/*Boxsizingresets
*
*Resetindividualelementsoroverrideregionstoavoidconflictsdueto
*[Link],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
[Link]
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
[Link]/
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
[Link].
[Link]
20/22
27/9/2016
GettingstartedBootstrap
Additionalresources
"HTMLCodesniffer"bookmarkletforidentifyingaccessibilityissues
Chrome'sAccessibilityDeveloperToolsextension
ColourContrastAnalyser
TheA11YProject
MDNaccessibilitydocumentation
LicenseFAQs
[Link]
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.
[Link]
21/22
27/9/2016
GettingstartedBootstrap
Translations
CommunitymembershavetranslatedBootstrap'[Link]
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@mdoand@[Link]
ofourcontributors.
CodelicensedMIT,docsCCBY3.0.
[Link]
22/22
