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.
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 am having trouble deleting the outline of the button in CSS. I have to put the font awesome icon in button, so that it is accessible for screen . But I couldn't delete the outline of the button using outline:none or outline:0 in CSS.
<button class="fa fa-calculator" aria-label="calculator"></button>
I guess by outline you mean border?? Since both have different meaning in CSS it's easy to get confused.
Den use
<button class="fa fa-calculator" style="border:none">
Or use this
.Fa.fa-calculator{Border:none;}
& If you are specifically talking about outline den you ll have to share your CSS file mate!!:)
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.
There are other posts about this but nothing helps/works and the section of removing responsiveness in Bootstrap isn't what I want to do. I want to completely KILL, DISABLE by overwriting the media queries that show the button and mobile vertical menu.
You can view the source on live pages Here
If I remove this button tag:
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Then the button and the vertical menu are gone but so is the horizontal menu. What's the exact media query(s) needed to kill this button and menu but retain the horizontal one.
From Bootstrap documentation:
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
No need to go disabling media queries.
There should be a subsequent div with an id of bs-example-navbar-collapse-1. This div should also have a class collapse. Remove this class.
Assuming you aren't compiling with less or sass.
I'm wondering about screen reader accessibility using Twitter Bootstrap framework and FontAwesome icon fonts.
I'm looking at 2 different icon situations:
1) The icon has helper text that a screen reader will pick up:
<span class="fa fa-pencil"></span> Edit
2) And a standalone icon without any helper text:
<span class="fa fa-pencil"></span>
Ideally, in both situations, a screen reader will announce that the element is an "Edit" button.
Per FontAwesome's site:
Font Awesome won't trip up screen readers, unlike other icon fonts.
I don't see any speech css tags related to FontAwesome or Bootstrap and not really clear to me how a screen reader will react to each of these situations.
I'm also aware of aria-hidden and Bootstrap's .sr-only and there has to be an ideal way to handle both situations.
Edit: added title="Edit to example 2.
What advantage does using aria-label="Edit" have over the standard title="Edit"?
Edit 2: I came across this article that explains pros and cons of different use implementations.
First of all, you should probably use <button> instead of <a href="#">. Empty links can be confusing for screen readers, but a button is a button. In short, links take you places, buttons perform actions. (http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/; https://ux.stackexchange.com/questions/5493/what-are-the-differences-between-buttons-and-links).
I would go with a variation of your first code sample, and utilize Bootstraps .sr-only class. If we update your code with button and add in the class, we have:
<button type="button" class="btn btn-default"><span class="fa fa-pencil"></span> <span class="sr-only">Edit</span></button>
We now have a more semantically correct button element; sighted users see the edit pencil icon; and screen reader users will hear "Edit". Everyone wins.
(Note, the button code is straight from Bootstraps CSS Buttons section.)
From my understanding I think it may be useful to also add in:
aria-hidden="true"
to the span class that holds the pencil icon. This will prevent the screen reader from trying to read this element.
<span class="fa fa-pencil" aria-hidden="true"></span>