Base solution for your next web application
Open Closed

What is the Correct way to edit CSS #12490

User avatar
0
philipcj created

Hi

If I want custom CSS, I presume I can put it in my view-resources folder in the correct place.

But what if I want to put CSS (or JS for that matter) that is custom for my site? Whats the best way to do that? Is it the Common folder in view resources?

I also have a problem, I have been trying to find out where the CSS classes are. In 14.2, in my project, btn-xs is bigger than btn-sm, making the generated code look at bit weird. Sure I could change the btn-xs to btn-sm in my views, but I wanted to ask this question first to see if there was a better option.

My buttons look like this, when presumably, the larger button having btn-xs should be smaller than the one on the left

Many thanks

Phil

Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)
Go to accepted answer
4 Answer(s)
  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi @Phil

    You're correct if you want to apply view-specific styles, placing custom CSS files in the appropriate location under the view-resources folder is the right approach.

    The best practice is to place custom styles or scripts that are common across the whole site in the Common folder under view-resources/Areas/AppAreaName/Views/Common.

    And after adding, you can add this style to the bundles.json file to be added to a related bundle file or you can add it directly to the Layout.cshtml file.

    Style bundles for the btn-xs class are added to the frontend-libs.min.css file and added to the Layout.cshtml file. You can override the situation you specify in a general style file.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    philipcj created

    Thanks, as a newbie to aspnetzero I hope you don't mind me asking these questions. I kind of worked it out while asking the question but its always good to be sure.

    I'll do bundles.json, the thing that confused me about layout is what happens if I change theme? There are many layout files.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    philipcj created

    Hi I can't find the frontend-libs file apart from a reference in the public website. I have looked in bootstrap.css and there is no definition for btn-xs - it was removed in bootstrap 4.

    So I'm going to define it in my sitewide css, I like btn-xs :-( :-)

    The btn-xs came from the templates in 13.2 I haven't checked if the templates still have it in 14.2.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi @philipcj

    Yes, for both MVC and Angular, the Bootstrap Metronic theme is included by default. In MVC, Bootstrap script files are included via npm. As you mentioned, you can manually define and use btn-xs if needed. Since we are using Bootstrap 5, btn-xs is not included in the latest version.

    Thank you.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
Assignee
No one
Labels
None yet