We have recently updated our project from Bootstrap 4 to Bootstrap 5.
I am trying to retrieve the value of a breakpoint in my TypeScript/JavaScript code, which used to work in Bootstrap 4 with:
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--breakpoint-md")
However, it has stopped working in Bootstrap 5.
Here are examples in CodeSandbox for Bootstrap 4 here and Bootstrap 5 here.
Has anyone encountered similar issues?
Good news! Starting from Bootstrap version 5.3, the breakpoint variables are back and readily available out of the box. You can easily access them using the following JavaScript:
getComputedStyle(document.body)
.getPropertyValue('--bs-breakpoint-md');
In Bootstrap 4, all breakpoints were added as variables to the root. However, in Bootstrap 5, this is no longer the case, and you will need to create them manually using SASS. Simply add the following code to your styles.scss file:
:root {
@each $breakpoint, $value in $grid-breakpoints {
--breakpoint-#{$breakpoint}: #{$value};
}
}
The resulting output (which can also be added directly in the styles.css) will look like this:
:root {
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1400px;
}
After implementing this, your JavaScript functionality should continue to work smoothly as before.
Note: With Bootstrap 5, there is also a change in using prefixes for CSS variables. For more information, refer to the official documentation on prefixes.
I'm facing an issue on my webpage where the text overflows the container div, even after setting the height to auto. Here's how the page is structured: <html> <head> <body> <div id="wrapper"> <div id="inner_wrapp ...
Currently, I am in the process of developing a CSV file loader that converts data into JSON format. The loader will consist of three buttons: 1. The first button allows me to select a file from my computer and load the CSV data for conversion to JSON. 2. ...
I am dealing with a datepicker that defaults to the MM/dd/yyyy format, and I need it to adjust based on the user's browser language. For example, if the browser language is English India, then the format should be set to dd/MM/yyyy as shown below. Be ...
I am dealing with a collection of FormControls that were created using FormBuilder: this.someForm = this.fb.group({ name: '', size: '', price: '', }); Is there an alternative method to update them based on ...
I've been trying out this code but it doesn't seem to be working. Apologies for the basic question, but I'm curious to understand why it's not functioning as expected. $(document).ready(function(){ $("button").click(function(){ ...
When working with JSON data, I often come across empty values that I need to replace with a default string. var jsonData= [ { "machineNum": "1A", "serialNo": "123", "city": "" }, { "machineNum": "2B", "serialNo": "", "city": "" }, ...
I have put in a lot of effort to find the solution, but unfortunately I have not been successful so far. Currently, I am working on creating a shape using THREE.Shape, and I have the vertices data stored in a file. The shape appears to be straight without ...
Here's a directive I'm working with: <g-map-locations center={{myLocation}} zoom="4" id="map" class="map"></g-map-locations> The zoom parameter is used in Angular to set the zoom level for a Google Map: attrs.zoom = zoom setMapOpti ...
I need the time to always display with leading zeros when less than 10. For example, if a task took 3 hours, 7 minutes, and 33 seconds, it should be shown as 03:08. Currently, I have the buttons disabled after they are clicked to prevent restarting the ti ...
Is there a way to identify overflow on floating elements? It's important to note the difference between setting overflow to visible or hidden. overflow: visible; overflow: hidden; Do all floated elements inherently contain overflow? Why is it chal ...
Can someone assist me with achieving vertical equality for two background images like in this example image? Currently, I have the following styling applied: background-repeat: no-repeat, repeat-x, repeat-y; background-position: 925px center; However, t ...
I'm in the process of developing a chat application with PHP. Everything is functioning properly, but I have encountered a potential loophole. I am implementing AJAX to fetch chat data as the user scrolls, similar to platforms like Facebook and Twitte ...
I have encountered an issue with my Next.js app when I attempt to hard reload it in production mode. The error message I receive is 404 - File or directory not found. Below is the code snippet I am using: import { useRouter } from "next/router"; import ...
I am experiencing an issue with Material-UI makeStyles not working properly. I am trying to apply my CSS style but it doesn't seem to be taking effect. I suspect that Bootstrap or MaterialTable might be causing this problem. While Bootstrap4 works fin ...
As a new Node.js user, I'm attempting to send data back to the browser by utilizing a function called load_blocks() from an external file that I created, and then calling it with res.send(). I currently have two basic files in my setup: The first on ...
Is there a way to modify the functionality of my black button so that when clicked, the red div fades out while the blue div fades in? Right now, clicking the button switches between the two divs without any fading effect. Fiddle: http://jsfiddle.net/ddac ...
Having a JSON file containing various data items (as an example) that I am utilizing with handlebars.js to generate templates. The challenge lies in displaying 15 stories (each within their own div) on page load while shuffling their positions upon each r ...
I have recently developed a slider on this page: While the slider functions smoothly in Chrome, I am facing compatibility issues with Firefox. Can anyone shed some light on why this might be happening? Here is the HTML, CSS, and JS code used for the slid ...
Even though I found a similar question on this link, the solutions provided there do not seem to work for me. I am currently using the query.validate plugin for my form, which works well in most cases. However, I have encountered an issue when adding new r ...
Can anyone help me with centering the labels within the container? I'm encountering difficulties uploading an image to a website, so I've included a URL link as an alternative. To prevent the labels from filling the entire fluid container, I&ap ...