Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Joel Olawanle
Joel Olawanle

Posted on

     

How to Add Bootstrap 4 to Angular

In this article, I will be explaining just one method because it worked for me, there are so many other methods out there but I will only talk about what worked for me.

I will add some useful resources below this post in case you don't like
this approach or you need other methods.

I believe before you can think of making use of Bootstrap on Angular you must have installed Angular on your computer and created a new project.

If you don't know how to install angular or set up a new project, you can checkangular docuemtation.

Getting Started

  • Install Bootstrap from npm using thenpm install command
$npminstall--save bootstrap
Enter fullscreen modeExit fullscreen mode

The--save helps you save bootstrap as a dependency

  • You will also need to install jQuery using the following command
$npminstall--save jquery
Enter fullscreen modeExit fullscreen mode

with that if you navigate to your node_modules folder, scroll down you will find bootstrap there.

Finally, we have to add bootstrap to **angular.json* file*

Open theangular.json file of your project and include:

  • node_modules/bootstrap/dist/css/bootstrap.css in thestyles array,
  • node_modules/bootstrap/dist/js/bootstrap.js in thescripts array,
  • node_modules/bootstrap/dist/js/bootstrap.js in thescripts array.

Example:

{"$schema":"./node_modules/@angular/cli/lib/config/schema.json","version":1,"newProjectRoot":"projects","projects":{"angular-bootstrap-examples":{"projectType":"application","schematics":{},"root":"","sourceRoot":"src","prefix":"app","architect":{"build":{"builder":"@angular-devkit/build-angular:browser","options":{"outputPath":"dist/angular-bootstrap-examples","index":"src/index.html","main":"src/main.ts","polyfills":"src/polyfills.ts","tsConfig":"tsconfig.app.json","aot":true,"assets":["src/favicon.ico","src/assets"],"styles":["./node_modules/bootstrap/dist/css/bootstrap.css","src/styles.css"],"scripts":["./node_modules/jquery/dist/jquery.js","./node_modules/bootstrap/dist/js/bootstrap.js"]},
Enter fullscreen modeExit fullscreen mode

Once that is done go tosrc/styles.css of your Angular project and import thebootstrap.css file as follows:

@import"~bootstrap/dist/css/bootstrap.css";
Enter fullscreen modeExit fullscreen mode

Like I said earlier this was what worked for me, normally you could call something like this in yourindex.html file

<linkrel="stylesheet"href="../node_modules/bootstrap/dist/css/bootstrap.css">
Enter fullscreen modeExit fullscreen mode

But when I did it I got an error.

Thanks for reading. Let's get to know ourselves better, connect with me onTwitter.

Useful resources

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Frontend Engineer and Technical writer. I love and write more about JS💛
  • Location
    Nigeria
  • Pronouns
    He/Him
  • Work
    Technical Editor @ Kinsta
  • Joined

More fromJoel Olawanle

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp