What are the possibilities of utilizing both Bootstrap 5 grid and Bootstrap 4 grid interchangeably?

After working with Bootstrap 4 in my Angular 12 project for some time, I decided to upgrade to Bootstrap 5 today. While I know that some properties have changed, I thought the grid system remained unchanged.

I often use "Mix and Match" columns as described in the documentation, such as:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm"></div>
    <div class="col-12 col-sm-auto"></div>
    <div class="col-12 col-sm"></div>
  </div>
</div>

This setup worked perfectly fine with Bootstrap v4.*, but it's not functioning properly with v5.

The intended layout is to have only one row where the first and third columns expand to fill all available space, while the second column adjusts based on its content.

Upon inspecting Chrome DevTools, I noticed that the col-12 class seems to take precedence over col-sm even on larger screens.

https://i.sstatic.net/aud55.png

Any suggestions on how to tackle this issue?

cssangularbootstrap-4sassbootstrap-5

Answer №1

As I mentioned in a previous response, the issue can be traced back to a bug that was introduced in version 5.0.2 of Bootstrap. This bug causes col-12 to override col-sm on all breakpoints due to a change in the order of column declarations.

To work around this issue for now, you can simply remove the unnecessary col-12 since it is already the default setting...

<div class="container">
  <div class="row">
    <div class="col-sm">col</div>
    <div class="col-sm-auto">col</div>
    <div class="col-sm">col</div>
  </div>
</div>

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

What is the best way to ensure synchronous function execution in Angular?

Consider the following scenario: ServiceA is accessed by two components with inputs. ComponentA contains a textArea while ComponentB has a toggle button. Whenever these components are changed, ServiceA.save() is triggered, which subsequently makes an HTTP ...

javascriptangularfunctionasync-await

Adding a QR code on top of an image in a PDF using TypeScript

Incorporating TypeScript and PdfMakeWrapper library, I am creating PDFs on a website integrated with svg images and QR codes. Below is a snippet of the code in question: async generatePDF(ID_PRODUCT: string) { PdfMakeWrapper.setFonts(pdfFonts); ...

javascriptangulartypescriptpdfqr-code

bootstrap5 is unable to transform an undefined or null value into an object

Struggling to implement a new modal using Angular 11 and Bootstrap 5, encountering the following error: ERROR TypeError: Cannot convert undefined or null to object at Function.keys (<anonymous>) at Object.getDataAttributes (bootstrap.esm.js:8 ...

angularbootstrap-modalbootstrap-5bootstrap5-modal

Enhancing user experience with Bootstrap's body padding and customizable scrollbars

Recently, I encountered an issue with the footer color in bootstrap. To fix this problem, I created a div and removed the extra padding from the body element. You can view the code snippet here: jsfiddle.net/wctGM/9/ However, when viewing the mobile ver ...

htmlcsstwitter-bootstrap

Ways to adjust the text size in jqGrid?

The current theme is ui-lightness. How can I adjust the font size within the grid? Your suggestions are appreciated. Many thanks. ...

javascriptjquerycssjquery-uijqgrid

having difficulty accessing the value within the Angular constructor

My current issue arises when I click on a button and set a value within the button click method. Despite declaring the variable in the constructor, I am unable to retrieve that value. The code snippet below demonstrates this problem as I keep getting &apos ...

javascriptangulartypescript

Using CSS to overlay a fixed element with a specific z-index

HTML: <div class="wrap"> <div class="fixed"></div> </div> <div class="cover"></div> CSS: .cover{z-index: 10;} .wrap{position: relative; z-index: 1;} .fixed{position: fixed; display: block; z-index: 1;} Example: ...

htmlcsscss-positionfixed

How to Add RouterModule to an Angular 10 Library without Ivy

I am developing a custom Angular 10 Library to be shared on a private NPM repository. I followed the instructions from Angular.io and used ng new my-workspace --create-application=false and ng generate library my-library with Angular CLI. In one of the co ...

angularnpmivy

What could be the reason for the lower section of my website not being displayed?

I'm having an issue with a new div I added to the bottom half of my website - it's not showing up. Oddly enough, when I test the same code on a separate web page, it works fine. Can someone please take a look at the code and help me out? Thank yo ...

pythonhtmlcssdjango

Button to close on the right side of the navigation bar in Bootstrap version 4

Attempting to customize a navbar with Bootstrap 4, I have implemented the following modifications: Positioned the Collapse button on the right-hand side Separated the BrandName from the collapse area to ensure it remains on the left side Below is the co ...

htmlcsstwitter-bootstrapbootstrap-4

Guide on how to align an element (such as a drop-down menu item) directly beneath the parent menu

Is there a way to position a dropdown menu item underneath its parent menu? I want the child dropdown menu to only appear when the parent menu is hovered over. I tried positioning the child elements using position:absolute and adjusting the top and left c ...

php.nethtmlcss

Adding JavaScript files to a project in Ionic2 with Angular2 integration

I'm looking to incorporate jQuery into my Ionic2 app, which requires loading several JavaScript files: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/j ...

javascriptjqueryangularionic2calendar

Repositioning a div element within a different parent div

Is there a way to transfer the contents of one div to another using Javascript? I am looking to move the contents of .sidebar from .post to .carousel. Can someone provide guidance on how to achieve this using Javascript? I aim to transform the structure ...

javascriptjquerycss

Encountering a 401 Error while Sending a POST Request in Angular 2

I am facing an issue with sending data to the provider while trying to create a post on my website. Although I can correctly display the information on the page, the data is being sent as undefined or with an empty result to the provider. The errors disp ...

angular

The image appears uniquely sized and positioned on every screen it is viewed on

After reviewing the previously answered topics on the site, I couldn't seem to make the necessary adjustments. Despite setting the size and location in the css file, the large image remains centered and fitting for the screen. The "imaged1" class seem ...

cssmobilecss-positioncompatibility

Tips for aligning three cards in a row using Bootstrap-5

In my Django template for loop, I am trying to display the first three cards from the database on the same line. Currently, only two of them are staying on the same line and I want all three cards to be aligned horizontally. <div class="row"&g ...

pythonhtmlcssdjangobootstrap-5

Issue: Map container not located when implementing a leaflet map with Angular

Here is the complete error message: core.js:6479 ERROR Error: Map container not found. at NewClass._initContainer (leaflet-src.js:4066) at NewClass.initialize (leaflet-src.js:3099) at new NewClass (leaflet-src.js:296) at Object.createMap [a ...

htmlangulartypescriptleafletmapbox

What exactly do Dependencies mean in Angular?

As a beginner in Angular, the concept of dependencies has come up several times during my learning process. Despite my efforts to search for a clear definition of Dependencies in Angular on Google, I have been unsuccessful. Could someone please provide a ...

angularnpmnpm-install

Using subscribe method to return an observable within a function

Looking to develop a service that interacts with the Spotify API, I require an authorization bearer token. The token is obtained from another service, which returns an observable. How can these two components be integrated together? Initial attempt: getS ...

node.jsangulartypescriptobservablehttpclient

Decrease the border-radius shorthand mixin, deactivate the variable

I have been working on creating a mixin for border-radius that will only apply when the values, determined by a variable, are greater than or equal to 0. I have set the default value in a variable as 3px, so if I input -1 or 'no', the border-radi ...

variableslessmixinscssshorthand