Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use bootstrap 4 in angular 2?

I'm building an angular 2 app written in typescript. It would use the bootstrap 4 framework in combination with some custom theming, is this possible?

The "ng2-bootstrap" npm package is not working as it doesn't allow me to use the bootstrap css classes, instead it provides custom components. (http://github.com/valor-software/ng2-bootstrap)

In my angular 2 project I'm using sass, would it be possible to build bootstrap 4 from source as it is also using sass for styling?

like image 311
aqwsez Avatar asked Jul 22 '16 19:07

aqwsez


People also ask

How can I use bootstrap in Angular?

Adding bootstrap using the angular.Open the file and perform the following commands, node_modules/bootstrap/dist/css/bootstrap. css in the projects->architect->build->styles array, node_modules/bootstrap/dist/js/bootstrap. js in the projects->architect->build->scripts array, node_modules/bootstrap/dist/js/bootstrap.

Can I use bootstrap 3 and 4 together?

It's not possible to integrate both bootstrap3 and bootstrap 4 because of many classes of the bootstrap library with the same name. Save this answer. Show activity on this post. The best practice is to stick to particular bootstrap and use it Throughout your project.

Why bootstrap is not working in Angular?

Then you have to update your angular. In the architect , build section, or even test section if you want to see Bootstrap working as well when testing your application. "styles": [ "styles. css", "./node_modules/bootstrap/dist/css/bootstrap. min.

What is bootstrap 4 used for?

Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.


2 Answers

Bootstrap4 alpha for Angular2 CLI (also works for Angular4 CLI)

If you are using the angular2 cli/angular 4 cli do following:

npm i bootstrap@next --save 

This will add bootstrap 4 to your project.

Next go to your src/style.scss or src/style.css file and import bootstrap there:

For style.css

/* You can add global styles to this file, and also import other style files */ @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; 

For style.scss

/* You can add global styles to this file, and also import other style files */ @import "../node_modules/bootstrap/scss/bootstrap"; 

If you are using scss, make sure you change your default styling to scss in .angular-cli.json:

  "defaults": {     "styleExt": "scss",     "component": {}   } 

Bootstrap JS Components

For Bootstrap JS components to work you will still need to import bootstrap.js into .angular-cli.json under scripts (this should happen automatically):

...      "scripts": ["../node_modules/jquery/dist/jquery.js",                   "../node_modules/tether/dist/js/tether.js",                   "../node_modules/bootstrap/dist/js/bootstrap.js"], ... 

Update 2017/09/13: Boostrap 4 Beta is now using popper.js instead of tether.js. So depending on which version you are using import either tether.js (alpha) or popper.js (beta) in your scripts. Thanks for the heads up @MinorThreat

like image 67
mahatmanich Avatar answered Oct 05 '22 14:10

mahatmanich


The options above will work, however I use this approach via NPM:

  1. Navigate to: Bootstrap 4 and retrieve the npm command
  2. Run the NPM command obtained from step 1 in your project i.e

    npm install [email protected] --save

  3. After installing the above dependency run the following npm command which will install the bootstrap module npm install --save @ng-bootstrap/ng-bootstrap You can read more about this here

  4. Add the following import into app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; and add NgbModule to the imports
  5. Your app module will look like this:

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';  @NgModule({    declarations: [    AppComponent,    WeatherComponent ],   imports: [   BrowserModule,   FormsModule,   HttpModule,   NgbModule.forRoot(), // Add Bootstrap module here. ],   providers: [],   bootstrap: [AppComponent] })  export class AppModule { } 
  6. Open angular-cli.json and insert a new entry into the styles array :

    "styles": [   "styles.css",    "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
  7. Open src/app/app.component.html and add

    <alert type="success">hello</alert> 

    or if you would like to use ng alert then place the following on your app.component.html page

    <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert> 
  8. Now run your project and you should see the bootstrap alert message in the browser.

NOTE: You can read more about ng Components here

like image 22
Code Ratchet Avatar answered Oct 05 '22 15:10

Code Ratchet