0

How do i override predefined bootstrap classes? What are different ways to apply our own CSS on those bootstrap classes?

Lawkush Prasad Vishwakarma
  • 1
  • 1
  • 1
    They are just css classes, override them the same way you would to override any other css class – Huangism Feb 15 '18 at 16:48
  • Just use `!important` on your own CSS. See https://stackoverflow.com/questions/7369216/how-do-you-read-important-in-css – user5664615 Feb 15 '18 at 16:48
  • Hi, it's just CSS so you have to take specificity into account: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – t3__rry Feb 15 '18 at 16:49
  • Do ***not*** follow osdavison's comment, that is not the way to do it. – Martin Feb 15 '18 at 16:53
  • 1. Create your own stylesheet. 2. Use the same names of the classes or id you want to override. You can get the name of the id or class by inspecting it (Right click on the element you want to override and choose Inspect from the option appears). 3. Use !important" declaration as it takes precedence over the normal declaration. Ex. p { color: red !important; } 4. Load your custom stylesheet after the bootstrap stylesheet in your page as browser read css from top to bottom and property found in last for any element will override the above properties. – Prateek Feb 15 '18 at 17:04

2 Answers2

1

Load a second css file into your page after you load bootstrap, which contains rules that are identically named to any classes, ids, or selectors that you want to override.

kate-s2d
  • 36
  • 4
0

Inspect it, find right class, override it or set an id on the element.

Merim
  • 1,283
  • 2
  • 21
  • 36