Differentiating font sizes for headings (h1-h6) based on Bootstrap breakpoints

Is there a way to utilize bootstrap's font size breakpoints (sm, md, lg, xl, etc.) for the various font sizes provided by bootstrap:

<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>

When attempting to use these classes with breakpoints like fs-sm-4, fs-md-3, and fs-lg-2, it does not work as expected:

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

Your help on this matter would be greatly appreciated.

<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6aab6a8b5fafdecf9a9">[email protected]</a>/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>

htmlcssbootstrap-5

Answer №1

Are you familiar with using SASS? I encountered a similar issue in the past and resolved it using this method. You will need to adjust the breakpoints for version 5 of bootstrap, but it's a straightforward process.

This is how I approach it:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to hide my jQuery menu?

Can anyone help me figure out how to make it close when I click on a link? <nav class="navigation"> <a href="" class="menuIcon"><i class="fa fa-bars"></i></a> <ul class="nav"> <li class="clearfix"&g ...

jqueryhtmltwitter-bootstrapdrop-down-menumenu

What is the best way to align isotope and organize its components?

I have searched for solutions to my issue with centering isotope on my project, but none of the existing answers were sufficient. I am facing challenges trying to center isotope without creating extra space between its elements and arranging them in a spec ...

htmlcssjquery-isotope

Steps for accessing CSS variables within a scoped style block in Vue with Buefy_integration

After diving into the Buefy documentation, I successfully personalized my color scheme and even crafted unique hues by applying the is-[colorName] as a class to HTML elements. <style lang="scss"> // Importing Bulma's core @import "~bulm ...

cssvue.jsvuejs2vue-componentbuefy

Meta tags are causing issues with HTML5 validation on the website

Striving to enhance the HTML validity of my website, I encountered several errors in the meta tags that are marked as invalid. Unfortunately, I am unsure how to modify them to rectify these errors. <meta http-equiv="X-UA-Compatible" content="IE=edge,ch ...

htmlmeta

Creating a dynamic dropdown menu using JQuery that does not automatically submit the form when a value is

Upon selecting a background color from the dropdown menu, I am generating a dynamic dropdown for text colors. The Text Color dropdown is populated correctly based on the selection of Background Color. Although the functionality works as intended, I encoun ...

javascriptphpjqueryhtml

How to send the chosen option value from a select tag in Python Flask

My user registration form features a select tag, and I'm trying to assign the value of the selected option to a variable using the code below: registration.html <form method="POST" action="/register"> <div class="form-group"> ...

pythonhtmlflaskflask-wtforms

Create a list of items that are enclosed within a parent element

My menu is generated from a php query and the output is as follows: #ultra-menu { width: 92%; background-color: rgba(255, 255, 255, 0.90); position: absolute; left: 0px; right: 0px; margin: auto; border-radius: 35px; max-height: 300px; ...

htmlcss

What is the best way to display my menu bar when the icon is hovered over?

I want to create a menu bar similar to the one found on . I am unsure of how they achieved this effect, but it seems to involve a scroll-over action. However, when I attempt to replicate it, the words still appear even when the menu bar is collapsed. < ...

htmlcssmenubar

Utilizing CSS to Create Fixed Position Elements

How can I create a CSS Style with a fixed position property for a div? When I place this particular div inside another div containing text, the fixed-positioned div overlaps the text, causing it to be hidden. I want to align the text and image divs next ...

htmlcss

Custom div element obstructs information window on map due to lack of auto panning feature

I created a unique div that is absolutely positioned on a Google Map. You can view the image below to see it. My issue is that the info window is being covered by this custom div element, as demonstrated in the picture. https://i.stack.imgur.com/1TgyQ.jpg ...

javascripthtmlcssgoogle-maps

What is the best way to refresh the slick jQuery plugin for sliders and carousels?

I am currently facing an issue with two buttons that have the same function. The purpose of these buttons is to retrieve data from an API, convert it to HTML, and then append it to a <div> using jQuery. Finally, the data is displayed using the slick ...

javascriptjqueryhtmlslider

What is the process for printing the CSS stylesheet for PPI::HTML highlight?

PPI::HTML has done an impressive job of formatting the HTML highlighting for my Perl code, similar to the example on CPAN. However, I am facing challenges in making the output usable without the appropriate CSS styles. Unfortunately, I am unsure of how to ...

htmlcssperlppi

jQuery datatables provide a powerful feature for column filtering using jQuery functions

Looking for advice on how to add a filter to my jQuery datatable column that contains checkboxes. I want the filter to be a drop-down menu with options for "checked" and "unchecked", so that when a user selects one of these options, only the rows contain ...

jqueryhtmldatatables

A variable in Javascript storing data about jQuery DOM elements

Currently, I am using the slick slider for my development (http://kenwheeler.github.io/slick/) In JavaScript, there is an event that returns a variable called 'slick' When I print the variable using console.log, this is what I see: https://i.s ...

javascriptjqueryhtmldomslick.js

get the value of the last selected element using jQuery

I am facing an issue where I cannot retrieve the selected value from my second select element. Even though I have selected the second option in the dropdown, it keeps returning the value of the first option as empty. Here is a snippet of the HTML code: & ...

jqueryhtmljquery-selectors

Tips for decreasing Vuetify Grid column width on larger screens

I'm currently utilizing the vuetify grid system to construct a reply component. The column ratio is set at 1:11 for the icon and reply columns, respectively. Below you'll find the code snippet: <v-row justify="center" class="ma-0 pa-0"> ...

cssvue.jsvuejs2vuetify.jscss-grid

Guide on making a button display an image, then switch back to the initial image when clicked again

Currently, I have this neat feature on my website where there's a button that toggles the image/background color - kind of like a dark mode switch. The background change is working fine, but I'm encountering some challenges with organizing the im ...

javascripthtmlcss

Implementing the Applet Param Tag using JavaScript or jQuery

<applet id="applet" code="myclass.class"> <param name="Access_ID" value="newaccessid"> <param name="App_ID" value="newappid"> <param name="Current_Url" value="newticketurl"> <param name="Bug_ID" value="newbugid"&g ...

javajavascriptjqueryhtmlapplet

What are the steps for creating an animated visualization of the peak chart?

As a newcomer to CSS and Javascript, I am currently struggling with animating a peak (bar) chart that I came across on codepen. If anyone can provide assistance or guidance, it would be greatly appreciated! The chart can be found here: http://codepen.io/An ...

javascripthtmlcssanimationcharts

Using Bootstrap 3 to create a carousel with a seamless fading transition as the background

I want to utilize Bootstrap Carousel as the background for my website. I've successfully incorporated a standard carousel as the background, but I'm encountering difficulties with making fade transitions. Here is my current implementation: HTML: ...

csstwitter-bootstrap-3