CODEWITHSUNDEEP
htmlcssbootstrap-5
KRD_CoDeR_BoY
KRD_CoDeR_BoY

Reputation: 69

bootstrap breakpoints for font sizes of h1-h6

I am just wondering if there is any way that I can use break points of (sm,md,lg,xl..etc) for the font sizes that bootstrap provides which are:

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

but I want to use these, it doesn't work. as shown below.

<p class="fs-sm-4 fs-md-3 fs-lg-2">Hello, This is Me</p>

Any help would be appreciated.

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>

<p class="fs-sm-4 fs-md-3 fs-lg-2">Hello, This is Me</p>

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Upvotes: 2

Views: 953

Answers (1)

Luis Lobo
Luis Lobo

Reputation: 859

Do you know how to use SASS? I had the same problem a while ago and I solved it this way. Well, you'll have to change the break points for version 5 of bootstrap, but it's easy.

I do it this way:

h1.title{
    @include fontSize(16px, 16px, 20px, 24px, 32px);
}

p{
    @include fontSize(12px, 12px, 14px, 14px, 16px);
}

mixin-fontSize.scss v1
@mixin fontSize($all: '', $sm: '', $md: '', $lg: '', $xl: ''){
    @if($all != ''){
        font-size:$all;
    };
    @if($sm != ''){
        @media all and(min-width:576px){font-size:$sm}
    };
    @if($md != ''){
        @media all and(min-width:768px){font-size:$md}
    };
    @if($lg != ''){
        @media all and(min-width:992px){font-size:$lg}
    };
    @if($xl != ''){
        @media all and(min-width:1200px){font-size:$xl}
    };
};


h1.title {
  font-size: 16px;
}
@media all and (min-width: 576px) {
  h1.title {
    font-size: 16px;
  }
}
@media all and (min-width: 768px) {
  h1.title {
    font-size: 20px;
  }
}
@media all and (min-width: 992px) {
  h1.title {
    font-size: 24px;
  }
}
@media all and (min-width: 1200px) {
  h1.title {
    font-size: 32px;
  }
}

p {
  font-size: 12px;
}
@media all and (min-width: 576px) {
  p {
    font-size: 12px;
  }
}
@media all and (min-width: 768px) {
  p {
    font-size: 14px;
  }
}
@media all and (min-width: 992px) {
  p {
    font-size: 14px;
  }
}
@media all and (min-width: 1200px) {
  p {
    font-size: 16px;
  }
}
<h1 class="title">Test</h1>
<p>Test</p>

Upvotes: 1

Related Questions