Mobile First Bootstrap

Build Responsive Website Using HTML5, CSS3, JavaScript And Bootstrap 5

Bootstrap has become mobile first since Bootstrap 3. It means 'mobile first' styles can be found throughout the entire library instead of them in separate files. You need to add the viewport meta tag to the <head> element, to ensure proper rendering and touch zooming on mobile devices.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Here,

width property controls the width of the device. Setting it to device-width will make sure that it is rendered across various devices (mobiles, desktops, tablets...) properly.
initial-scale = 1.0 ensures that when loaded, your web page will be rendered at a 1:1 scale and no zooming will be applied out of the box

Add user-scalable = no to the content attribute to disable zooming capabilities on mobile devices as shown below. Users are only able to scroll and not zoom with this change and results in your site feeling a bit more like a native application.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

George John

Updated on 12-Jun-2020 09:48:43

Previous Page Print Page Next Page