CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3sass
ahnbizcad
ahnbizcad

Reputation: 10797

How to have media query widths apply to preset bootstrap xs sm md lg column classes?

For bootstrap, there are existing width cutoffs built into the classes themselves (e.g. col-xs-3, col-sm-8, col-md-10, col-lg-1). These classes are already preset to cutoff at 768m 992, and 1024px.

If you define your own cutoff points via media queries, how do you ensure the preset classes like col-xs-3 are indeed cutting off at the cutoffs you specified via media queries like so?

@media only screen and (min-width: 300px) and (max-width: 600px) { 
  //your code stuff
}

@media only screen and (min-width:600px) and (max-width: 900px) { 
  //your code stuff         
}

@media only screen and (min-width: 900px)  { 
  //your code stuff
}

How do you get these cutoff points defined in media queries to actually correspond to col-xs, sm md lg, etc? Or is there a better way of going about this?

Upvotes: 2

Views: 2051

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

These values (break points) are set by the $screen-sm-min, $screen-md-min and $screen-lg-min variables in Bootstrap's variables.less file.

When changing your break point you also have to change the container widths. I suggest you use the following formula to do that:

$container-*:           floor( ( $screen-* - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;

See also: https://github.com/twbs/bootstrap/issues/15623#issuecomment-96294396

And finally you should possible also take the into account. Which has been declared in the variables.less file too, as follows:

//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-sm-min !default;

How do you do a custom build using rails gems?

See also https://github.com/twbs/bootstrap-sass#a-ruby-on-rails:

In your Gemfile you need to add the bootstrap-sass gem, and ensure that the >sass-rails gem is present - it is added to new Rails applications by default.

And then: Import Bootstrap styles in app/assets/stylesheets/application.scss:

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
$screen-sm-min: 300px;
$container-sm: floor( ( $screen-sm - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
$screen-md-min: 600px;
$container-md: floor( ( $screen-md - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
$screen-lg-min: 900px;
$container-lg: floor( ( $screen-lg - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;

@import "bootstrap";

Bootstrap's code has been build with a mobile first approach. The xs grid is the default and does not require any media query at all. Then the sm grid follows for screen width larger than $screen-sm-min and so on. You do not have to set a max-width media query.

Upvotes: 2

Related Questions