CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Ruben.Canton
Ruben.Canton

Reputation: 1303

Bootstrap. Change styles when screen is small

I've been testing Bootstrap LESS 3.1.1 a bit and found that on making the site responsive some styles don't look that well when the page is large and when it's small, etc.

So I was trying to make some changes like adding a font-weight:bold to some element or more padding or aligning it to the left, etc. just because I like the columns to collapse into one column when the screen is "xs" but that changes the layout so much I need to redefine some of the styles.

I am using custom styles and combining them with Bootstrap LESS using mixings etc. and I was wondering if there is a way of saying "do this when small" or "do this when medium". I know I have the media queries but unless I have a "@media @small" or similar it just won't fit with bootstrap as it should, and even if I go that way, I still feel like Bootstrap may already include some mixing to do that.

Does anyone know a good way to do this?

Cheers.

Upvotes: 0

Views: 2402

Answers (1)

Ruben.Canton
Ruben.Canton

Reputation: 1303

I think the answer may be this as it's at Bootstrap documentation:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Even so, I would like to wait and see if there is any other way, but it looks like this is it (as it uses Bootstrap variables it will always fit).

Upvotes: 1

Related Questions