jquery - how to change the text size in bootstrap carousel according to the device screen -

i want change carousel inner text size accroding device screen. please me on it. below code:

<div id="mycarousel" class="carousel slide" data-ride="carousel">   <!-- indicators -->   <ol class="carousel-indicators">     <li data-target="#mycarousel" data-slide-to="0" class="active"></li>     <li data-target="#mycarousel" data-slide-to="1"></li>     <li data-target="#mycarousel" data-slide-to="2"></li>     <li data-target="#mycarousel" data-slide-to="3"></li>   </ol>    <!-- wrapper slides -->   <div class="carousel-inner" role="listbox">     <div class="item active">       <h2>hello</h2>     </div>      <div class="item">       <h2>hello2 sdfd dljdklf dlkj kld lkjkld lkjkld dlkjlkd ljkl dlkjls slkj </h2>     </div>      <div class="item">       <h2>hello3</h2>     </div>      <div class="item">      <h2>hello4 djkl jd kljld kjd lkjl d lkjkl lkjlk </h2>     </div>   </div> 

here want change h2 text size , item height should common 4 items.

thanks in advance.

look using css media queries this.

an example like:

@media (max-width: 992px) {     .item h2 {         font-size: 3rem;     } } 

the above media query says if screen width has maximum of 992px, h2 in item class should have font size of 3rem.

if screen 993px or greater, not apply.

---

you can use multiple values:

@media (max-width: 992px) {     .item h2 {         font-size: 3rem;     }     .item h2 {         color: red;     }     .item h2 {         text-decoration: underline;     } } 

the above example, however, not ideal repeats code needlessly. condense this:

@media (max-width: 992px) {     .item h2 {         font-size: 3rem;         color: red;         text-decoration: underline;     } } 

---

you can use multiple media queries:

@media (max-width: 992px) {     .item h2 {         font-size: 3rem;         color: red;         text-decoration: underline;     } } @media (max-width: 768px) {     .item h2 {         font-size: 2.5rem;         color: blue;         text-decoration: none;     } } 

the first media query says if screen width less 992px, h2 in item class should have font-size of 3rem, should red, , should have underline.

the second media query says if screen goes further , gets smaller 768px, font-size should reduce in size 2.5rem, color should blue, , underline should removed.