First proper BSS session with BS 5 - a few questions

Hi

Been working with BSS for the past day, my first decent session. I’m using Bootstrap 5 for various good reasons.

There are a few bits and pieces I have questions about. Any assistance/thoughts would be much appreciated:

  1. The drop-cap class when added to a p element is not working. Is this feature yet to be added, or am I doing something wrong?

  2. I haven’t been able to get icons as bullets working, so I just need to confirm the syntax, and best library to use. I copied some existing code that uses Font Awesome 5, and that worked in the editor, but not in the browser preview. Overall, I’m unsure of the cleanest way to use icons in BSS. BS 5 uses SVGs - are they secure to use in a CMS like WP? If not, how to get Font Awesome working? I’d prefer to use one library only…any suggestions?

Here’s what I have that’s not working out for me:

ul.my-ul {
    list-style-type: none;
    margin: 0;
}

ul.my-ul>li:before {
    content: "\f054";
    font-family: 'Font Awesome 5 Free';
    font-size: .85rem;
    font-weight: 900;
    margin-right: .6rem;
}

  1. The accordion is giving me some trouble. I’d like to:
    – Add icons to accordion (open, closed etc aligned far right, label aligned far left)
    – Get the other classes working. For example, accordion-flush has no effect…?
    – Ensure that all tabs are closed by default.

  2. The ordering of media queries within the CSS file. Is there a way to have it ordered automatically (largest to smallest), so that no manual checking is required? Perhaps I’ve missed this, or perhaps it is already a feature request. With so many media queries flying everywhere, it’s easy to get them out of the order they need to be in.

(If I should split these questions up, please let me know. I’m not sure what is preferred.)

Going backwards…

(4) Since Bootstrap 4x, Bootstrap has adopted a “mobile first” development stance. There’s no way to change the order in BSS (Bootstrap studio). The program follows the official Bootstrap release rules and guidelines. If you add your own media queries in a custom CSS file, the cascade is reversed from what you will see when you click on a class with a media query on the base Styles tab. By default, it will show the media queries from largest to smallest. In your custom CSS, you must put the media queries smallest to largest.

(3) Have you looked for Accordions in the Online Library? You can try looking at my online accordion by searching for “Ultimate Accordion with caret icon.” I believe it will do what you want. (most of my shared library components start with the word “Ultimate” but I have another shared Accordion called “Animated Accordion Icon” which is quite a bit different.)

(2) The simplest way to use icons in BSS is with the Icon component, but adding icons in place of bullets in lists is more complicated. Again, there are examples in the Online Library of lists that use icons in place of the standard bullets. Download one and look at how it’s been done. That was how I initially learned.

(1) Not sure about this, as I haven’t done a BS5 site yet (and I really never use drop-caps.) Maybe another user can answer this.

Thanks printninja for replying so quick.

So the question becomes: Can I import things from the Online Library if they were made with a Bootstrap version less than 5?

I have yet to build a website with version 5, but BSS allows you to update sites built in BS4 to BS5, so I don’t see why it wouldn’t allow you to use components made in BS4 in a BS5 site. Presumably, it would just update them if needed, or tell you if it couldn’t.

Simplest solution… give it a try. You’re not going to break anything if it doesn’t work.

I guess I can always just include a Custom Code component and add Bootstrap 5 as it appears in their official documentation…?

I think with the accordion the issue may be the fact that every part of it is locked.

The media query thing I guess I could manage; and the icons as bullets I’m still unsure.

As for the rest - like drop-cap - I am wondering if that is just not included yet in BSS. The reference I found is here: Style Guide · Bootstrap.

The Style Guide you are referencing is based on a older build of Bootstrap using Less. I dont think drop-cap is a class used in Bootstrap 5.

Here is the css they used though if you wanted to use the .drop-cap class:

.drop-cap:first-letter {
  float: left;
  margin: 0 7px -5px 0;
  font-size: 335%;
  line-height: 100%;
}

Its a nice reference page for some interesting stuff. I have bookmarked it for some ideas of a Blog implementation I am working on…

Personally, I’ve found there’s rarely a need to use the custom code component in BSS to solve a problem. I use almost exclusively for adding third-party code (forms, galleries, sliders, chatbots, etc.)

If you look around and experiment enough, you’ll find almost anything can be done through the program’s drag and drop components, Bootstrap’s helper classes, and the visual UI. Of course, if you don’t want your site to look “Bootstrappy” you have to get comfortable writing your own CSS. I’ve build many different websites (you can see a few below) and there aren’t a lot of obvious signs they were built using Bootstrap, other than maybe the buttons.

The BSS Accordion components are locked so the fundamental functioning of the according can’t be accidentally broken by newbies, but you can still add components to parts of the accordion that are locked, or change the layout and appearance through CSS.

Take a look at these two websites. These both use accordions that are built entirely from the basic BSS Accordion component and Font Awesome, but they look and work quite differently from the standard Accordion. I’ve added icons, changed the sizing, the areas you can click on to open them, made the text fluid using the viewport width rule. BSS’s Accordions are completely customizable.

https://wcaikido.com/west-coast-aikido-faq.html

https://bustosmartialartsofholbrook.com/#anchor-1

Regarding lists with icons instead of bullets, again, this is easily done. Here are two examples…

https://eliteinsites.com/ (scroll just below the top animation) That’s an li using icons instead of bullets

Portland Academy of Self Defense (scroll to the bottom section titled “We Promise” that is a li using icons instead of bullets)

Media queries are what they are. If you use Bootstrap, you just have to get used to the way Bootstrap handles them. It’s a mobile first framework now
XS (extra small, which is the default) is 360px to 575
SM (small) is from to 575px to 767px
MD (medium) is from 768px to 991px
LG (large) is from 992px to 1199px
XL (extra large) is from 1200 and up

Anything below 360px uses XS classes/rules and anything above 1200px uses XL classes/rules. If you want, you can always set your own custom media queries for odd sizes. I usually use 300px as my cutoff for XS because of that dumb Galaxy Fold device, and the iPhone 5 is like 325px. Big monitors are getting more and more common, so sometimes I’ll do some custom media queries for stuff over 1600px. I mean, not many people view websites on their big screen TVs, but you have to consider all the possibilities these days.

I would try downloading some stuff from the Online Library that DOES NOT use custom code blocks, and you’ll get a better idea of what can be done to customize the BSS built-in components.

Wonder why they’d drop the drop cap (no pun intended) from BS5? Guess it just wasn’t getting used much? Of maybe there’s an alternative/better solution yet to be discovered?

Thanks - yeah I should’ve just copied the source code, but I am wondering why it’s not part of BS 5… Anyway, I copied it, works like a charm. That link is definitely a stylish resource - have bookmarked it too.

Thanks again for your detailed reply. I have bookmarked your sites for structural reference - thanks for that! I took a look, and the things that Bootstrap can do are coming back to me now. Nice work and thanks for sharing (I see you have established a monopoly on martial arts websites…).

So having played around with things a bit more, this is where I’m at with the two main issues:

1. Accordion

When I try to use an accordion in BSS BS 5, it looks and functions differently from the one provided in the BS docs: Accordion · Bootstrap v5.0

So basically, I’ve just copied the official example into my project via Custom Code. Works beautifully, The icons are there, the styling is cleaner, it works with all the documented classes.

The drag-and-drop BSS accordion doesn’t have any open/close icons, and the documented accordion classes don’t seem to have any effect. Perhaps this is a result of being in Beta, though I’m unsure whether the Beta reference relates to BSS, or BS itself. My understanding is that BS 5 is pretty much production ready and is already being implemented professionally by creators.

I didn’t go down the route of importing previous BS accordions made with older versions from the Online Library. There’s just too much to alter, and I don’t know how they resolve the the fact that BS 5 doesn’t use jQuery. I just used the BS example via Custom Code. That’s fine for now.

2. Icons

I would like to use BootStrap SVG icons in my custom CSS (bullets etc). I am confused by how the documentation here: Bootstrap Icons · Official open source SVG icon library for Bootstrap and here: Chevron right · Bootstrap Icons relates to CSS in BSS. The BS examples aren’t all that clear - it would be nice if I could just use the BS web font icons and call them as “content” like Font Awesome. But I see no web font icon codes, just classes, and SVG spaghetti.

I’d rather not resort to HTML hex/unicode…but I might have to come back to this issue.

Anyway, that’s where I’m at.

Sent you a PM, so as to not create excess “topic drift.”