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

Question

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.

in your style.css stylesheet, add !important after your styles and that will override the bootstrap css for that element. — Grizzly
– Grizzly, Commented Mar 15, 2016 at 12:25
hi, I tried all these, but the problem still exists. To be more specific, my container is not occupying full width of the screen, although I've specified margin:0 and padding:0. The container class is not stretching fully to the right side of the screen, even after specifying margin-right:0. I even tried margin-right:-15px.. Still no effect. Please help. I've been stuck with this for soo long. — Mvc Learner
– Mvc Learner, Commented Mar 16, 2016 at 1:20

Bharathi Dasan · Accepted Answer · 2016-03-15 12:23:22Z

2

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

answered Mar 15, 2016 at 12:23

Bharathi Dasan

591 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anand · Accepted Answer · 2016-03-15 12:17:31Z

1

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

answered Mar 15, 2016 at 12:17

anand

1,5895 gold badges21 silver badges47 bronze badges

Comments

Fred Mauroy · Accepted Answer · 2016-03-15 12:18:54Z

1

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/

answered Mar 15, 2016 at 12:18

Fred Mauroy

1,2291 gold badge11 silver badges10 bronze badges

Comments

James Gardner · Accepted Answer · 2016-03-15 12:23:24Z

1

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.

edited Mar 15, 2016 at 12:23

answered Mar 15, 2016 at 12:15

James Gardner

5062 silver badges7 bronze badges

1 Comment

James Gardner Over a year ago

If you want more specific help, you will need provide more detail about the issues you are having.

zx485 · Accepted Answer · 2018-03-27 23:15:58Z

1

Order of the CSS files is important.
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'.

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"));

edited Mar 27, 2018 at 23:15

zx485

29.1k28 gold badges55 silver badges65 bronze badges

answered Mar 27, 2018 at 22:54

Sujoy

1,3862 gold badges10 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related