(Boostrap3 + AdminLte2) - Navigation Tabs and Right Buttons - css

Question

I'm trying to put some buttons at the right area of the tab panels header:
I don't know how to to that with boostrap...
This is the code for the tabs:
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#header" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-info fa-stack-1x text-primary"></i>
</span> Inforazioni Principali
</a>
</li>
<li>
<a href="#shipping" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-truck fa-stack-1x text-primary"></i>
</span> Spedizioni
</a>
</li>
<li>
<a href="#payment" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-eur fa-stack-1x text-primary"></i>
</span> Pagamenti
</a>
</li>
</ul>
<div class="tab-content" style="min-height: 758px">
<div class="tab-pane active" id="header"> //FIRST PANEL HERE
......
What is the correct method to add two buttons at the right site of the panel labels?
I want to make the buttons aligned with the panel labels but I don't know how to do that...
Thanks

Answer 1

Add two additional li tags in your ul named nav-tabs in your nav bar with a class named button (to prevent other items from being affected)
and style as follows:
.button{
float:right !important;
margin-right:5px;
margin-left:5px;
padding:5px;
border:solid red;
}
Snippet below
.button{
float:right !important;
margin-right:5px;
margin-left:5px;
padding:5px;
border:solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs tb">
<li class="active">
<a href="#header" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-info fa-stack-1x text-primary"></i>
</span> Inforazioni Principali
</a>
</li>
<li>
<a href="#shipping" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-truck fa-stack-1x text-primary"></i>
</span> Spedizioni
</a>
</li>
<li>
<a href="#payment" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-eur fa-stack-1x text-primary"></i>
</span> Pagamenti
</a>
</li>
<li class="button">
BUTTON1
</li>
<li class="button">
BUTTON2
</li>
</ul>
<div class="tab-content" style="min-height: 758px">
<div class="tab-pane active" id="header"> //FIRST PANEL HERE