Angular 4 How to include Bootstrap

Question

I m a backend developer and I m just playing around with Angular4  So I did this installation tutorial  https   www youtube com watch v cdlbFEsAGXo   Given this  how can I add bootstrap to the app so I could use the class  container-fluid  or  col-md-6  and stuff like that

User · Answer

Watch Video or Follow the step

Install bootstrap 4 in angular 2 / angular 4 / angular 5 / angular 6

There is three way to include bootstrap in your project
1) Add CDN Link in index.html file
2) Install bootstrap using npm and set path in angular.json Recommended
3) Install bootstrap using npm and set path in index.html file

I recommended you following 2 methods that are installed bootstrap using npm because its installed in your project directory and you can easily access it

Method 1

Add Bootstrap, Jquery and popper.js CDN path to you angular project index.html file

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

Method 2

1) Install bootstrap using npm

npm install bootstrap --save

after the installation of Bootstrap 4, we Need two More javascript Package that is Jquery and Popper.js without these two package bootstrap is not complete because Bootstrap 4 is using Jquery and popper.js package so we have to install as well

2) Install JQUERY

npm install jquery --save

3) Install Popper.js

npm install popper.js --save

Now Bootstrap is Install on you Project Directory inside node_modules Folder

open angular.json this file are available on you angular directory open that file and add the path of bootstrap, jquery, and popper.js files inside styles[] and scripts[] path see the below example

"styles": [   
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [  
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Note: Don't change a sequence of js file it should be like this

Method 3

Install bootstrap using npm follow Method 2 in method 3 we just set path inside index.html file instead of angular.json file

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Now Bootstrap Working fine Now

User · Answer

If you are using Sass Scss  then follow this   Do npm install  npm install bootstrap --save   and add import statement to your sass scss file    import   bootstrap dist css bootstrap css

User · Answer

Run the following command in your project i e npm install bootstrap 4 0 0-alpha 5 --save  After installing the above dependency run the following npm command which will install the bootstrap module  npm install --save  ng-bootstrap ng-bootstrap  Check this out for the reference - https   github com ng-bootstrap ng-bootstrap  Add the following import into app module import  NgbModule  from   ng-bootstrap ng-bootstrap   and add NgbModule to the imports  In your stye css  import     node modules bootstrap dist css bootstrap min css

User · Answer

first install bootstrap in your project using npm npm i bootstrap after that open ur style css file in your project and add this line   import   bootstrap dist css bootstrap css    and that s it bootstrap added in your project

User · Answer

Angular 4 - Bootstrap    ng-bootstrap setup  First install bootstrap into your project using below command   npm install --save bootstrap  Then add this line     node modules bootstrap dist css bootstrap min css    to angular-cli json file  root folder  in styles   styles            node modules bootstrap dist css bootstrap min css       styles css       After installing the above dependencies  install ng-bootstrap via   npm install --save  ng-bootstrap ng-bootstrap  Once installed you need to import main module   import  NgbModule  from   ng-bootstrap ng-bootstrap     After this  you can use All the Bootstrap widgets  ex  carousel  modal  popovers  tooltips  tabs etc   and several additional goodies   datepicker  rating  timepicker  typeahead

User · Answer

npm install --save bootstrap   afterwards  inside angular-cli json  inside the project s root folder   find styles and add the bootstrap css file like this     styles            node modules bootstrap dist css bootstrap min css       styles css       UPDATE  in angular 6  angular-cli json was changed to angular json

User · Answer

In Angular4 as you deal with  types system  you should do following things   Do   1  npm install --save  types jquery 2  npm install --save  types bootstrap   tsconfig json  look for types array and add jquery and bootstrap entries    types            jquery          bootstrap            node      Index html  in head section add following entries      lt link href  node modules bootstrap dist css bootstrap min css  rel  stylesheet  gt     lt script src  node modules jquery dist jquery min js   gt  lt  script gt     lt script src  node modules bootstrap dist js bootstrap js   gt  lt  script gt    And start using jquery and bootstrap both

User · Answer

Step 1    npm install bootstrap --save  Step   2    Paste below code in angular json node modules bootstrap dist css bootstrap min css  Step 3   ng serve

User · Answer

Adding bootstrap current version 4 to angular  1  First you have to install those  npm install jquery --save npm install popper js --save npm install bootstrap --save  2  Then add the needed script files to scripts in angular json   quot scripts quot        quot node modules jquery dist jquery slim js quot      quot node modules popper js dist umd popper js quot      quot node modules bootstrap dist js bootstrap js quot      3 Finally add the Bootstrap CSS to the styles array in angular json   quot styles quot        quot node modules bootstrap dist css bootstrap css quot      quot src styles css quot       check this link

User · Answer

If you are on Angular 6  add the following lines of code to angular json   quot styles quot                    quot   node modules bootstrap dist css bootstrap min css quot                  quot src styles css quot

User · Answer

If you want to use bootstrap online and your application has access to the internet you can add    import url  https   unpkg com bootstrap 3 3 7 dist css bootstrap min css      Into you r main style css file  and its the simplest way    Reference   angular io  Note  This solution loads bootstrap from unpkg website and it need to have internet access

User · Answer

Angular 6 CLI  just do    ng add  ng-bootstrap schematics

User · Answer

For bootstrap 4 0 0-alph 6  npm install bootstrap 4 0 0-alpha 6 jquery tether --save   Then after this is done run   npm install   Now  Open  angular-cli json file and import bootstrap  jquery  and tether    styles          styles css           node modules bootstrap dist css bootstrap css          scripts             node modules jquery dist jquery js           node modules tether dist js tether js           node modules bootstrap dist js bootstrap js        And now  You ready to go

User · Answer

In order to configure integrate use Bootstrap in angular  first we need to install   Bootstrap package using npm    Install package    npm install bootstrap 4 0 0-alpha 6 --save      for specific version or   npm install bootstrap --save      for latest version   Note  --save command will save the dependency in our angular app inside package json file      Now that we have the package installed with above step  now we can tell Angular CLI   that it needs to load these styles by using any of the below options or both    option 1  Adding into the file src styles css     we can add the dependencies as shown below     import   bootstrap dist css bootstrap min css     Option 2  Adding into angular-cli json or angular json     We can add the style css files into angular-cli json or angular json file which is at   root folder of our angular app as shown below     styles            node modules bootstrap dist css bootstrap min css       styles css

User · Answer

As i can see you already got lots of answer but you can try this method to    Its best practice not to use jquery in angular  I prefer https   github com valor-software ngx-bootstrap blob development docs getting-started ng-cli md method to install bootstrap without using bootstrap js component which depends on jquery   npm install ngx-bootstrap bootstrap --save  or  ng add ngx-bootstrap    Preferred    Keep your code jquery free in angular

User · Answer

To install the latest use   npm i --save bootstrap next

User · Answer

you work with cdn for bootstrap and jquery or install bootstarp directly in app with   npm install ngx-bootstrap --save   also use https   ng-bootstrap github io   home  but this is not approperiate  https   medium com codingthesmartway-com-blog using-bootstrap-with-angular-c83c3cee3f4a

User · Answer

add into angular-cli json       styles                  node modules bootstrap dist css bootstrap min css            styles css                  scripts                   node modules bootstrap dist js bootstrap js             It will be work  i checked it

User · Answer

Tested In Angular 7 0 0  Step 1  - Install the required dependencies     npm install bootstrap    if you want specific version please specify the version no        npm install popper js  if you want specific version please specify the version no        npm install jquery   Versions I have tried     bootstrap     4 1 3    popper js     1 14 5    jquery     3 3 1     Step 2   Specify the libraries in below orderin angular json  In latest angular   the config file name is angular json not angular-cli json   architect              build                builder     angular-devkit build-angular browser              options                  outputPath    dist client                index    src index html                main    src main ts                polyfills    src polyfills ts                tsConfig    src tsconfig app json                assets                    src favicon ico                  src assets                              styles                   node modules bootstrap dist css bootstrap css                  src styles scss                              scripts                    node modules jquery dist jquery min js                  node modules popper js dist umd popper min js                  node modules bootstrap dist js bootstrap min js

User · Answer

For below detail steps and working example  you can visit  https   loiane com 2017 08 how-to-add-bootstrap-to-an-angular-cli-project   Very details steps with proper explanation    Steps   Installing Bootstrap from NPM  Next  we need to install Bootstrap  Change the directory to the project we created  cd angular-bootstrap-example  and execute the following command   For Bootstrap 3   npm install bootstrap --save   For Bootstrap 4  currently in beta    npm install bootstrap next --save   OR  Alternative  Local Bootstrap CSS As an alternative  you can also download the Bootstrap CSS and add it locally to your project  I donwloaded Bootstrap from the website and created a folder styles  same level as styles css    Note   Don   t place your local CSS files under assets folder  When we do the production build with Angular CLI  the CSS files declared in the  angular-cli json will be minified and all styles will be bundled into a single styles css  The assets folder is copied to the dist folder during the build process  the CSS code will be duplicated   Only place your local CSS files under assets in case you are importing them directly in the index html   Importing the CSS 1 We have two options to import the CSS from Bootstrap that was installed from NPM   strong text1  Configure  angular-cli json    styles           node modules bootstrap dist css bootstrap min css      styles scss      2  Import directly in src style css or src style scss    import   bootstrap dist css bootstrap min css     I personally prefer to import all my styles in src style css since it   s been declared in  angular-cli json already   3 1 Alternative  Local Bootstrap CSS If you added the Bootstrap CSS file locally  just import it in  angular-cli json   styles        styles bootstrap-3 3 7-dist css bootstrap min css      styles scss       or src style css   import    styles bootstrap-3 3 7-dist css bootstrap min css     4  Bootstrap JavaScript Components with ngx-bootstrap  Option 1  In case you don   t need to use Bootstrap JavaScript components  that require JQuery   this is all the setup you need  But if you need to use modals  accordion  datepicker  tooltips or any other component  how can we use these components without installing jQuery   There is an Angular wrapper library for Bootstrap called ngx-bootstrap that we can also install from NPM   npm install ngx-bootstrap --save   Noteng2-bootstrap and ngx-bootstrap are the same package  ng2-bootstrap was renamed to ngx-bootstrap after  itsJustAngular   In case you want to install Bootstrap and ngx-bootstrap at the same time when you create your Angular CLI project   npm install bootstrap ngx-bootstrap --save   4 1  Adding the required Bootstrap modules in app module ts  Go through the ngx-bootstrap and add the modules needed in your app module ts  For example  suppose we want to use the Dropdown  Tooltip and Modal components   import   BsDropdownModule   from  ngx-bootstrap dropdown   import   TooltipModule   from  ngx-bootstrap tooltip   import   ModalModule   from  ngx-bootstrap modal     NgModule     imports        BrowserModule      BsDropdownModule forRoot        TooltipModule forRoot        ModalModule forRoot                    export class AppBootstrapModule      Because we call the  forRoot   method for each module  due the ngx-bootstrap module providers   the functionalities will be available in all components and modules of your project  global scope    As an alternative  if you would like to organize the ngx-bootstrap in a different module  just for organization purposes in case you need to import many bs modules and don   t want to clutter your app module   you can create a module app-bootstrap module ts  import the Bootstrap modules  using forRoot    and also declare them in the exports section  so they become available to other modules as well    import   NgModule   from   angular core   import   CommonModule   from   angular common    import   BsDropdownModule   from  ngx-bootstrap dropdown   import   TooltipModule   from  ngx-bootstrap tooltip   import   ModalModule   from  ngx-bootstrap modal     NgModule     imports        CommonModule      BsDropdownModule forRoot        TooltipModule forRoot        ModalModule forRoot          exports   BsDropdownModule  TooltipModule  ModalModule     export class AppBootstrapModule      At last  don   t forget to import your bootstrap module in you app module ts   import   AppBootstrapModule   from    app-bootstrap app-bootstrap module     NgModule     imports   BrowserModule  AppBootstrapModule               export class AppModule      ngx-bootstrap works with Bootstrap 3 and 4  And I also made some tests and most of the functionalities also work with Bootstrap 2 x  yes  I still have some legacy code to maintain    Hope this help someone

User · Answer

Installing Bootstrap 4 for Angular 2  4  5  6          Install Bootstrap with npm  npm install bootstrap --save  npm install popper js --save         Add styles and scripts to angular json   architect                   styles              node modules bootstrap dist css bootstrap min css            src styles scss              scripts              node modules jquery dist jquery js            node modules popper js dist umd popper min js            node modules bootstrap dist js bootstrap min js

[twitter-bootstrap] Angular 4: How to include Bootstrap?

Examples related to twitter-bootstrap

Examples related to angular