I have a cshtml file that takes care of displaying two buttons below each other in the upper right corner of the screen. Bootstrap 3.3.4 is used.
Now I need to add text to the left of the first button and I managed to do so with the below code, but any vertical alignment is non-existent, as this image shows:
Preferably I'd have the invisible line on which "This is the text" as it were stands lowered to the bottom border of the first button. The second option is to have the text vertically centered relative to the first button, that would be fine as well. How can I accomplish this with bootstrap 3.3.4?
This is the code:
<div class="pull-right">
<button class="btn btn-default btn-xs" data-bind="click: $root.logout">
<i class="fa fa-power-off"></i>
<span data-bind="translate: 'button-logout'"></span>
</button>
<a class="btn btn-default btn-xs" href="#Url.Action("Index", "Relations", new {Area = "Administration"})">
<i class="fa fa-cog"></i>
<span data-bind="translate: 'button-administration'"></span>
</a>
</div>
<div class="pull-right">
<span>This is the text </span>
</div>
Thanks!
Related
I am having a problem with font-awesome icons. When you click on the little plus it is fine however if you click on the rest of the button it will not take you to the link.
<div class="jumbotron">
<p>
<button type="button" class="btn btn-default pull-right">
<i class="fa fa-plus" title="Edit"></i> </button>
</p>
http://jsfiddle.net/py7vA/217/
How would I fix this?
Don't put an A tag inside BUTTON. It's wrong. Since you are using Bootstrap you can assign the same btn classes to A too.
<i class="fa fa-plus"></i>
You can do a couple different things one is what Ibrahim mentioned or:
<div class="jumbotron">
<p>
<i class="fa fa-plus btn btn-default pull-right" title="Edit"></i>
</p>
</div>
I need your help for an issue I want to create some button with the same size (no matter of the text) and add the arrow icon on the right corner of the button.
But the arrow is not align with the other button because the number of caracters of the text.
I am using bootstrap here is the code:
<div class="col-md-6">
<div class="item" style="text-align: center">
<a class="btn btn-programs" style="width:230px" href="#">My 1st button with longer text<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span></a>
</div>
</p>
<div class="item" style="text-align: center">
<a class="btn btn-programs" style="width:230px" href="#">My 2nd Button <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span></a>
</div>
</p>
</div>
</div>
use the class
btn-block
<a class="btn btn-programs btn-block" href="#">My 1st button<span class="btn-label btn-block"><i class="glyphicon glyphicon-chevron-right"></i></span></a>
Add following css to your page
.item a span.btn-label
{
float: right;
}
I am having problems a bootstrap button to work. We are making a site that allows people to vote up or down on various items.
The vote-up button works, however the vote-down doesn't. When I hover over the vote-down button it doesn't
Here is the HTML.
<div class="content-left-sidebar-meta">
<div class="post-vote-header">
<a class="btn btn-default post-vote post-vote-up" data-post-id="90" href="http://localhost/wp/tag/top-10-fastest-cars/#vote-up" title="Like">
<i class="fa fa-chevron-up"></i></a>
<div class="vote-count">0</div>
<a class="btn btn-default post-vote post-vote-down" data-post-id="90" href="http://localhost/wp/tag/top-10-fastest-cars/#vote-down" title="Dislike">
<i class="fa fa-chevron-down"></i></a>
</div>
</div>
I'm attempting to create an inline btn-group inside of a column with bootstrap3 classes, but the btn group isn't behaving as expected. Instead of being connected and displayed on the same row, the buttons are being vertically stacked and also appear bigger than they should. Here is a view of what is happening:
btn-group
And the html for this part of the page:
<div class="btn-group">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
Also, no CSS has been applied to the buttons. Any help or suggestions are appreciated, Thanks.
Switch:
<div class="btn-group">
To:
<div class="btn-group-vertical">
Try this:
.btn {
float:left;
}
Using bootstrap v3 the goal is to create a row of fixed width href buttons for navigation. The code, using nothing but bootstrap styled HTML, achieves this in JSFiddle using
.nav_btn
{
width: 82px !important;
margin-right: 5px;
}
<div class="col-md-10">
<div class="btn-toolbar">
<div class="btn-group">
<a href="#" class="btn btn-default nav_btn" disabled>
<span><strong>Portfolio</strong></span>
</a>
<a href="#" class="btn btn-primary nav_btn">
<span><strong>Quote</strong></span>
</a>
<a href="#" class="btn btn-success nav_btn">
<span><strong>BUY</strong></span>
</a>
<a href="#" class="btn btn-success nav_btn">
<span><strong>SELL</strong></span>
</a>
<a href="#" class="btn btn-info nav_btn">
<span><strong>History</strong></span>
</a>
</div>
</div>
</div>
http://jsfiddle.net/SBSgN/12/
The exact code shown, with custom .nav_btn styling as shown, displays the buttons... stacked vertically :( when inserted into HTML for an actual web page. The code is inside a container. No other div specifying a grid size (e.g. col-md-10) appears before the code in question.
What am I missing.