Recently due to the desire to have a mobile first website and as well a website that will be responsive on all mobile devices including some proxy browsers such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk I have to make lots of amendments to my website and as such that prompted me to add this to our lesson on bootstrap.

This is to let us all understand that even though bootstrap has proven to be the first front end frame work for building reaponsive web sites you still have to be able to go through some work arounds in order to achieve the responsiveness that will not break your work in some browser.

BROWSERS SUPPORTED BY BOOTSTRAP

Bootstrap has clearly stated on their documentation the kinds and versions of browsers that they support. This is because as things keep changing more intuitive UI keep evolving but some old and browsers has strongly failed to adapt to this modern designs. (Such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk)

However if you are certain that all your users are using the modern browser such as for

WINDOWS:

1. Internet Explorer 10-11 / Microsoft Edge.
2. And majorly all browsewrs that run on windows

MAC

1. All major browsers running on Mac

ANDROID: When it comes to mobile browsers , this is where you will encounter some limitations. This is because some mobile devices majorly android have many types of browsers. Some trying to hide user identity, some trying to make the use of website faster by downloading only the html version of the website and serving the users the plain html notr minding the styles and javascript needed to make the page look good. While so e are just old browsers without proper maintaince.

All these and many more are the reason while bootstrap developers have fully stated intheir documentation that this lates version as of now which is version is not supporting all those inferior browsers. So as a developer you should be able to handle some workaround when you are developing with bootstrap.

The following are the list of android browsers supported by bootstrap 4 on mobile devices

1. Chrome
2. Firefox 
3. Safari

All the latest version of the android browsers mentioned above are fully supported by bootstrap 4. That is bootstrap version 4.

Any other browser not mentioned may have some glitches when using it to browse websites built with bootstrap 4.

BOOTSTRAP BROWSER WORK AROUND.

The fact that bootstrap doesn’t provide support yet for some of the known bug doesn’t make it ever less important to developers. It is still the best frontend frame work for building responsive websites.

In order to maintain this bootstrap documentation have provided a lot of possible work around to some known bugs and as well stiil working to kee maintain the ones not yet resolved.

At some extent they even encourage those who wont be able to resolve most of the facing challengies with inferio mobile browsers to stake with bootstrap 3 which has been fulled developed withputh any further addition yet still under support for any occurrence of bugs.

So to be able to resolve some of the  ugs the following are the quick steps to take.

1. Stick to bootstrap 3.
2. Be able to participate in finding solution if at any point you come accros any bugs.
3. Report your bug to their github repositoey and follow up with the solutions they will provide.
4. Make research to see if the bug is already solved.]
5. Ask questions on stackoverflow .

INTERNET EXPLORER A WELL KNOWN BROWSER TO DEVELOPERS

As a window user I barely know about internet explorer unlike the case with chrome on mobile browser.

Every window machine come pre loaded with internet explorer and those of us who rock windows 7 and 8 before upgradibg to windows 10 will certainly tell you that we never agree to make ie our default browser. I even wonder if the develoipers using it on windows before windows 10 will use it as their default browser. Anyway if you are using it no problem.

It is well know that google have taken over android device majorly every android user will know about chrome just like me.

Now back to business of our code..

Internet explore is mainly used to determine the browser support for our code at some certain point. This is the reason this section is here to discuss about bootstrap 4 and internet explorer support.

Internet Explorer 10+ is supported; IE9 and down is not. Even if we consider the recent upgrade to modern web develooment in CSS3 properties and HTML5. We will surely see that some properties and elements are not fully supported in IE10, or require prefixed properties for full functionality.

Now I’m even beginig to wonder that the reason is because IE9 and below senior our present html which we are rocking in our different different studio.

Notwithstanding in the world of programming there is always a workaround to achieve what othesr have done even when it seem impossible. Though in this aspect it seems impossible to make our old IE9 and below to do what its new versions are doing.

But the following might help a bit

1. Prefixed CSS properties is needed for full functionality.
2. The use of bootstrap will help extend support to IE8, that is IE>=8.
3. For some new html tags, however you may need to update your browser to IE10 and enjopy those awesome features and even more new features in general IOT.

BOOTSTRAP COMPONENTS.

Bootstrap have lots of components that depend on JavaScript to function. Since some of the mobile devices doesn’t have full es6support such especially the proxy browsers which includes opera mini and the likes. We will examine some of the bootstrap components that have known issues when it comes to mobile maily android devices. This article will be updated regulkarly so you can bookmsrk this website and check often to ensure that you are not running perpendincular to other users of bootstrap especially in the cxase of bootstrap 4.

1. MODALS AND DROPDOWNS ON MOBILE

Overflow and scrolling

Support for overflow: hidden; on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices’ browsers, the <body> content will begin to scroll. This is a known bug already and sure enough solution will be provided for it.

2. NAVBAR DROPDOWNS

The .dropdown-backdrop element isn’t used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS). This seems as a minor bug because it it already have a work around which means you shold not be bothered much about this one.

3. ANDROID STOCK BROWSER

This has to do with some of the recent android phones starting from android 4.1. Some of these android phones came pre loaded with a browser that is not up to chrome standard. Those of us who changes phone often will understand. Some of the phone will have chrome browser while so e will have one kind of browser that you will make you not feel comfortable when browsing. However this browsers due to its inferiority also have effect in displaying the necessary modern ui that today web framework have to offer.

However this is a known bug to bootstrap and possibly the solution should tbe out any moment. But currently if you are using such phones you should look for a new age browser in google play store and install. This option seems as the only work around and its fast out of the box for a user to achieve.

But as a developer the means of communicating to your user still replies on you or you can try some work around to see things eoprk the way you want while you keep enjoying bootstrap 4 framework.

Select menu

The select html tag is a very important html element just as other html elements in a web page. however this element have provent to be having some known glitch when a users browses a website built wit bootstrap 4.

The <select> elements, will not display properly on Android stock browsers. To hack down this bug use the code snippet on your webpage that has a select element or elements. to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser.

<script>

$(function () {

  var nua = navigator.userAgent

  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)

  if (isAndroid) {

    $('select.form-control').removeClass('form-control').css('width', '100%')

  }

})

</script>

In this tutorial you have learnt how to bugs that might occure when ypu afre using bootstrap and how you can maneuver and achieve your desire.

Please use a second to click on the love button to show to show that you like what you have read. If you have any  question or comment regarding this post feel free to drop it below and we will reply you as soon as possible