Eliminate Bootstrap's styling from HTML characters

  • The default heavy checkmark (✔) appears as "✔"
  • Bootstrap 4.3 seems to be altering the appearance of the check, causing it to display as a thick-green one, which is not what I prefer -- see example below
  • I want to remove Bootstrap's styling, but I am unable to identify the specific CSS rules that are responsible for this. I have tried searching with grep -irn 10004 without success

Is there a way to reset the style back to the default and undo the changes made by Bootstrap?

With 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">

✔ 

<div class="small text-muted">
If your browser shows something different, in Bootstrap this will appear as a green checkmark. The green checkmark is not the default. I am unsure how to change this HTML character back to its browser default style.</div>

Default (Preferred):

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

<div class="small text-muted">
This is how I want the checkmark to look, while still keeping Bootstrap on the page.</div>

csstwitter-bootstrapbootstrap-4

Answer №1

The green color of the "✔" check mark is a result of the browser styling it based on the font rule.

To return the styling back to the default check mark style and undo Bootstrap's CSS, you can override the font-family property in the body and remove the "Segoe UI Emoji" font.

Remember to use !important to ensure your styles take precedence.

Please refer to the code snippet 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">
If your browser shows a different style for this character, it may appear as a green checkmark in Bootstrap. This green checkmark is not the default. I'm unsure how to change the HTML character to display with default browser styling.</div>

Alternatively, instead of using !important, as suggested by Jon P, you can insert a style tag after including your bootstrap css file to override the style.

Note: Declare the Bootstrap css file first before applying your custom styles.

<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">
If your browser displays this character differently, it may show as a green checkmark in Bootstrap. This green checkmark is not the default. I'm unsure how to modify this HTML character to show with default browser styling.</div>

I hope this information is helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loop a background image around a header that is centered in the design

I'm having an issue with creating a header with fixed dimensions and aligning it center on my webpage. I want to have small 1 px images repeat along the remaining width of the header from each edge of the main image. However, when I try to repeat the ...

htmlcss

Hover over the hidden DIV

I have a div containing an image that is overlapping multiple other divs. It looks something like this: <div style='width:100%;height:100%'><img src='someImage.png'></div> <div id='covered'>I'm un ...

jquerycss

Is it possible to utilize LESS to dynamically read the width?

My LESS code looks like this: &.settings-prompt .panel { margin-left: -190px; width: 380px; height: 200px; } &.create-playlist-prompt .panel { margin-left: -165px; width: 330px; height: 180px; } I want the .panel to have ...

cssless

Using the swiper carousel on WordPress results in an unexpected horizontal scrolling issue

Running an Elementor website, I need to incorporate various image carousels within my post content. Initially, I created a template for each carousel using Elementor. However, I have now decided to switch to utilizing a shortcode that leverages Elementor&a ...

javascriptcsswordpressswiper.jselementor

Prevent the SVG mouseclick event with CSS styling

Is it possible to prevent clicking on an SVG element using CSS? .disabled{ pointer-events: none; } After selecting the SVG element with $(".dasvg"), the console confirms the selection: [ <svg width=​"500" height=​"500" class=​"dasvg">​ ...

jquerycsssvg

Resolving issues with JavaScript caused by Polymer updates

I am a novice when it comes to working with Polymer. From what I have gathered, there seems to be compatibility issues with Mozilla and Safari. After researching on StackOverflow, I found that adding addEventListener('WebComponentsReady', funct ...

javascriptjqueryhtmlcsspolymer

Animating a gradient within an SVG element following along an SVG path

I successfully created an SVG egg and animated a path while adding a gradient, but I am facing an issue. The linear gradient goes from top to bottom, but I want the dark color at 0% and the light color at 100%. Essentially, I want the gradient to follow th ...

javascriptcsssvg

Tips for making your inner content as wide as possible

I'm currently working on developing collapsible tables, where an outer and inner table are displayed for every row that is clicked. This is the code I have implemented: HTML: <table class="table outerTbl mb-0"> <thead> <t ...

htmlcssbootstrap-4

Loading images in advance using JavaScript

I have been searching through multiple forums and cannot seem to figure out the issue. The problem I am encountering is related to a website where there are three images with a hover effect. When the page first loads, there is a delay in loading the backgr ...

javascriptphphtmlcss

What methods can I use to customize the appearance of the acceptance label in a contact form created with

I am currently developing a WordPress website using the Contact Form 7 plugin. However, I am facing an issue with styling the "I accept" button and text when clicking on the "registrace" button. I would like to center them and create some proper margin aro ...

htmlcsswordpresscontact-form-7

Creating a span element to replace the list item class in a JavaScript Modal Pop-up

I recently set up a portfolio website that showcases my projects. When you click on a project, a modal window opens with a carousel gallery inside. On my .html page, the projects are organized like this: <li class="Project" data-modal="myModal_1"> ...

javascripthtmlbootstrap-4

When enlarging or extending the container, text starts to spill out

My issue is that the text content is overflowing the designated box or container - any ideas on how to fix this problem? I have attempted to utilize max-width and max-height, but unfortunately, I am unable to get them to function as intended. Here's ...

htmlcss

I am encountering a problem with IE11 where I am unable to enter any text into my

When using Firefox, I can input text in the fields without any issues in the following code. However, this is not the case when using IE11. <li class="gridster-form" aria-labeledby="Gridster Layout Form" alt="Tile Display Input column Input Row ...

javascripthtmlcssinternet-explorerinternet-explorer-11

Steps for building a Bootstrap grid of thumbnails

I need to display an unknown number of thumbs. Below is a sample of the HTML rendered: <div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> &l ...

javascriptcsslayouttwitter-bootstrapweb

The webpage contains duplicate ID attribute value "x" that has been identified

In my Angular 7 project, three components (a, b, c) all use an input element with the same id of "x". However, component b has 4 input elements all using the id "x" as well. This poses Accessibility Issues as ids must be unique. The test cases utilize &apo ...

javascripthtmlcssaccessibilityangular7

Utilize a selector to target and retrieve the content of the nested element

How can we target the deepest inner child using CSS selectors? Take a look at the example below: <div class='d1 view'> <div class='d2 view'> <div class='d3 view'></div> </div> ...

csscss-selectors

How to align Vimeo embed to the left side

Is there a way to align a Vimeo iFrame to the left instead of it automatically centering itself? I want more control over its alignment within my flexbox container. I've created a Flexbox container named .example-div with two internal flex containers ...

htmlcssalignmentvimeovimeo-player

Creating a background color without using the <canvas id> element can be achieved by utilizing CSS properties such as

As a novice in the world of HTML and CSS, I find myself working on creating my website using HTML. Upon inspecting my site, I notice that the default background color is white. Despite trying to change it by using #canvas { background-color: black; } in ...

htmlcssbackground-color

Switching Out Bootstrap Dropdown with Dropup (Varying functionality on two almost identical implementations)

In the midst of my project on Github Pages, I encountered an interesting issue involving replacing a bootstrap .dropdown with .dropup when the div's overflow-y: scroll causes the dropdown menu to be cut off or overflow. The functionality can be viewed ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Create a sleek and innovative tree user interface in a single line with the power of Angular and fxF

I created a tree with parent and child nodes, but I'm facing an issue where the positions of the checkboxes are not aligned in a straight line. Here is my code snippet: <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle> ...

htmlcssangular