Using @extend with numeric classes in Bootstrap 5: A step-by-step guide

Question

Using @extend with numeric classes in Bootstrap 5: A step-by-step guide

I am looking to migrate some classes from Bootstrap 4 to 5 because some of the Bootstrap classes are no longer usable, especially in utilities. I am using SASS so I can utilize @extend for this process.

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

For classes .text-left and .text-right, extending them is straightforward:

.text-left {
  @extend .text-start;
}

.text-right {
  @extend .text-end;
}

However, when it comes to classes like (.ml- and .mr-) or (.pl- and .pr-), I am unsure how to efficiently extend them without having to input each one individually (e.g., .ml-1, .ml-2). Is there a way to extend them all at once instead of multiple individual extends?

css twitter-bootstrap bootstrap-4 sass bootstrap-5

Answer 1

Answer №1

Issue resolved by implementing a looping @for method as outlined in this helpful guide: https://sass-lang.com/documentation/at-rules/control/for

@for $i from 1 through 5 {
  .ml-#{$i} {
    @extend .ms-#{$i};
  }
}

Answer 2

Issue resolved by implementing a looping @for method as outlined in this helpful guide: https://sass-lang.com/documentation/at-rules/control/for

@for $i from 1 through 5 {
  .ml-#{$i} {
    @extend .ms-#{$i};
  }
}

Answer 3

Answer №2

You have the option to use BS5 API for altering utilities class names:

$utilities: (
  "margin-end": (
    responsive: true,
    property: margin-right,
    // Changing BS5 me-* classes to mr-*
    class: mr,
    values: map-merge($spacers, (auto: auto))
  ),
  "margin-start": (
    responsive: true,
    property: margin-left,
    // Transforming BS5 ms-* classes to ml-*
    class: ml,
    values: map-merge($spacers, (auto: auto))
  ),
  // ...other utilities
);

Include your custom $utilities above the import of BS5 utilities file (@import "~bootstrap/scss/utilities") to apply these updates;

This approach eliminates the need to add new BS5 classes in your code.

Answer 4

You have the option to use BS5 API for altering utilities class names:

$utilities: (
  "margin-end": (
    responsive: true,
    property: margin-right,
    // Changing BS5 me-* classes to mr-*
    class: mr,
    values: map-merge($spacers, (auto: auto))
  ),
  "margin-start": (
    responsive: true,
    property: margin-left,
    // Transforming BS5 ms-* classes to ml-*
    class: ml,
    values: map-merge($spacers, (auto: auto))
  ),
  // ...other utilities
);

Include your custom $utilities above the import of BS5 utilities file (@import "~bootstrap/scss/utilities") to apply these updates;

This approach eliminates the need to add new BS5 classes in your code.

Using @extend with numeric classes in Bootstrap 5: A step-by-step guide

Answer №1

Answer №2

Similar questions

JavaScript MP3 player

Learn how to center content and stretch a column using Vuetify frameworks

What causes the discrepancy between 1px and 0px padding on floating divs in various web browsers?

"Encountered an error while trying to access properties that

CSS: Problem Arising from Line Connections Between Tree Elements

Slider UI handle in jQuery sliding out of the div container

Overriding makeStyles CSS in Material UI Styling

Displaying user input data in a separate component post form submission within Angular

Information is not transferring to Bootstrap modal

Set a consistent pixel measurement for all images

Alignment of Bootstrap thumbnails in a horizontal layout

Creating parallel lines utilizing pseudo elements

Specify the location of the resize button (corner)

Is there a way to automatically scroll vertically to a specific line in HTML?

The jQuery DataTable with footer is lacking responsiveness

Using `margin: auto;` alone will center a div horizontally, but it won't

Misalignment of Font-awesome icons in the footer section

How can I use jQuery to set a background image and position on a website?

The Issue of Horizontal Scrolling - None of the elements are out of

Ensuring the CSS animation reaches its ultimate state by the end