A simple development utility for displaying the current Bootstrap class in the browser. Compatible from v3.0.0.
Install it as a local dependency:
$ npm i --save-dev bootstrap-size-display
$ yarn add -D bootstrap-size-displayOr use the unpkg cdn:
<script src="https://unpkg.com/bootstrap-size-display/dist/bsd.min.js"></script>Call bsd to add display on page load:
...
<script src="https://unpkg.com/bootstrap-size-display/dist/bsd.min.js"></script>
</head>
<body>
...
<script>
bsd()
</script>
...Importing the module is only necessary when used as a local dependency.
// CommonJS
var bsd = require('bootstrap-size-display');
// ES6 modules
import bsd from 'bootstrap-size-display';
bsd();Default styles are:
#bootstrap-size-display {
position: fixed;
font-size: 2rem;
z-index: 1000000;
bottom: .5rem;
right: .5rem;
}To override default styles there are two options:
- Initiate with a javascript object to set inline style:
bsd({
fontSize: '20px',
top: '5px',
left: '10px',
color: 'purple';
});- Override styling in custom
css(selector#bootstrap-size-display) using the.overrideclass:
#bootstrap-size-display.override {
fontSize: 20px;
top: 5px;
left: 10px;
color: purple;
}NOTE: Javascript initiation takes precedence over css rules.