How to Integrate Bootstrap with Angular (Angular 6)

Bootstrap is a web development framework for more faster and easier that includes HTML and CSS based responsive design templates. So in the tutorial, we show how to integrate Bootstrap with Angular project.

Related posts:
How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite
Angular NgFor Repeater Directive – Loop over a Collection (Angular 6)

Technologies

  • Node.js – version v10.4.0
  • Angular – version 6
  • Bootstrap – 3.x & 4.x
  • Visual Studio Code – version 1.24.0

Goal

After tutorial, we can integrate Bootstrap to Angular project.

-> Project structure:

Angular-6-Bootstrap + Project-Structure

-> results:

Angular-6-Bootstrap + integrate-results

Integrate Bootstrap with Angular project

We have 3 approaches:

  • Include Bootstrap from CDN
  • Include Local Bootstrap
  • Install Bootstrap via NPM
Preparation

– Create an Angular project:

Angular-6-Bootstrap + Create-Angular-Project

– Generate 3 components {BootstrapJumbotron, BootstrapTable, BootstrapModel}

Angular-6-Bootstrap + Generate-Angular-Components

Change AppComponent template file app.component.html as below:

Include Bootstrap from CDN
Bootstrap 3

Include Bootstrap 3 Style & JQuery Script from CDN (Content Delivery Network) to ‘index.html’ file.

-> Details:




  
  AngularBootstrap
  

  
  

  
  


  







Bootstrap 4

Include Bootstrap 4 Style & JQuery Script from CDN (Content Delivery Network) to ‘index.html’ file.

-> Details:




  
  AngularBootstrap
  

  
  

  
  


  









Include Local Bootstrap

Please follow below links to download Bootstrap:

Create bootstrap folder under /src folder, then add bootstrap-4.1.1-dist with Bootstrap 4 (or bootstrap-3.3.7-dist with Bootstrap 3).

Download JQuery at link: jquery-3.3.1.min.js. Then create a jquery folder under /src folder -> Add jquery-3.3.1.min.js file to it:

Angular-6-Bootstrap + add-bootstrap-jquery-folders

Configure Bootstrap & JQuery in angular.json file:

...

"styles": [
  "src/styles.css",
  "src/bootstrap/bootstrap-4.1.1-dist/css/bootstrap.min.css"
],
"scripts": [
  "src/jquery/jquery-3.3.1.min.js",
  "src/bootstrap/bootstrap-4.1.1-dist/js/bootstrap.min.js"
]

...
Install Bootstrap via NPM

Use NPM to download Bootstrap & JQuery. Bootstrap and jQuery will be installed into the node_modules folder.

– With Bootstrap 3, use cmd:

npm install bootstrap@3.3.7 jquery --save

– With Bootstrap 4, use cmd:

npm install bootstrap jquery --save

Configure installed Bootstrap & JQuery in angular.json file:

...

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

...
Bootstrap Code
Bootstrap Jumbtron

In BootstrapJumbotronComponent component, modify template bootstrap-jumbotron.component.html file with jumbotron class:

Bootstrap - Angular

JavaSampleApproach guides how to integrate Bootstrap with Angular project!

Bootstrap Table

In BootstrapTableComponent component, modify bootstrap-table.component.ts class as below:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bootstrap-table',
  templateUrl: './bootstrap-table.component.html',
  styleUrls: ['./bootstrap-table.component.css']
})

export class BootstrapTableComponent{
  CUSTOMERS: Customer[] = [
    {id: 1, firstname: 'Mary', lastname: 'Taylor', age: 24},
    {id: 2, firstname: 'Peter', lastname: 'Smith', age: 18},
    {id: 3, firstname: 'Lauren', lastname: 'Taylor', age: 31}
  ];
}

class Customer {
  id: number;
  firstname: string;
  lastname: string;
  age: number
}

Then use Bootstrap table class to modify template file bootstrap-table.component.html :

Id FirstName LastName Age
{{ customer.id }} {{ customer.firstname }} {{ customer.lastname }} {{ customer.age }}
Bootstrap Modal

In BootstrapModalComponent component, modify template bootstrap-modal.component.html file as below:



  


Run & Check Results

Run above Angular project by cmd: ng serve --open

Angular-6-Bootstrap + integrate-results

-> Open Modal:

Angular-6-Bootstrap + integrate-results-modal

SourceCode

How to run the below sourcecode:

1. Download Integrate-Angular-Bootstrap.zip file -> Then extract it to Integrate-Angular-Bootstrap folder.
2. Go to Integrate-Angular-Bootstrap folder
3. Run the app by commandline: ng serve --open

-> Source Code:

Integrate-Angular-Bootstrap

64 thoughts on “How to Integrate Bootstrap with Angular (Angular 6)”

  1. Helpful information. Lucky me I discovered your website by accident, and I’m stunned
    why this twist of fate did not happened in advance! I bookmarked it.

  2. You really make it seem really easy with your presentation but I in finding this topic to be really something that I
    feel I’d by no means understand. It kind of feels too
    complex and very broad for me. I’m looking forward
    in your next post, I will attempt to get the hold of it!

  3. An impressive share! I’ve just forwarded this onto a co-worker who
    has been conducting a little homework on this. And he in fact ordered me lunch due
    to the fact that I stumbled upon it for
    him… lol. So allow me to reword this…. Thanks for the meal!!
    But yeah, thanks for spending the time to discuss this matter here on your website.

  4. I have been exploring for a little bit for any high-quality articles or blog posts in this kind of
    area . Exploring in Yahoo I ultimately stumbled upon this web site.
    Studying this info So i am happy to show that I’ve a very just right uncanny feeling I came upon exactly what I needed.

    I such a lot surely will make certain to do not disregard
    this website and give it a glance on a continuing basis.

  5. What’s up i am kavin, its my first time to commenting
    anyplace, when i read this article i thought i could also create comment due to this sensible article.

  6. Today, I went to the beach front with my kids. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed.
    There was a hermit crab inside and it pinched her ear. She
    never wants to go back! LoL I know this is totally off topic but I had to tell someone!

  7. I don’t know if it’s just me or if everybody else encountering issues
    with your blog. It appears like some of the written text in your content are running off the screen. Can someone else please provide feedback and let me know if this is
    happening to them as well? This might be a problem with my internet browser
    because I’ve had this happen before. Kudos

  8. Mʏ pɑrtner and I stumbled over here cߋming
    from a different web pagе and thought I might check things out.
    I like what I seee so now i’m foll᧐wing you.
    Lօok forward to lоoking at youг web page for a
    second time.

  9. Fantastic beat ! I wish to apprentice while you amend your site, how could i subscribe for
    a blog web site? The account aided me a acceptable deal.
    I had been a little bit acquainted of this
    your broadcast provided bright clear concept

  10. Hello colleagues, how is all, and what you want to say on the topic of this piece of writing, in my view
    its actually remarkable designed for me.

  11. always i used to read smaller articles or reviews which also
    clear their motive, and that is also happening with this piece of writing
    which I am reading here.

  12. Undeniably believe that which you said. Your favorite justification seemed to be on the web the simplest thing to be aware of.

    I say to you, I definitely get annoyed while people think about worries that they plainly don’t know about.
    You managed to hit the nail upon the top and defined out the whole thing without having side effect ,
    people can take a signal. Will probably be back to
    get more. Thanks

  13. Hey I know this is off topic but I was wondering if you knew
    of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite
    some time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your new updates.

  14. Definitely believe that which you stated. Your favorite justification appeared to be
    on the net the easiest thing to be aware of.
    I say to you, I certainly get annoyed while people consider worries that they just do not
    know about. You managed to hit the nail upon the top as well
    as defined out the whole thing without having side-effects , people could take a signal.
    Will probably be back to get more. Thanks

  15. With havin so much content and articles do you ever run into any issues of plagorism or copyright violation? My site has a
    lot of completely unique content I’ve either authored myself or outsourced but it seems a lot of it is popping it up all over the internet without
    my agreement. Do you know any methods to help stop
    content from being ripped off? I’d genuinely appreciate it.

  16. I’m not that much of a internet reader to be honest but your sites really nice,
    keep it up! I’ll go ahead and bookmark your website to come back later on. All the best

  17. Woah! I’m really digging the template/theme of
    this blog. It’s simple, yet effective. A lot of times it’s tough
    to get that “perfect balance” between usability and appearance.
    I must say you have done a very good job with this.
    Additionally, the blog loads very fast for me on Safari. Outstanding Blog!

  18. Fantastic goods from you, man. I have understand your stuff previous to
    and you are just too great. I really like what you have acquired here, certainly like what you are stating and the way in which you say it.
    You make it entertaining and you still take care of to
    keep it wise. I can’t wait to read far more from you. This is actually
    a tremendous website.

  19. I really love your website.. Pleasant colors & theme. Did you build this website yourself?
    Please reply back as I’m attempting to create my own blog and would love to find out where
    you got this from or exactly what the theme is called.

    Thank you!

  20. Hi this is kind of of off topic but I was wondering if blogs use WYSIWYG editors or if
    you have to manually code with HTML. I’m starting a blog soon but have no coding experience so I wanted
    to get advice from someone with experience. Any help would be greatly appreciated!

  21. I just like the valuable information you provide for your
    articles. I will bookmark your blog and take a
    look at again here regularly. I’m rather certain I’ll be told plenty
    of new stuff right here! Best of luck for the following!

  22. Do you have a spam problem on this website; I also am a blogger,
    and I was curious about your situation; many of us have developed some nice practices and we are looking to exchange strategies with others, why not shoot me an email
    if interested.

  23. You’re so interesting! I don’t think I have read a single thing like
    this before. So great to find another person with original thoughts on this topic.
    Seriously.. thank you for starting this up. This website is something that’s needed on the web,
    someone with a little originality!

Leave a Reply

Your email address will not be published. Required fields are marked *