Bootstrap 4 white buttons and input groups with button addons

John Avis by | June 29, 2018 | Bootstrap

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).

Bootstrap 4 white buttons and input groups with bu

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.

Related Posts

ASP.NET Web Forms Bootstrap

More on Bootstrap 4 modals in ASP.NET Web Forms applications using UpdatePanels

by John Avis | April 9, 2019

In this, my third post on this topic, I go over the methods I am using now and the problems I have encountered and overcome.


Bootstrap

Sample Bootstrap 4 template for a search orientated two row navbar

by John Avis | January 16, 2019

This sample lends itself to an ecommerce website.


Bootstrap

Free Bootstrap 4 Template with Side Navigation

by John Avis | December 20, 2018

I recently needed a simple Bootstrap 4 template with side-navigation so came up with the following template.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP Youtube

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

Subscribe

Get the latest posts delivered to your inbox.