Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap Customization breaks component UI #5117

jd-solanki opened this issue Apr 8, 2020 · 4 comments · Fixed by #5121 or #5147 · May be fixed by leonyork/cognito-oauth2-demo#1

Bootstrap Customization breaks component UI #5117

jd-solanki opened this issue Apr 8, 2020 · 4 comments · Fixed by #5121 or #5147 · May be fixed by leonyork/cognito-oauth2-demo#1


Copy link

@jd-solanki jd-solanki commented Apr 8, 2020

Describe the bug

Hi, It's been 2 weeks I am using bootstrap vue for my project. It's very good. However, recently I came up with few issues.

Spacing Utilities:
In bootstrap-vue, we get some spacing utilities used in components like mx-1 or p-1. This is good for users but adding this to framework will break component styles if someone customizes bootstrap's spacer according to their needs. Below is some examples:


As I have just started exploring bootstrap-vue I haven't explored all components and flexibility they provide. But I have an issue with changing icon of calendar component's action buttons. So, providing an option for using custom icons will be beneficial for everyone.

Steps to reproduce the bug

Change bootstrap spacer utility.

$spacer: 1rem;
$spacers: ();
$spacers: map-merge(
    0: 0,
    25: (
      $spacer * 0.25,
    50: (
      $spacer * 0.5,
    75: (
      $spacer * 0.75,
    1: (
    2: (
      $spacer * 1.5,
    3: (
      $spacer * 3,
    4: (
      $spacer * 3.5,
    5: (
      $spacer * 4,

Expected behavior

I have checked other library before creating this issue and I found that reactstrap don't use any spacing utilities. So, even if someone changes bootstrap's customization UI doesn't look weird.



  • BootstrapVue: 2.11.0
  • Bootstrap: 4.4.1
  • Vue: 2.6.11


Not required

Demo link


Additional context


Copy link

@jacobmllr95 jacobmllr95 commented Apr 8, 2020

@jd-0001 Solid point. Using the utilities saves us a lot of custom CSS but I think we have to makes sure we don't use the ones that with user-customization support.

Good: mr-0, p-0, d-none
Bad: mr-1, p-2

Copy link

@tmorehouse tmorehouse commented Apr 8, 2020

For calendar/datepicker, we will be switching the navigation buttons to either a button-group layout or row/col layout (which will remove the need for the padding)

For <b-toast>, the layout of the header is based on the BootstrapV4.4 example header layout

Copy link
Contributor Author

@jd-solanki jd-solanki commented Apr 10, 2020

Hi @tmorehouse before you close this issue, I just want to confirm that will I be able to change each icon according to another library(I am using BoxIcons)?

Copy link

@tmorehouse tmorehouse commented Apr 10, 2020

The first PR (#5121) will remove the margin/padding utility classes (in exchange for making the custom SCSS a little bigger)

There will be a second PR (hopefully this weekend after PR #5121 is merged) that will create slots for each of the top nav button content (so you can replace the icons)

We want to keep different types of new features is separate PRs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment