The make-xx-column() mixins in Bootstrap are malfunctioning

After careful examination, it looks like some of the Bootstrap mixins are not functioning as expected. Specifically, the .make-md-column() and .make-sm-column() seem to have no effect at all.

Initially, I suspected that WebEssentials was not compiling the .less file properly, so I switched to using less.js and compiled on the client-side. However, the issue persisted.

In the example below, the labels Span1 and Span2 should display in two columns on medium-sized screens and one column on smaller screens.

Based on my .less code, I presumed that Span3 and Span4 would behave the same way (except for the color green, which I added to verify if anything rendered). Surprisingly, Spans 3 and 4 never adopt a two-column layout. Can anyone identify what may be incorrect here?


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap/bootstrap.less" rel="stylesheet/less" type="text/css"/>
<link href="Content/testless.less" rel="stylesheet/less" type="text/css" />
<script src="Scripts/less-1.5.1.min.js"></script>
</head>
<body>

<div class="container">
    <!-- this row uses no LESS-->
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <span>Span1</span>
        </div>
        <div class="col-sm-12 col-md-6">
            <span>Span2</span>
        </div>
    </div>

    <div class="row">
        <div class="div-container">
            <span>Span3</span>
        </div>
        <div class="div-container">
            <span>Span4</span>
        </div>
    </div>
</div>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>

</body>

And here's the less code snippet:

    
@import (reference) 'bootstrap/bootstrap.less';
//@import 'bootstrap/bootstrap.less';

.div-container {
    color: green;
    .make-md-column(6);
    .make-sm-column(12);
}

Answer №1

From Smallest to Largest

The sequence in which you place your make-xx-column(X) calls plays a vital role. Your code:

.div-container {
    color: green;
    .make-md-column(6);
    .make-sm-column(12);
}

Results in the following CSS for the media queries:

@media (min-width: 992px) {
  .div-container {
    float: left;
    width: 50%;
  }
}
@media (min-width: 768px) {
  .div-container {
    float: left;
    width: 100%;
  }
}

In this specific order, the arrangement of the CSS selectors works against you because the 768px minimum occurs after the 992px one. Consequently, at, let's say, 1000px, both media query blocks are applicable since they fall under that number. However, the css cascade selects the last one defined, which will always be 768px (single column). VIEW EXAMPLE FIDDLE WITH CURRENT ORDER. Therefore, you should consider the following adjustment:

.div-container {
    color: green;
    .make-sm-column(12); /* reversed order */
    .make-md-column(6);
}

This modification yields the subsequent CSS for the media queries:

@media (min-width: 768px) {
  .div-container {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .div-container {
    float: left;
    width: 50%;
  }
}

With this revised approach, at 1000px, the 992px comes into effect; however, if it goes below 992px, the min-width condition prevents its application, allowing the 768px to take precedence. VIEW EXAMPLE FIDDLE WITH NEW ORDER.

Hence, remember that the order of your make-xx-column(X) calls must go from smallest to largest.

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

What is the best way to position a single element in React using the Grid Component without causing any overlap?

I am struggling with positioning 3 components on my react page: PageHeader, SideMenu & FeatureList (which consists of Display Cards). Here is the code for each component: App.js // App.js code here... PageHeader.js // PageHeader.js code here... SideMenu ...

Erase embedded frame from a Google Sheets document

Is there a way for me to customize the frame and replace it with my own design? Click here to view the Google Sheet embedded frame ...

Using brackets in a CSS background-image URL will cause it to malfunction and not display the

Try using the brackets editor tool available here. I attempted to add an image to a div with the class "portrait" by linking the style.css file from index.html, but it doesn't seem to be working. Other guides and tutorials have successfully utilized ...

Top-notch loading icon using jquery

Recently, I embarked on the journey of learning Javascript and jQuery simultaneously, and to my surprise, it feels quite manageable. As I delve deeper into creating functions, I am currently working on displaying a loading image. While I initially used on ...

Assigning a specific data type value to an element as it enters the top of the viewport

I have a unique color code stored for each section, and when a section reaches the top of the screen (specifically -180px for the header), I want to dynamically change the text color of the header element as you scroll through the sections. Despite no erro ...

Tips for incorporating Action Links into your CSS workflow

<li class="rtsLI" id="Summary"><a href="javascript:void(0);" onclick="javascript:rtsXXX.OnClientTabSelected(this‌​, 0);" class="rtsLink"><span class="rtsTxt">Test</span></a></li> I have made a change by replacing th ...

Is there a way to make a div element clickable?

I have attempted to include a link (href) in the cart-button class using the following HTML code: <div class="cart-button" href="#shopping-cart" alt="view-shopping-cart"><span>Shopping Cart (0)</span> <div class="cart-dropdo ...

Tips for eliminating the page margin in Java when converting HTML using iTextPdf with HTMLConverter

No matter how hard I've tried, setting the body with padding: 0 and margin: 0, as well as attempting to set the doc() with setMargin, nothing seems to be effective ...

Guide on implementing validation for currency on input field with regular expression

Review the form below: <form> <input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/> <input type="te ...

JavaScript script to modify the parameter 'top' upon clicking

Here is the pen I've made. HTML <div class = 'cc'> <div class = 'bb'><div class = 'aa'> Some word </div></div> </div> CSS .cc { width: 100%; min-height: 90px; margin: 0; ...

The significance of tabindex in CSS

Is it possible to manipulate tabindex using CSS? If so, which browsers support this feature and on what types of elements? UPDATE I am interested in capturing keydown events on a div element. After researching keyboard events on , I found that tabindex n ...

Scale transformation causing text display problem in Firefox

Using css-transforms for scaling text on hover to another size is working smoothly in all browsers, except for Firefox. The font in the scaled element appears slightly unsharp initially, then sharpens after a few milliseconds. You can test and see this is ...

Radiobutton becomes unchecked when a clone is removed from the DOM

When I make an Ajax call in a bootstrap modal and replace the contents (.modal-contents) with a partial view upon success, an interesting issue arises. There is a radiobutton in the partial view that is initially checked by default. However, after callin ...

Having trouble bringing in css files

I'm having trouble loading a CSS file when trying to import it into another CSS file. I've tried various ways of defining the path but nothing seems to work. Any insights on what might be causing this issue? https://i.sstatic.net/IwaY1.png ...

How do you efficiently include several elements within a single column in Boostrap 5?

I've been working with Bootstrap 5 to display a grid of images similar to this link, but the images are not displaying as intended due to some CSS code. #projects img { width: 100%; height: 100%; } <section id="projects"> ...

Align text vertically next to an image

I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me. Despite following the suggestions provided in this particular solution, I ...

The background of the section does not extend to the full height

Currently, I am using the <section> tag as a background for a specific section on my website. However, I am facing an issue where the height of the background is being cut off, even though the content continues below it. I have attempted various pos ...

Optimal approach for customizing the appearance of child components based on the parent component

I'm curious about the optimal method for styling child components based on their parent component. For instance, I want to design a list component that can be utilized in both a dropdown popup and a toolbar, each with its own unique style. There are ...

What are some methods for customizing the calendar icon displayed in an input field with type date?

Is there a way to customize the calendar logo without relying on jquery? The desired appearance should resemble the image shown below: https://i.sstatic.net/G06iZ.png input { width: 50%; padding: 8px; border-radius: 10px; ...

Aligning variable width numbers within a div container

Currently experimenting with CSS to create a calendar design that mimics the look of a traditional paper calendar. One issue I've encountered is the alignment of numbers within boxes, especially when dealing with double digits. When displaying a sing ...