The grid columns are not wrapping properly as anticipated

I currently have a bootstrap-4 column setup that looks like this:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4">A</div>
    <div class="col-xs-6 col-sm-4">B</div>
    <div class="col-xs-6 col-sm-4">C</div>
  </div>
</div>

When viewed on different screen sizes, the expected layout is as follows:

XS:

[  A ]
[B][C]

SM and above:

[A][B][C]

However, on XS screens, each div takes up the full width separately:

[A]
[B]
[C]

You can view the issue in this JSFiddle snippet.

What do you think could be causing this problem?

csstwitter-bootstrapbootstrap-4bootstrap-grid

Answer №1

col-xs-* is not a valid class in Bootstrap

The correct grid options are:

  • col-*
  • col-sm-*
  • col-md-*
  • col-lg-*
  • col-xl-*

Source: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

If you intended to use the equivalent of `col-xs-*`, you should use col-* instead.

.row {
  background: #E2E2E2;
}

.card {
  border: solid 1px #6c757d;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          A
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          B
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          C
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

It appears that you are utilizing col-xs-, which is not a valid class in Bootstrap version 4.x. In this version, the small breakpoint actually represents the first one defined for mobile devices and higher.

If you want B & C to occupy half the size on mobile screens, I recommend structuring it like this:

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    A
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    B
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    C
                </div>
            </div>
        </div>
    </div>
</div>

If this doesn't align with your needs, consider shifting the breakpoint from sm to md.

Answer №3

Simply moving the "div class row" down one line should help resolve the issue you are facing.

Answer №4

After testing your code on "codepen.io", it executed flawlessly. It is possible that the version of the "CDN" being utilized by "jsfiddle" does not properly render the classes. It is crucial to ensure compatibility between the Bootstrap version you are using and whether you are relying on a "CDN" or downloading the files directly onto your local machine (.js, .css, etc.).

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

Initiate an animation as you scroll down

How can I create an animation that transitions from color to grayscale, triggered only when the user scrolls down? This is necessary because my website contains numerous images that require scrolling to reach. Check out the fiddle example here: http://jsf ...

javascriptjquerycsseventsanimation

Protractor tests encounter issues when working with Select2 within a modal in Angular

I am facing a challenge while running my angular e2e tests using protractor. In some cases, I have a select element inside a modal. The issue arises when the test fails to locate the select element with the following error message: NoSuchElementError: No ...

javascriptangularjstwitter-bootstrapprotractorangularjs-select2

Updating image on click in CSS and HTML

How can I change the image to display a different picture when clicked? I currently have a green image that, upon clicking, switches pages and transforms into a white image. Before Click https://i.sstatic.net/wBVCL.png After Click https://i.sstatic.net/Z ...

htmlcssnext.js

Issues with triggering onScroll event in Internet Explorer 11

<html> <head> <style> div {`border: 1px solid black; width: 200px; height: 100px; overflow: scroll;` } </style> </head> <body> <p>Experience the magic of scrollbar within ...

javascripthtmlcss

Increase the space below the footer on the Facebook page to allow for an

I recently created a webpage at and noticed that it is adding extra height below the footer on my Facebook page: "" I am seeking assistance on how to remove this additional 21px height below all content in the footer. I have tried various templates but n ...

javascriptphphtmlcssfacebook

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

javascripthtmlbootstrap-4bootstrap-modal

When viewing my website on a mobile device, all elements that are supposed to be hidden on the desktop version are displayed properly. However, when I resize the

I have implemented code in my css file to hide specific items from the topbar on my website. When I view the site on my desktop and inspect it with mobile view, the hidden items appear correctly concealed. However, when I access the website on my phone, ...

cssmobile

Achieve uniform display across browsers: Implement Chrome's overflow ellipsis feature on Firefox

I am seeking a CSS solution to achieve the same "overflow: hidden" and "text-overflow: ellipsis" behavior in Firefox as I get in Chrome. In Chrome, when the width of the tag is reduced, the text gets hidden and replaced with an ellipsis. However, in Firefo ...

htmlcssgoogle-chromefirefoxcross-browser

Angular background image not displayed

After searching extensively, I came across many examples that didn't work for me. I'm not sure what I'm doing wrong and I need assistance! I noticed that I can see the image if I use the <img> tag, but not when I try to set it as a ba ...

cssangulartypescriptsanitize

As one container is being moved, they both shift down simultaneously

I have set up a container named main that contains another container called banner, like this: <div id="main"> <div id="banner"></div> </div> Main has a gradient background and I want the banner to be positioned in the middle of t ...

htmlcss

What is the best way to choose all elements except for <body>? Alternatively, how can <body> be styled to its default appearance?

Web browsers often apply default styles to different elements, but users have the option to override these defaults using custom stylesheets. I personally like to customize these default styles with my own, for example: * {padding:0; margin:0; } However ...

csscss-selectorsuserstyles

Select elements in jQuery using both a specific selector and a negative selector

I am currently working with a JQuery function that highlights a specific word and scrolls to it: $('article.node--article p, .video-title').highlightWordAndScroll({ words : search_word, tag : '<span class="found_key ...

javascriptjqueryhtmlcss

Creating a personalized contact form with a mailto link that also includes the ability to automatically copy information into the email

I'm in the process of developing a basic contact form that includes input fields for name and subject, as well as a send button (which is an <a> element inside a <div>. I am utilizing an <a> tag because I intend to use mailto functio ...

javascripthtmlcssmailto

When attempting to print using React, inline styles may not be effective

<div styleName="item" key={index} style={{ backgroundColor: color[index] }}> The hex color code stored in color[index] displays correctly in web browsers, but fails to work in print preview mode. Substituting 'blue' for color[index] succe ...

javascripthtmlcssreactjs

Enter the Kannada language into the HTML text box or input field

My html form consists of about 15 - 20 input and textarea fields. As a user, how can I enter information in Kannda or any other local language? https://i.stack.imgur.com/60PVT.png ...

javascriptjqueryhtmlcss

Adjust the size of a component dynamically to match another

In this scenario, we are dealing with two columns labeled A and B. Typically, column A contains more content, resulting in a greater height of 126px, while column B has less content, leading to a shorter height of 94px. The challenge arises when the h ...

javascriptjqueryhtmlcss

Is there a method to prevent Apple OS from applying its default styles to form fields, scrollbars, and other elements?

Is it possible to remove the default Apple styling (such as the blue glow) applied to focused DOM elements in OS X or iOS using CSS or JavaScript? I've searched online but couldn't find any information on this topic. I'm starting to think t ...

cssiosmacosfocusnative

The calculator is experiencing issues with JavaScript functionality

Having some trouble developing a calculator using HTML5, CSS, and JavaScript. After passing my HTML and CSS through validators successfully, I encountered issues when adding JavaScript functions to enable the functionality of the buttons on the calculator. ...

javascripthtmlcss

Adaptable backdrop picture within a full-width container

Currently experiencing an issue with my website that requires some assistance. When a user visits my site, the image of the 'cutlery pouch' will resize based on the size of the user's browser or monitor. However, some users are seeing the b ...

htmlcssbackground-image

Whenever I nest my div tags within another div element in an HTML document

Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...

htmlcss