CODEWITHSUNDEEP
angular
user1941537
user1941537

Reputation: 6685

Stackblitz: How to import Bootstrap CSS framework

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 should I import Bootstrap in to my project? Usually I do it by adding this line of code to angular-cli.json:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

But how does it work on Stackblitz?

Thanks

Upvotes: 18

Views: 23456

Answers (9)

Honnappa
Honnappa

Reputation: 61

Step 1 : Enter Package Name (It will be available Left Side down Corner)
          > Bootstrap

Step 2 : Import Bootstrap into Project Here We have mainly 2 way

         1.Import in Style.css 
           **@import '~bootstrap/dist/css/bootstrap.min.css';**

              ## OR ## 

         2.Import in a Angular.Json  
           **"node_modules/bootstrap/dist/css/bootstrap.min.css",**

Upvotes: 0

Tejaswi Pandava
Tejaswi Pandava

Reputation: 506

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

@import url('https://unpkg.com/[email protected]/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.

Upvotes: 1

vaidehi_hirani
vaidehi_hirani

Reputation: 55

  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.

Upvotes: 3

CodeWithSrini
CodeWithSrini

Reputation: 41

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.

Upvotes: 4

Muhammed Ozdogan
Muhammed Ozdogan

Reputation: 5877

  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...

Upvotes: 5

Chandru
Chandru

Reputation: 11184

In dependencies add "bootstrap" then click enter.

then write following line in styles.css in src folder

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

Upvotes: 44

Marcin Wojtach
Marcin Wojtach

Reputation: 143

In angular.json:

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
],

For me works just fine.

Upvotes: 5

progman
progman

Reputation: 386

try this :

style.css

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css')

It will load all your glyphicon icons

Upvotes: 13

br.julien
br.julien

Reputation: 3460

Check this StackBlitz example : https://stackblitz.com/edit/angular-wkc7ix?file=styles.css

It does have a angular-cli.json file and a style.css file

angular-cli.json :

{
  "apps": [{
    "styles": ["styles.css"]
  }]
}

style.css :

@import "bootstrap/dist/css/bootstrap.min.css";

Upvotes: 2

Related Questions