Skip to content
Submitted over 2 years ago

Interactive rating component

#jquery#bootstrap
Taylor•50
@TaylorC19
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This was my first attempt in using flexbox in a project.

Questions: It seems bootstrap adds a border effect to the button when you press the button. I tries almost every thing I could think of and then went to stack exchange to try and remove that border effect, but I could not seem to remove it. I left the things I attempted to use in my styles.css sheet but commented it out. My question is how do you remove that border effect to a bootstrap button.

I only used flexbox to space out the buttons on the scale section. Would it be good practice to use flexbox on the scale and thank you divs themselves, or is my way fine?

Thank you

Community feedback

  • Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hi, you did a great job on this challenge! To remove the border effect just add border:0 in your .btn class. To remove the border effect from the 5 rating buttons, you can add this in your css file: .btn.active:focus, .btn.show:focus, .btn:active:focus{ border: 0; box-shadow: 0 0; } You can find these fixes by seeing the styling in dev tools. Yeah, I think flexbox is a good and easy way to space out the buttons.

    Hope this helps! :)

    Marked as helpful
    0
    Taylor•50
    @TaylorC19Posted over 2 years ago

    @krrish105 That did it! I spend so much time going through google, dev tools, bootstrap documentation, ect. Thank you

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord