Bootstrap css

[guilbep]

It cool be nice to have the boostrap css directly on your page.. Also It was not working really great with my version of bootstrap 3.. so I'm using this for now: Btw, your module is cool 👍

"""
.bootstrapCustom .tags {
display: block;
width: 100%;
font-size: 14px;
line-height: 1.428571429;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.bootstrapCustom .tags.focused {
border-color: #66afe9;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
}

.bootstrapCustom .tags .tag-item {
background: #428bca;
border: 1px solid #357ebd;
border-radius: 4px;
color: #fff;
}

.bootstrapCustom .tags .tag-item.selected {
background: #d9534f;
border: 1px solid #d43f3a;
border-radius: 4px;
color: #fff;
}

.bootstrapCustom .tags .tag-item button {
background: transparent;
color: #000;
opacity: .4;
}

.bootstrapCustom .autocomplete {
border-radius: 4px;
}

.bootstrapCustom .autocomplete .tag-item.selected {
color: #262626;
background-color: #e9e9e9;
}

.bootstrapCustom *, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.bootstrapCustom {
position: relative;
}

.bootstrapCustom:active {
outline: none;
}
"""

[mbenford]

Thanks for sharing your code, @guilbep! 👍

I've been thinking about providing a separate stylesheet that makes the directive work along with Bootstrap. I'll take a closer look at your classes and see if I can use them.

Kind regards.

[srininara]

For me, I was not getting the curved edges on the input box. So I had to tweak .tags a little more. See below:
.bootstrap .tags {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-moz-appearance: none; // added this
-webkit-appearance: none; // added this
}