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/
Related
I have a weird problem.
If I reference bootstrap css file from local host, this
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-inbox"></span>
is rendered like this
but if I reference https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css
is rendered correctly, like this
This makes no sense. The files are identical. I refreshed the cache as well (Ctrl+F5).
Anyone knows on top of their head what this could be?
How to disable navbar in Twitter Bootstrap 3 to stack toggle button into new line, when the page is accessed via mobile phone?
I always get something like this:
(source: toile-libre.org)
I've tried everything, from adding custom CSS to modifying .less files and further recompiling the whole Bootstrap style (I've been changing #grid-float-breakpoint variable and I even have played with navbar.less), but unfortunately I had no success.
Can somebody help me, please? I'm desperate because I've lost a whole day trying to fix this.
try removing the collapse class from the menu, and deleting the button:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Solved it, I had to add width attribute to the div container which has these two buttons from the right. The div was improperly resizing, hence it was putting the second (toggle) button in the new line.
The .navbar-toggle has property float: right;. Check the HTML-code of your navbar. The toggle button should be placed first, before the other parts of the menu.
I followed all of the instructions for the foundation-icons-sass-rails gem including importing and precompiling the gem's assets. But, for some reason the icons are not showing on my foundation button. I will show you the line of code. What exactly am I missing here?
<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown [radius] zurb-button-custom"><i class="fi-[eye]"></i>Profile</button><br>
The icon for eye is:
<i class="fi-eye"></i>
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
I have a light Twitter Bootstrap menu, but want the button that toggles a drop down menu in phones and tablets to be dark. I've added the following style. It works in Firefox, but the style changes are not displaying in Android. Any idea what I need to do differently to make it display correctly in most if not all browsers?
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" style="color: #000000; background-color: #121212;
background-image: linear-gradient(to bottom, #0d0d0d, #1a1a1a);">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Usage of CSS3 background gradients is different between browsers. To make sure that your code is supported in all browsers, you need to add vendor prefixes. Also, even with vendor prefixes, code for background gradients is different between browsers.
I will recommend ColorZilla, great tool for cross-browser background gradients. There is many examples, and you may edit colors, direction of gradien, even add multiple gradients. Try it.
The easiest way to customize the colors of Twitter Bootstrap elements is using LESS.
You can customize them in the official page, download and do it in the variables.less file or try online tools like Bootswatcher.
This assures you don't have to use all the vendor CSS3 prefixes.