I'm attempting to create a button with Bootstrap and Font Awesome, the catch is I want to have descriptive text below the stacked icon itself. All of the examples are left and right is anyone putting text below?
I've begun playing with it at url below, but any jump start suggestions are appreciated.
http://www.bootply.com/86861
Didn't really any solution within the BS, Font awesome approach, so I went ahead and wrapped several parts with divs and did the styling that way.
<div class="ecGlobalNavStudentPanelBtnWrapper">
<div class="ecGlobalNavStudentPanelBtn"> <span class="icon-stack floatButton"> <i class="icon-check-empty icon-stack-base"></i> <i class="icon-archive"></i> </span> </div>
<div class="ecGlobalNavStudentPanelBtnTxt hidden-xs">
<p>library</p>
</div>
</div>
what happens if you try <i class="icon-book">book</i> ?
Related
EXTREMELY GREEN CODER
I have some q-cards with 2 q-card-sections. One for text and the other for an image. I want the text section to remain a fixed size but the text length is not fixed and will overflow/wrap and increase the section height. I have tried to truncate the text and display the full text.value with a tooltip but could not find success with that.
I might mention that I'm using the grid system for this site, which is still a concept I am struggling with. I have tried setting the section as a defined row(3) but it didn't seem to have much effect.
Here is what I have done so far:
<div class="row">
<q-card v-for="stuffs" class="col-3">
<q-card-section class="text-center">
<div class="col">
<a>
<b class="fontsize-16 text-capitalize text-weight-bolder">Text I want to shrink</b>
</a>
</div>
</q-card-section>
</div>
I have been using the bootstrap datetimepicker quite frequently in my project, but for some reason inside a bootstrap panel, the formatting does not work, and displays as a calendar. I have been trying to fix this for almost a day now, and am still really confused
My code is as follows....
<div data-input="{{ key }}" class="panel-heading"><h3 class="panel-title">{{key}}<a style="padding-left: 6px;">
<span class="panel-time-picker"><input hidden type="text" value="" name="{{ key }}"><i class="icon-clock"></i></span></a></h3>
<div class="actions pull-right">
<a><i class="fa fa-trash delete-panel-btn"></i></a>
<a data-toggle="collapse" data-parent="#accordion" class="fa fa-chevron-down"></a>
</div>
</div>
$(document).ready(function(){
$('.panel-time-picker').datetimepicker({
format: 'LT'
});
$('.panel-time-picker').datepicker();
});
I have the same exact JavaScript code elsewhere in my project, which turns the datepicker into a timepicker. I am wondering if this has something to do with being inside of a bootstrap accordion/panel?
This should display a time/clock, but still shows a month/day calendar? Any help here would be greatly appreciated!
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
How to make an alert take the width of its content?
This div will take all the available space while I would like it to be only as long as my text.
<div class="alert alert-info">
<span class="glyphicon icon-info"></span> My text.
</div>
Try this..
.alert {display:inline-block;}
Demo: http://www.bootply.com/124763
Note, that this approach will change behaviour of all alerts. If you don't need it, you can add class:
.alert-auto {display:inline-block;}
and use it only where you need auto-width alert.
You can also achieve it as below
<div class="alert alert-success" style="display:inline-block;"> Your Content </div>
.alert {display:inline-block;}
put on your .css to make the inline alert fit to your text
I have a simple logout button in my navbar and I would like the word "Logout" and the icon from font-awesome to display inline. I thought <span> was an inline tag, but it is causing a line break. I need the span in order to hide the extra text on small screens.
<a href="/logout/" type="button" class="btn btn-default navbar-btn pull-right">
<span class="hidden-xs">Logout</span><i class="fa fa-sign-out fa-lg"></i>
</a>
You can see the problem here: http://bootply.com/94625
try to add:
#media(min-width:768px)
{
.hidden-xs{display:inline !important}
}
the .hidden-xs sets the display of your span to block
It's because you need to download font-awesome and have it in your root directory also point it in your head section. That's because it doesn't show on your live link.
Hope this helps.