Introduction - React-Bootstrap

Learn how to include React Bootstrap in your project. Installation#. The best way to consume React-Bootstrap is via the npm package which you can install ... MenuGettingstartedIntroductionWhyReact-BootstrapThemingSupportRTLServer-sideRenderingLayoutFormsComponentsUtilitiesMigratingAboutIntroductionLearnhowtoincludeReactBootstrapinyourprojectInstallation#ThebestwaytoconsumeReact-Bootstrapisviathenpmpackagewhich youcaninstallwithnpm(oryarnifyouprefer).IfyouplanoncustomizingtheBootstrapSassfiles,ordon'twant touseaCDNforthestylesheet,itmaybehelpfulto installvanillaBootstrapaswell.npminstallreact-bootstrapbootstrap@5.1.3ImportingComponents#Youshouldimportindividualcomponentslike: react-bootstrap/Buttonratherthantheentirelibrary. Doingsopullsinonlythespecificcomponentsthatyouuse,which cansignificantlyreducetheamountofcodeyouendupsendingto theclient.importButtonfrom'react-bootstrap/Button'; //orlessideally import{Button}from'react-bootstrap';Browserglobals#Weprovidereact-bootstrap.jsand react-bootstrap.min.jsbundleswithallcomponents exportedonthewindow.ReactBootstrapobject.These bundlesareavailableonunpkg,as wellasinthenpmpackage. Examples#React-BootstraphasstartedarepowithafewbasicCodeSandboxexamples. Clickhere tocheckthemout.Stylesheets#BecauseReact-Bootstrapdoesn'tdependonaverypreciseversionof Bootstrap,wedon'tshipwithanyincludedCSS.However,some stylesheetisrequiredtousethesecomponents.CSS#{/*Thefollowinglinecanbeincludedinyoursrc/index.jsorApp.jsfile*/} import'bootstrap/dist/css/bootstrap.min.css';HowandwhichBootstrapstylesyouincludeisuptoyou,butthe simplestwayistoincludethelateststylesfromtheCDN.Alittle moreinformationaboutthebenefitsofusingaCDNcanbefound here.Sass#IncaseyouareusingSassthesimplestwayistoincludetheBootstrap’ssourceSassfiles inyourmainSassfileandthenrequireitonyoursrc/index.jsorApp.jsfile. Thisappliestoatypicalcreate-react-appapplicationinotherusecasesyoumighthavetosetup thebundlerofyourchoicetocompileSass/SCSSstylesheetstoCSS./*Thefollowinglinecanbeincludedinasrc/App.scss*/ @import"~bootstrap/scss/bootstrap"; /*Thefollowinglinecanbeincludedinyoursrc/index.jsorApp.jsfile*/ import'./App.scss';CustomizeBootstrap#IfyouwishtocustomizetheBootstrapthemeoranyBootstrapvariables youcancreateacustomSassfile:/*Thefollowingblockcanbeincludedinacustom.scss*/ /*makethecustomizations*/ $theme-colors:( "info":tomato, "danger":teal ); /*importbootstraptosetchanges*/ @import"~bootstrap/scss/bootstrap";...AndimportitonthemainSassfile./*Thefollowinglinecanbeincludedinasrc/App.scss*/ @import"custom";Advancedusage#SeetheBootstrapdocs formoreadvancedusecasesanddetailsaboutcustomizingstylesheets."as"PropAPI#WithcertainReact-Bootstrapcomponents,youmaywanttomodifythecomponentorHTMLtag thatisrendered.IfyouwanttokeepallthestylingofaparticularReact-Bootstrapcomponentbutswitchthe componentthatisfinallyrendered(whetherit'sadifferentReact-Bootstrapcomponent,a differentcustomcomponent,oradifferentHTMLtag)youcanusethe"as"Proptodoso.TheexamplebelowpassesaColumncomponenttothe"as"PropinaButtoncomponent.This ultimatelycausesaColumncomponenttoberenderedbutwiththesamestylesasaButton component. Button#1 Button#2 Button#3 Button#1Button#2Button#3CopyThemes#React-BootstrapiscompatiblewithexistingBootstrapthemes.Just followtheinstallationinstructionsforyourthemeofchoice.BecauseReact-BootstrapcompletelyreimplementsBootstrap'sJavaScript,it'snotautomaticallycompatiblewiththemesthatextendthedefaultJavaScriptbehaviors.IfyouwouldliketoaddacustomthemeonyourappusingCreateReact App,theyhaveadditionaldocumentationforCreateReactAppand Bootstrap hereBrowsersupport#Weaimtosupportallbrowserssupportedbyboth React andBootstrap.