I'd like to hide the text part of the link when viewed in mobile (xs and sm) sizes. How can I accomplish this? Does bootstrap 4 offer anything?
HTML
<li>
<i class="fa fa-icon"></i> Text Link
</li>
In mobile, I should only see the (icon). In desktop or tablet mode, I'll see (icon) Text Link
Use this class hidden-sm-down to hide on small devices
<li>
<i class="fa fa-icon"></i> <span class="hidden-sm-down">Text Link</span>
</li>
You can find more about regarding this from here. https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes
My suggestion is using CSS3
/*Your smartphone screen width*/
#media screen and (max-width:400px){
#myText{
display:none;
}
}
<li>
<i class="fa fa-icon"></i><span id="myText">Text Link</span>
</li>
Related
I would like to achieve a mobile menu which is always visible on the bottom of my page. I don't know if there is a specific name for such menus but I've found a page which does exactly this menu:
What is the best way to achieve exactly this for tablet and smaller devices using materialize?
There is something called a Toolbar in Materialize.
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="waves-effect waves-light"><i class="material-icons">insert_chart</i></li>
<li class="waves-effect waves-light"><i class="material-icons">format_quote</i></li>
<li class="waves-effect waves-light"><i class="material-icons">publish</i></li>
<li class="waves-effect waves-light"><i class="material-icons">attach_file</i></li>
</ul>
</div>
But it's not the same what you are looking for. You have to modify this or you need to create your own.
Fab for toolbar:
http://materializecss.com/buttons.html
Have you tried to use CSS, select the whole menu by class or id and set it to position fixed?
#fixedMenu{
position:fixed;
}
You can then play around as the where exactly you want to place it. By using width or margins set to auto then you can make it responsive for different viewports.
I am just pasted Font Awesome into the head of my WP themes header.php
And I know the fonts are working, but in the HTML I think I have made a mistake and I just cannot see what!!
http://goo.gl/Yoit33 - there is row of rounded boxes, 2nd row down, second in from the right.
any help I would be most grateful.
You need to remove the classes .fa and .fa-wheelchair from the a tag as the icon is actually being loaded in through the i tag.
From this:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="fa fa-wheelchair icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>
To This:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>
I'm trying to structure a Bootstrap nav bar such that I can have both left and right aligned content, while working for both desktop & mobile screens. I have a feeling like I'm trying to have my cake and eat it too here, but I would imagine that this should be possible.
Note that in the screenshots below, the hamburger menu icon is just a custom image (e.g., not the default Bootstrap nav bar collapse icon).
This is what I want my mobile view to (roughly) look like:
But what I'm getting is this:
Here is the desktop version, only for comparison:
And finally, here is the code I'm working with:
<div id="navbar" class="navbar navbar-custom navbar-custom-bordered-header">
<div class="navbar-header">
<div class="navbar-brand">
<img class="navbar-menu-button-custom" src="/assets/menu_button.png"/>
</div>
<a class="navbar-brand navbar-custom-brand" href="<%= root_path %>">My App</a>
</div>
<ul class="nav navbar-nav navbar-right" style="margin-right: 15px; width: auto;">
<div class="navbar-brand">
<a id="search" href="#"><span class="glyphicon glyphicon-search" style="color: white;" aria-hidden="true"></span></a>
</div>
</ul>
</div>
I'm just not sure what I need to do to achieve my desired view above. I can see that the problem appears to boil down to navbar-header's width being too large:
But I'm not sure how to enforce a smaller width for navbar-header or just one that hugs navbar-header's content. Any thoughts?
Add this to your css file.
#media (max-width: 768px) {
.navbar-header {
max-width: 250px;
}
}
You may have to change 768 and 250 values according to your bootstrap setting. But most probably this will do.
I have the following structure within a bootstrap document -
<div class="col-lg-6 col-sm-6>
<ul class="stdULGrey st_tabs_ul">
<li class="st_li_first st_li_active">
<a href="#view_1" class="st_tab st_tab_first st_tab_active">
<span class="icoMore icoA"></span>
<span class="tabText">WANT TO KNOW MORE?</span></a>
</li>
<li>
<a href="#view_2" class="st_tab">
<span class="icoWhereTo icoA"></span>
<span class="tabText">WHERE TO FIND US?</span>
</a>
</li>
</ul>
The span element - icoMore contains a background image - which I'd like to respond to the full width of thebootstrap parent - I have tried the following code -
.icoMore{background:url(../img/logos%20and%20icons/Wanttoknow_Icon_Off.png) no-repeat; min-width:100%; min-height:auto; display:block; }
But it displays at zero width and height - can anyone advise a solution?
Add display: block to span. It should be enough.
You'll need to add any character into your <span>, even a space, like:
<span> </span>
Check this fiddle:
http://jsfiddle.net/dimaspante/5j6vt0mk/
I am using bootstrap 3 on a Rails 4 app.
I have a "normal" fixed navbar on the page headers. For the moment, when the viewport decreases (small device), all menu titles disappear and go into the "three bars" icon like here: http://getbootstrap.com/examples/navbar-fixed-top/ (try on a small screen/viewport).
Is it possible with bootstrap 3 to NOT make all menu titles go into this three bar icon, but to replace all texts by very small icons (for example Help would be replaced by a " ? "icon) so that there is enough space for all of them, when the viewport is very small.
Is there something already built-in inside Bootstrap allowing to do that ? or maybe some external libraries that play well with BS3?
thanks
That should not be to hard, and no need for a framework. You can use the responsive utility classes provided by BS3. With those, you can hide the icons on big screen and show the labels, and the opposite when on small screen. Your navbar markup would look something like this:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">
<i class='glyphicon glyphicon-user visible-xs-inline-block'></i>
<span class='hidden-xs'>Link</span>
</a></li>
<li><a href="#">
<i class='glyphicon glyphicon-user visible-xs-inline-block'></i>
<span class='hidden-xs'>Link</span>
</a></li>
</ul>
</div>
</nav>
And a small line of css is required to prevent the li from being displayed as block on small screens. Something like this should do the trick:
.nav>li {
display: inline-block;
}
And an example to demonstrate: http://www.bootply.com/a17IsJ0Pop