CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
testzuser
testzuser

Reputation: 157

How to know which class is going to apply in Bootstrap

I have a div tag like as below.

<div class="col-xs-5 col-md-2 col-lg-1"></div>

With the current resolution of window / device how would I know if it is going to apply either col-xs-5 or col-md-2 or col-lg-1.

The reason for this question is I have to request number of items to the server. If the bootstrap applies col-xs-5 I'll request 10 Items. Otherwise 20 items, 30 items respectively.

Is there any way I'll know which class is going to apply to my DIV tag ?

Upvotes: 0

Views: 615

Answers (2)

Shawn T
Shawn T

Reputation: 447

Bootstrap will let you style content differently based on device width, but if you want to load different/more/less content, you can detect the width with jQuery. Probably best to use the same breakpoints as Bootstrap to keep things consistent. Then somehow load that content you want based on the if statement that is true:

var width = $(window).width();

if (width < 767){
  // load your "xs" content
} else if ((width >= 768) && (width < 991)) {
  // load your "sm" content
} else if ((width >= 992) && (width < 1200)){
  // load your "md" content
} else {
  // load your "lg" content
}

That being said, bootstrap also allows for show/hide at different device widths, which could also solve your problem, but with quite a bit of additional markup.

Upvotes: 1

Dylan L.
Dylan L.

Reputation: 1317

you need to take a look at the info found on their website http://getbootstrap.com/css/#grid

but what is happening is that when the div has <div class="col-xs-5 col-md-2 col-lg-1"></div> these class names it will apply them based on screen size. bootstrap works on a 12 column grid system so if you use col-xs-5 then it will only fill up 5 of those columns when the width of the screen is xs(mobile) then once the screen hits a medium sized screen it will only fill up 2 of those columns if you are using the col-md-2.

This doesnt actually change anything within your html its just reajusting the size of it.

For example there is a way to hide everything within a div at a certain screen size usig hidden. so if you wanted to hide everything at screen size xs then you would use a div class called hidden-xs this doesnt actually delete what you have on the screen but like its name it "hides" it.

btw the screen sizes for each class are as follows:

Extra small devices Phones (<768px)

Small devices Tablets (≥768px)

Medium devices Desktops (≥992px)

Large devices Desktops (≥1200px)

Upvotes: 1

Related Questions