0

I am just starting a project in PhoneGap, Angular JS and mobileangularui.

I am aware that mobileangularui uses bootstrap CSS and has components written in Angular JS. I am testing the responsive grid of bootstrap in my project.

The default screen sizes defined in bootstrap for breakpoints are:

  • xs: 480px and up.
  • sm: 768px and up.
  • md: 992px and up.
  • lg: 1280px and up.

I would like to change these to custom values. If I was using bootstrap (without mobileangularui), I would have customized the values here and downloaded the CSS. But, how do I make these changes in mobileangularui?

mridula
  • 3,203
  • 3
  • 32
  • 55

1 Answers1

1

Open the variables.less in <project-directory>\bower_components\bootstrap\less.

Edit the following variable values:

@screen-xs:                  480px;
@screen-sm:                  768px;
@screen-md:                  992px;
@screen-lg:                  1200px;

@container-tablet:             (720px + @grid-gutter-width);
@container-desktop:            (940px + @grid-gutter-width);
@container-large-desktop:      (1140px + @grid-gutter-width);

Run gulp build again.

This will overwrite the app.min.css, responsive.min.css in your project with new screen size values.

mridula
  • 3,203
  • 3
  • 32
  • 55