bootstrap or jquery may be messing with heading size

[answerquest]

I'm using jquery-ui css and bootstrap css in my application. I'm suspecting one of them might be messing with the h3 heading used in the leaflet-measure control and popups. See screenshot:

Workaround

I'm over-riding with custom CSS on my page, sharing here in case its useful for others:

.leaflet-control-measure-interaction h3 {
	font-size: 1em;
	font-weight: bold;
}

.leaflet-popup-content h3 {
	font-size: 1em;
	font-weight: bold;
}

Environment Info

Browser: ChromiumVersion 70.0.3538.77 (Official Build)
OS: Ubuntu , running on Ubuntu 18.04 (64-bit)
Leaflet version: 1.3.4

My other css files:

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"  rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

The leaflet-measure CSS I'm using:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-measure.css">

From https://www.jsdelivr.com/package/npm/leaflet-measure?path=dist.
And it's put at the end, after the other css's.