CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
pofuy
pofuy

Reputation: 19

How to include media-breakpoint-up to Bootstrap 4?

How to include media-breakpoint-up to Bootstrap 4?

If i am tried:

@include media-breakpoint-up(sm) {
  html {
    font-size: 16px;
  }
}

then I have error:

Error: Undefined mixin 'media-breakpoint-up'. on line 14.......

I use Bootstrap 4 by includes files:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>

Upvotes: 0

Views: 5532

Answers (3)

user1641252
user1641252

Reputation: 701

If you are using boostrap, I made it work by importing the breakpoint.scss file into the scss file I needed to use the breakpoint function in. For me it was: @import "node-modules/bootstrap/aces/mixins/breakpoints.scss

Upvotes: 1

Sergey Khmelevskoy
Sergey Khmelevskoy

Reputation: 2544

You have to use CSS syntax 

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

Upvotes: 1

hungerstar
hungerstar

Reputation: 21725

What you have shared is SASS, a CSS preprocessor language that extends the functionality of CSS. It is not "vanilla" CSS.

@include media-breakpoint-up will need to be compiled from SASS to CSS. Here's how to install SASS so you can convert SASS to CSS.

I personally use Grunt with the grunt-sass package to watch for changes in my SASS files to automatically build the CSS while I'm developing.

Upvotes: 1

Related Questions