Bootstrap 5 introduces a new feature where col-sm-6 will take precedence over col-md

When using Bootstrap 5, I encountered an issue where the columns were not sizing evenly in a row. Specifically, on small screens, I wanted them to be exactly size 6. In this case, the columns should have been size 3 for screens larger than md, but they ended up being size 6 regardless of the screen size. Upon removing col-sm-6, the columns behaved as expected. My lack of experience with Bootstrap is evident here, indicating that there may be something I didn't quite grasp.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5cbd5c9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a544a56">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container-fluid mt-5">
  <div class="row">
    <div class="col-md col-sm-6">
      <div class="card text-white bg-success mb-3 mx-auto" style="max-width: 18rem;">
        <div class="card-header text-center">1111111</div>
        <div class="card-body">
          <p class="card-text text-center">1111111</p>
        </div>
      </div>
    </div>
    <div class="col-md col-sm-6">
      <div class="card text-white bg-success mb-3 mx-auto" style="max-width: 18rem;">
        <div class="card-header text-center">222222</div>
        <div class="card-body">
          <p class="card-text text-center">2222222</p>
        </div>
      </div>
    </div>
    <div class="col-md col-sm-6">
      <div class="card text-white bg-success mb-3 mx-auto" style="max-width: 18rem;">
        <div class="card-header text-center">33333333</div>
        <div class="card-body">
          <p class="card-text text-center">3333333</p>
        </div>
      </div>
    </div>
    <div class="col-md col-sm-6">
      <div class="card text-white bg-success mb-3 mx-auto" style="max-width: 18rem;">
        <div class="card-header text-center">444444444</div>
        <div class="card-body">
          <p class="card-text text-center">444444444</p>
        </div>
      </div>
    </div>
  </div>
</div>

Result: enter image description here

htmlcssbootstrap-5

Answer №1

Did you consider specifying the column order? It can be a bit tricky to work with Bootstrap breakpoints.

For example, using col-md col-sm-6; and col-12 means that when the screen width is less than 576px, it will display as 6 columns. Conversely, when the screen width is above 576px, it will show in a single column occupying all available space.

If you need more information on breakpoints, you can refer to this link: https://getbootstrap.com/docs/5.3/layout/breakpoints/

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

Stop jQuery from resetting the background image when using fadeOut()

Currently, I am using fadeIn and fadeOut functions with jQuery to create a fading effect. However, when the final fade out occurs, the entire CSS table fades out and the background image of the CSS body comes into view. Despite setting the background-posit ...

jqueryhtmlcssweb

Swapping mouse cursor using JavaScript

Currently, I am working on a painting application in JavaScript that utilizes the Canvas Object. I would like to customize the mouse cursor when it hovers over the Canvas object. Can anyone advise me on how to accomplish this? ...

javascriptcssmouse-cursor

How can I transform an HTML div into a video file like MP4 using Python and Django?

I'm looking to take a HTML page and target a specific <div> within it in order to convert it into video format. Purpose: I understand that HTML is typically static, but I have a requirement to transform it into a video. I'm seeking method ...

javascriptpythonhtmljquerydjango

Is it feasible in Vue to import an scss file with deep selectors into the scoped styles of a component?

Is it possible to extract a Vue component's scoped SCSS with deep selectors into a separate file and then import it back in? For example: // Main.vue <template> <div id="main"> <h1>Title</h1> <span>Text< ...

cssvue.js

What could be causing my backend to malfunction while the website is live?

Currently, I am working on a PHP5 dynamic site where content such as galleries and news can be added from the backend. Everything was functioning perfectly fine on my localhost, but when I uploaded it online, the dynamic part stopped working. The default P ...

phphtmlcssmysqlbackend

What is preventing Safari and Firefox from properly handling audio data from MediaElementSource?

It appears that neither Safari nor Firefox can process audio data from a MediaElementSource with the Web Audio API. var audioContext, audioProcess, audioSource, response = document.createElement('h3'), display = document.createElement( ...

javascripthtmlfirefoxsafariweb-audio-api

Launching an HTML document with checkboxes already selected

I am attempting to load my HTML page with checkboxes already checked if they were selected on the previous page. The code I currently have is shown below: {% if job.activism %} checkbox logic goes here {% endif %} <br><input type="checkbox ...

javascriptpythonhtmldjango

Adjusting the position of a stationary element when the page is unresponsive and scrolling

Managing a large web page with extensive JavaScript functionality can be challenging, especially when dealing with fixed position elements that update based on user scroll behavior. A common issue that arises is the noticeable jumping of these elements whe ...

javascriptjqueryhtmlcss

Utilizing JQuery for a smooth animation effect with the slide down feature

I have a question about my top navigation bar animation. While scrolling down, it seems to be working fine but the animation comes with a fade effect. I would like to achieve a slide-down effect for the background instead. Since scrolling doesn't trig ...

javascriptjqueryhtmlcssanimation

Conceal a division using CSS based on its data-role attribute

After extensive research, I have yet to find a solution. Let's say there is a div structured like this: div[data-role="form-footer"] What would be the most effective method for hiding it, and can it be done using CSS? I've tried the f ...

htmljquerycss

Avoiding the overflow of the y-axis by applying a slight left margin to bootstrap columns

Context: I'm in the process of developing a collapsible sidebar navigation menu inspired by the bootstrap admin panel example found at: Issue: Upon collapsing the admin bar, a small bar of icons appears. To accommodate this, I added margin-left: 50 ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Spinning an SVG path with CSS3 in a circular motion from its central axis

I have a collection of SVG paths, and one of them is displayed below: <path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36. ...

htmlcsssvgcss-animations

creating a new page upon clicking a div element

I need assistance in creating an effect similar to the one found on this website - where clicking on a div opens a new page. ...

jqueryhtmljquery-uidom

What are the steps to insert a plotly graph into a webpage so that it responds to different

I have been working on integrating a plotly pie chart into my website. In order to make the iframe responsive, I decided to utilize this specific tool to generate the necessary html/css. While the chart appears satisfactory on a laptop screen, it is barely ...

htmlcssiframeplotlyresponsive

The HTML required attribute seems to be ineffective when using AJAX for form submission

Having trouble with HTML required attribute when using AJAX submission I have set the input field in a model Form to require attribute, but it doesn't seem to work with ajax. <div class="modal fade hide" id="ajax-book-model" a ...

javascripthtmlajaxlaravel

Manage the number of items in each column using flexbox or grid layout strategy

Here's a similar situation .items { width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; background: #cecece; padding: 10px; margin: 20px; } .item { height: 100%; flex: 0 0 calc(50% ...

cssflexboxgrid

What is the best way to incorporate a description box for each city on the svg map that appears when you hover your mouse over it?

I am looking to display detailed descriptions for each city in the same consistent location on my map. With multiple pieces of information to include for each city, I want to ensure that the description box is positioned at the bottom of the map. Can any ...

javascripthtmlcsssvg

Monitoring user clicks using JavaScript code implemented

Currently, I am utilizing a JavaScript file to load on certain pages in order to track various events. Within this JavaScript file, there is a collection of selectors that have listeners attached to them. When these selectors are clicked, the tracking AP ...

javascripthtml

I need assistance in validating and processing an HTML form that takes input from a UI login interface while utilizing the Fiber framework in the Go programming language

Can you assist me in capturing input data using the Fiber Golang framework? <form action="/" method="POST" novalidate> <div> <p><label>Email Address:</label></p> <p><inp ...

htmlnode.jsjsongogo-fiber

Gradually shifting alignment of Bootstrap tooltips

I am encountering an issue with Bootstrap tooltips They seem to be progressively off-center Below is the code I am using for the icons {{#each guilds}} <div class="col-sm-1"> <a href="/dash/{{this.id}}"> <div class="gicon"> ...

cssbootstrap-4handlebars.js