Bootstrap (twbs:bootstrap)

help
1

If we have installed twbs:bootstap, do we still need to add Bootstrap codes into our html to make it work?

For example, do we still need to add the viewport meta tag

to ?

On my desktop, the ‘mobile screen’ for my web app appears correct.

But when it is viewed on an actual mobile device, the fonts and objects for the web app was too small.

2

Yes, you’re correct that you need to include the viewport meta in your template.

Otherwise you get whakcy issues like you said, even with the package included :slight_smile:

3 
<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
2 Likes
4

Thanks! This works.

How do you make a drop-down menu (when web app is in mobile mode) go away after you click on one of the navigation items? Right now, I have to click on the hamburger icon (https://getbootstrap.com/docs/3.3/components/#navbar-buttons) again…

Using an example from W3…

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

In a mobile setting, how can we automatically collapse the Navbar once we click on Page 3?

5

You can make a function to hide/show the hamburger menu on click.

That whole menu is controlled simply by css. So you can use jquery to $("#menu").click(); to simulate the effect of it pressing.

So create an event, and run that code, your menu will go away :slight_smile:

6

Would you be able to elaborate on how the code might look like if we just want the effect for ‘Page 3’ per the W3 example above?

7

Just put a script on that specific page

<script>
  $("#some_div").click(function(){
    $("#menu").click();
  });
</script>
1 Like