The Bootstrap grid feature is malfunctioning on both Codeply and devtools. The dimensions of the <div class="col-lg-3 col-md-4 col-sm-6"> element remain constant despite attempts to adjust them

After experimenting with the viewport meta tag and enclosing it in a div class="container", I found that the issue persists on Codeply and Chrome DevTools. However, when I adjust my browser size, the problem seems to disappear. I also tried using various versions of Bootstrap, but still faced the same problem.

<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c9788978a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54373b263114667a65647a66">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b5b8b8a3a4a3a5b6a797e2f9e6f9e4">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
  
 

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
<div class="container">


    <div class="row">
      <div class="col" style="background-color:red; border: 1px solid;">
          col
      </div>
      <div class="col" style="background-color:red; border: 1px solid;">
          col
      </div>
  </div>

  <div class="row">
      <div class="col-6" style="background-color:green; border: 1px solid">
          col-6
      </div>
      <div class="col-6" style="background-color:green; border: 1px solid">
          col-6
      </div>
  </div>

  <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 " style="background-color:yellow; border: 1px solid">
          col-lg-3 col-md-4 col-sm-6
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
          col-lg-3 col-md-4 col-sm-6
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
          col-lg-3 col-md-4 col-sm-6
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border: 1px solid">
          col-lg-3 col-md-4 col-sm-6
      </div>
  </div>
</div>
  
  </body>
</html>

cssbootstrap-4viewportbootstrap-5bootstrap-grid

Answer №1

col-sm-6 should not be used for mobile devices. Instead, utilize only col-6. The col-sm-6 class is intended for a width of >= 576px.

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

Reactstrap's dropdown component with a search input

To enhance the functionality of the reactstrap dropdown, I am interested in using it as a search bar where search results are displayed in the dropdown menu. However, there seems to be an issue with the default key listener that only captures inputs from t ...

reactjsbootstrap-5reactstrapreact-tsx

Running a MySQL query within a WordPress post using shortcode? Keep it in the post and avoid sending it to the footer with

My MySQL code is functioning perfectly, and I have created a custom shortcode to embed the content within a post. However, I am facing an issue where the shortcode is executing below the footer. Initially, I suspected it was a problem with a plugin or them ...

phphtmlcssmysqlwordpress

Whenever I adjust the layout of the navigation bar, the edges end up getting clipped

I'm having trouble with the border shape of my navbar. When I try to make it a rounded pill shape, the edges get cut off instead of being properly displayed. https://i.stack.imgur.com/sUN2Y.png Below is the HTML template: <template> <div cl ...

javascriptcssvue.jsbootstrap-4bootstrap-5

jQuery is unable to locate the FireBreath object

Currently, I am in the process of developing a web video player by using Firebreath to compile my C/C++ codec as a browser plugin. The plugin has been successfully loaded and is functioning properly (start, stop video, etc.). My next goal is to enable full ...

javascriptjqueryhtmlcssfirebreath

Tips on how to showcase a picture with the focus on the center by enlarging it within

We have a long frame on the page, with an aspect ratio of about 3.5:1 width to height. However, most of the photos being displayed are in a 4:3 ratio, which is larger and not a proper fit for the frame. The customer really wants the long frame and has no ...

htmlcss

Fluid Centered UL with Bullet Points

We have received a unique request from one of our clients. They are asking for the content within a specific <ul> to be centered along with the icons. Centering and adding icons are doable, but the challenge lies in centering the <li> elements ...

htmlcss

Tips on displaying a single column in Bootstrap when only one item is present and switching to two columns when two items are present

Currently, I am utilizing the row class in Bootstrap which contains two columns, one for X and one for Y. There are scenarios where either the X column, the Y column, or both may be present within the row. Since a row can have up to 12 columns, when only t ...

htmlcssbootstrap-4

Click on the link that surrounds an inline-block span in Internet Explorer

In Chrome and Firefox, the following code works fine and makes the container clickable. However, in Internet Explorer, only the inner div changes the cursor to indicate that it's clickable, not the span. I could use cursor:pointer to fix this issue, ...

internet-explorerhtmlcss

Is the Mini Cart button in Woocommerce not aligned properly?

My website was functioning perfectly until yesterday. However, after updating some plugins, the Mini Cart dropdown button started to display in a weird and misaligned manner. https://i.sstatic.net/SsZee.jpg Prior to the plugin updates, the button had the ...

csswordpresswoocommerce

Ajax request unable to load Image Slider

I'm currently implementing an Image Slider from this source For the site structure, I've set up an index.html file to display all the pages, allowing navigation by changing the content within <div id="isi">. Here's a snippet of the in ...

javascripthtmlcssajaxslider

Website layout looking unique due to pixel width adaptation from standard width

I'm currently working on a website with full width design. On my computer, the website displays as full width, but on other computers it shows extra space on the sides. How can I ensure that this website is truly full width? .wrapper_boxed { wid ...

htmlcss

Adjusting the width of the body container in a 2-column layout with menu padding is causing gaps to appear on the right side of

I'm having trouble getting my body div to fill the width of the page and align with the right side of my sidebar. Whenever I add padding to the sidebar, it creates blank space on the right that I can't seem to get rid of. Here is the code I am us ...

cssxhtml

How to centrally align header elements in Bootstrap 4 on mobile devices?

In this setup using Bootstrap 4, I have a header structure as follows: <div class="container"> <div class="row"> <div class="col-md-6"> <div class="navbar-brand"><img src="..."></div> </div> <div class="col-m ...

csstwitter-bootstrapbootstrap-4

The navbar slide toggle is supposed to slide behind the navbar, but instead it slides in front of

Recently, I created an animated navbar that works perfectly fine. However, there is one issue that bothers me - when the list of menu items slides open, it appears in front of the navbar instead of behind it. If you'd like to see the problem in actio ...

jqueryhtmlcss

Tips for emphasizing the letters of the alphabet used in search functionality with Angular

Is there a way to highlight specific alphabets in the searched list instead of highlighting the entire word? Currently, when filtering the memberOffice and memberFacilities lists based on the alphabet entered in the search field, the entire text is highlig ...

javascripthtmlcssangular

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

cssangulartypescriptanimation

"I am facing an issue where the button does not appear centered after using jQuery

I can't help but notice that when applying CSS directly, my buttons end up centered horizontally. Yet, when I insert the same code using append(), the buttons seem to align towards one side instead. Here is the HTML/CSS code snippet: <div style=" ...

jquerycssappend

Auto-scrolling text box cursor movement

My query is quite similar to the topic discussed in this thread on automatic newline in textarea. However, my situation involves multiple textareas with a 1-row attribute, making it seem like writing on air due to the absence of visible borders (I've ...

javascriptjquerycsshtml

How to position a <div> in the center of a popup <div>

I've encountered a problem trying to center a <div> within another <div> that pops up when a button is clicked. It's not my code, but it's similar. Here is the HTML: <div class="popup"> <div class="options"> ...

htmlcss

Unable to choose the specific div element within the container that has an inset shadow applied by utilizing Pseudo

It seems that I am encountering an issue when trying to select the div elements within a container that has a defined shadow using pseudo elements ::before OR ::after. Once the shadow is applied, the div elements become unselectable. Please refer to the c ...

jqueryhtmlcss