I have a navigation bar that has two glyphicons from bootstrap the envelope and phone I want my phone icon to disappear when screen reaches <768px so I used the bootstrap class .hidden-xs but it doesn't work, any help? My code is
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-phone"; class="hidden-xs"></span>
That's not how you assign multiple classes to an element. There should only ever be one class="" attribute...
<span class="glyphicon glyphicon-phone hidden-xs"></span>
Separate the individual classes with a space.
Related
So, I am using Angular and started using FontAwsome. I want to put the text inline, not in 3 lines like in the image above.
The above text is "4 BANJA LUKA".
The other solution would be to make the margins between the lines smaller, so it can fit the icon without making the icon too large (for example 4x or 5x).
Does anybody know the solution?
<span class="fa-stack"> <i class="fas fa-comment-alt fa-3x" style="color:yellow;"></i> <i class="fa-stack-1x" style="font-size:10px;">4 BANJA LUKA</i> </span>
One Way
you are want below manner to add font awesome.
https://www.npmjs.com/package/#fortawesome/angular-fontawesome
This markup is able to be read by JAWS arrow navigation in IE11, however in Microsoft Edge it only allows it to be fully read via tab navigation. Does anyone have any idea why Edge refuses to read this list item? We have other list items that are similar to this that are read just fine, but this one in particular doesn't seem to be available to be read via JAWS arrow navigation.
<li id="some-id">
<a href="/destination">
<span class="submenu"></span>
<span class="label"> Destination </span>
<span class="count">
<span class="value" data-info=0></span>
</span>
</a>
</li>
I've tried setting data-info=0 with and without quotes. I'm stumped.
in my navbar i have Event drop down menu(see print screen). so if i hover mouse on it, dropdown menu will appear. with help of dropdown-toggle disabled if i click on Event link i will go to events page. but i want to remove this disabled attribute when screen width less then 768px. i know, i can do it with js, but is there way to do it only with bootstrap? in code it looks like this
<a class="dropdown-toggle disabled" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
<span class="caret"></span></a>
so when screen width less then 768px i want to remove disabled attribute
Only pure-bootstrap, no-JS solution I can think of is to duplicate the element in the code, with the disabled version having class hidden-xs and the non-disabled version having class visible-xs-inline-block (or visible-xs-block, maybe? not sure which display property you want).
<a class="dropdown-toggle disabled hidden-xs" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
<span class="caret"></span></a>
<a class="dropdown-toggle visible-xs-inline-block" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
<span class="caret"></span></a>
You can use the hidden tags to hide on certain screen sizes: Visibility Breakpoints
So for <768 you would add the classes .hidden-xs and .hidden-sm
I want to use this bootstrap notification menu
http://www.bootply.com/oasBuRC8Kz#
but need to include the number of notifications to the upper right of the glyphicon. I read through the documentation for glyphicon. I didn't see that option. I want something similar to the option that linkein has with their menu options. Thanks,
You can see the documentation of glyphicon in :
http://getbootstrap.com/components/
And if you need the number in notifications go to badges:
http://getbootstrap.com/components/#badges
Just combine both to get the result:
https://jsfiddle.net/0rr2s5t5/
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span class="badge">4</span>
</button>
I've been given an assignment to recreate a form from a given image. I'm using bootstrap 3, but can't recreate the following images. At the moment I'm using a label with a rounded radius but it doesn't look the same. Can someone point out the right component I should be using?
You could use fontawesomes stacked icons concept. But this would make the icon bigger that yours. Otherwise, as you pointed out by your self, you could use a badge or label and restyle it the way you need it, by modifying the border-radius or anything else, which doesn't fit your needs...
<!-- just some example code -->
Deposit
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>
Priority Payment? <span class="label label-default" style="border-radius:100%">?</span>
Deporit <span class="badge">+</span>
PS: Note that you would have to override all border-radius-prefixes which is better done in a css class (as always). The inline css here is of course just for the sake of simplicity