Bootstrap 5 + Angular 11 Integration & Simple Demo
Table of Contents
Update with Bootstrap 5 + Angular 11:
npm install bootstrap@next
npm install bootstrap@next
in angular.json file:
"scripts": ["../node_modules/bootstrap/dist/js/bootstrap.js"]
"styles": [
"src/styles.scss",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
(or)
"scripts": ["node_modules/bootstrap/dist/js/bootstrap.js"] "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.css" ],
Bootstrap 4 + AngularJS 4 Integration & Simple Demo:
Few days back we have seen how to add bootstrap 4 to angular-cli project. Today we are going to see some simple demo and use of the same.
If you are unsure about how to add bootstrap 4 to your angularjs 4 project, then follow the steps in the below post.
Without Bootstrap:
With Bootstrap 4:
.angular-cli.json file: [added scripts and css files]
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/tether/dist/js/tether.js", "../node_modules/jquery/dist/jquery.js", "../node_modules/bootstrap/dist/js/bootstrap.js"],
Code Snippets:
app.component.html:
<h2>Bootstrap Buttongs Below: </h2> <button type="button" class="btn btn-primary">Bootstrap success Button</button> <button type="button" class="btn btn-warning">Bootstrap warning Button</button> <button type="button" class="btn btn-info">Bootstrap info Button</button>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
include bootstrap css import in styles.css file, sometimes it works without even the import.
styles.css:
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
main index.html file:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS 4 + Bootstrap 4</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root>Loading...</app-root> </body> </html>