How do I use the bootstrap active style

Question

0.00/5 (No votes)

See more:

in my navigation, the application indicates the current page when i do this

HTML

<ul class="nav nav-tabs">
                <li class="colour" data-toggle="tab">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
            </ul>

but doesn't navigate to that page

What I have tried:

HTML

<ul class="nav nav-tabs">
                <li class="colour" data-toggle="tab">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
            </ul>

Posted 1-Apr-16 21:42pm

EasyHero

Updated 4-Apr-16 21:25pm

Add a Solution

4 solutions

Solution 1

Hell, try this code

HTML

<ul class="nav nav-tabs">
                <li class="colour active" data-toggle="tab">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
            </ul>

Posted 2-Apr-16 8:00am

Arvind Zamakia

Updated 2-Apr-16 8:01am

v2

Comments

EasyHero 2-Apr-16 14:56pm

still can't navigate to the various pages bt if i remove the data-toggle attribute, i would be able to

Arvind Zamakia 2-Apr-16 15:08pm

check this url

http://www.bootply.com/92808

EasyHero 2-Apr-16 15:28pm

same thing, dunno y its like this in my app

Arvind Zamakia 2-Apr-16 15:38pm

so can you check import javascript and CSS path are correct

EasyHero 4-Apr-16 7:15am

the styling for active is working, what's not working is the navigation to the page (which is to the function that calls the view) but once i remove the data-toggle attribute, the navigation works and css active doesn't

Arvind Zamakia 4-Apr-16 9:30am

check bellow example

Solution 2

Check this

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>

Posted 4-Apr-16 3:29am

Arvind Zamakia

Comments

EasyHero 5-Apr-16 3:17am

this is exactly what i'm trying to achieve. i have bootstrap.css, bootstrap.min.css, bootstrap.js, bootstrap.min.js, jquery-2.2.1.js and jquery-2.2.1.min.js referenced, so i dunno why it isn't working.

EasyHero 5-Apr-16 3:26am

this is exactly what i'm trying to achieve, i have bootstrap.css, bootstrap.min.css, jquery-2.2.1.js, jquery-2.2.1.min.js, bootstrap.js, bootstrap.min.js referenced. i dunno why it isn't working.

here's my layout page
<pre lang="c#">
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
</head>
<body class="body-min">
<div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 navoffset navbar-fixed-top">
<ul class="nav nav-tabs">
<li class="colour active">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
</ul>
</div>

@RenderBody()

<div class="footertag-min"><p>© @DateTime.Now.Year - NSMS</p></div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
</body>
</html>

</pre>

and here's my bundle class

<pre lang="c#">
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-*", "~/Scripts/Ministries.js", "~/Scripts/schladmin1.js", "~/Scripts/jquery-{version}.js", "~/Scripts/jquery.unobtrusive-ajax.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js", "~/Scripts/angular-*"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js", "~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css"));
}
}
</pre>

Solution 4

this is exactly what i'm trying to achieve, i have bootstrap.css, bootstrap.min.css, jquery-2.2.1.js, jquery-2.2.1.min.js, bootstrap.js, bootstrap.min.js referenced. i dunno why it isn't working.

here's my layout page

C#

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
</head>
<body class="body-min">
    <div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 navoffset navbar-fixed-top">
            <ul class="nav nav-tabs">
                <li class="colour active">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
                <li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
            </ul>
        </div>

        @RenderBody()

        <div class="footertag-min"><p>© @DateTime.Now.Year - NSMS</p></div>
    </div>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
</body>
</html>

and here's my bundle class

C#

public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-*", "~/Scripts/Ministries.js", "~/Scripts/schladmin1.js", "~/Scripts/jquery-{version}.js", "~/Scripts/jquery.unobtrusive-ajax.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js", "~/Scripts/angular-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js", "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css"));
        }
    }

Posted 4-Apr-16 21:25pm

EasyHero

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2016-04-04T03:45:00

By adding data-toggle="tab" to your list items, you've told Bootstrap that the items should switch between tabs already loaded in the current page. It will prevent the browser from navigating to the URL specified by the nested links.

Remove data-toggle="tab", and your links will work.

HTML

<ul class="nav nav-tabs">
    <li class="colour active">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
    <li class="colour">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
    <li class="colour">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
    <li class="colour">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
    <li class="colour">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
    <li class="colour">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
</ul>

How do I use the bootstrap active style

4 solutions

Solution 3

Solution 1

Solution 2

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us