After migrating from Bootstrap 3 to Bootstrap 4 and utilizing sass sources that I compile on the go, I encountered an issue with media switches. Specifically, for
@media screen and (min-width: $screen-md-min) {
padding: 40px 50px;
}
An error message has been popping up stating Undefined variable: "$screen-md-min".
Could anyone advise on the correct method to access variables in Bootstrap4?
Thank you.
For more information on how to migrate to Bootstrap 4, check out the relevant section in the documentation.
The use of @screen-* variables has been replaced with the $grid-breakpoints variable and helper Sass mixins like media-breakpoint-up(), media-breakpoint-down(), and media-breakpoint-only().
Here's an example of how to use them:
@include media-breakpoint-up(md) {
padding: 40px 50px;
}
When working with Bootstrap 4, you can implement responsive styles by importing bootstrap/_variables.scss into your .scss file:
.your-class-name {
color: black;
@media (min-width: map-get($grid-breakpoints, sm)) {
color: red;
}
@media (min-width: map-get($grid-breakpoints, md)) {
color: blue;
}
@media (min-width: map-get($grid-breakpoints, lg)) {
color: green;
}
@media (min-width: map-get($grid-breakpoints, xl)) {
color: yellow;
}
}
Alternatively, you could also use the following approach:
.your-class-name {
color: black;
@include media-breakpoint-up(sm) {
color: red;
}
@include media-breakpoint-up(md) {
color: blue;
}
@include media-breakpoint-up(lg) {
color: green;
}
@include media-breakpoint-up(xl) {
color: yellow;
}
}
For more information on responsive breakpoints, refer to this page section.
Obtaining the screen-md-min value in Bootstrap 4 was achievable through this method:
$grid-breakpoint-sm: map_get($grid-breakpoints, "sm");
This information was uncovered by examining the _variables.scss file in Bootstrap:
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
When transitioning from BS4 to Sass, keep in mind that Less utilizes lazy loading for variables while Sass does not. It's crucial to define your variables before utilizing them. Remember to include bootstrap/_variables.scss prior to any media queries:
@import 'bootstrap/variables';
@media screen and (min-width: $screen-md-min) {
padding: 40px 50px;
}
Is there a way to hide the button with the id #stats while the user is scrolling, and then have it fade back in once they finish scrolling? It seems like the code below is not working as expected. Any help would be greatly appreciated! <button id="st ...
https://i.sstatic.net/t7Hyj.png .main { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 100vh; min-width: 100%; width: 100%; overflow-x: hidde ...
When using a grid layout with 2 columns on devices wider than 768px, there seems to be an increase in spacing between the element and the one following it at that breakpoint. I'm looking for a solution to adjust the height so that it is dictated by t ...
I'm working on a project where I need to display three separate articles based on the screen size. Article 1 should only be visible when the screen width is less than 600 pixels Article 2 should be visible between 600 and 900 pixels Article 3 shoul ...
While using bootstrap-3, the .well class can be utilized to create a rounded border around an element with a gray background color and padding. <div class="well">Basic Well</div> However, it seems that there is no .well class available in boo ...
While experimenting with applying CSS properties to direct child elements of a parent element using ">", I noticed that it works smoothly with certain properties like borders, but not so much with font-related properties such as color and font-weight. ...
When attempting to open a modal window within a list of items (specifically attachments), I am encountering difficulties retrieving the record ID from the list. The new modal window is opened with Scala, but I consistently receive an error stating that t ...
Check out this awesome website: I've been working on incorporating a responsive design with a sticky footer, but I encountered some issues with incompatible CSS options. The fixed option wasn't meeting my needs either. For the homepage, I have ...
I attempted to incorporate a Placeholder Loading Card into my bootstrap 4 website by adding a sample image, but encountered an issue. The placeholder does not work when the website is loading. Is it supposed to always animate? Does anyone have knowledge ...
My responsive web page has various designs for different screen sizes, implemented using @media queries. I am interested in allowing users to manually adjust the design for smaller or larger screens without actually changing the screen size. Is there a wa ...
After testing my new site on my Android phone, I noticed that I am unable to scroll anywhere on the page. However, when viewed on Firefox, Opera, IE, and Chrome desktop browsers, I am able to scroll vertically when needed. In the CSS rule for my HTML body, ...
I've recently added an image as the background for my website using the following style: #whole_wrapper{ background-image: url(../images/wrapper_bg.jpg); background-repeat: repeat-x; width: 100%; float: left; height: 116px; } ...
I am looking to highlight a 'SearchString' by replacing it with <span style="background-color: yellow">SearchString</span> within a targetString. The SearchString varies, so I am wondering how I can make this happen. This is what I ...
Currently, I am developing a web application using asp.net's mvc-5 framework. In this project, I have implemented the following model class: public class Details4 { [HiddenInput(DisplayValue=false)] public string RESOURCENAME { se ...
While working on a component using shadow DOM, I encountered the following error in the console: "Cannot read property 'style' of undefined". This issue seems to be related to my HTML code in PHP. The main challenge I am facing is figuring out ho ...
// Closing Button for Main Navigation $('button#collapse-button').click(function () { $('nav#main-nav').toggleClass('closed'); }); $(window).on('scroll', function () { if ($(wind ...
My text-align (center) property doesn't seem to be working correctly with the following code snippet: <span class="info"> i <span id="uitleg_itje">Bla bla. </span></span> The CSS for the info class is as fo ...
In my current code, when the user inputs a color that matches any of the colors in the array, it will add that color class to the main div. The issue I'm facing is that my else-if statements only run once. If you input the same color again, it won&ap ...
I received a code from the internet that allows me to click on text and open a box. However, I am looking to add functionality to close the box when I click outside of it. Here is the javascript code I am using: function setVisibility(id, visibility) { ...
I'm facing an issue where all my elements move when I resize my browser, and I cannot figure out why. How can I ensure that they stay in their respective positions even when the browser is resized? Is there a CSS solution for this? Thank you! body ...