Why are there multiple css files?

Bootstrap Studio Help
1

Issue Tracker2 (unsaved) - Bootstrap 5 7_14_2022 11_09_05 AM
What is the difference between Minimal-tabs.css and Mnimal-tabs-styles.css?
And why do I have 3 css files for tabs?

I now have classes with same name in different css files and this confuses me.

What should I do about it?

2

Can you provide more context to your question? Are these CSS files in one of the BSS templates, or from online components? It’s hard to answer your question without seeing the contents of these CSS files.

3

It automatically created them when I created a new class for example. Or sometimes when I paste a class name into html it already had the class or created it.

4

Minimal-tabs and minimal-tabs-styles are both from the online component minimal-tabs. (BS3)
Bootstrap-Tabs.css is from the online component Bootstrap tabs (BS4)

Personally, I would look at the css to give you an idea of what you want, and create it in a new document.

The problem with the online components, is that 90% of them are **** (not very good)

5

aha these got created when I imported online components. Are css files also created automatically otherwise?

6

Yes, when you import a component it will also import any css, as well as javascript and images, depending on what the component creator attached.

If you want to do something like the minimal tabs you can just add this css:

.minimalTabs .nav-link {
  border: 0px solid;
  border-bottom: 5px solid var(--bs-gray)!important;
}

.minimalTabs .nav-link.active {
  border-bottom: 5px solid var(--bs-red)!important;
}

Then drag a standard tab component and give it a class of minimalTabs

Then make sure your tab items options are set as this:

image

Should give you the same effect.

Edit: You could also add something like this if you want a hover effect on the tabs:

.minimalTabs .nav-item:hover {
  background: var(--bs-gray-200);
}
7

Thanks but I’m using Scrollable Tabs for Bootstrap 5 | scrollable-tabs-bootstrap-5 for the tabs. I was just confused a bit with the class names since some classes I imported from this github were named the same in my bootstrap studio project.

There are also some locked classes which are named the same:

image
image1335×111 3.59 KB

Should I rename classes when I import from somewhere else? Why can’t I edit locked classes? When I copy them for edit should I also rename them?

8

the ‘locked’ classes are bootstrap defaults.

If you want to edit them then click on the 3 dots to the right of the image you just posted and click copy to.

Personally, I try to leave the defaults as they are and add a class, otherwise, using the nav as an example, you could want to add a standard nav somewhere else on your site (Like the main navbar), and all the css would be wrong.

so: <ul class="nav nav-tabs minimalTabs"> would give you one style, whereas <ul class="nav nav-tabs "> would give you the default

1 Like
9

You should also watch which version of Bootstrap a component is for as that will sometimes cause duplicate class attributes (differently named classes with the same attributes) and sometimes usability issues as well.

If you are making a BS 5 project, you should try to stick to mostly BS5 components if you get them from the Online Components. Many BS 4 ones will work well also, but be sure there isn’t a BS 5 alternative first.

BS 3 components will mess you up quite a bit as it wasn’t a Mobile First setup and now we use that system so you shouldn’t use them at all on a BS4 or 5 project unless you’re equipped to alter them to work correctly.

1 Like