Override equal bootstrap classes to use bootstrap css?

Question

I have an MVC4 project with a global.css class and i have added recently bootstrap but result that in my global.css class i have some classes that are with the same name so i decided to make a bootstrap_migration.css where i put some of the bootstrap classes with the prefix class .bt and in my html i put something like class="bt container" and everything works fine.

Something like this on my bootstrap_migration.css:

.bt .jumbotron {
  padding: 30px;
  margin-bottom: 30px;
  font-size: 21px;
  font-weight: 200;
  line-height: 2.1428571435;
  color: inherit;
  background-color: #eeeeee;
}

But do i have a better way to do this?

2 ways:1. include the css you want to apply in the latter or 2. use !important to override — Godinall
– Godinall, Commented Dec 12, 2013 at 13:47
You say everything works fine, so what are you asking? I understand you ware looking for a "better" way, but what else have you tried. How good is your understanding of CSS. — Jacques
– Jacques, Commented Dec 12, 2013 at 13:49
I dont want to make the bootstrap_migration.css class... it's a pain, that's why i'm asking :) — Phoenix_uy
– Phoenix_uy, Commented Dec 12, 2013 at 13:50
If you add your custom CSS after the bootstrap css any classes with the same name in bootstrap will be overridden with the new rules (assuming your specify the same rule types) — Jacques
– Jacques, Commented Dec 12, 2013 at 13:51

scooterlord · Accepted Answer · 2013-12-12 13:39:04Z

3

you shouldn't leave a space in the classes. it should be

.bt.jumbotron

edit: .bt .jumbotron means that .jumbotron is a child of .bt and do not apply to the same element.

answered Dec 12, 2013 at 13:39

scooterlord

15.4k11 gold badges54 silver badges75 bronze badges

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

Comments

Diego Biscaia · Accepted Answer · 2013-12-12 13:43:33Z

1

.bt.jumbotron

Just do not leave spaces between the classes.

Spaces between classes mean that is a child of another.

answered Dec 12, 2013 at 13:43

Diego Biscaia

592 silver badges7 bronze badges

2 Comments

Phoenix_uy Over a year ago

Ok.. i should do that. But my question is pointed to not do this at all. I mean.. use the bootstrap original css and my global.css :)

Diego Biscaia Over a year ago

Then use !important in your css, so you can use along with their bootstrap. link

Steini · Accepted Answer · 2013-12-12 14:46:48Z

Add a new css file like "booststrap-custom.css" and include it after! your bootstrap.css in the html header.

Example:

<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootrstrap-custom.css" />

Then you can override any classes of bootstrap without touching the bootstrap.css file by simply copying the element definition into your custom file and override your custom attributs there.

Firebug is a very helpful tool to copy the element you want to change.

Example:

If you have your bootstrap.css and it contains:

.jumbotron {
  padding: 30px;
  margin-bottom: 30px;
  font-size: 21px;
  font-weight: 200;
  line-height: 2.1428571435;
  color: inherit;
  background-color: #eeeeee;
}

And you just want to override the padding for example you insert this to your bootstrap-custom.css

.jumbotron {
    padding: 30px;
}

and voila, you're done!

This way you dont need to and never ever should touch your original bootstrap.css

JotaBe · Accepted Answer · 2013-12-12 15:31:55Z

1

You can customize the bootstrap file more easily if you use the source bootstrap.less (which can be downloaded here, using the Download source code link)

Using LESS, you can nest classes, so that you can apply changes to all the afected classes more easily. And you can make a lot of extra customizations very easily.

If you add the Web Essentials extension to your Visual Studio, this file will be updated whenever you edit it.

The rest of the solution can't be better done in a better way that you're doing it.

answered Dec 12, 2013 at 15:31

JotaBe

39.3k9 gold badges102 silver badges121 bronze badges

Collectives™ on Stack Overflow

Override equal bootstrap classes to use bootstrap css?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related