Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Font size utility classes


I appreciate your amazing work on templates.
Saw on landing usage of fs-6 fs-lg-4 , tried to use it myself expecting behavior like in all Bootstrap5 responsive items(cols, paddings, flex alignments, etc.) but it was not behaving like that.
In code I found that there is only 2 breakpoints general and >1200px, is it some sort of bug/mistake or is that the Way?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi,

This is how the standard Bootstrap responsive mode works. fs-6 is applied for all breakpoints while fs-lg-4 is applied for breakpoints > 1200px. This is how all Bootstrap utilitly classes work.

Regards.



Yes, but why in compiled version of css bundle there is fs-1 fs-2 fs-3 fs-sm-* fs-md-* fs-lg-* redefined in @media(min-width: 1200px) and according to compiled css xl is for @media(min-width: 1200px) and lg is for @media(min-width: 992px) ?



Hi,

We use standard Bootstrap API to extended the font size utility classes.
Please refer to the Utility classes API.


"font-size": (
rfs: true,
responsive: true,
property: font-size,
class: fs,
values: $font-sizes
),


Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(