Unexpected behavior of Bootstrap columns within nested rows, occurring between the small and extra-small breakpoints

Currently, I am in the process of developing a small website using Bootstrap 5. My goal is to have 6 elements displayed on two lines for breakpoints greater than or equal to md and on a single line for smaller breakpoints. It all seems to be working fine for the sm breakpoint, but when I downsize to xs, the 6 elements end up being displayed in a vertical line, which is not the intended behavior. I'm a bit puzzled as to why this is happening...

The code snippet provided above has been simplified to focus solely on reproducing the issue. The other elements within my code, like additional rows, do not seem to be the cause of this problem.

Thank you for any help you can provide!

<!doctype html>
<html lang="fr>

<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="9af8f5f5eee9eee8fbeadaafb4abb4a9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-2">
        <div class="row text-center">
          <div class="col-md-4 col-sm-2">A</div>
          <div class="col-md-4 col-sm-2">B</div>
          <div class="col-md-4 col-sm-2">C</div>
          <div class="col-md-4 col-sm-2">D</div>
          <div class="col-md-4 col-sm-2">E</div>
          <div class="col-md-4 col-sm-2">F</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

htmlcssbootstrap-5

Answer №1

To make it work, simply replace col-sm-2 with col-2 as shown in the example below:

<!doctype html>
<html lang="fr">
  <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="1a7875756e696e687b6a5a2f342b3429">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>
  
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-2">A</div>
            <div class="col-md-4 col-2">B</div>
            <div class="col-md-4 col-2">C</div>
            <div class="col-md-4 col-2">D</div>
            <div class="col-md-4 col-2">E</div>
            <div class="col-md-4 col-2">F</div>
        </div>
    </div>
  </body>
</html>

Answer №2

No need for a breakpoint identifier. Simply use col-2.

<!doctype html>
<html lang="fr">

<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="d0b2bfbfa4a3a4a2b1a090e5fee1fee3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous>
</head>

<body>
  <div class="container>
    <div class="row>
      <div class="col-12 col-md-2>
        <div class="row text-center>
          <div class="col-md-4 col-2>A</div>
          <div class="col-md-4 col-2>B</div>
          <div class="col-md-4 col-2>C</div>
          <div class="col-md-4 col-2>D</div>
          <div class="col-md-4 col-2>E</div>
          <div class="col-md-4 col-2>F</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer №3

Just a reminder that Bootstrap utilizes breakpoints starting from small screens to larger screens. You can find more information about the grid behavior in mobile displays in this informative source. Thank you!

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

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

i need to wrap 2 HTML elements together Here is my code snippet using Vue.js <tr> <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th> <th v-for="(item99,index) in product_all" :key=" ...

javascriptphphtmllaravelvue.js

HTML form submitting with a symbol illustration

I am currently facing an issue with my website. I would like to create a search button using the symbol from fontawesome (<i class="fas fa-search"></i>), but I am unsure how to replace the form submission button with this symbol in order to sub ...

htmlcssforms

Display the progress bar's completion percentage during animation

Creating a progress bar using HTML with the following structure: <div class="progressbar"><div class="text">%0 Completed</div> <div class="progressbar_inner"></div> </div> Implemented jQuery code fo ...

jqueryhtmlcssprogress-barprogress

Tips for showing a message in the modal after a user completes the registration process

This code snippet contains an HTML form for user registration. Upon clicking the register button, users are redirected to another page. However, the desired outcome is to display the message on the same modal form. <div class="popup"> ...

phpjqueryajaxhtml

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, ...

htmlcssfirefox

Incorporating random images into diverse div containers every time

I previously asked this question, but it was too long and not specific enough. So here is a revised version of my query. For fun, I am creating a game based on instructions I found online. The game involves 12 cards with images face down. You click on two ...

jqueryhtml

Using the loop function within HTML in JavaScript with React

I'm trying to loop over my SliderComponent function with different inputs within the HTML to generate multiple components, but I can't seem to get it to work. I came across a solution online that involves building a string and returning it as HTM ...

javascripthtmlreactjsthree.jsgrommet

What is the best way to switch a single class using jQuery without impacting other elements with the same class

I'm in the process of implementing a commenting system similar to Reddit on my website. Each comment is equipped with a small button in the top right corner that allows users to collapse the comment. To achieve the collapsing effect, I am utilizing j ...

javascriptjqueryhtmlcss

The JavaScript function is not being activated by clicking on Selenium in Chrome

Take a look at the HTML snippet below: <table class="table-main "> <thead> <tbody> <!----> <tr class="" ng-if="mapCtrl.isAdded" style=""> <td/> <td> <td> <t ...

javascripthtmlangularjsselenium

IFrame displaying blank page instead of report

The following code snippet displays a report within an IFrame: HTML <div id="dialogReport"> <div> <iframe id="reportFrame" style="width: 800px; height: 600px; border: 2px solid black; margin: 10px auto;"> </iframe> </di ...

javascriptjqueryhtmliframe

How does Firefox still autocomplete even with a different input label?

How does Firefox decide where to autofill passwords and usernames? I've noticed that even after changing the name, id, title, or class of an input element, Firefox still automatically fills it with my password or email address. ...

htmlfirefoxautocomplete

AngularJS Expression Manipulation

I am looking to implement a functionality similar to the one below: HTML <mydir> {{config = {type: 'X', options: 'y'}} </mydir> <mydir> {{config = {type: 'a', options: 'b'}} </mydir> JS Dir ...

htmlangularjsangularjs-directiveangularjs-controller

Enlarge the DIV element along with its contents when those contents have absolute positioning

When attempting to overlay two divs like layers of content, I encountered a challenge. Because the size of the content is unknown, I used POSITION:ABSOLUTE for both divs to position them at the top left of their container. The issue: The container does no ...

javascriptcss

Arrange the given data either by ID or Name and present it

Here is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .content{ border: 1px solid gray; width: 250px; ...

javascriptjqueryhtml

Achieving dynamic height adjustments by setting a fixed width for the rectangular box in D3.js

I am currently working with d3.js to create a collapsing tree structure. My goal is to set a fixed width for the rectangle within the tree nodes. If the text content within the rectangle exceeds this fixed width, I would like the height of the rectangle to ...

jsonhtmld3.js

The problem of border-radius bleeding in Webkit when applying -webkit-transform

After creating a basic jQuery script to slowly rotate an image, I encountered an issue where the rotated image would bleed over the border-radius in Chrome. The rotation works smoothly in Firefox 4.0.1 but not in Chrome. To see the example and code, check ...

csswebkit

What are some solutions for repairing unresponsive buttons on a webpage?

My task is to troubleshoot this webpage as the buttons are not functioning correctly. Here’s a snippet of the source code: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div id="container" ...

javascripthtmlcssbarcode

Navigating between different pages using react-router-dom version 6.3

Currently in the process of refactoring a website and updating the rrd to v5, since the old version had components that no longer exist. We now need to work with the new component, as many are aware. Previously, I utilized framer-motion for transitioning ...

htmlreactjsreact-router-domframer-motion

Conceal elements within a div using the 'elementFromPoint' function

In my HTML, I have a div that contains an icon and some text. I want to make it so that when I hover over the div with my mouse, only the div itself is visible to the 'elementFromPoint' function. How can I achieve this? Here is an example of th ...

javascripthtmlcss

How do I go about configuring the uploaded image?

Here is a sample of my HTML code: <div class="images"> <figure> <button id="upload-add-product" class="icon-plus"></button> <input id="upload-file" type="file" style="display: none;" multiple/> </fi ...

javascriptjqueryhtmlcssupload