Why i can't load bootstrap

Question

I' rocky and, after "Gettin started" I follow instructions of https://getbootstrap.com/docs/4.3/layout/overview/ (I guess something is missing in that example)

I put:

link to css file in head tag.
near end of body, includes of jquery (jquery-3.3.1.slim.min.js)
poperpopper.min.js
and then bootstrap.min.js I have all the links and and all other includes finally I have:

@include media-breakpoint-up(sw) {  
    .hide-ph-flex {
        display: block; 
    }
} 

.hide-ph-flex {  
    display: none;
}

But it doesn't work, class "hide-ph-flex" its alway in display: none, and FireFox debugger warns: Unknown rule or error reading rule at @include

I suppose I'm forgetting a file, ANY HELP???

That rule is from a SASS file. Are you compiling to CSS? – disinfor Aug 28 '19 at 19:02 — disinfor, Aug 28 '19 at 19:02

score 1 · Answer 1 · answered Aug 28 '19 at 19:05

Please, Note this line of your tutorial:

Since we write our source CSS in Sass, all our media queries are available via Sass mixins

So, your imported code is Sass and you cannot import it on your project like CSS.

You can use these references for learning more about Sass:

score 0 · Answer 2 · answered Aug 28 '19 at 19:03

0

@include is a Sass directive. It will not work in a raw css file. It has to be transpilied into a css file.

https://sass-lang.com/guide

answered Aug 28 '19 at 19:03

eidsonator

1,319
2
11
25

score 0 · Answer 3 · answered Aug 28 '19 at 19:28

To add Bootstrap to your project, according to the instructions in the Introduction page, you just need to copy-paste the following <link> into your <head>:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Why i can't load bootstrap

3 Answers3