CODEWITHSUNDEEP
htmlcssasp.netasp.net-mvctwitter-bootstrap
Mvc Learner
Mvc Learner

Reputation: 229

mvc asp.net visual studio how to override bootstrap.css file

M trying to build a website using Mvc asp.net in Visual Studio 2013. I've bundled my css file-'style.css' to the project, but my website has undesirable white spaces and margins around headers and other important elements, in spite of setting margin:0 in my css. I found that the bootsrap.css file that is in the project by default is causing this. How do i override the bootstrap.css file? Because it is for main elements like header and container, being specific does not help. M a beginner in this. Please help me with a solution.

Upvotes: 3

Views: 7138

Answers (5)

Sujoy
Sujoy

Reputation: 1366

  1. Order of the CSS files is important.
  2. Ensure the names of files are a exact match (watch out for caps). For eg, if you have file style.css in 'Content' folder and you enter ~/Content/Style.css, then it will not work. Replace the first capital 'S'.

  3. Ensure to have correct folder name of file in BundleConfig.cs Go to BundleConfig.cs and replace ~/Content/css section with below code:

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/Site.css",
              "~/Content/style.css"));

Upvotes: 1

James Gardner
James Gardner

Reputation: 506

Place the <link /> element for your style.css after the bootstrap element. The styles are applied in order, so your style.css file will be applied over the bootstrap styles.

Upvotes: 1

Bharathi Dasan
Bharathi Dasan

Reputation: 59

Place the Style.css after bootstrap.css For Example : <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" />

Upvotes: 2

Fred Mauroy
Fred Mauroy

Reputation: 1229

You could add the "!important" tag to your style items if you see that your attributes are not taken into account.

https://css-tricks.com/when-using-important-is-the-right-choice/

Upvotes: 1

anand
anand

Reputation: 1579

Create your own custom css file and place it after the bootstrap.css file in bundle config. when the browser renders, the bootstrap renders first and then your custom css renders and overriding the css of bootstrap

Upvotes: 1

Related Questions