Bootstrap/CSS for Course Design

[cgaudreau]

Hi, everyone.

There are a few posts referencing Bootstrap/CSS that go back a few years, so trying to bubble this back up to the surface.

I'm reviewing CSS as a way to increase instructional design workflows, as well as make code more equitable and useful for our team.

Currently, I'm running into an issue with iconography from Bootstrap not being recognized in my styles.css file uploading to the beta theme editor. Wondering if anyone else out there is interested in working together to solve some issues that can be beneficial to the larger group? I'm not terribly worried about the placement of it yet, just the functionality of seeing it in action. (Eventually, I'd like to see the icon to the left of the text. Such as; [icon] Student Learning Objectives or [icon] Learning Materials.)

Thanks, in advance! I'm dropping my code - with a generic icon selected - below as to where things are at:

#StudentLearningObjectives {
    color:black;
    background-color: #d6d6d6 ;
  
}
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css");
.bi::before {
    display: inline-block;
    content: "";
    vertical-align: -.125em;
    background-image: url("data&colon;image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
  }

[matthew_buckett · Accepted solution]

I haven't tested this in Canvas but I wonder if it's not working because you needs to have `@import` be at the top of your CSS file. The documentation mentions this is being required: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

[cgaudreau]

Yep, @matthew_buckett - that seems to have done the trick. Thank you! Now, to make sure it doesn't bork our course evaluation CSS. Wondering how two "@import" tags will work together. Going to continue testing in beta. But, the first signs are promising. Next step is to alter the color...but this was a huge leap. Appreciate it!