Home/ Questions/Q 6801719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:08:03+00:00

I’d like to use Bootstrap from Twitter in my ASP.Net MVC 3 application. I

  • 0

I’d like to use Bootstrap from Twitter in my ASP.Net MVC 3 application. I downloaded bootstrap.css and added it to my project in the Content folder. I opened _Layout.cshtml and added a link to the file:

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />

When I run the application no stylesheet is applied. How do I reference both Site.css and bootstrap.css from my _Layout.cshtml file?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think the issue here is the inheritance, cascade and specificity CSS. Bear in mind that Twitter’s Bootstrap resets all styles.

    ‘If Site.css is before bootstrap.css only bootstrap is applied (which I didn’t realize at first). Reverse the order and both work. Strange’

    Actually, this makes complete sense. Site.css is loaded with all it’s style declarations and immediately afterwards Bootstrap.css is loaded which resets most(if not all styles) thus declarations within Bootstrap.css will be applied. It only appears that both work probably because Bootstrap.css might not have a defined style or Site.css has very specific style defined using html ids or classes.

    Reverse the order (with Bootstrap.css first), you are now resetting all styles first and then other styles are being applied. Since Site.css is loaded second, the styles defined therein will be applied to your site.

    For your own interest, try to define an inline style within your html doc that has been defined within both ‘Site.css’ and ‘Bootstrap.css’, and see how the style gets applied by adding/removing the style definition.

    I tried finding a good supporting explanation for CSS cascading, and the best graphic and simple explanation I found was this which notes

    If selectors within external and embedded style sheets conflict but
    have the same specificity, the final tie-breaker is based on the order
    of apperance of the rules: the rule declared later wins. This applies
    not only to the order of rules within a single sheet, but also to the
    order that the sheets are linked, imported or embedded in the head of
    the (X)HTML page.

    • 0