How can I change the size of the font in Bootstrap 4 with just CSS?

Question

I just switch over to Bootstrap 4 from 3, and I'm finding it impossible to change the font size of any of the elements: h1, p, and even span.

UPDATE: I want to change the size depending on the size of the screen. So using Media Queries.

I would like to thank @ZimSystem for how to change the size, but how can I change it depending on the media queries for different screen sizes?

Sample Fiddle

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {  h1 {
    font-size: 30px;
  }}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { h1 {
    font-size: 100px;
  }}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { h1 {
    font-size: 150px;
  } }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { 
h1 {
    font-size: 200px;
  }

 }

My HTML:

<img class="img-responsive mx-auto d-block" src="./assets/brand/cmm.png" />

<div class="row">
<div class="col-md-12 text-center">
<h1><strong>This is sample title</strong></h1>
<h2 class="text-white">South Florida's Community of Creatives Come together</h2>
</div>

</div>

That doesn't seem to be working either.

So am I missing something? Or is it impossible to change the font-size or make it responsive(depending on the screen size) in Bootstrap 4 with only CSS?

Solution 1

It depends how/where you're changing it. It should work fine. Make sure the custom CSS you're adding follows the bootstrap.css, and you shouldn't need to use !important

Demo: https://www.codeply.com/go/R9dGnr6AXn

Solution 2

You can try doing vw instead of px. With my experience, px doesn't work well with font.

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {  h1 {
     font-size: 30vw;
   }}

 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) { h1 {
     font-size: 100vw;
   }}

 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) { h1 {
     font-size: 150vw;
   } }

 // Extra large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) { 
 h1 {
     font-size: 200vw;
   }

  }