Stackblitz: How to import Bootstrap CSS framework

Question

I just found the amazing Stackblitz online VS Code editor. I created an Angular project and under dependencies installed the Bootstrap CSS framework but how

Answer 1

1. Open styles files at: src/styles.css

2. Add this line: @import url('https://unpkg.com/bootstrap/dist/css/bootstrap.min.css');

3. Click DEPENDENCIES menu at left of screen. There is an input says: 'enter js/css cdn url'

4. Write: https://code.jquery.com/jquery-3.3.1.slim.min.js and hit enter.
5. Write : https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js and hit enter.

Now you can use most of the bootstrap component like buttons and modal etc...

Answer 2

try this :

style.css

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css')

It will load all your glyphicon icons

Answer 3

Add the following line of code in styles.css under src

@import url('https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css')

So to have the latest version of Bootstrap go to

https://getbootstrap.com/docs/4.5/getting-started/introduction/

Search for CSS CDN link, from that link copy the version (in my case 4.5.0) and replace it with the above import statement.

Answer 4

In dependencies add "bootstrap" then click enter.

then write following line in styles.css in src folder

@import '~bootstrap/dist/css/bootstrap.min.css';

Answer 5

1. Enter bootstrap at the enter package name input field of Dependencies section.
2. Add "node_modules/bootstrap/dist/css/bootstrap.min.css" to the styles section of angular.json file.

Answer 6

Quite an old question but anyway this will be helpful for any one looking to include bootstrap in Stackblitz.

Step 1: Go to app.module.ts and write

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Stackblitz will automatically prompts you for installing ng-bootstrap module.

Step 2: Add NgbModule in imports array.

imports:      [ BrowserModule, FormsModule, NgbModule ],

Step 3: In your styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';

Now you should be getting glyphicons in your Angular project.