Bootstrap button outline not working

Question

I am pretty new to Bootstrap, and am having a bit of trouble with getting my buttons styled correctly. I want a green(success) colored button, with just an outline as documented on their website here. When I use the code suggested <button type="button" class="btn btn-success-outline">Success</button>, I get a grey button that has no apparent styling which looks like this... Could anybody help me out? Thanks!

Answer 1

I've been having a similar issue. You can just set up a rule in CSS to what it should be OR override the 'btn-success-outline' class.

/*Bootstrap button outline override*/
.btn-outline {
    background-color: transparent;
    color: inherit;
    transition: all .5s;
}

.btn-primary.btn-outline {
    color: #428bca;
}

.btn-success.btn-outline {
    color: #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

If you choose the first option with the above CSS, in your html use:

<button type="button" class="btn btn-success btn-outline">success</button>

Answer 2

Are you sure that bootstrap css files works? Because in that code <button type="button" class="btn btn-success-outline">Success</button> it does not specify anything but btn-success-outline (what you said). You should check if your css files works or the other bootstrap documents. it works for me