CODEWITHSUNDEEP
csstwitter-bootstrap
user7397787
user7397787

Reputation: 1470

Add multiple tabs with in one nav-tab

I am new to css.I am trying add multiple tabs with in only one nav-tab without line breaking. When I add tabs, all tabs should be displayed in only one line.Should not come in next line.how to do it?

<ul class="nav nav-tabs col-xs-12 userEditNav">
                <li class="col-xs-2 active"><a data-toggle="tab" onclick="personalDetailsLoad()" href="#personalDetails"><span><i class="fa fa-user fa-2x" aria-hidden="true"></i></span><span class="tabName">Personal Details</span></a></li>
                <li class="col-xs-2"><a data-toggle="tab" onclick="educationalDetailsLoad('educationalbackground')" href="#educationDetails"><span><i class="fa fa-book fa-2x" aria-hidden="true"></i></span><span class="tabName">Education Details</span></a></li>
                <li class="col-xs-2"><a data-toggle="tab" onclick="experienceDetailsLoad('priorExperience')" href="#experienceDetails"><span><i class="fa fa-laptop fa-2x" aria-hidden="true"></i></span><span class="tabName">Experience Details</span></a></li>
                <li class="col-xs-2"><a data-toggle="tab" onclick="familyDetailsLoad('familyDetails')" href="#familyDetails"><span><i class="fa fa-users fa-2x" aria-hidden="true"></i></span><span class="tabName">Family Details</span></a></li>
                <li class="col-xs-2"><a data-toggle="tab" onclick="documentsLoad()" href="#documents"><span><i class="fa fa-file fa-2x" aria-hidden="true"></i></span><span class="tabName">Documents List</span></a></li>
                <li class="col-xs-2"><a data-toggle="tab" onclick="" href=""><span><i class="fa fa-home fa-2x" aria-hidden="true"></i></span><span class="tabName">Communication Details</span></a></li>
                 <li class="col-xs-2"><a data-toggle="tab" onclick="getOldPassword()" href="#changePassword"><span><i class="fa fa-key fa-2x" aria-hidden="true"></i></span><span class="tabName">Change Password</span></a></li>
            </ul>

https://jsfiddle.net/d15r8szq/

Upvotes: 1

Views: 93

Answers (1)

Hash
Hash

Reputation: 8020

Try This.

.nav-tabs {
  display: inline-flex;
}

.nav-tabs li {
  margin-right: 10px;
  list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs col-xs-12 userEditNav">
  <li><a data-toggle="tab" onclick="personalDetailsLoad()" href="#personalDetails"><span><i class="fa fa-user fa-2x" aria-hidden="true"></i></span><span class="tabName">Personal Details</span></a></li>
  <li><a data-toggle="tab" onclick="educationalDetailsLoad('educationalbackground')" href="#educationDetails"><span><i class="fa fa-book fa-2x" aria-hidden="true"></i></span><span class="tabName">Education Details</span></a></li>
  <li><a data-toggle="tab" onclick="experienceDetailsLoad('priorExperience')" href="#experienceDetails"><span><i class="fa fa-laptop fa-2x" aria-hidden="true"></i></span><span class="tabName">Experience Details</span></a></li>
  <li><a data-toggle="tab" onclick="familyDetailsLoad('familyDetails')" href="#familyDetails"><span><i class="fa fa-users fa-2x" aria-hidden="true"></i></span><span class="tabName">Family Details</span></a></li>
  <li><a data-toggle="tab" onclick="documentsLoad()" href="#documents"><span><i class="fa fa-file fa-2x" aria-hidden="true"></i></span><span class="tabName">Documents List</span></a></li>
  <li><a data-toggle="tab" onclick="" href=""><span><i class="fa fa-home fa-2x" aria-hidden="true"></i></span><span class="tabName">Communication Details</span></a></li>
  <li><a data-toggle="tab" onclick="getOldPassword()" href="#changePassword"><span><i class="fa fa-key fa-2x" aria-hidden="true"></i></span><span class="tabName">Change Password</span></a></li>
</ul>

Upvotes: 2

Related Questions