CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Mike
Mike

Reputation: 1327

Remove Bootstrap Styling of HTML Character

How might I revert the styling back to the default to undo Bootstrap's work?

w/ Bootstrap:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

&#10004; 

<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap.  The green checkmark is not the default.  I don't know how to modify this HTML character so it shows with browser default styling.</div>

Default (Desired):

.small.text-muted {
 color: #444;
 font-size: .85rem;
}
&#10004; 

<div class="small text-muted">
This is how I want the checkmark to appear, but still including Boostrap on the page.</div>

Upvotes: 4

Views: 3319

Answers (1)

davecar21
davecar21

Reputation: 2674

The reason because the "✔" check has style of green is caused of styled by the browser based on the font rule.

To be able to revert the styling back to the default style of check mark and undo the Bootstrap's CSS. You need to override the font-family property in the body and remove the "Segoe UI Emoji" font.

Note that you need to add !important to override the style.

Please see the code below

body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Symbol","Noto Color Emoji"!important
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

&#10004; 

<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap.  The green checkmark is not the default.  I don't know how to modify this HTML character so it shows with browser default styling.</div>

or In order to avoid using !important ( as Jon P mentioned) you can create a style tag after the inclusion of your bootstrap css file so that it will override the style.

Note: Bootstrap css file should be declared first then declare the style to override next.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
  body{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Symbol","Noto Color Emoji"
  }
</style>


&#10004; 

<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap.  The green checkmark is not the default.  I don't know how to modify this HTML character so it shows with browser default styling.</div>

Hope this helps.

Upvotes: 4

Related Questions