0

I am using Bootstrap 5 in an ASP.NET Core 6 MVC app. I have added these references in my _layout.cshtml:

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>   

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

I need to make horizontal tabs in my child page i.e index.cshtml. I am using this markup:

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
    <li><a href="#javatab" role="tab" data-toggle="tab">Java</a></li>
    <li><a href="#csharptab" role="tab" data-toggle="tab">C#</a></li>
    <li><a href="#mysqltab" role="tab" data-toggle="tab">MySQL</a></li>
</ul>    

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="hometab">home tab</div>
        <div class="tab-pane" id="javatab">Java tab </div>          
        <div class="tab-pane" id="csharptab">C# tab</div>
        <div class="tab-pane" id="mysqltab">MySQL tab</div>    
    </div>
</div>

But I get vertical tabs in the center of the page instead of horizontal tabs at the top of the page. Am I missing anything here?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Dnyati
  • 135
  • 1
  • 11
  • Your element syntax structure issue, try follow the correct syntax in the [documentation](https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behavior) – Zeikman Feb 13 '23 at 06:56

0 Answers0