By John Avis · June 29, 2018
Bootstrap 4.x doesn't give you white buttons by default, but sometimes white buttons look better, particularly for something like a search box using an input group with button addon placed on a navbar.
Bootstrap 4.x doesn't give you white buttons by default, but sometimes white buttons look better, particularly for something like a search box using an input group with button addon placed on a navbar.
The outline classes for buttons almost accomplish this but there are some differences in border colours so they don't look quite right.
You can accomplish the perfect style with a new css class which I've called `btn-white` in my example:
.btn-white { background-color: #fff; border-color: #ced4da; color: #212529; }
And sometimes input groups with button addons look even better if the border between the text box and the button is removed. There's a few CSS overrides that can achieve this look simply:
.input-group > .input-group-append > .btn-white { border-left: solid 1px #fff; } .input-group > .input-group-prepend > .btn-white { border-right: solid 1px #fff; }
Here's the final product, with borders (top) and without (bottom).
As a side note, if you are looking for a way to show a magnifying glass without a custom font or image, you can use HTML entity `⌕`. Don't forget to provide a fallback for accessibility.
© Copyright 2017-2025 John Avis. All rights reserved
This website is not affiliated with or endorsed by Bootstrap or its creators.