Twitter Bootstrap Container Size | Help

[MoFish]

Hi,

 

I'm using Twitter Bootstrap for a recent project, however require a slightly bigger large container size than default one provided. I therfore adjusted the '@container-large-desktop' in the variable.less file to be (1250px) which corrected the container width to match the design . However, the breakpoints are now a little off, in that when you scale the browser window down in size, it doesnt break as nicely as it did before. I'm not 100% sure which values need updating to correct the breakpoints due to this size change.

 

Would anyone be able to advise?

 

Thanks, MoFish

 

Below is the default breakpoints section of the file which i've tried updating but had no success - so reverted back to default.

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs:                  480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;

// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);

Below is the container sizes. I updated the '@container-large-desktop' value.

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
@container-tablet:             (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      (1250px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg:                 @container-large-desktop;

[benanamen]

Rule number one. You don't edit the bootstrap files. You override them somewhere else.

[MoFish]

Hi benanamen,

 

I thought the whole point in the variables.less file - was to be able to edit bootstraps key components.

 

Correct me if I am wrong?

 

MoFish

[benanamen]

The problem comes when upgrading to a newer version of bootstrap. You will lose all your changes or have to redo them all over again. If you override the variables in an external CSS file you will not have that problem.