31 May 2020

Override Bootstrap Styles (without !important)

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

100 points for IDs 
10 points for classes and pseudo-classes 
1 point for tag selectors and pseudo-elements

<body id="bootstrap-overrides">

/* Example selector defined in Bootstrap */ 

.jumbotron h1
/* 10+1=11 priority scores */
line-height: 1; 
color: inherit; 

/* Your initial take at styling */ 
h1 {
/* 1 priority score, not enough to override Bootstrap jumbotron definition */ 
line-height: 1; 
color: inherit; 

/* New way of prioritization */ 
#bootstrap-overrides h1
/* 100+1=101 priority score, yay! */ 
line-height: 1; 
color: inherit; 
}

No comments:

Post a Comment

Popular Posts