On mobile devices, Bootstrap replaces columns with all child columns inside .row

I've encountered a rather perplexing issue with bootstrap that seems to have little information available online.

My problem lies in the fact that my col-sm-6 classes are being overridden by the following code snippet:

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

This is the nested structure of the columns:

<div class="col-md-8 col-sm-12"> 
  <div class="row">
     <div class="col-lg-4 col-md-6 col-sm-6 col-griditem display-flex"></div>
  </div>
</div>

Interestingly, it appears that the column class vanishes completely in the inspector and does not actually get overridden. Can anyone shed some light on this issue?

Sample HTML Code Goes Here
htmlcssbootstrap-4

Answer №1

It seems that the Bootstrap grid system may be a bit confusing for you.

This...

<div class="col-lg-3 col-md-6 col-sm-6">...</div>

...translates to the same as writing this.

<div class="col-lg-3 col-md-6 col-sm-6 col-12">...</div>

If you need 2 columns on mobile, remember to include the class col-6.

Check out the code snippet below.

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6dddadddbc8d9e99d879f879b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d9c2c6d6c1caf3809d869d82">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c08120a120e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="col-md-8 col-sm-12" id="step-3">
  <!-- STEP 3 block -->
  <div class="steps-block">
    <div class="text-steps">
      <h1>STEP 3: Choose Countertops, Sink, and Faucet</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor cras est, amet
        quis in. Semper vitae ultricies commodo et, commodo vitae in ut nulla. Tellus
        sapien sed elementum, eu et ut ac nisi ut. Nam urna porta turpis turpis volutpat
        ac pellentesque suscipit. Porta feugiat a in urna.</p>
    </div>
    <div class="row">
      <h4 class="countertops-category">Countertops</h4>
      <div class="col-lg-3 col-md-6 col-sm-6 col-6 col-griditem display-flex">
        <div class="countertop-item selected">
          <img class="countertop-img" src="images/light-concrete.png">
          <span class="countertop-title">Light Concrete</span>
          <div class="countertop-info">
            <span class="countertop-pricem1">€130,- per m1</span><br>
            <span class="countertop-amount">Required m1: 2.3m1</span>
          </div>
          <span class="countertop-price">Price: €135,-</span>
          <div class="button-holder"><a class="countertop-button">select</a></div>
        </div>
      </div>
   ...
</div>
<!-- End of STEP 3 block -->

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

Concealing an input field in AngularJS

I am currently developing a login page with register and login options using AngularJS. The interface includes three input fields: username, password, and name. I aim to display the name field upon clicking the register button and hide it upon clicking t ...

htmlcssangularjs

When looking for a selection, the drop-down list unexpectedly shifts upwards

When using the ngx-intl-tel-input library in my Angular application, I noticed that when searching for a country in the dropdown list, it moves to the top. I am looking to fix the position of the dropdown menu while searching. Check out the demo: Demo Lin ...

javascripthtmlcssangular

Comparison of Foundation5 source ordering: main content versus sidebar

I recently set up a layout with three columns using ZURB Foundation 5. The two sidebars are on the left and right, while the main content area is in the middle. While trying to follow the source ordering instructions in the documentation, I encountered so ...

cssresponsive-designzurb-foundationfrontend

Retrieve the HTML code of a webpage, including any embedded iframes

Is there a way to extract the HTML content of a webpage, including any iframes present within <iframe> elements? I know that the Chrome Developer Tools "Elements" tab can display iframes in this manner. When I mention extracting the HTML contents, I ...

htmliframeseleniumphantomjsbrowser-automation

Generating DOM elements at specific intervals using Jquery

I am looking to dynamically create 1 div container every x seconds, and repeat this process n times. To achieve this, I have started with the following code: $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle(i); } }); f ...

javascriptjqueryhtmlcss

Eliminate the need for background video buffering

I have a piece of code that I'm using to remove all the created players for my video elements. The code works fine, but I'm facing an issue where the video keeps buffering in the background after it's changed via an ajax call success. Can yo ...

javascriptjqueryhtmlvideomediaelement.js

Is Safari causing issues with the CSS slider animation?

Currently, I am working on implementing a CSS-only slider (no jQuery) in WordPress using the code from this source: http://codepen.io/dudleystorey/pen/kFoGw An issue I have encountered is that the slider transitions are not functioning correctly in Safari ...

htmlcsswordpress

The thumbnail image is failing to load, and when I hover over an image, it moves upwards

I seem to be encountering an issue with a website I uploaded for testing. Everything appears to be working correctly when checked locally in Dreamweaver CS6. However, once the site is uploaded, some issues arise. When hovering over the images, a problem is ...

javascripthtml

What are some ways to enhance the worth of this.value?

What's the best way to restrict input to only numeric values in this scenario? function validateUserInput() { $('datagroup').on('keyup', 'input[id^="datagroup_1"]', function () { if (!this.value){ ...

javascripthtmlkeyup

Create a scrollable horizontal list of items

I am encountering an issue with my mat chip list in Angular Material. I have a mat chip list filled with mat-chips that I want to display in a single row. If there are more items than can fit on the screen, I would like the area to be scrollable horizonta ...

cssangular

Seeking assistance with troubleshooting JavaScript code for counting vowels

I am currently trying to debug a piece of code for my class. I have made several adjustments, but for some reason it is still not functioning correctly. The goal is to count the number of vowels in a given phrase and display them in the div element. Howeve ...

javascripthtmldebugging

Embedding videos in HTML

I am experiencing difficulties with embedding a video in my HTML file. I attempted to use a YouTube video, but when I open it in my browser, it displays an error message stating that the video is unavailable because YouTube has refused to connect. I also ...

htmlcss

Auto adjusting textarea height as per content length

Is there a way to adjust the height of the text area based on the content entered by the user? I want it to automatically increase as the user types and decrease if they delete content. ...

jqueryhtmlcss

The content is displayed below the navigation bar rather than beside it

I'm having an issue with the layout of my webpage. The new content I add appears below the navbar on the left side of the page instead of beside it. Can someone help me troubleshoot this problem? Below, you'll find the relevant HTML and CSS code ...

javascripthtmlcssnavbar

Images for the background of the table header and sorting icons

Currently, I am utilizing jquery.tablesorter for table sorting functionality. However, I have a desire to apply a pattern to my table headers using a background-image. Unfortunately, when I do so, the .headerSortUp and .headerSortDown classes on the sorted ...

jqueryasp.netcss

Error: An unexpected token < was caught in the TypeScript Express code

Using TypeScript to compile and run an Express server that simply serves an HTML file. However, encountering an error in the response under the network tab in Chrome for app.js: Uncaught SyntaxError: Unexpected token '<' Below is the server c ...

htmlnode.jstypescriptexpress

It is not possible to delete a class from an element once it has been added

Issue can be replicated by visiting the following URL: Click on the hamburger icon to open the navigation menu Click on "Services" Click "< Services" within the submenu to attempt to go back For some reason, the removeClass method is not removing t ...

javascriptjquerycss

Unable to identify the source of the additional white space appearing below the footer

Click here to access a page with two Google maps embedded. Upon scrolling to the bottom of the page, an unusual amount of whitespace is visible below the footer that is not seen on any other pages. The issue seems to be related to the presence of the two ...

css

Resolving issues with JavaScript caused by Polymer updates

I am a novice when it comes to working with Polymer. From what I have gathered, there seems to be compatibility issues with Mozilla and Safari. After researching on StackOverflow, I found that adding addEventListener('WebComponentsReady', funct ...

javascriptjqueryhtmlcsspolymer

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Situation at Present ...

javascriptcssreactjsmaterial-uistyled-components