A few questions about some settings

Bootstrap Studio Help
1

Hi!

I know it’s unusual to create a topic for more than one question, but since it’s probably two simple questions for you, I’ll just do it now.

  1. I have a button that normally has no color, but a border with a color. When you hover it, it should change colors. I know how to do it with CSS, but are there no settings for this in BSS?

  2. I have a dropdown menu, and would like to set it so that when you hover over it with the mouse, it expands automatically. Are there no settings for this in BSS? I have found that it automatically collapses again when you click on it outside, but not that it opens automatically.

Am I blind and just can’t find it, or does it not work like that and you have to do it via CSS in BSS?

Thank you in advance!

Kind regards!

Alex

2

For the button, you can enable the outlined option from the options panel. It’s a toggle switch in the panel. For the dropdown, you’ll need to write a CSS class.
something like this

@media (min-width: 768px) {
  .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

@media (min-width: 768px) {
  .dropdown > .dropdown-toggle:active {
    pointer-events: none;
  }
}
1 Like
3

Thank you very much!

Now the dropwon works as it should.

With the outlined option isn’t it possible to change the hover color?
I guess I should do it with css?

4

On a button set the style to Primary in the options panel and enable outlined. Add this css in a styles.css. Change the colors to your preference

.btn-outline-primary {
  --bs-btn-color: #fd0d8f;
  --bs-btn-border-color: #fd0d8f;
  --bs-btn-focus-shadow-rgb: 253,13,143;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #fd0d8f;
  --bs-btn-hover-border-color: #fd0d8f;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #fd0d8f;
  --bs-btn-active-border-color: #fd0d8f;
  --bs-btn-disabled-color: #fd0d8f;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fd0d8f;
}
1 Like
5

Thank you very much!

That’s exactly what I was looking for!

6

Ok, the next silly question.
Maybe it’s because I don’t really understand atm how BSS works.

For example in the CleanSky Theme many (or most) of the divs with heading and paragraphs inside are centered. I can see in the CSS that there is a text-alignment:center!important, but this come from Bootstrap itself.

When I do this everything is on the left and I can’t find the setting to center either the div or the rest (heading/paragraph).

Where do the center setting come from and how can I achieve the same?

7

For block element as Heading and Paragraph, you set the alignment from the options panel.

heading

paragraph
For non block element as bold,span… you have them in a flexbox container and set the alignment from the options panel under flexbox

8

Thank you for your reply!

I thin I need glasses!