Select2 Multiple Tags Do Not Conform With Bootstrap 4 Badge Styles

[Joyrex]

This is more of a stylistic choice, but the tags that are rendered in Select2 (I think) should conform more to Bootstrap 4's badges (since that is what they most closely resemble).

I've outlined what I did to bring the styles into parity with what Bootstrap 4 offers (the only items I did not do was add the font-size:75% and font-weight: 900 that Bootstrap 4's badges have due to my particular font choice).

Here are the style changes:

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
	color: #fff;
	background: #6c757d;
	/* border: 1px solid #343a40; */
	border-radius: .25rem;
	cursor: default;
	float: left;
	margin: .1875rem;
	padding: .25rem .4rem;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	margin-right: .375rem;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #dae0e5;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	line-height: 1;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: .50rem;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}

[VictorioBerra]

It would be nice to somehow make this optional for users of the library.

[Joyrex]

You could easily have a customizations.css file that is included after the Select2 Bootstrap 4 CSS would accomplish this (that way the default script stays untouched).

If I were thinking pie in the sky features, it would be great if data- attributes could be used to inject classes into the Select2 script for specific tag styles (e.g., the different badge types Bootstrap 4 has).

[vpratfr]

I also agree that the default styles should stick as close to BS4 as possible (and use BS4 variables as defaults in SCSS files).

To make different styles optional, there could be additional SCSS files which could be combined to the main one to create variations and/or addon CSS files.

For the end user, they would then be able to include or not the SCSS addons and/or the corresponding CSS stylesheet.

[milushov]

This one works better with multiple tags https://github.com/ttskch/select2-bootstrap4-theme