Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can not create new breakpoints in bootstrap 4 using CDN #25683

Closed
kizoso opened this issue Feb 22, 2018 · 3 comments
Closed

Can not create new breakpoints in bootstrap 4 using CDN #25683

kizoso opened this issue Feb 22, 2018 · 3 comments

Comments

@kizoso
Copy link

kizoso commented Feb 22, 2018

I use BootstrapCDN. Other styles written in sass and built by gulp. I need to create my own breakpionts. Is it possible to make them if I use CDN? For example, I want to create these breakpoints:

--breakpoint-xxxs: 0;
--breakpoint-xxs: 320px;
--breakpoint-xs: 568px;
--breakpoint-sm: 667px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1440px;
--breakpoint-xxxl: 1600px;

I want to get something like this with working media:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
	<div class="row">
		<div class="col col-xxxs-1 col-xxs-2 col-xs-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8 col-xxxl-9">
			<div style="height:100vh;background:purple">text</div>
		</div><!--col-->
	</div><!--.row-->
</div><!--.container-->

I found the manual and I'm trying this:

$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

$container-max-widths: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

\:root
  --breakpoint-xxxs: 0
  --breakpoint-xxs: 320px
  --breakpoint-xs: 568px
  --breakpoint-sm: 667px
  --breakpoint-md: 768px
  --breakpoint-lg: 992px
  --breakpoint-xl: 1200px
  --breakpoint-xxl: 1440px
  --breakpoint-xxxl: 1600px

But it doesn't work. What I'm doing wrong?
If that is not possible... Is there any alternative? Can I easily edit my code to simulate bootstrap grid with my breakpoints?
Thank you in advance for your help.

@browner12
Copy link
Contributor

The CDN is providing you compiled css, not the source SASS. Therefore, you cannot use the SASS variables to add extra breakpoints.

If you would like to create custom code, download BS4 from Yarn/NPM/etc

@mdo
Copy link
Member

mdo commented Feb 24, 2018

Yup, what @browner12 said. You're mixing CSS variables with Sass variables; if you want to customize Bootstrap's source code, you'll need to compile the Sass.

@mdo mdo closed this as completed Feb 24, 2018
@kizoso
Copy link
Author

kizoso commented Feb 25, 2018

@browner12 @mdo Thank you, but I found the solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants