Design fresh bootstrap styles with responsive breakpoints

Looking to create numerous new classes using bootstrap 4 breakpoints and wanting to utilize sass for this task, however, I am uncertain about the specific approach.

Essentially, the classes are structured as follows:

@media (max-width: 767px) {
    .bg-md-img {
        background-image: none !important;
    }
}

But this structure needs to be applied for each breakpoint. I am aware of the media-breakpoint-down mixin that I can utilize somehow, but I am struggling with properly looping through the breakpoints.

csssassbootstrap-4

Answer №1

Study how the Bootstrap grid columns are structured for each screen size in the make-grid-columns mixin found in grid_framework.scss.

You can implement something similar...

// iterate through each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .bg#{$infix}-img {
      ..
    }
}


// styling for one specific breakpoint
// adjust style for sm breakpoint only
@include media-breakpoint-between(sm, md){
  .bg-sm-img {
      ...
  }
}

Check out the example: https://www.codeply.com/go/Zjk1ybVJHZ

Answer №2

I decided to opt for a more streamlined method that appears to be functioning effectively:

@each $name, $value in $grid-breakpoints {
    @media all and (max-width: $value) {
        .bg-#{$name}-img {
            background-image: none !important;
        }
    }
}

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

Transforming the indicator of the React responsive carousel to full-width rectangles

I am working on customizing the indicators to appear rectangular and cover the full width based on the length of the images, similar to this example: https://i.sstatic.net/j4yov.png However, I am currently facing an issue where the divs are always displa ...

cssreactjscarousel

The tab panels are failing to function properly due to the maxcdn CSS integration

I am struggling to make my basic JQuery code work, specifically to show and hide panels when a list item in the menu is clicked. The CSS I am using is from max cdn, so I'm unsure if I need to create my own CSS file for this. <!DOCTYPE html> ...

jqueryhtmlcss

Is there a way to conceal a div that holds a full table when the table consists of only one row?

I am relatively new to working with JS and HTML. I have attempted to use the following function, but unfortunately, I am not seeing any results. Any assistance would be greatly appreciated. Below is the JavaScript code as well as the HTML div and table whe ...

javascripthtmlcsshtml-table

Looking for CSS templates for improving your business web apps?

Many CSS templates out there are fixed-width, typically around 900 pixels wide... Right now, I'm in the process of creating an intranet Rails application and I'm seeking a good resource for CSS templates designed specifically for business applic ...

ruby-on-railscss

What is the best way to integrate CSS transform with jQuery and handle issues with window resizing inconsistencies?

Record of Efforts and Images of the Issue: I am attempting to make a table resize responsively within Bootstrap. While Bootstrap functions correctly and the table mainly works fine, the problem arises when resizing the viewport. The table does not resize ...

jqueryhtmltwitter-bootstrapcss

The head tag specification doesn't properly include the CSS file reference

I have a question regarding my HTML5 web page and the way I am referencing a CSS file in the head tag. Currently, I have it set up like this: <head> <link rel="stylesheet" href="css/style.css" type="text/css"/> </head> However, it d ...

htmlcss

It is important for the CSS :active state to transition to an "inactive" state after a certain period of

For mobile, I utilized the :hover and :active pseudo-classes to create a transition effect when tapping on a tab that enlarges the elements for more information. However, I am seeking a way for the activated element to return to its original state after a ...

csshover

Show random images of different sizes by employing jquery

I am seeking a solution for my webpage which currently loads a random image from an array and centers it using negative margins in CSS. While this method works fine with images of the same size, I am looking to modify the code so that it can handle images ...

jquerycssimagerandomcenter

Creating a Comprehensive Page Design with Bootstrap and the Latest Version of Vue

My goal is to develop a Single Page Application using Vue3 and the Bootstrap 5 framework with a simple layout of Header -> Content -> Footer. I want the Content section to fill the space between the header and footer, ensuring there is no overlap. Ho ...

javascripthtmlcssvuejs3bootstrap-5

Collapse or display div elements with jQuery - First close all other elements before opening the selected item

The Problem at Hand Currently, the script is expected to hide all elements with the "gallery-collapse" class and reveal the specific content based on the clicked link. However, sometimes multiple divs might appear simultaneously when switching between ite ...

javascriptjqueryhtmlcss

Distribute progress bar evenly around a circular path

I am working on a component in ReactJS that involves a circle in the center displaying the average (rendered as a div element), with 12 progress bars aligned around it at equal angles. To achieve this, I am utilizing React Bootstrap ProgressBar. <Progr ...

reactjscssprogress-barreact-bootstrap

Woocommerce - [product_categories] shortcode - Can I exclude specific categories from being displayed in the list?

Is there a way to hide specific categories (only two in this case) that are displayed using the [product_categories] shortcode? I have attempted to place these categories at the bottom of the list and used CSS to target them: .home .woocommerce ul.product ...

csswordpresswoocommercecategories

manipulating radio button syntax using jquery

Can someone help me with the syntax for using an equation in JavaScript jQuery to achieve this: document.getElementById ("tone_positive_" + x). checked = true I've attempted a few examples but none have seemed to work, or perhaps I am not grasping h ...

javascriptjqueryhtmlcss

Is there a way to dynamically append options to a Bootstrap selectpicker?

I'm attempting to design a dropdown feature that, when activated by clicking on the first list item, displays a new list of related items next to the initial selection. Here's an illustration: https://i.sstatic.net/fMxAj.png My approach involve ...

javascriptjquerybootstrap-4bootstrap-selectpicker

The absolute positioning of a div nested within another div is not being applied correctly

Currently, I have a few div elements here. Once I figure out the right combination of style elements, I will transfer them to a stylesheet. I'm attempting to make the last div appear with an absolute position in relation to the containing div ("one") ...

css

Is there a way to apply CSS to a PHP file within a WordPress website?

Similar Question: How To Add CSS and jQuery to a WordPress Plugin? I am trying to insert a button into a Wordpress plugin. I would like to customize the style of the button by linking a CSS file. I understand how to link a CSS file in an HTML docum ...

phpcsswordpress

Is the "Apply with LinkedIN" button not displaying correctly on the page?

I have managed to integrate the Apply with LinkedIN button on my website, but I am encountering a styling issue. The button is displaying strangely, even though I am using bootstrap 3.1. Has anyone else faced a similar problem and found a solution? I have ...

javascripthtmlcsslinkedin-api

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

Could someone provide an explanation of $mdLiveAnnouncer using this code snippet? module.controller('AppCtrl', function($mdLiveAnnouncer) { // Making a basic announcement (Polite Mode) $mdLiveAnnouncer.announce('Hey Google'); // ...

javascripthtmlcssangularjsangular-material

Positioning of the navigation menu

After customizing my Bootstrap navbar, I noticed that when the responsive size changes to mobile, the burger menu opens on the left side. Is there a way to move it to the right? Any help would be appreciated. Here is the HTML code: <!DOCTYPE html> ...

htmlcssbootstrap-4

JavaScript var is not defined

Hey there everyone! I'm facing an issue with this variable in my file. I have a picture, and it's supposed to display a swipe box with some information about the image when the user hovers over it. However, for some reason, the box is not appeari ...

javascriptjqueryhtmlcss