I am building two websites using the same design with Bootstrap
The first one (A) does not have wordpress: http://biomedic.isr.ist.utl.pt
Se second one (B) has wordpress behind it: http://healthnmoney.com/david/LBA
The problem is the dropdown menu in the mobile version (the "hamburguer" dropdown menu). On A it works fine, on B it does not close
<div id="bs-example-navbar-collapse-1"
class="navbar-collapse collapse in"
aria-expanded="false"
style=""> ... </div>
In the A version the aria-expanded, is not set. In the B version the "in" class is not removed when it is supposed to. Also when collapsing, the height should be set to 1px, and it's not.
I really appreciate any help on this.
WP: 4.0.1
Jquery: 1.11
Boots: 3.2.0
Related
Security made me upgrade jQuery from 3.2.1 to 3.6.0 and bootstrap from 3.3.7 to 5.0.1 using NuGet, and to get rid of old hand-installed jQuery/bootstrap files, and now I am having some layout problems that I cannot fix.
Symptom 1
Here I got a visible button "Toggle navigation". Before, this button was invisible. The info I found on css class sr-only said that it should make invisible on a screen reader (reading screen content to a blind computer user), but I don't have a screen reader but a firefox/chrome browser. I would guess this class should show for Screen Reader Only. In any case, this button does nothing so I commented it out.
<nav>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<!-- button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button -->
<a href="/" class="pull-left">
<img src="/Images/company_logo.png" />
</a>
<span id="span_pagetitle" class="pull-left span_pagetitle" runat="server">
Page Title
</span>
</div>
Strange still that the Chrome dev tools, under Elements, Styles, show that sr-only was handled by bootstrap.min.css, but with the new Bootstrap5 by _reboot.scss . The underscore suggests that this is a temp file, and the extension that it has to do with the higher level CSS system SCSS or SASS
In the DevTools, under Network, I still see that bootstrap.min.css was downloaded from the Content folder.
Symptom 2
In the above header code, the logo image and page title showed nicely on the same height in a light grey header bar. But after the upgrade, the layout is gone, ruined. Image and text have lowered, but with different amounts, and there is no light grey header bar as background for the image and text.
Do I need to learn SASS to fix this problem?
Or did something possibly go wrong with installing bootstrap?
To be honest, I had to manually copy the jQuery files from packages to Scripts.
I am now also wondering about jquery-ui.min.js/css and jquery-latest.min.js from a not upgraded version from package mutty-keyboard, as shown by the Network tab of DevTools. Could that cause interference with bootstrap???
Thanks for any hint that may possibly nudge me in the right direction.
Update:
While the answer on this question is actually very useful, I also found out that there is no such thing as an upgrade from Bootstrap 3 to 5. Those are just different toolkits. So this question is in a way obsolete. The real answer should be, don't upgrade. Use Bootstrap 5 on your new project.
The security scan that suggested this upgrade is doing too many upgrade suggestions, perhaps to get you scared and take your wallet out :-)
Actually, many things have changed in the newer version of the bootstrap. First, you don't need to learn SASS for this, this is only gameplay of class names that have changed in the newer versions.
For example, you have highlighted the sr-only class but in the newer version, the name of this class has changed.
Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
The only thing you have to do is go through this documentation and your all problems will be solved.
Also, in the newer version, there is no need for jQuery.
Read all about Bootstrap version migrations in these document - https://getbootstrap.com/docs/5.0/migration/
I've downloaded a ready-made HTML5 website template from w3layouts.com that is under CC3.0 license. Because the used scripts like Bootstrap etc. are all old version I'm updating these and the source code to function. But I'm on a issue that I can't get resolved. I'm new in Bootstrap and it's my first time I'm working with it. I'm tired of coding my own designs. :)
The original/old template is using Bootstrap v3.3.4 and I using now 4.0.0-beta.
As you could see here in the original the "My Services" section is all in shape. But in my updated version the columns wont wrap. I've already tried a lot of things and Googled a lot but found no solution.
Here are the source codes:
HTML: https:// pastebin.com/NJYmqAk2
CSS: https:// pastebin.com/AdYUTtFe
(Sorry I had to modify the pastebin links 'cuz I'm not high reputated atm. :))
It seems that the version of Bootstrap you're using, is not dividing the columns width in %, and also they are not floating left.
In your HTML, there's a big problem with the row wrapped around each column.
<div class="row"> <!-- This wraps the column and defeats its purpose -->
<div class="col-xs-4 wthree_about_right_grid_left">
<div class="hvr-rectangle-in">
<i class="glyphicon glyphicon-pencil"></i>
</div>
</div>
</div>
Start by deleting the row, and then you're going to want to make the colums float left and determine it's width in %.
Like this:
By doing so, you can get it to act like on your template, and ultimately solve your initial problem.
You would benefit far more from using the version of bootstrap that is compatible with your template.
//edited: simplified version now
I am using meteor and want to use a bootstrap grid system in my templates. Unfortunately it just displays the two columns on top of each other as if no bootstrap class was assigned to them at all. I would expect them to be next to each other on the same line
I haven't installed any bootstrap package. (I had but uninstalled it to be sure it is not that) I have only installed other basic standard packages like the facebook login or autoform
Bootstrap itself is working because autoform is styled with it and the alert classes are working in my template for example
There is no other css styling at all in this template yet
The HTML must be well formed as meteor would not render the template otherwise
I tried:
installing the twbs:bootstrap package
installing the mizzao:bootstrap-3 package instead
using more complex bootstrap with container-fluid
which didn't change anything
Bootstrap is installed in the head tag using the code from this link (MaxCDN):
http://getbootstrap.com/getting-started/
this is the entire code for the template
<div class="container">
<div class="row">
<div class="col-md-6">col1</div><div class="col-md-6">col2</div>
</div>
</div>
As I am very new to bootstrap I assume its a very stupid beginners' issue but I just cannot find it
Hey guys I figured it out!
It seems to have to do with the relatively small size of my screen plus that my developer console was opened. When I used col-xs-6 it worked.
Thanks Anyway!
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
<div class="row">
<div class="col-xs-9 col-md-7></div>
<div class="col-xs-3 col-md-5"></div>
</div>
I have used a bootstrap pop over in ng-repeat. Below code snippet for the same
<div class="useBootstrap col-sm-2" data-toggle="popover" data-container="body" data-content="AdditionalContents to be shown" data-trigger="click hover">
{{ row.FileName | limitTo: 15 }}{{row.FileName.length > 15 ? '...' : ''}}
</div>
I have a bootstrap version *!
* Bootstrap v3.3.4 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc. in my application
If I include a lower version of bootstrap - It renders perfectly.The 1st image when including 3.0, 2nd image if i use 3.3, How can i make it work in 3.3 version because I cannot change the version of bootsrap in my application now just for this pop up.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
I see that you are using the Vanilla Bootstrap popovers. I tried using them too, but I never achieved my desired outcome. So, I investigated an alternative, Angular BootstrapUI (otherwise known as BootstrapUI), which solved most of my problems.
This probably isn't the answer you're looking for, but I would suggest trying out the BootstrapUI popovers. I've found the upside to using these popovers makes integrating templates much easier, and they don't rely on extraneous jQuery. The downside is that their style is more difficult to customize. I still haven't figured out how to have popovers with different styles in BootstrapUI. In Vanilla Bootstrap, customizing popover styles is fairly trivial.
I haven't had any problems with Vanilla Bootstrap's JS, but for now you should stick to a version that is most compatible with your app.
I have developed a site using wordpress and bootstrap 3 framework. My issue is when its uses the mobile collapse menu it doesn't display after I click the icon.
Been trying to debug a while now but no luck yet.
Site is question is
http://www.reillyscott.com.au/
thanks in advance
<div class="collapse navbar-collapse navbar-responsive-collapse">
Find this div and remove "collapse" class. Its not needed and its causing the issue.
Edit: Actually that div is not need it at all. You can move its innerHtml out of it and delete it.
It's because your JS is not changing the state of the menu to display block, maintaining the display:none;
The menu is being hidden in the bootstrap.css, line 3045.
You should be toggling the menu when a certain resolution comes, making one display:none and the other display:block.
To implement Bootstrap menus in Wordpress, I recommend you to use WP Bootstrap Nav Walker.
Took me a while to figure out your problem. Instead of going into too much detail, I'll just tell you what to delete, and it will work!
<div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" style="height: auto;">
<!--
The WordPress Menu goes here
-->
<div class="collapse navbar-collapse navbar-responsive-collapse"> **<--- DELETE THIS DIV**
<ul id="main-menu" class="nav navbar-nav navbar-right"></ul>
You already have a navbar-collapse in your first div. You're using it twice and throwing off the JavaScript. Only delete the opening and closing div. Keep your wordpress menu php code there.
Message me if you have further questions.
Cheers,